DEV Community

Arif Balaev
Arif Balaev

Posted on

Полное руководство по функциям CSS

Вольный перевод статьи A Complete Guide to CSS Functions

Вступление

В программировании функции - это именованная часть кода, которая выполняет определенную задачу. Примером этого может быть функция, написанная на JavaScript, называемая sayWoof ():

function sayWoof() {
 console.log("Woof!");
} 
Enter fullscreen mode Exit fullscreen mode

Мы можем использовать эту функцию позже в нашем коде, после того как мы определили желаемое поведение. Для этого примера, каждый раз, когда вы вводите sayWoof () на своем веб-сайте или в JavaScript веб-приложения, будет напечатано «Woof!» в консоль браузера.

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

function countDogs(amount) {
 console.log("There are " + amount + " dogs!");
}
Enter fullscreen mode Exit fullscreen mode

Как и любой другой язык программирования, 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()` - с помощью связующих точек можно построить любую фигуру, которая будет обрезать элемент







Enter fullscreen mode Exit fullscreen mode

Top comments (0)