Спецификация «CSS3» имела огромный успех. Целая куча новых вещей была реализована, и было очень здорово, чтобы мы могли наконец-то получить их в CSS. Градиенты, анимации и переходы, радиусы границ, тени, трансформации… вау! Более того, красивый баннер CSS3 (и духовный покровитель «HTML5») взлетел, и индустрия была просто переполнена учебными материалами обо этом всем.

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

Так что же им сказать?

CSS 3, HTML5

Скотт Вандехи в «Современном CSS в двух словах» написал о своем друге, который не следит за CSS примерно с 2015 года и на самом деле не знает, чему учиться. Я попытаюсь перефразировать список Скотта и то, что изменилось со времен CSS3.

Препроцессоры по-прежнему широко используются со времен CSS3, но причин для их использования стало меньше. Это включает в себя более новомодные подходы, такие как полифиллинг будущих функций. Это также включает Autoprefixer. CSS-in-JS распространен, но только в проектах, где весь рабочий процесс уже реализован в JavaScript. Вам стоит обратить внимание на такой подход только если будете работать над соответствующим проектом. Вы сможете быстро выучить синтаксис, если понадобится. Но вы обязательно должны изучить Custom Properties, Flexbox и Grid.

Звучит правильно. Но позвольте мне составить свой собственный список полезных пост-CSS3 свойств.

Что нового в пост-CSS3?

Под «CSS3» будем подразумевать 2015 год или около того.

Макеты

Вам действительно нужно изучить Flexbox и Grid, если вы еще этого не сделали — они действительно являются краеугольными камнями разработки CSS в наши дни. Даже больше, чем любая функция, которую нам дали в CSS3. 

.card {
  display: grid;
  grid-template-columns:
    150px 1fr;
  gap: 1rem;
}
.card .nav {
  display: flex;
  gap: 0.5rem;
}

Пользовательские свойства CSS

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

Вы можете зайти так далеко, что спроектируете целые сайты, используя в основном настраиваемые свойства. И в этом случае вы не можете пройти мимо Tailwind. Подход к стилизации всего сайта с помощью классов в HTML находит положительный отклик у многих людей (как и отрицательный, так что не беспокойтесь, если он не вам не подойдет). 

html {
  --bgColor: #70f1d9;

  --font-size-base: 
    clamp(1.833rem, 2vw + 1rem, 3rem);
  --font-size-lrg:
    clamp(1.375rem, 2vw + 1rem, 2.25rem);
}

html.dark {
  --bgColor: #2d283e;
}

Запросы с предпочтениями

Запросы с предпочтениями, как правило, представляют собой @media-запросы, которые мы используем в основном для определения размеров браузера. Но теперь они также включают способы определения конкретных пользовательских предпочтений на уровне ОС. Два примера: предпочтение с замедленной анимацией и предпочтение цветовой схемы. Это позволяет нам создавать интерфейсы, которые более точно соответствуют желаниям пользователя. 

@media 
  (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001s !important;
  }
}

@media 
  (prefers-color-scheme: dark) {
  :root {
    --bg: #222;
  }
}

Изменение цвета

Синтаксис цвета перемещается в функции, которые работают с альфа-каналом (прозрачность), не изменения имени функции. Например, если вам нужен чистый синий цвет CSS3, вы можете использовать rgb(0, 0, 255). Однако сегодня вы можете делать это без запятых (работают оба варианта): rgb(0 0 255), а затем еще добавить альфа-канал: rgb(0 0 255 / 0,5). Точно такая же ситуация для hsl().

Говоря о синтаксисе будущих цветов:

  • lab() color — еще одно новое цветовое пространство. Он «представляет собой весь диапазон цветов, который может видеть человек».
  • lch() — еще одно новое цветовое пространство.
  • hwb() — еще одно новое цветовое пространство.
.block {
  background: 
    hsl(0 33% 53% / 0.5);

  background:
    rgb(255 0 0);

  background:
    /* can display colors 
       no other format can */
    color(display-p3 0.9176 0.2003 0.1386)

  background:
    lab(52.2345% 40.1645 59.9971 / .5);}

  background:
    hwb(194 0% 0% / .5);
}

Вариативные шрифты

Веб-шрифты стали важным элементом CSS3. Теперь появились вариативные шрифты. Они открывают интересные возможности дизайна и могут быть полезны для производительности (например, больше не нужно загружать разные файлы шрифтов для полужирных и курсивных версий одного и того же шрифта). Цветные шрифты тоже есть, но я бы сказал, что они не пользуются большой популярностью, несмотря на поддержку. 

body {
 font-family: 'Recursive', sans-serif;
 font-weight: 950;
 font-variation-settings: 'MONO' 1, 'CASL' 1;
}

Пути

SVG также эволюционировал со времен CSS3. Вы можете обрезать любой элемент в любые формы с помощью clip-path, добавляя в CSS возможности, свойсвтенные SVG. Кроме того, вы можете анимировать элементы вдоль пути, размещать элементы вдоль них и даже обновлять пути SVG-элементов. 

.cut-out {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.mask {
  mask: url(mask.png) right bottom / 100px repeat-y;
}
.move-me {
  offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0');
  animation: move 3s linear infinite;
}

@keyframes move {
  100% { 
    offset-distance: 100%;
  }
}
  • clip-path — позволяет буквально обрезать элементы в формы.
  • маски — аналогично обрезке, но у маски могут быть и другие свойства, например альфа-канал.
  • offset-path — путь, по которому может быть размещен элемент, как правило, с целью его анимации вдоль пути.
  • shape-outside — обеспечивает границы плавающему элементу, который окружают другие элементы.
  • d — SVG-атрибут d в можно обновить с помощью CSS.

CSS-фильтры

Существует множество манипуляций с изображениями (не говоря уже о других элементах DOM), которые в наши дни возможны непосредственно в CSS. В буквальном смысле есть фильтр, но у него есть друзья, и все они используются по-разному.

  • filter — всевозможные полезные эффекты, как в Photoshop: яркость, контрастность, оттенки серого, насыщение и т.д. Размытие — это вообще уникальная сила.
  • background-blend-mode — снова напоминает Photoshop в том, как вы можете смешивать слои. Сложите слои, чтобы затемнить их, и объедините. Наложение для смешивания фона и цвета. Осветление и затемнение — это классические эффекты, которые действительно полезны в веб-дизайне, и вы никогда не знаете, когда более эзотерический эффект освещения создаст крутой вид.
  • background-filter — те же возможности, что и у фильтра, но они применяются только к фону, а не ко всему элементу. Размытие только фона — особенно полезный эффект.
  • mix-blend-mode — те же возможности, что и у background-blend-mode, но для всего элемента, а не для фона.
.disable {
  filter: 
    blur(1px)
    grayscale(1);
}

.site-header {
  backdrop-filter: 
    blur(10px);
}

.styled-quote {
  mix-blend-mode: 
    exclusion;
}

Гудини

Houdini на самом деле представляет собой набор технологий, которые по сути основаны на расширении CSS с помощью JavaScript или, по крайней мере, на пересечения CSS и JavaScript.

  • Paint API — возвращает изображение, созданное из API <canvas>, которым можно управлять с помощью пользовательских свойств.
  • Properties & Values ​​API / Typed OM — присваивает типы значениям (например, 10px), которые в противном случае были бы строками.
  • Layout API — создавайте собственные свойства отображения.
  • API анимации

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

import "https://unpkg.com/extra.css/confetti.js";
body {
  background: paint(extra-confetti);
  height: 100vh;
  margin: 0;
}

Shadow DOM

Shadow DOM всплывает в памяти, если вы игрались с <svg> и элементом <use>. «Клонированный» элемент, который появляется, имеет Shadow DOM, который имеет ограничения на то, как вы можете использовать его. Когда вы попадете в <web-components>, вам многое покажется знакомым.

Если вам нужно стилизовать веб-компоненты, знайте, что есть четыре варианта «извне». И вам может быть интересно узнать о нативных модулях CSS и конструируемых таблицах стилей. 

my-component {
  --bg: lightgreen;
}

:host(.dark) { 
  background: black; 
}

my-component:part(foo) {
  border-bottom: 2px solid black;
}

Ага, а что будет вскоре?

Я бы сказал, не беспокойтесь об этом. ;)

Смысл в том, чтобы узнать полезные вещи, которые нужно знать сейчас, начиная с CSS3. Но если вам интересно, что ждет CSS в будущем…

  • Контейнерные запросы будут иметь огромное значение. Вы сможете выбирать стили на основе размера элемента контейнера, а не только размера браузера. И уже есть полифилы.
  • Независимые преобразования, например. масштаб: 1.2;, будет более логичным в использовании, чем постоянное использование transform.
  • Вложенность — это функционал, который всегда была у всех препроцессоров CSS, и который любят использовать разработчики, особенно для медиа-запросов. Скорее всего, скоро мы получим его в нативном CSS.
  • Область видимости — это способ сообщить блоку CSS, что он должен применяться только к определенной области (так же, как это делают библиотеки CSS-in-JS).
  • Каскадные слои открывают совершенно новую концепцию того, какие стили «побеждают» в элементах. Стили на более высоких уровнях будут превосходить стили на более низких уровнях, независимо от их специфики.
  • Единицы области экрана значительно улучшатся с введением «относительной» длины области экрана. Самыми полезными будут dvh и dvw, поскольку они учитывают фактическое полезное пространство в окне браузера, предотвращая такие ужасные проблемы, как пользовательский интерфейс браузера, перекрывающий пользовательский интерфейс сайта.

У Брамуса Ван Дамма есть неплохая статья, посвященная этим и многим другим вещам, в обзоре «CSS в 2022 году». Похоже, 2022 год должен стать по-настоящему знаменательным годом для CSS. Возможно, это более знаменательный год, чем 2015.

Оригинал: css-tricks