Стили, указанные для элемента с псевдоклассом :has(), будут применены, если хотя бы один из относительных селекторов, переданных в качестве аргумента, соответствует хотя бы одному элементу.

С помощью данного псевдокласса можно указать стили для родительского или предшествующего элементов.

MDN Web Docs (Переведя на русский язык).

Так что же такое :has()? Для чего он нужен? Как и где его применять? Какими браузерами поддерживается?
Все это разобрали в понятных примерах.

Псевдокласс :has()

Это псевдоклас CSS стилей, с помощью которого можно изменить родительский селектор содержащий определённый дочерний элемент, следующий за ним. Иначе говоря, он позволяет стилизовать элемент имеющий определенные условия.

Все еще сложно понять, верно? Давайте обратимся к примерам.

Пример использования :has()

Что бы легко разобраться как он работает мы набросали небольшой пример.

Предположим что у нас есть небольшое меню, в котором у одного пункта присутствует изображение.

<nav>
   <a href="#">
      <img src="https://www.freeiconspng.com/uploads/red-circle-icon-16.png" alt="red circle icon">
      Home
   </a>
   <a href="#">Gallery</a>
   <a href="#">Blog</a>
   <a href="#">Contact</a>
</nav>

Имеем к нему следующие стили шрифта, разметки и так далее.

body {
   font-family: 'Roboto Condensed', sans-serif;
   letter-spacing: .1vw;
}
nav {
   display: flex;
   gap: 6vw;
}
a {
   text-decoration: none;
   display: flex;
   align-items: center;
}
img {
  width: 25px;
  margin-right: 5px;
}

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

a:has(> img) {
   color: red;
}

И получим следующий результат

Посмотреть пример можно на CodePen

Псевдокласс :has() не может быть вложен в другой :has(), так как это может привести к циклическим запросам при выполнении поиска селектора.

Нельзя использовать псевдоэлементы в качестве аргументов в :has(), а также в качестве целевого селектора.

Поддержка в браузерах

Так как :has() появился совсем недавно, а именно в начале 2022 года, то не стоит ее сейчас использовать повсеместно, а лучше дождаться полной поддержки всеми браузерами. Как мы видим ниже, поддержка :has() в данный момент отсутствует в Mozilla Firefox и появится только в версии 121, релиз которой запланирован на декабрь 2023 года.

The post CSS Псевдокласс :has() что это? first appeared on Code-Notes.ru.

На начало 2023 года 5,44 миллиарда человек пользуются мобильными телефонами, что составляет 68% от общей численности населения мира. Количество уникальных пользователей мобильных телефонов за последний год увеличилось чуть более чем на 3% — на 168 миллионов новых пользователей.

Источник web-canape.ru

Так как сделать так, что бы сайт действительно хорошо смотрелся на всех устройства? Тут нам и приходят в помощь медиа-запросы.

Как писать медиа-запросы

Начнем с того что когда дизайнер делает макет в Figma, он всегда старается продумать поведение сайта при адаптиве. По этому когда мы получаем макет, мы видим какие «точки слома» или «точки остановы», так называемые брейкпойнты (breakpoint) присутствуют.

Основываясь на макет, мы понимаем какие основные брейкпойнты (breakpoint) мы должны использовать при написании адаптива.

К сожалению дизайнер, делая макет, не всегда продумывает адаптив, тогда его приходится писать самому при вёрстке макета.

Из нашего опыта

Общепринятый вид написания медиа-запросов выглядит так:

@media [тип устройства] [характеристика устройства] { 
  /* CSS-правила */ 
}

Всего есть четыре основные типа устройств:

• all — условие медиа-запроса применится ко всем устройствам. Если не задать никакой тип в выражении, то по умолчанию применяется этот.
• print — стили внутри такого медиа-запроса применятся при печати на принтерах или экспорте в PDF, в том числе в режиме предпросмотра документа.
• screen — для устройств с экранами.
• speech — для синтезаторов речи, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.

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

@media (orientation: landscape), (max-width: 960px) {
  .text {
    color: red;
  }
}

В этом запросе стили применятся для устройств orientation: landscape — это альбомная ориентация и экраны с максимальной шириной до 960рх.

Так же можно задавать диапазон ширины экрана в котором будут применятся правила:

@media (min-width: 320px) and (max-width: 640px) {
  .link {
    text-decoration: underline;
  }
}

Совет

Для вёрстки mobile first (первым собирается экран для мобильного устройства) лучше использовать медиа-запрос с min-width и располагать их в порядке увеличения ширины экрана.

В свою очередь для вёрстки сначала десктопа (desktop first), использовать max-width, и писать запросы в обратном порядке.

The post Что такое css медиа-запросы first appeared on Code-Notes.ru.

Давайте поговорим про относительно молодую, но очень интересную CSS функцию clamp(). Эта функция появилась в css стилях в апреле 2020 года, но до сих пор её мало кто использует.

Функция clamp() используется что бы задать диапазон изменения некоего элемента. Она принимает в себя три значения — минимальный размер, рекомендованное значение, максимальный размер.

Разберем функцию на примере заголовка

Когда мы получили от дизайнера макет в Figma, в котором видим все размеры заголовков и текстов, а так же «точки слома», мы понимаем как писать адаптив.

На рисунке выше мы видим три основные «брейкпойнта» — это 1440 px (десктопная), 768 рх (планшетная) и 320 рх (мобильная). Видим как меняется размер заголовка «Придумайте что отправить», эти размеры 48рх, 44рх, 32 рх.

Конечно же по привычке мы начнем писать медиа запросы, в которых пропишем правила для изменения текста (Заголовков) при адаптиве, но тут как раз можно использовать css-функцию clamp(), которая позволит сократить количество строчек кода.

В примере мы создали на Codepen набросок текста из макета и применили к нему функцию clamp(), в которой указали минимальное и максимальное значение из нашего макета, а так же указали рекомендуемое.

Текст изначально принял значение font-size в 48рх, при уменьшении размера экрана он принимает значение в 7vw пока не достигнет значения в 32px. Таким образом можно указать поведение текста в адаптиве, что значительно упростить его написание.

В одном выражении допустимо применять разные единицы (px, %, vw, em, rem и др.), а также использовать функцию calc().

При указании значений соблюдайте условие «минимум < значение < максимум». Иными словами, значение должно быть больше минимума, но меньше максимума. Если параметры выставлены в неверном порядке (например: clamp(40px, 10px, 20px)), то в качестве значения выбирается минимум, в данном случае 40px.

Применение css-функции clamp()

На сайте CanIUse мы видим что функция clamp() набрала уже почти полные 95%. а это говорит нам что в крупных сложных проектах (которые могут быть открыты пользователями со старых браузеров) пока не рекомендуется ее использовать, а вот в небольших или лендингах можно смело вставлять.

The post CSS-функция clamp() что это? first appeared on Code-Notes.ru.