Подкаст 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?
ellipse()square()circle()rect()inset()polygon()