Вольный перевод статьи A Complete Guide to CSS Functions
Вступление
В программировании функции - это именованная часть кода, которая выполняет определенную задачу. Примером этого может быть функция, написанная на JavaScript, называемая sayWoof ():
function sayWoof() {
console.log("Woof!");
}
Мы можем использовать эту функцию позже в нашем коде, после того как мы определили желаемое поведение. Для этого примера, каждый раз, когда вы вводите sayWoof () на своем веб-сайте или в JavaScript веб-приложения, будет напечатано «Woof!» в консоль браузера.
Функции также могут использовать аргументы, которые являются слотами для таких вещей, как числа или биты текста, которые вы можете ввести в логику функции, чтобы она изменила их. Это работает так в JavaScript:
function countDogs(amount) {
console.log("There are " + amount + " dogs!");
}
Как и любой другой язык программирования, CSS имеет функции. Они могут быть вставлены туда, где вы поместили бы значение, или в некоторых случаях, сопровождая другое объявление значения. Некоторые функции CSS даже позволяют вам вкладывать в них другие функции!
В отличие от других языков программирования, мы не можем создавать свои собственные функции в CSS.
Базовые CSS функции
url()
Позволяет ссылаться на другие ресурсы, чтобы загрузить их. Это могут быть изображения, шрифты и даже другие css файлы. По соображениям производительности рекомендуется ограничивать объем загружаемых данных с помощью url (), поскольку каждое объявление является дополнительным HTTP-запросом.
attr()
Эта функция позволяет нам проникать в HTML, брать содержимое атрибута и передавать его в свойство содержимого CSS. Например,
<p data-name="Arif">My name is </p>
<style>
p::after {
content: attr(data-example);
}
</style>
```
`
Также есть дополнительный синтаксис [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/attr)
`
```
/* With type */
attr(src url);
attr(data-count number);
attr(data-width px);
/* With fallback */
attr(data-count number, 0);
attr(src url, "");
attr(data-width px, inherit);
attr(data-something, "default");
```
`
Вы часто увидите `attr ()`, используемый в таблицах стилей печати, где он используется для отображения URL ссылки после ее текста. Еще одно замечательное применение этой функции - использовать его для отображения альтернативного описания изображения, если оно не загружается.
### calc()
Эта функция принимает два аргумента и вычисляет результат из оператора (+, -, *, /). Аргументами могут быть custom-propertie и все возможные юниты для обозначения длины или ширины (px, %, em итп)
width: calc(100% - 30px);
### lang()
Если мы добавим `lang` атрибут для `<html>`, то дальше сможем работать с функцией `lang()` и применять стили в соответствии от языка страницы.
`
```
<p><q>Some text</q></p>
<style>
q:before { content: open-quote; }
q:after { content: close-quote; }
:lang(en) q { quotes: '“' '”'; }
:lang(fr) q { quotes: '«' '»'; }
:lang(de) q { quotes: '»' '«'; }
</style>
```
`
### not()
Этот псевдокласс селектор выберет все, что НЕ то, что мы указали. Например, вы можете нацелить все, что не является изображением с `body:not(img)`.
Пока что браузеры поддерживают только один атрибут, но уже ведется работа над добавлением сразу нескольких атрибутов через запятую.
## CSS Custom Properties
`var()` используется для ссылки на custom propertie, объявленное ранее в документе. Оно невероятно мощно в сочетании с `calc()`, так как `calc()` работает динамично и мы также динамично можем менять custom propertie. Плюс ко всему мы можем их менять через JS (почему-то сразу подумал про изменение цветовой схемы в runtime).
## Функции цветов
Тут всё просто. Используем `rgb()` или `hsl()` для генерирования цвета. Также по спецификации [CSS Color Module Level 4](https://www.w3.org/TR/css-color-4/) доступен четвертый параметр, отвевающий за прозрачность. Это значит, что `rgba()` и `hsla()` станут не нужны.
## Селекторы псевдоним класса
`:nth-child()` - Выбирает элементы на основе предоставленного алгебраического выражения (например, «2n» или «4n-1»). Например, вы можете использовать «2n» для выбора четных позиций и «2n-1» для нечетных позиций. Или можно написать `odd` и `even`. Имеет возможность делать другие вещи, такие как выбор «каждый четвертый элемент» `(4n)`, «первые шесть элементов» `(-n+6)` и тому подобное.
`:nth-of-type()` - работает как `nth-child()`, только работает для случаев, когда дети родителя относятся к разными типам.
Например есть в `<div>` 10 вложенных детей, некоторые из которых `<p>`, а другие `<div>`.
`
```
<div>
<p></p>
<p></p>
<p></p>
<div></div>
<div></div>
<div></div>
<div></div>
<p></p>
<p></p>
<p></p>
</div>
```
`
Если мы хотим выделить "нечетные" параграфы, не учитывая <div>, то тут поможет как раз `:nth-of-type()`.
`:nth-last-child()` - работает как `:nth-child()`, только считает не с начала, а с конца.
`:nth-last-of-type()` - работает как `:nth-of-type()`, только считает не с начала, а с конца.
## Функции анимаций
`cubic-bezier()` - выдает различный рода тайминг для анимации. Например, ease, ease-in-out или linear, а также написать собственные значения. Подробнее [тут](https://cubic-bezier.com)
`path()` - эта функция связана со свойством `offset-path`. Она позволяет вам «рисовать» SVG-путь, по которому могут быть анимированы другие элементы.
`steps()` - Эта относительно новая функция позволяет вам установить время замедления анимации, что обеспечивает большую степень контроля над тем, какая часть анимации происходит, когда. Хорошие примеры [тут](https://danielcwilson.com/blog/2019/02/step-and-jump/)
## Функции определения размера и масштабирования
Работают со свойством transform.
`scaleX(), scaleY(), scaleZ(), scale3d() и scale()` - позволяют увеличить/уменьшить размер относительно одной или более плоскостей.
`translateX(), translateY(), translateZ(), translate3d() и translate()` - перемещает элемент относительно одной или более плоскостей.
`perspective()` - помогает визуализировать 3D объект. Отвечает за визуальное расстояние оси Z от элемента до пользователя.
`rotateX(), rotateY(), rotateZ(), rotate3d() и rotate()` - поворачивает элемент относительно одной или более плоскостей.
`skewX(), skewY() и skew()` - наклоняет элемент сразу в двумерном пространстве по горизонтали и вертикали или одновременно в двух направлениях. Из прямоугольника как бы превратить в параллелограмм (скошенный прямоугольник)
## Функции фильтрации цветов
Работают со свойством `filter`. Что-то похожее на фотошоп.
`brightness()` - отвечает за яркость элемента.
`blur()` - отвечает за размытость
`contrast()` - отвечает за контраст
`grayscale()` - удаляет за цвет. Можно убрать весь цвет с компьютера
`invert()` - с помощью него можно сделать негативную версию картинки
`opacity()` - насколько елемент прозрачен
`saturate()` - насыщенность цветов
`sepia()` - применение фильтра сепии
`drop-shadow()` - как box-shadow, только если элемент с прозрачным фоном, тень применяется для непрозрачной области. Хорошо подходит для текста или картинок с прозрачным фоном.
`hue-rotate()` - меняет попиксельно цвета. Hue-rotate(180deg) как бы осуществляет инверсию цвета, как негатив.
## Функции форм элемента
Работает со свойством `clip-path`.
`circle()` - урезает кругом
`ellipse()` - урезает овалом
`inset()` - урезает квадратом
`polygon()` - с помощью связующих точек можно построить любую фигуру, которая будет обрезать элемент
Top comments (0)