CSS

Прогресс не стоит на месте и в спину CSS3 уже дышит CSS4, разрабатываемый под крылом консорциума W3C. Исторически сложилось так, что разработка стандарта CSS ведется независимо от разработки веб-браузеров.

Это ведет к тому, что различные браузеры в различной степени поддерживают спецификацию CSS. Но вернемся к CSS4.

CSS4 принесет с собой достаточно много изменений. Новых псевдоэлементов добавлено не было, этим, скорее всего, займутся в недалеком будущем. Однако разработке псевдоклассов все-таки уделили внимание.

В CSS4 (на данный момент) были добавлены следующие элементы: логические комбинации из селекторов, селекторы тегов и атрибутов, новые псевдоклассы, селекторы отношений и таблиц. Далее в статье рассматривается некоторые из них более подробно.

1. :NOT()

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

:not(p, h1, div) // то же самое, что и :not(p):not(h1):not(div) 

2. :HAS()

Это очень интересный селектор, открывающий большие возможности для выборки. Указанное правило сработает только, если в нем будут определенные элементы:

div:has(img) // любой блок, в котором есть картинка
p:has(h1, h2) // любой параграф, имеющий заголовки первого или второго типов
p:has(:not(h1)) // любой параграф, не имеющий заголовок первого типа 

3. :any-link

Помните, как нам приходилось писать что-то вроде этого:

a:link, a visited {}

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

a:any-link {} 

4. :placeholder-shown

Этот псевдо-класс выбирает элементы ввода, когда показывается текст, заданный в placeholder:

input:placeholder-shown {
  outline: 1px solid blue;
} 

5. :drop и :drop()

Первый псевдо-класс выбирает любой элемент, который перетаскивается пользователем. Второй – похож на первый, но имеет дополнительные возможности сортировки:

div:drop {}

div:drop(active || valid || invalid) {
  // active: перетаскиваемый объект
  // valid: сработает, если цель перетаскивания действительна для объекта, который в настоящее время перетаскивается
  // invalid: наоборот, если цель перетаскивания недействительная для объекта, который в настоящее время перетаскивается
} 

Теперь давайте рассмотрим несколько интересных функции:

Сonic-gradient

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

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

.pie-chart{
		background: conic-gradient(red 120deg, green 120deg 240deg, blue 240deg);
}

Функция repeat-conic-gradient() предлагает возможность создавать впечатляющие повторяющиеся узоры с помощью короткого списка параметров.

.sunburst{
	     background: repeating-conic-gradient(red 0 15deg,darkred 0 30deg);
}

Функция соотношения сторон

Еще одна новая функция — соотношение сторон, которое представляет собой пропорциональное соотношение между шириной и высотой:

• Создание контейнеров-заполнителей для содержимого, которое будет загружено
• Создание согласованных компонентов одинакового размера, таких как карты
• Создание отзывчивых окон iframe

.widescreen {
	     aspect-ratio: 16 / 9;
}

Свойство Content-visibility

Свойство content-visibility — это новое свойство CSS, которое может улучшить производительность отрисовки страницы. Если большая часть вашего контента находится за пределами экрана, использование этого свойства может значительно сократить время начальной загрузки страницы.

Логические свойства

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

Например, вы могли бы использовать margin-block-start вместо margin-left для текста с направлением слева направо.

Подсетка CSS

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

Типичным примером может служить макет страницы с разными разделами. Эти разделы могут различаться по размеру в зависимости от содержимого.

.container {
	     display: grid;
	     grid-template-columns: repeat(2, 1fr);
	     gap: 20px;
}
	   .card {
	     display: grid;
}

Если мы изменим карту на подсетку, мы сможем получить идеально выровненные по вертикали секции.

.card {
	     display: grid;
	     grid-template-rows: subgrid;
	     grid-row: auto / span 3;
}

Функция color()

Функция color() позволяет указывать цвет в конкретном цветовом пространстве, а не в неявном цветовом пространстве sRGB, в котором работает большинство других цветовых функций. Это позволит веб-разработчикам определять гораздо больший диапазон цветов в будущем.

Вывод display-p3 примерно на 35% больше, чем sRGB. Многие современные дисплеи теперь покрывают 100% цветового пространства display-p3. Вы можете сразу начать использовать функцию цвета и предоставить обратно совместимый цвет sRGB с помощью запроса функции, как показано ниже.

:root {
	     --bright-green: rgb(0, 255, 0);
}
	     /* Display-p3 color, when supported. */
	     @supports (color: color(display-p3 1 1 1)) {
		:root {
		  --bright-green: color(display-p3 0 1 0);
		 }
	    }
header {
 color: var(--bright-green);
}

В следующих статьях рассмотрим другие возможности CSS4