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

В этой статье мы рассмотрим искусство создания удобных для печати веб-страниц с помощью CSS.

При создании сайта вы пытаетесь решить некоторые реальные проблемы. Люди не приходят на ваш сайт, чтобы посмотреть на сайт. На сайте может быть интересный контент или важная информация, которая им нужна. Часто нужная им информация копируется в какое-то другое приложение.

Каждый раз, когда у нас есть довольно повторяющиеся селекторы, у которых есть общий родительский элемент, это, вероятно, место, где мы можем использовать псевдоселектор :is().

Многие разработчики, особенно те, кто изучал JavaScript в первую очередь, ненавидят каскад .

Каскадом , если вы с ним не знакомы, является C в CSS (каскадные таблицы стилей). В CSS стили по умолчанию устанавливаются на window и каскадно переходят к дочерним элементам.

При разработке навигации по средним и большим размерам в мобильном Интернете в течение некоторого времени по умолчанию использовались меню гамбургер. Это не обязательно плохо, но для некоторых вариантов использования существует более простая альтернатива.

В последних версиях macOS (Mojave) и Windows 10 пользователи смогли включить темный режим на уровне системы. Это хорошо работает и легко обнаруживается для собственных приложений.

Веб-сайты были странными приложениями, где издатель веб-сайта должен решить, какую цветовую схему должны использовать пользователи. Некоторые сайты предлагают поддержку тем. Чтобы пользователи могли переключаться, им нужно найти конфигурацию и вручную обновить настройки для каждого отдельного веб-сайта.

Возможно ли, чтобы это обнаружение было выполнено автоматически и веб-сайты представляли тему, которая учитывает предпочтения пользователя?

Тот факт, что многим разработчикам кажется, что CSS не так уж и важен, не новость. Вы можете наблюдать это, следя за разговорами в Интернете или разговаривая с друзьями и коллегами.

Тем не менее, в сообществе многое из того, что мы узнаем, происходит от обмена знаниями со сверстниками, и в результате я иногда осознаю, что в CSS есть важные вещи, о которых мне никогда не рассказывали, потому что другие люди никогда не тратили время на более глубокое изучение.

Чтобы попытаться это исправить, я решил провести личное исследование и составить небольшой список концепций, которые, на мой взгляд, интересны и полезны для лучшего понимания и написания CSS.

Мы подобрали для вас коллекцию лучших ресурсов на которые мы наткнулись и которые заслуживают вашего внимания!

В недавнем проекте я наткнулся на изящный способ создания макета сетки, используя CSS Grid и немного javascript. Сначала я думал об использовании чего-то вроде Masonry.js или Isotope, но это было немного излишне. Что хорошего в этом подходе, он очень гибкий и не опирается ни на какие фреймворки! Я постараюсь сделать этот пост коротким и приятным, чтобы вы могли сами приступить к работе и насладиться этим трюком.