Функции

Подкаст 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 также предоставляет функции, которые помогают анимировать элементы, применять к ним градиенты и использовать графические фильтры для управления их внешним видом. Чтобы сделать этот модуль максимально кратким, они описаны в связанных модулях. Все они имеют структуру, аналогичную функциям, продемонстрированным в этом модуле.

Проверьте свое понимание

Проверьте свои знания функций