Функции¶

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

CSS подкаст

020: Функции

Перевод на русскийАнглийский оригинал

До сих пор в этом курсе вы познакомились с несколькими функциями CSS. В модуле grid вы познакомились с функциями minmax() и fit-content(), которые помогают изменять размеры элементов. В модуле color были представлены функции rgb() и hsl(), помогающие определять цвета.

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

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

Что такое функция?¶

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

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

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

Функциональные селекторы¶

.post :is(h1, h2, h3) {
    line-height: 1.2;
}

О функциональных селекторах вы узнали из модуля Псевдоклассы, в котором подробно описаны такие функции, как :is() и :not(). Аргументами, передаваемыми в эти функции, являются CSS-селекторы, которые затем оцениваются. Если элементы совпадают, то к ним будут применены остальные CSS-правила.

Пользовательские свойства и `var()`¶

:root {
    --base-color: #ff00ff;
}

.my-element {
    background: var(--base-color);
}

Пользовательское свойство — это переменная, которая позволяет токенизировать значения в коде CSS. Пользовательские свойства также подвержены влиянию каскада, что означает возможность контекстного управления или переопределения. Пользовательское свойство должно иметь префикс из двух тире (--) и чувствительно к регистру.

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

.my-element {
    background: var(--base-color, hotpink);
}

В функцию var() можно также передать резервное значение декларации. Это означает, что если --base-color не будет найден, то вместо него будет использована переданная декларация, которая в данном примере представляет собой цвет hotpink.

Функции, возвращающие значение¶

Функция var() является одной из функций CSS, возвращающих значение. Такие функции, как attr() и url(), имеют схожую структуру с var() — вы передаете один или несколько аргументов и используете их в правой части вашего CSS-объявления.

a::after {
    content: attr(href);
}

Функция attr() здесь берет содержимое атрибута href элемента <a> и устанавливает его в качестве content псевдоэлемента ::after. Если значение атрибута href элемента <a> изменится, то это автоматически отразится в данном атрибуте content.

.my-element {
    background-image: url('/path/to/image.jpg');
}

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

Функции цвета¶

О функциях цвета вы узнали из модуля color. Если вы еще не прочитали его, настоятельно рекомендуем это сделать.

Некоторые доступные функции цвета в CSS — это rgb(), rgba(), hsl(), hsla(), hwb(), lab() и lch(). Все они имеют схожую форму, в которой передаются аргументы конфигурации и возвращается цвет.

Математические выражения¶

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

`calc()`¶

Функция calc() принимает в качестве параметра одно математическое выражение. Это математическое выражение может быть смешанного типа, например, длина, число, угол, частота. Единицы измерения также могут быть смешанными.

.my-element {
    width: calc(100% - 2rem);
}

В данном примере функция calc() используется для определения ширины элемента как 100% от ширины содержащего его родительского элемента, после чего от этого вычисленного значения отнимается 2rem.

:root {
    --root-height: 5rem;
}

.my-element {
    width: calc(calc(10% + 2rem) * 2);
    height: calc(var(--root-height) * 3);
}

Функция calc() может быть вложена внутрь другой функции calc(). Пользовательские свойства также можно передавать в функцию var() как часть выражения.

`min()` и `max()`¶

$Data on support for the css-math-functions feature across the major browsers from caniuse.com$

Функция min() возвращает наименьшее вычисленное значение одного или нескольких переданных аргументов. Функция max() делает обратное: получает наибольшее значение одного или нескольких переданных аргументов.

.my-element {
    width: min(20vw, 30rem);
    height: max(20vh, 20rem);
}

В данном примере ширина должна быть наименьшим значением между 20vw — что составляет 20% от ширины области просмотра и 30rem. Высота должна быть наибольшей между 20vh, что составляет 20% от высоты области просмотра и 20rem.

Такие единицы, как vw и vh, мы рассматриваем в модуле Размеры.

`clamp()`¶

$Data on support for the css-math-functions feature across the major browsers from caniuse.com$

Функция clamp() принимает три аргумента: минимальный размер, идеальный размер и максимальный размер.

h1 {
    font-size: clamp(2rem, 1rem + 3vw, 3rem);
}

В данном примере размер шрифта font-size будет изменяться в зависимости от ширины области просмотра. Единица vw добавляется к единице rem, чтобы помочь при масштабировании экрана, поскольку независимо от уровня масштабирования единица vw будет иметь одинаковый размер. Умножение на единицу rem, основанную на размере корневого шрифта, дает функции clamp() относительную точку отсчета.

Подробнее о функциях min(), max() и clamp() можно узнать в этой статье.

Фигуры¶

CSS-свойства clip-path, offset-path и shape-outside используют фигуры для визуальной фиксации блока или создания формы для обтекания содержимого.

Существуют функции фигур, которые можно использовать с обоими этими свойствами. Простые формы, такие как circle(), ellipse() и inset(), принимают аргументы конфигурации для определения их размера. Более сложные фигуры, такие как polygon(), принимают пары значений осей X и Y, разделенных запятыми, для создания пользовательских фигур.

.circle {
    clip-path: circle(50%);
}

.polygon {
    clip-path: polygon(
        0% 0%,
        100% 0%,
        100% 75%,
        75% 75%,
        75% 100%,
        50% 75%,
        0% 75%
    );
}

Подобно функции polygon(), существует также функция path(), которая принимает в качестве аргумента правило заливки SVG. Это позволяет создавать очень сложные фигуры, которые могут быть нарисованы в графических инструментах, таких как Illustrator или Inkscape, а затем скопированы в CSS.

Преобразования¶

Последними в этом обзоре функций CSS являются функции трансформации, которые позволяют перекосить, изменить размер и даже глубину элемента. Все следующие функции используются со свойством transform.

Вращение¶

Для поворота элемента используется функция rotate(), которая поворачивает элемент вокруг его центральной оси. Также можно использовать функции rotateX(), rotateY() и rotateZ() для поворота элемента по определенной оси. Для определения степени поворота можно передавать единицы измерения градус, оборот или радиан.

.my-element {
    transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}

Функция rotate3d() принимает четыре аргумента.

Первые три аргумента — числа, определяющие координаты X, Y и Z. Четвертый аргумент — вращение, которое, как и в других функциях вращения, принимает значения градусов, угла и оборота.

.my-element {
    transform: rotate3d(1, 1, 1, 10deg);
}

Масштаб¶

Изменить масштаб элемента можно с помощью transform и функции scale(). Функция принимает в качестве значения одно или два числа, которые определяют положительное или отрицательное масштабирование. Если задать только один числовой аргумент, то оси X и Y будут масштабироваться одинаково, а определение обоих является сокращением для X и Y. Как и для функции rotate(), существуют функции scaleX(), scaleY() и scaleZ() для масштабирования элемента по определенной оси.

.my-element {
    transform: scaleX(1.2) scaleY(1.2);
}

Также, как и функция rotate, существует функция scale3d(). Она аналогична scale(), но принимает три аргумента: масштабный коэффициент X, Y и Z.

Translate¶

Функции translate() перемещают элемент, сохраняя его положение в потоке документа. В качестве аргументов они принимают значения длины и процента. Функция translate() переводит элемент по оси X, если задан один аргумент, и переводит элемент по осям X и Y, если заданы оба аргумента.

.my-element {
    transform: translatex(40px) translatey(25px);
}

Как и в других функциях преобразования, можно использовать отдельные функции для конкретной оси, например translateX, translateY и translateZ. Также можно использовать функцию translate3d, которая позволяет определить трансляцию по X, Y и Z в одной функции.

Skewing¶

Для перекоса элемента можно использовать функции skew(), которые принимают в качестве аргументов углы. Функция skew() работает аналогично translate(). Если задать только один аргумент, то она будет влиять только на ось X, а если задать оба, то на оси X и Y. Можно также использовать skewX и skewY, чтобы воздействовать на каждую ось независимо.

.my-element {
    transform: skew(10deg);
}

Перспектива¶

Наконец, для изменения расстояния между пользователем и плоскостью Z можно использовать свойство perspective, которое относится к семейству свойств transform. Это создает ощущение дистанции и может быть использовано для создания глубины резкости в дизайне.

Пример Дэвида Десандро из его очень полезной статьи показывает, как можно использовать это свойство вместе со свойствами perspective-origin-x и perspective-origin-y для создания действительно трехмерных эффектов.

Функции анимации, градиентов и фильтров¶

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

Источник — Functions