Достойный набор инструментов, мощный и стабильный CSS, который вы можете использовать сегодня.
Я считаю, что каждый фронтенд-разработчик должен знать :has()
— это больше, чем «родительский селектор», как и почему создается subgrid
, как вкладываться с помощью встроенного синтаксиса CSS, как позволить браузеру сбалансировать перенос текста заголовка, и как использовать блоки запросов контейнера.
Этот пост является продолжением прошлогодних 6 фрагментов CSS, которые должен знать каждый фронтенд-разработчик в 2023 году .
CSS:has(.потенциал-за пределами-быть-родителем-селектором)
:has()
:has()
появился во всех основных браузерах в конце 2023 года! Этот новый селектор кажется маленьким и невинным, но вы будете удивлены множеством вариантов использования, которые он может разблокировать: игры, реактивность, макет с учетом контента, интеллектуальные компоненты и многое другое, что хорошо рассмотрено в этой статье Jhey .
![Показаны 4 панели, каждая с изображением и подписью. Каждое изображение показывает, как мозг активирует все больше и больше мозговых способностей. На первой панели написано :has(). На второй панели в качестве родительского селектора указано «figure:has(caption)». На третьей панели указано .layout:has(> :nth-child(5)) в качестве селектора количества. На четвертой панели указано html:has(#checked) .new-subject как селектор условной смены темы.](https://web.developers.google.cn/static/articles/5-css-snippets-every-front-end-developer-should-know-in-2024/image/has-meme.jpg?authuser=19&hl=ru)
Вот несколько примеров использования :has()
в качестве родительского селектора. Он получил это имя потому, что обычно тема селектора находится в конце, например, ul li
, где li
— это тема и получает стили. С помощью :has()
элемент в начале селектора может стать субъектом. В следующем примере кнопка имеет пробел, если внутри есть элемент класса .icon
. Карта меняет ориентацию, если внутри есть изображение.
button:has(.icon) {
gap: 1ch;
}
.card:has(img) {
grid-auto-flow: row;
}
Давно желаемый селектор — изменить макет в зависимости от количества в нем элементов. Теперь это возможно с помощью :has()
поскольку он может сохранять контейнер в качестве субъекта при запросе количества дочерних элементов.
main:has(> :nth-child(5)) {…}
Еще один пример более высокого уровня: изменение стилей, установленных для всего документа, когда на странице установлен определенный флажок:
html:has(#dark-mode:checked) {…}
Это простые варианты использования, которые не меняют тему селектора. Если вы просто посмотрите на подобные примеры, вы можете подумать :has()
ограничивается ролью родительского селектора. Однако рассмотрим следующие примеры. Они проверяют наличие чего-то на основе общего предка, а затем поворачивают объект селектора к дочернему элементу где-то глубже на странице.
Здесь отображается элемент ошибки формы, если какой-либо из его входных данных недействителен:
form:has(:user-invalid) .error {
display: block;
}
Здесь выдвигается основная область содержимого, когда у Sidenav есть класс .--is-open
:
html:has(#sidenav.--is-open) main {
translate: -320px;
}
Вот забавная демонстрация, в которой :has()
используется в качестве родительского селектора, :has()
с количественными запросами и контейнерными запросами для создания макета сетки, способного элегантно отображать 1–12 элементов в книжной или альбомной ориентации:
Создать подсетку
subgrid
В течение многих лет сообщество веб-интерфейсов просило создать subgrid, чтобы завершить и завершить чрезвычайно популярный и мощный движок CSS-сетки. Теперь он доступен во всех трех основных двигателях.
Узнайте больше о подсетке здесь , если вам нужен обзор.
body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
> article {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
}
}
Вложение способом CSS
nesting
В 2023 году встроенная вложенность CSS стала доступна во всех основных браузерах. Я даже обновил свой веб-сайт, убрав процесс сборки, который компилировал вложенность, и теперь я выпускаю таблицу стилей меньшего размера! Да, таблицы стилей с вложенностью меньше, и все инструменты разработчика браузера готовы их представить.
Обзор синтаксиса вложенности CSS вы можете найти здесь , со всеми подробностями. В следующем примере кода показан пример синтаксиса.
.you {
.can-totally-ship-this {
&.if-you-wanted {
/* it's VERY MUCH like SCSS */
&:is(:hover, :focus-visible) {
/* put a bird on it */
}
}
}
}
.for-theming {
@media (prefers-color-scheme: dark) {
/* you can nest media queries */
}
}
/* or for theming with [data-theme="dark"] */
.button {
background: black;
color: white;
/* nest and do more than just append, flip it and reverse it */
[data-theme="dark"] & {
background: white;
color: black;
}
}
Пусть браузер сбалансирует заголовки
balance
pretty
Без text-wrap: balance
разработчикам и копирайтерам приходится использовать подсказки разрыва строки, такие как элементы <wbr>
или ­
. По большей части это проигрышная битва, потому что как только контент будет переведен, масштабирован или каким-либо образом изменен, нет никакой гарантии, что эти подсказки окажутся в нужном месте для нового представления контента.
Благодаря сбалансированному переносу текста вы можете оставить эту работу браузеру. Вы можете увидеть сравнение в следующем Codepen.
Используйте единицы запроса контейнера
cqw
В прошлогоднем сообщении говорилось, что каждый фронтенд-разработчик должен знать, как написать контейнерный запрос. Если вы еще не научились, сделайте 2024 год годом, чтобы сделать решительный шаг, а также ознакомьтесь с модулями запросов к контейнерам. В качестве обзора Ахмад Шадид написал отличную статью о модулях контейнерных запросов в 2021 году.
Появилось шесть новых модулей запроса контейнеров :
- Встроенный вариант
cqi
. - Вариант ширины
cqw
. - Вариант блока
cqb
. - Вариант высоты
cqh
. - Вариант для той длины, которая меньше
cqmin
. - Вариант для большей длины
cqmax
.
Рассмотрим сценарий относительной и внутренней анимации контейнера. Дочерний элемент, который полностью выдвигается из контейнера с помощью 100cqi — это 100% встроенного размера контейнера.
@keyframes slide-out-of-container {
to {
translate: -100cqi;
}
}
Вот карточка с типографикой, реагирующей на контейнер, и изображением, которое адаптируется к ориентации контейнера, уменьшаясь вдвое, если ориентация альбомная.
.card {
:is(h2,h3) {
font-size: clamp(1.5rem, 5cqi, 4rem);
}
img {
inline-size: 100cqi;
@container (orientation: landscape) {
inline-size: 50cqi;
}
}
}
Если эти юниты для вас новы, вероятно, будет хорошей идеей просмотреть все юниты, доступные вам в 2024 году .