Подкаст CSS – 020: Функции
На данный момент в этом курсе вы познакомились с несколькими функциями CSS. В модуле сетки вы познакомились с minmax()
и fit-content()
, которые помогают определять размеры элементов. В модуле цвета вы познакомились с 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()
ничего не вернет.
Функции цвета
Вы узнали все о функциях цвета в модуле цвета . Если вы еще не прочитали это, настоятельно рекомендуется это сделать.
Некоторые доступные функции цвета в CSS: rgb()
, rgba()
, hsl()
, hsla()
, hwb()
, lab()
и lch()
. Все они имеют схожую форму, в которой передаются аргументы конфигурации и возвращается цвет.
Математические выражения
Как и многие другие языки программирования, CSS предоставляет полезные математические функции, помогающие выполнять различные типы вычислений.
расчет()
Функция 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()
Функция min()
возвращает наименьшее вычисленное значение одного или нескольких переданных аргументов. Функция max()
делает обратное: получает наибольшее значение из одного или нескольких переданных аргументов.
.my-element {
width: min(20vw, 30rem);
height: max(20vh, 20rem);
}
В этом примере ширина должна быть наименьшим значением между 20vw
— что составляет 20% ширины области просмотра — и 30rem
. Высота должна быть наибольшим значением между 20vh
— что составляет 20% высоты области просмотра — и 20rem
.
зажим()
Функция 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()
переводит элемент по оси X, если определен один аргумент, и переводит элемент по осям X и Y, если определены оба аргумента.
.my-element {
transform: translatex(40px) translatey(25px);
}
Вы можете, как и в случае с другими функциями преобразования, использовать определенные функции для определенной оси, используя translateX
, translateY
и translateZ
. Вы также можете использовать translate3d
, который позволяет вам определить перевод X, Y и Z в одной функции.
Перекос
Вы можете наклонить элемент, используя функции skew()
, которые принимают углы в качестве аргументов. Функция skew()
работает очень похоже на функцию translate()
. Если вы определите только один аргумент, он повлияет только на ось X, а если вы определите оба, это повлияет на оси X и Y. Вы также можете использовать skewX
и skewY
для независимого воздействия на каждую ось.
.my-element {
transform: skew(10deg);
}
Перспектива
Наконец, вы можете использовать свойство perspective
, которое является частью семейства свойств преобразования, чтобы изменить расстояние между пользователем и плоскостью Z. Это создает ощущение расстояния и может использоваться для создания глубины резкости в ваших проектах.
Этот пример Дэвида Десандро из их очень полезной статьи показывает, как его можно использовать вместе со свойствами perspective-origin-x
и perspective-origin-y
для создания по-настоящему трехмерного опыта.
Функции анимации, градиенты и фильтры
CSS также предоставляет функции, которые помогают анимировать элементы, применять к ним градиенты и использовать графические фильтры для управления их внешним видом. Чтобы сделать этот модуль максимально кратким, они описаны в связанных модулях. Все они имеют структуру, аналогичную функциям, продемонстрированным в этом модуле.
Проверьте свое понимание
Проверьте свои знания функций
По каким символам можно идентифицировать функции CSS?
{}
[]
()
:
::
CSS имеет встроенные математические функции?
Функцию calc()
можно поместить внутри другой calc()
например font-size: calc(10px + calc(5px * 3));
Что из перечисленного является функциями фигур CSS?
polygon()
ellipse()
inset()
circle()
square()
rect()