пользовательские свойства как основа архитектуры css
TRANSCRIPT
![Page 1: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/1.jpg)
Пользовательские свойства как основа архитектуры CSSПавел Ловцевич, LOVATA
![Page 2: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/2.jpg)
Препроцессоры
![Page 3: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/3.jpg)
Популярные возможности
![Page 4: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/4.jpg)
Преимущества переменныхПеременные — основа современного правильно сконструированного проекта.
Карен Менезес, Variables: The Backbone Of CSS Architecture
• Модульность.
• Уменьшение повторяемости.
• Сокращение объема.
• Повышение читаемости.
• Стайлгайд.
“
![Page 5: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/5.jpg)
Переменные. Когда и какие?Условие
• Значение встречается в коде два и более раз.
• Значение в будущем может изменяться.
Тип
• Измерения (размеры, отступы, радиусы скругления и т.п.).
• Цветовые схемы.
• Типографика.
• Наборы иконок.
• Брейкпойнты.
![Page 6: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/6.jpg)
Переменные в CSS• 2008 — первая реализация в Safari.
• 2012 — CSS Variables Module Level 1.
• 2013 — CSS Custom Properties for Cascading Variables Module Level 1.
• 2014 — первая реализация по спецификации в Chrome и Firefox.
• 2015 — W3C Candidate Recommendation.
• 2016 — массовое внедрение в браузерах.
![Page 7: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/7.jpg)
Преимущества переменных CSS• Работают в runtime и доступны для чтения и изменения.
• Существуют в DOM'е и ограничены областью видимости узла.
• Наследуются до последнего потомка узла DOM!
![Page 8: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/8.jpg)
Переменные Пользовательские свойства CSSПользователькое свойство
Особая разновидность свойств CSS с
префиксом -- , объявляющим имя
переменной, и заданным значением.
--Variable: value;
Переменная
Функция CSS, связывающая идентификатор --
variable и его значение.
var(--Variable);
![Page 9: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/9.jpg)
V
V
Переменные Пользовательские свойства CSSПользователькое свойство
Особая разновидность свойств CSS с
префиксом -- , объявляющим имя
переменной, и заданным значением.
-- ariable: value;
Переменная
Функция CSS, связывающая идентификатор --
variable и его значение.
var(-- ariable);
![Page 10: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/10.jpg)
Поддержка в браузерах
PostCSS-костыль IE/Edge.
![Page 12: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/12.jpg)
Область видимостиSASS
$variable: value;
CSS
:root {
--variable: value;
}
01.
02.
03.
01.
02.
03.
![Page 13: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/13.jpg)
:root {
}
Область видимостиSASS
$variable: value;
CSS
--variable: value;
01.
02.
03.
01.
02.
03.
![Page 14: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/14.jpg)
html {
}
Область видимостиSASS
$variable: value;
CSS
:root {
--variable: value;
}
Альтернативная запись:
--variable: value;
01.
02.
03.
01.
02.
03.
01.
02.
03.
![Page 15: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/15.jpg)
;!global
Область видимостиSASS
$variable: value;
Глобальная из локальной:
selector {
$variable: value
}
CSS
:root {
--variable: value;
}
Альтернативная запись:
html {
--variable: value;
}
01.
02.
03.
01.
02.
03.
04.
01.
02.
03.
01.
02.
03.
![Page 16: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/16.jpg)
Ограничение области видимостиSASS
selector {
$variable: value;
}
CSS
selector {
--variable: value;
}
А также:
• вложенный селектор;
• @mixin.
А также:
• псевдокласс;
• @media.
01.
02.
03.
01.
02.
03.
![Page 17: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/17.jpg)
СинтаксисSASS
Объявление:
$variable: value;
Вызов:
selector {
property: $variable;
}
CSS
Объявление:
:root {
--variable: value;
}
Вызов:
selector {
property: var(--variable);
}
01.
02.
03.
01.
02.
03.
01.
02.
03.
01.
02.
03.
![Page 18: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/18.jpg)
$variable: value;
selector {
property: $variable;
}
Голосуем за вариант SASSSASS
Объявление:
Вызов:
CSS
Объявление:
:root {
--variable: value;
}
Вызов:
selector {
property: var(--variable);
}
01.
02.
03.
01.
02.
03.
01.
02.
03.
01.
02.
03.
![Page 19: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/19.jpg)
:root {
--variable: value;
}
selector {
property: var(--variable);
}
Голосуем за вариант CSSSASS
Объявление:
$variable: value;
Вызов:
selector {
property: $variable;
}
CSS
Объявление:
Вызов:
01.
02.
03.
01.
02.
03.
01.
02.
03.
01.
02.
03.
![Page 20: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/20.jpg)
Причины выбранного синтаксисаЕсли бы мы использовали символ "$" для переменных, то не смогли бы его использовать для
будущих новых вещей, подобных на переменные.
Таб Аткинс, Let's Talk about CSS Variables
На самом деле:
• совместимость с препроцессорами;
• нативные "грамматика" и "пунктуация" CSS.
“
![Page 21: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/21.jpg)
Динамичность переменных
![Page 22: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/22.jpg)
all-in-one.css
Один большой CSSHTML
<head>
<link rel="stylesheet" href=" ">
</head>
<body>
<div class="block">…</>
…
</body>
01.
02.
03.
04.
05.
06.
07.
![Page 23: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/23.jpg)
Много мелких CSSHTML
<head>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="block.css">
…
</head>
<body>
<div class="block">…</>
…
</body>
01.
02.
03.
04.
05.
06.
07.
08.
09.
![Page 24: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/24.jpg)
main.css
Много мелких CSSHTML
<head>
<link rel="stylesheet" href=" ">
<link rel="stylesheet" href="block.css">
…
</head>
<body>
<div class="block">…</>
…
</body>
01.
02.
03.
04.
05.
06.
07.
08.
09.
![Page 25: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/25.jpg)
block.css
Много мелких CSSHTML
<head>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href=" ">
…
</head>
<body>
<div class="block">…</>
…
</body>
01.
02.
03.
04.
05.
06.
07.
08.
09.
![Page 26: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/26.jpg)
block.css
Много мелких CSSHTML
<head>
<link rel="stylesheet" href="main.css">
…
</head>
<body>
<link rel="stylesheet" href=" ">
<div class="block">…</>
…
</body>
01.
02.
03.
04.
05.
06.
07.
08.
09.
![Page 27: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/27.jpg)
Блокировка отображенияHTML
<head>
<link
rel="stylesheet"
href="main.css">
</head>
main.css
:root {
--block-display: none;
}
.block {
display: var(--block-display);
}
01.
02.
03.
04.
05.
01.
02.
03.
04.
05.
06.
07.
![Page 28: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/28.jpg)
main.css
Блокировка отображенияHTML
<head>
<link
rel="stylesheet"
href=" ">
</head>
main.css
:root {
--block-display: none;
}
.block {
display: var(--block-display);
}
01.
02.
03.
04.
05.
01.
02.
03.
04.
05.
06.
07.
![Page 29: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/29.jpg)
none
display
Блокировка отображенияHTML
<head>
<link
rel="stylesheet"
href="main.css">
</head>
main.css
:root {
--block-display: ;
}
.block {
: var(--block-display);
}
01.
02.
03.
04.
05.
01.
02.
03.
04.
05.
06.
07.
![Page 30: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/30.jpg)
block.css
Снятие блокировкиHTML
<body>
<link
rel="stylesheet"
href=" ">
<div class="block">
…</div>
</body>
block.css
.block {
--block-display: block;
}
01.
02.
03.
04.
05.
06.
07.
01.
02.
03.
![Page 31: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/31.jpg)
block
Снятие блокировкиHTML
<body>
<link
rel="stylesheet"
href="block.css">
<div class="block">
…</div>
</body>
block.css
.block {
--block-display: ;
}
01.
02.
03.
04.
05.
06.
07.
01.
02.
03.
![Page 32: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/32.jpg)
Переменные в @media
![Page 33: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/33.jpg)
Переменные в @mediaCSS
:root {
--gutter: 1em;
}
.сontainer {
padding: var(--gutter);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
![Page 34: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/34.jpg)
1em
2em
Переменные в @mediaCSS
:root {
--gutter: ;
}
.сontainer {
padding: var(--gutter);
}
@media (min-width: 1200px) {
:root { --gutter: ; }
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
09.
![Page 35: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/35.jpg)
1em
2em
1em
2em
Переменные в @mediaCSS
:root {
--gutter: ;
}
.сontainer {
padding: var(--gutter);
}
@media (min-width: 1200px) {
:root { --gutter: ; }
}
CSS глазами браузера
.сontainer {
padding: ;
}
@media (min-width: 1200px) {
.сontainer {
padding: ;
}
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
01.
02.
03.
04.
05.
06.
07.
08.
09.
![Page 36: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/36.jpg)
1em
Переменные в @media (SASS)SASS
$gutter: 1em;
.сontainer {
padding: $gutter;
}
@media (min-width: 1200px) {
$gutter: 2em;
}
CSS
.сontainer {
padding: ;
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
01.
02.
03.
![Page 37: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/37.jpg)
@media (min-width: 1200px) {
$gutter: 2em;
}
1em
Переменные в @media (SASS)SASS
$gutter: 1em;
.сontainer {
padding: $gutter;
}
CSS
.сontainer {
padding: ;
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
01.
02.
03.
![Page 38: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/38.jpg)
Наследованиепеременных
![Page 39: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/39.jpg)
button
Наследование переменныхCSS
:root {
--main-color: black;
}
{
background:
var(--main-color);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
![Page 40: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/40.jpg)
black
white
black
white
Наследование переменныхCSS
:root {
--main-color: ;
}
button {
background:
var(--main-color);
}
.black-box {
--main-color: ;
}
CSS глазами браузера
button {
background: ;
}
.black-box button {
background: ;
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
01.
02.
03.
04.
05.
06.
07.
![Page 41: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/41.jpg)
Каскад? Это шутка?
![Page 42: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/42.jpg)
Принцип открытости/закрытостиПрограммные сущности (классы, модули, функции и т.д.) должны быть открыты для расширения,
но закрыты для изменения.
Плохо
.button {
background: black;
}
.header .button {
background: white;
}
Хорошо
.button {
background: var(--main-color, black);
}
.header {
--main-color: white;
}
01.
02.
03.
04.
05.
06.
07.
01.
02.
03.
04.
05.
06.
07.
![Page 43: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/43.jpg)
black
Принцип открытости/закрытостиПрограммные сущности (классы, модули, функции и т.д.) должны быть открыты для расширения,
но закрыты для изменения.
Плохо
.button {
background: black;
}
.header .button {
background: white;
}
Хорошо
.button {
background: var(--main-color, );
}
.header {
--main-color: white;
}
01.
02.
03.
04.
05.
06.
07.
01.
02.
03.
04.
05.
06.
07.
![Page 44: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/44.jpg)
.header {
--main-color: white;
}
Принцип открытости/закрытостиПрограммные сущности (классы, модули, функции и т.д.) должны быть открыты для расширения,
но закрыты для изменения.
Плохо
.button {
background: black;
}
.header .button {
background: white;
}
Хорошо
.button {
background: var(--main-color, black);
}
01.
02.
03.
04.
05.
06.
07.
01.
02.
03.
04.
05.
06.
07.
![Page 45: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/45.jpg)
Настройки по умолчанию
![Page 46: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/46.jpg)
Локальный fallbackCSS
:root {
--main-color: initial;
}
button {
background: var(--main-color,
green);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
![Page 47: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/47.jpg)
initial
Локальный fallbackCSS
:root {
--main-color: ;
}
button {
background: var(--main-color,
green);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
![Page 48: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/48.jpg)
green
green
Локальный fallbackCSS
:root {
--main-color: initial;
}
button {
background: var(--main-color,
);
}
CSS глазами браузера
button {
background: ;
}
01.
02.
03.
04.
05.
06.
07.
08.
01.
02.
03.
![Page 49: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/49.jpg)
red red
Локальный fallbackCSS
:root {
--main-color: ;
}
button {
background: var(--main-color,
green);
}
CSS глазами браузера
button {
background: ;
}
01.
02.
03.
04.
05.
06.
07.
08.
01.
02.
03.
![Page 50: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/50.jpg)
Глобальный fallbackCSS
:root {
--main-color:
var(--main-color-custom,
green);
--main-color-custom: initial;
}
button {
background: var(--main-color);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
![Page 51: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/51.jpg)
--main-color
Глобальный fallbackCSS
:root {
:
var(--main-color-custom,
green);
--main-color-custom: initial;
}
button {
background: var(--main-color);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
![Page 52: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/52.jpg)
--main-color-custom
Глобальный fallbackCSS
:root {
--main-color:
var(--main-color-custom,
green);
: initial;
}
button {
background: var(--main-color);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
![Page 53: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/53.jpg)
--main-color-custom
--main-color-custom
Глобальный fallbackCSS
:root {
--main-color:
var( ,
green);
: initial;
}
button {
background: var(--main-color);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
![Page 54: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/54.jpg)
green
Глобальный fallbackCSS
:root {
--main-color:
var(--main-color-custom,
);
--main-color-custom: initial;
}
button {
background: var(--main-color);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
![Page 55: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/55.jpg)
green
green
Глобальный fallbackCSS
:root {
--main-color:
var(--main-color-custom,
);
--main-color-custom: initial;
}
button {
background: var(--main-color);
}
CSS глазами браузера
button {
background: ;
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
01.
02.
03.
![Page 56: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/56.jpg)
red
red
Глобальный fallbackCSS
:root {
--main-color:
var(--main-color-custom,
green);
--main-color-custom: ;
}
button {
background: var(--main-color);
}
CSS глазами браузера
button {
background: ;
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
01.
02.
03.
![Page 57: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/57.jpg)
Fallback в SASSSASS
$color: null;
$color: green !default;
button {
background: $color;
}
CSS
01.
02.
03.
04.
05.
06.
![Page 58: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/58.jpg)
$color
$color
Fallback в SASSSASS
: null;
: green !default;
button {
background: $color;
}
CSS
01.
02.
03.
04.
05.
06.
![Page 59: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/59.jpg)
null
Fallback в SASSSASS
$color: ;
$color: green !default;
button {
background: $color;
}
CSS
01.
02.
03.
04.
05.
06.
![Page 60: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/60.jpg)
!default
Fallback в SASSSASS
$color: null;
$color: green ;
button {
background: $color;
}
CSS
01.
02.
03.
04.
05.
06.
![Page 61: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/61.jpg)
green green
Fallback в SASSSASS
$color: null;
$color: !default;
button {
background: $color;
}
CSS
button {
background: ;
}
01.
02.
03.
04.
05.
06.
01.
02.
03.
![Page 62: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/62.jpg)
red
red
Fallback в SASSSASS
$color: ;
$color: green !default;
button {
background: $color;
}
CSS
button {
background: ;
}
01.
02.
03.
04.
05.
06.
01.
02.
03.
![Page 63: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/63.jpg)
I18n
![Page 64: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/64.jpg)
“aнглийскиедвойные”
![Page 65: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/65.jpg)
«французскиеёлочки»
![Page 66: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/66.jpg)
I18nHTML
<html lang="ru">
<body>
<q>Чебурашка</q>
</body>
</html>
CSS
01.
02.
03.
04.
05.
![Page 67: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/67.jpg)
lang
I18nHTML
<html ="ru">
<body>
<q>Чебурашка</q>
</body>
</html>
CSS
01.
02.
03.
04.
05.
![Page 68: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/68.jpg)
« »
“ ”
I18nHTML
<html lang="ru">
<body>
<q>Чебурашка</q>
</body>
</html>
CSS
q {
quotes: var(--quotes-l)
var(--quotes-r);
}
:root:lang(ru) {
--quotes-l: " "; --quotes-r: " ";
}
:root:lang(en) {
--quotes-l: " "; --quotes-r: " ";
}
01.
02.
03.
04.
05.
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
![Page 69: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/69.jpg)
ru
« »
« »
I18nHTML
<html lang=" ">
<body>
<q>Чебурашка</q>
</body>
</html>
Результат
Чебурашка
CSS
q {
quotes: var(--quotes-l)
var(--quotes-r);
}
:root:lang(ru) {
--quotes-l: " "; --quotes-r: " ";
}
:root:lang(en) {
--quotes-l: "“"; --quotes-r: "”";
}
01.
02.
03.
04.
05.
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
![Page 70: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/70.jpg)
en
“ ”
“ ”
I18nHTML
<html lang=" ">
<body>
<q>Чебурашка</q>
</body>
</html>
Результат
Чебурашка
CSS
q {
quotes: var(--quotes-l)
var(--quotes-r);
}
:root:lang(ru) {
--quotes-l: "«"; --quotes-r: "»";
}
:root:lang(en) {
--quotes-l: " "; --quotes-r: " ";
}
01.
02.
03.
04.
05.
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
![Page 71: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/71.jpg)
Вычисляемыезначения
![Page 72: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/72.jpg)
Вычисляемые значенияCSS
:root {
--line-height: 1.5;
}
p {
margin-bottom:
var(--line-height)rem;
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
![Page 73: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/73.jpg)
margin-bottom
Вычисляемые значенияCSS
:root {
--line-height: 1.5;
}
p {
:
var(--line-height)rem;
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
![Page 74: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/74.jpg)
--line-height: 1.5;
Вычисляемые значенияCSS
:root {
}
p {
margin-bottom:
var(--line-height)rem;
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
![Page 75: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/75.jpg)
rem
1.5 rem
Вычисляемые значенияCSS
:root {
--line-height: 1.5;
}
p {
margin-bottom:
var(--line-height) ;
}
CSS глазами браузера
p {
margin-bottom: ;
}
01.
02.
03.
04.
05.
06.
07.
08.
01.
02.
03.
![Page 76: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/76.jpg)
Вычисляемые значенияCSS
:root {
--line-height: 1.5;
}
p {
margin-bottom:
calc(var(--line-height) *
1rem);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
09.
![Page 77: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/77.jpg)
var(--line-height)
Вычисляемые значенияCSS
:root {
--line-height: 1.5;
}
p {
margin-bottom:
calc( *
1rem);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
09.
![Page 78: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/78.jpg)
1rem
Вычисляемые значенияCSS
:root {
--line-height: 1.5;
}
p {
margin-bottom:
calc(var(--line-height) *
);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
09.
![Page 79: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/79.jpg)
1rem
1rem
Вычисляемые значенияCSS
:root {
--line-height: 1.5;
}
p {
margin-bottom:
calc(var(--line-height) *
);
}
CSS глазами браузера
p {
margin-bottom: ;
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
01.
02.
03.
![Page 80: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/80.jpg)
Цветовые схемы и SVG
![Page 81: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/81.jpg)
Цветовые схемы и SVGSVG
<svg height="100" width="100">
<circle cx="50" cy="50"
r="50"
fill="red" />
</svg>
01.
02.
03.
04.
05.
![Page 82: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/82.jpg)
red
Цветовые схемы и SVGSVG
<svg height="100" width="100">
<circle cx="50" cy="50"
r="50"
fill=" " />
</svg>
01.
02.
03.
04.
05.
![Page 83: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/83.jpg)
--main-color
--main-color
Цветовые схемы и SVGSVG
<svg height="100" width="100">
<circle cx="50" cy="50"
r="50"
fill="var( )" />
</svg>
CSS
:root {
:
var(--main-color-custom, green);
--main-color-custom: red;
}
01.
02.
03.
04.
05.
01.
02.
03.
04.
05.
![Page 84: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/84.jpg)
green
Цветовые схемы и SVGSVG
<svg height="100" width="100">
<circle cx="50" cy="50"
r="50"
fill="var(--main-color)" />
</svg>
CSS
:root {
--main-color:
var(--main-color-custom, );
--main-color-custom: red;
}
01.
02.
03.
04.
05.
01.
02.
03.
04.
05.
![Page 85: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/85.jpg)
--main-color-custom
Цветовые схемы и SVGSVG
<svg height="100" width="100">
<circle cx="50" cy="50"
r="50"
fill="var(--main-color)" />
</svg>
CSS
:root {
--main-color:
var(--main-color-custom, green);
: red;
}
01.
02.
03.
04.
05.
01.
02.
03.
04.
05.
![Page 86: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/86.jpg)
red red
Цветовые схемы и SVGSVG глазами браузера
<svg height="100" width="100">
<circle cx="50" cy="50"
r="50"
fill=" " />
</svg>
CSS
:root {
--main-color:
var(--main-color-custom, green);
--main-color-custom: ;
}
01.
02.
03.
04.
05.
01.
02.
03.
04.
05.
![Page 87: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/87.jpg)
JavaScript
![Page 88: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/88.jpg)
API CSSVariablesMapel.style.var.get('variable');
el.style.var.has('variable');
el.style.var.set('variable', 'value');
el.style.var.delete('variable');
01.
02.
03.
04.
![Page 89: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/89.jpg)
get
has
set
delete
API CSSVariablesMapel.style.var. ('variable');
el.style.var. ('variable');
el.style.var. ('variable', 'value');
el.style.var. ('variable');
01.
02.
03.
04.
![Page 90: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/90.jpg)
API CSSVariablesMapel.style.var.get('variable');
el.style.var.has('variable');
el.style.var.set('variable', 'value');
el.style.var.delete('variable');
API удалено из стандарта в поисках лучшего решения.
01.
02.
03.
04.
![Page 91: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/91.jpg)
getPropertyValue
setProperty
removeProperty
API CSSStyleDeclarationgetComputedStyle(document.documentElement). ('--variable');
element.style. ('--variable', 'value');
element.style. ('--variable');
01.
02.
03.
![Page 92: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/92.jpg)
'var(--anotherVariable, "fallback")
API CSSStyleDeclarationgetComputedStyle(document.documentElement).getPropertyValue('--variable');
element.style.setProperty('--variable', 'value');
element.style.removeProperty('--variable');
И даже так:
element.style.setProperty('--variable', ');
01.
02.
03.
![Page 93: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/93.jpg)
Проверкаподдержки
![Page 94: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/94.jpg)
Проверка поддержки в CSSCSS
@supports (--a: 0) {
/* стили с поддержкой переменных */
}
@supports not (--a: 0) {
/* стили без поддержки переменных */
}
01.
02.
03.
04.
05.
06.
07.
![Page 95: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/95.jpg)
@supports (--a: 0) {
}
Проверка поддержки в CSSCSS
/* стили с поддержкой переменных */
@supports not (--a: 0) {
/* стили без поддержки переменных */
}
01.
02.
03.
04.
05.
06.
07.
![Page 96: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/96.jpg)
@supports not (--a: 0) {
}
Проверка поддержки в CSSCSS
@supports (--a: 0) {
/* стили с поддержкой переменных */
}
/* стили без поддержки переменных */
01.
02.
03.
04.
05.
06.
07.
![Page 97: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/97.jpg)
Проверка поддержки в CSSCSS
@supports (--a: 0) {
/* стили с поддержкой переменных */
}
@supports not (--a: 0) {
/* стили без поддержки переменных */
}
Не работает в IE!
01.
02.
03.
04.
05.
06.
07.
![Page 98: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/98.jpg)
Проверка поддержки в JSCSS
if (window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)) {
// сценарии с поддержкой переменных
} else {
// сценарии бех поддержки переменных
}
01.
02.
03.
04.
05.
![Page 99: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/99.jpg)
Ограничения переменных CSS• нельзя использовать в:
• в именах обычных свойств CSS: var(--side): 10px ;
• в значениях медиа-запросов: @media screen and (min-width: var(--desktop-
breakpoint) { } ;
• в подстановке URL: url(var(--image-url)) ;
• будьте осторожны с вычислениями calc() :
• со сложными вычислениями в принципе;
• в Chrome с умножением/делением дробных значений;
• в Firefox с вычислениями внутри функций rgba() .
• нельзя одномоментно cбрасывать значения всех переменных: --: initial .
![Page 100: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/100.jpg)
Таб Аткинс Работает над:
• CSS Nesting Module Level 3
• CSS @apply Rule
• CSS When/Else Rules
![Page 101: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/101.jpg)
@mixin @apply
![Page 102: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/102.jpg)
@applyCSS
:root {
--clearfix: {
display: table;
clear: both;
content: '';
}
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
![Page 103: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/103.jpg)
:root {
}
@applyCSS
--clearfix: {
display: table;
clear: both;
content: '';
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
![Page 104: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/104.jpg)
--clearfix
@applyCSS
:root {
: {
display: table;
clear: both;
content: '';
}
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
![Page 105: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/105.jpg)
display: table;
clear: both;
content: '';
@applyCSS
:root {
--clearfix: {
}
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
![Page 106: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/106.jpg)
@apply --clearfix;
display: table;
clear: both;
content: '';
@applyCSS
:root {
--clearfix: {
display: table;
clear: both;
content: '';
}
}
.box:after {
}
CSS глазами браузера
.box:after {
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
01.
02.
03.
04.
05.
![Page 108: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/108.jpg)
@custom-selector
![Page 109: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/109.jpg)
@custom-selectorCSS
article h1 + p,
article h2 + p,
article h3 + p,
article h4 + p,
article h5 + p,
article h6 + p {
margin-top: 0;
}
CSS
@custom-selector :--heading {
expansion: h1, h2, h3,
h4, h5, h6;
}
01.
02.
03.
04.
05.
06.
07.
08.
01.
02.
03.
04.
![Page 110: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/110.jpg)
@custom-selector
@custom-selectorCSS
article h1 + p,
article h2 + p,
article h3 + p,
article h4 + p,
article h5 + p,
article h6 + p {
margin-top: 0;
}
CSS
:--heading {
expansion: h1, h2, h3,
h4, h5, h6;
}
01.
02.
03.
04.
05.
06.
07.
08.
01.
02.
03.
04.
![Page 111: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/111.jpg)
:--heading
@custom-selectorCSS
article h1 + p,
article h2 + p,
article h3 + p,
article h4 + p,
article h5 + p,
article h6 + p {
margin-top: 0;
}
CSS
@custom-selector {
expansion: h1, h2, h3,
h4, h5, h6;
}
01.
02.
03.
04.
05.
06.
07.
08.
01.
02.
03.
04.
![Page 112: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/112.jpg)
expansion: h1, h2, h3,
h4, h5, h6;
@custom-selectorCSS
article h1 + p,
article h2 + p,
article h3 + p,
article h4 + p,
article h5 + p,
article h6 + p {
margin-top: 0;
}
CSS
@custom-selector :--heading {
}
01.
02.
03.
04.
05.
06.
07.
08.
01.
02.
03.
04.
![Page 113: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/113.jpg)
:--heading
@custom-selectorCSS
article h1 + p,
article h2 + p,
article h3 + p,
article h4 + p,
article h5 + p,
article h6 + p {
margin-top: 0;
}
CSS
@custom-selector :--heading {
expansion: h1, h2, h3,
h4, h5, h6;
}
article + p {
margin-top: 0;
}
01.
02.
03.
04.
05.
06.
07.
08.
01.
02.
03.
04.
05.
06.
07.
08.
![Page 114: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/114.jpg)
@custom-selectorCSS
article h1 + p,
article h2 + p,
article h3 + p,
article h4 + p,
article h5 + p,
article h6 + p {
margin-top: 0;
}
CSS
@custom-selector :--heading {
expansion: h1, h2, h3,
h4, h5, h6;
}
article :--heading + p {
margin-top: 0;
}
Полифил PostCSS Custom Selectors.
01.
02.
03.
04.
05.
06.
07.
08.
01.
02.
03.
04.
05.
06.
07.
08.
![Page 115: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/115.jpg)
Подытоживая• Новые способы решения старых задач.
• Решение невозможных для препроцессоров задач.
• Расширение компонентов через наследование.
• Широкая поддержка в браузерах.
• Простой нативный способ взаимодействия с JS, SVG и т.п.
• Начало конца эры препроцессоров :-P
![Page 116: пользовательские свойства как основа архитектуры CSS](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f379101a28ab257d8b4573/html5/thumbnails/116.jpg)
Спасибо за внимание! Вопросы? Павел Ловцевич
CTO @ LOVATA
@zigzag_mcquack