5 новых функций, которые изменят способ написания CSS

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

1. Селектор :has()

Новый селектор работает во всех браузерах, кроме Firefox, но он поддерживается при включенном флаге, поэтому мы знаем, что он появится.

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

figure { background: white; }

figure:has(img) { background: grey; }

Меняет фон на серый, если figureвнутри элемента . imgКонечно, этому есть и более практическое применение, например:

form:has(input:invalid) { /*there an invalid input*/
     background: red; 
}

form:not(:has(input:invalid)) { /*all inputs valid*/
     background: green 
}

Это :not(:has(input:invalid))круто, но немного сбивает с толку. По сути, если в форме нет недопустимых input, она содержит только действительные inputs, так что это действительная форма 👍.

2. Псевдокласс :focus-within

Возможно, вы уже некоторое время используете :focus, но :focus работает только с текущим элементом. Что, если вы хотите знать, сфокусирован ли пользователь на дочернем элементе? iframeЭто полезно, если у вас есть подссылка на странице или в меню. Вы можете использовать его следующим образом:

div:focus-within { background: red; }

Становится красным, если пользователь следит за divчто-либо в . divЭто очень удобно! Вы даже можете сделать то же самое в нашем предыдущем примере!

form:has(input:invalid):focus-within {
     background: red; 
}

form:not(:has(input:invalid)):focus-within {
     background: green 
}

Таким образом, форма не станет красной или зеленой, пока пользователь не взаимодействует с ней. Пустая форма технически является недействительной формой 😱

3. Каскадный слой

Этот немного уникален, и хотя я никогда не видел, чтобы он использовался на практике, он определенно есть. Начните с этого HTML:

<div class="box">
  <p>Hello, world!</p>
</div>