От автора: в целом, в веб-разработке есть реальная проблема с честностью и рациональным мышлением. Есть много педантичной чепухи, которая продвигается как хорошая практика, полностью основанная на сфабрикованных «истинах», которые очень далеки от реальности. Одним из таких больших заблуждений является идея о том, что «универсальный селектор» — одиночная звездочка — медленный, сбивающий с толку, трудный для понимания, и я даже видел, ...

От автора: CSS clamp() предоставляет метод для установки числовых значений с минимальным, максимальным и рассчитанным значением между ними. Синтаксис такой, calc([min], [calculated], [max]). Функция полезна в тех случаях, когда вы хотите масштабировать какое-либо значение в зависимости от размера экрана с помощью единицы длины vw. Этот метод полезен, когда ваша цель — создать привлекательный дизайн для экранов разных размеров. Обычный вариант ...

От автора: копаясь в спецификациях w3c, можно выявить множество интересных функций. Хотя некоторые из них еще не поддерживают браузеры, мы, по крайней мере, можем узнать, какие новые функции можно ожидать в ближайшее время. Одна из новых функций — новая функция image(). Она даст нам больше контроля над загрузкой изображений в CSS. Давайте рассмотрим возможности совершенно новой функции изображений. Обрезка изображений ...

От автора: узнайте, как управлять размером элементов, поддерживать правильный интервал и реализовывать гибкую типографику с помощью этих хорошо поддерживаемых функций CSS. Поскольку адаптивный дизайн развивается и становится все более детализированным, сам CSS постоянно развивается и предоставляет авторам больший контроль. Функции min(), max() и clamp(), которые теперь поддерживаются во всех современных браузерах, являются одними из последних инструментов, делающих создание веб-сайтов и ...

От автора: одна из наиболее важных функций веб-сайта, созданного с учетом специальных возможностей — это возможность перемещаться по нему с помощью клавиатуры. Большинство слепых пользователей и многие пользователи с ограниченными двигательными возможностями полагаются на навигацию с помощью клавиатуры, будь то стандартная клавиатура или устройство, имитирующее функционал клавиатуры. Поэтому необходимо обеспечить четкие визуальные индикаторы, выделяющие элемент, который в настоящее время выделен ...

От автора: переменные CSS (также известные как пользовательские свойства) поддерживаются в веб-браузерах почти четыре года. Мне нравится использовать их в зависимости от проекта и ситуации. Они очень полезны и просты в использовании, но часто фронтенд-разработчик может неправильно их использовать или неправильно понимать. Основная цель этой статьи заключается в том, что я хотел создать место, где я мог бы выгрузить всю ...

От автора: бывают случаи, когда желательно иметь шкалу размера шрифта между двумя крайностями в зависимости от ширины экрана. Странно то, что я видел, как люди используют, чтобы достичь этого, например, RFS. Сам RFS представляет собой пример того, как НЕ делать это в эпоху вычислений и сравнений CSS3. Хотя, к сожалению, такие проблемы распространены среди тех, кто использует бессмысленный мусор, такой ...

От автора: в этом руководстве показано, как определять сетки CSS на странице, инспектировать их и устранять проблемы с макетом в панели Элементы Chrome DevTools. Откройте для себя CSS-сетки Когда к HTML-элемент на странице применено display: grid или display: inline-grid, вы можете увидеть значок grid рядом с ним в панели Элементы. Щелкните значок, чтобы переключить отображение наложения сетки на странице. Поверх ...

От автора: давайте посмотрим, как с помощью CSS сделать слой полупрозрачного фона, не затрагивая текст. Допустим, у вас есть изображение, подобное этому крабу, и вы хотите разместить его в пользовательском интерфейсе под текстом. <div class="hero"> <h1>This is a crab</h1> <p>I want an image of a crab behind this text.</p> </div> Но если вы просто поместите изображение позади текста, текст может ...

От автора: многие разработчики используют несколько семейств шрифтов и размеров шрифта, чтобы лучше представить веб-страницу. Например, разработчик может использовать шрифт Bold Comic Sans для заголовков и шрифт Roboto для текста. Однако из-за этого ваш веб-сайт может выглядеть неаккуратным, поскольку многие браузеры не поддерживают все шрифты. Свойство CSS font-size-adjust поможет избежать такой ситуации, сделав размер шрифта автоматически настраиваемым. CSS font-size-adjust принимает ...