Пользовательские свойства как основа архитектуры CSS / Павел Ловцев...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Пользовательские свойства
как основа архитектуры CSS
Павел Ловцевич, LOVATA

Препроцессоры

Популярные возможности

Преимущества переменных
Переменные — основа современного правильно сконструированного проекта.
Карен Менезес,Variables: Th...

Переменные.Когда и какие?
Условие
• Значение встречается в коде два и более раз.
• Значение в будущем может изменяться.
Ти...

Переменные в CSS
• 2008 — первая реализация в Safari.
• 2012 — CSS Variables Module Level 1.
• 2013 — CSS Custom Propertie...

Преимущества переменных CSS
• Работают в runtime и доступны для чтения и изменения.
• Существуют в DOM'е и ограничены обла...

Переменные Пользовательские свойства CSS
Пользователькое свойство
Особая разновидность свойств CSS с
префиксом -- , объявл...

V
V
Переменные Пользовательские свойства CSS
Пользователькое свойство
Особая разновидность свойств CSS с
префиксом -- , об...

Поддержка в браузерах
PostCSS-костыль IE/Edge.

Проголосовать за внедрение в Edge
http://bit.ly/css-var-edge

Область видимости
SASS
$variable: value;
CSS
:root {
--variable: value;
}
01.
02.
03.
01.
02.
03.

:root {
}
Область видимости
SASS
$variable: value;
CSS
--variable: value;
01.
02.
03.
01.
02.
03.

html {
}
Область видимости
SASS
$variable: value;
CSS
:root {
--variable: value;
}
Альтернативная запись:
--variable: valu...

;!global
Область видимости
SASS
$variable: value;
Глобальная из локальной:
selector {
$variable: value
}
CSS
:root {
--var...

Ограничение области видимости
SASS
selector {
$variable: value;
}
CSS
selector {
--variable: value;
}
А также:
• вложенный...

Синтаксис
SASS
Объявление:
$variable: value;
Вызов:
selector {
property: $variable;
}
CSS
Объявление:
:root {
--variable: ...

$variable: value;
selector {
property: $variable;
}
Голосуем за вариант SASS
SASS
Объявление:
Вызов:
CSS
Объявление:
:root...

:root {
--variable: value;
}
selector {
property: var(--variable);
}
Голосуем за вариант CSS
SASS
Объявление:
$variable: v...

Причины выбранного синтаксиса
Если бы мы использовали символ "$" для переменных, то не смогли бы его использовать для
буду...

Динамичность
переменных

all-in-one.css
Один большой CSS
HTML
<head>
<link rel="stylesheet" href=" ">
</head>
<body>
<div class="block">…</>
…
</bo...

Много мелких CSS
HTML
<head>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="block.css">
…
</head>
<b...

main.css
Много мелких CSS
HTML
<head>
<link rel="stylesheet" href=" ">
<link rel="stylesheet" href="block.css">
…
</head>
...

block.css
Много мелких CSS
HTML
<head>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href=" ">
…
</head>
...

block.css
Много мелких CSS
HTML
<head>
<link rel="stylesheet" href="main.css">
…
</head>
<body>
<link rel="stylesheet" hre...

Блокировка отображения
HTML
<head>
<link
rel="stylesheet"
href="main.css">
</head>
main.css
:root {
--block-display: none;...

main.css
Блокировка отображения
HTML
<head>
<link
rel="stylesheet"
href=" ">
</head>
main.css
:root {
--block-display: non...

none
display
Блокировка отображения
HTML
<head>
<link
rel="stylesheet"
href="main.css">
</head>
main.css
:root {
--block-d...

block.css
Снятие блокировки
HTML
<body>
<link
rel="stylesheet"
href=" ">
<div class="block">
…</div>
</body>
block.css
.bl...

block
Снятие блокировки
HTML
<body>
<link
rel="stylesheet"
href="block.css">
<div class="block">
…</div>
</body>
block.css...

Переменные
в @media

Переменные в @media
CSS
:root {
--gutter: 1em;
}
.сontainer {
padding: var(--gutter);
}
CSS глазами браузера
01.
02.
03.
0...

1em
2em
Переменные в @media
CSS
:root {
--gutter: ;
}
.сontainer {
padding: var(--gutter);
}
@media (min-width: 1200px) {
...

1em
2em
1em
2em
Переменные в @media
CSS
:root {
--gutter: ;
}
.сontainer {
padding: var(--gutter);
}
@media (min-width: 12...

1em
Переменные в @media (SASS)
SASS
$gutter: 1em;
.сontainer {
padding: $gutter;
}
@media (min-width: 1200px) {
$gutter: 2...

@media (min-width: 1200px) {
$gutter: 2em;
}
1em
Переменные в @media (SASS)
SASS
$gutter: 1em;
.сontainer {
padding: $gutt...

Наследование
переменных

button
Наследование переменных
CSS
:root {
--main-color: black;
}
{
background:
var(--main-color);
}
CSS глазами браузера
...

black
white
black
white
Наследование переменных
CSS
:root {
--main-color: ;
}
button {
background:
var(--main-color);
}
.b...

Каскад?
Это шутка?

Принцип открытости/закрытости
Программные сущности (классы, модули, функции и т.д.) должны быть открыты для расширения,
но...

black
Принцип открытости/закрытости
Программные сущности (классы, модули, функции и т.д.) должны быть открыты для расширен...

.header {
--main-color: white;
}
Принцип открытости/закрытости
Программные сущности (классы, модули, функции и т.д.) должн...

Настройки
по умолчанию

Локальный fallback
CSS
:root {
--main-color: initial;
}
button {
background: var(--main-color,
green);
}
CSS глазами брауз...

initial
Локальный fallback
CSS
:root {
--main-color: ;
}
button {
background: var(--main-color,
green);
}
CSS глазами брау...

green
green
Локальный fallback
CSS
:root {
--main-color: initial;
}
button {
background: var(--main-color,
);
}
CSS глазам...

red red
Локальный fallback
CSS
:root {
--main-color: ;
}
button {
background: var(--main-color,
green);
}
CSS глазами брау...

Глобальный fallback
CSS
:root {
--main-color:
var(--main-color-custom,
green);
--main-color-custom: initial;
}
button {
ba...

--main-color
Глобальный fallback
CSS
:root {
:
var(--main-color-custom,
green);
--main-color-custom: initial;
}
button {
b...

--main-color-custom
Глобальный fallback
CSS
:root {
--main-color:
var(--main-color-custom,
green);
: initial;
}
button {
b...

--main-color-custom
--main-color-custom
Глобальный fallback
CSS
:root {
--main-color:
var( ,
green);
: initial;
}
button {...

green
Глобальный fallback
CSS
:root {
--main-color:
var(--main-color-custom,
);
--main-color-custom: initial;
}
button {
b...

green
green
Глобальный fallback
CSS
:root {
--main-color:
var(--main-color-custom,
);
--main-color-custom: initial;
}
butt...

red
red
Глобальный fallback
CSS
:root {
--main-color:
var(--main-color-custom,
green);
--main-color-custom: ;
}
button {
b...

Fallback в SASS
SASS
$color: null;
$color: green !default;
button {
background: $color;
}
CSS
01.
02.
03.
04.
05.
06.

$color
$color
Fallback в SASS
SASS
: null;
: green !default;
button {
background: $color;
}
CSS
01.
02.
03.
04.
05.
06.

null
Fallback в SASS
SASS
$color: ;
$color: green !default;
button {
background: $color;
}
CSS
01.
02.
03.
04.
05.
06.

!default
Fallback в SASS
SASS
$color: null;
$color: green ;
button {
background: $color;
}
CSS
01.
02.
03.
04.
05.
06.

green green
Fallback в SASS
SASS
$color: null;
$color: !default;
button {
background: $color;
}
CSS
button {
background: ;...

red
red
Fallback в SASS
SASS
$color: ;
$color: green !default;
button {
background: $color;
}
CSS
button {
background: ;
}...

I18n

“aнглийские
двойные”

«французские
ёлочки»

I18n
HTML
<html lang="ru">
<body>
<q>Чебурашка</q>
</body>
</html>
CSS
01.
02.
03.
04.
05.

lang
I18n
HTML
<html ="ru">
<body>
<q>Чебурашка</q>
</body>
</html>
CSS
01.
02.
03.
04.
05.

« »
“ ”
I18n
HTML
<html lang="ru">
<body>
<q>Чебурашка</q>
</body>
</html>
CSS
q {
quotes: var(--quotes-l)
var(--quotes-r)...

ru
« »
« »
I18n
HTML
<html lang=" ">
<body>
<q>Чебурашка</q>
</body>
</html>
Результат
Чебурашка
CSS
q {
quotes: var(--quo...

en
“ ”
“ ”
I18n
HTML
<html lang=" ">
<body>
<q>Чебурашка</q>
</body>
</html>
Результат
Чебурашка
CSS
q {
quotes: var(--quo...

Вычисляемые
значения

Вычисляемые значения
CSS
:root {
--line-height: 1.5;
}
p {
margin-bottom:
var(--line-height)rem;
}
CSS глазами браузера
01...

margin-bottom
Вычисляемые значения
CSS
:root {
--line-height: 1.5;
}
p {
:
var(--line-height)rem;
}
CSS глазами браузера
0...

--line-height: 1.5;
Вычисляемые значения
CSS
:root {
}
p {
margin-bottom:
var(--line-height)rem;
}
CSS глазами браузера
01...

rem
1.5 rem
Вычисляемые значения
CSS
:root {
--line-height: 1.5;
}
p {
margin-bottom:
var(--line-height) ;
}
CSS глазами б...

Вычисляемые значения
CSS
:root {
--line-height: 1.5;
}
p {
margin-bottom:
calc(var(--line-height) *
1rem);
}
CSS глазами б...

var(--line-height)
Вычисляемые значения
CSS
:root {
--line-height: 1.5;
}
p {
margin-bottom:
calc( *
1rem);
}
CSS глазами ...

1rem
Вычисляемые значения
CSS
:root {
--line-height: 1.5;
}
p {
margin-bottom:
calc(var(--line-height) *
);
}
CSS глазами ...

1rem
1rem
Вычисляемые значения
CSS
:root {
--line-height: 1.5;
}
p {
margin-bottom:
calc(var(--line-height) *
);
}
CSS гла...

Цветовые
схемы
и SVG

Цветовые схемы и SVG
SVG
<svg height="100" width="100">
<circle cx="50" cy="50"
r="50"
fill="red" />
</svg>
01.
02.
03.
04...

red
Цветовые схемы и SVG
SVG
<svg height="100" width="100">
<circle cx="50" cy="50"
r="50"
fill=" " />
</svg>
01.
02.
03.
...

--main-color
--main-color
Цветовые схемы и SVG
SVG
<svg height="100" width="100">
<circle cx="50" cy="50"
r="50"
fill="var...

green
Цветовые схемы и SVG
SVG
<svg height="100" width="100">
<circle cx="50" cy="50"
r="50"
fill="var(--main-color)" />
<...

--main-color-custom
Цветовые схемы и SVG
SVG
<svg height="100" width="100">
<circle cx="50" cy="50"
r="50"
fill="var(--mai...

red red
Цветовые схемы и SVG
SVG глазами браузера
<svg height="100" width="100">
<circle cx="50" cy="50"
r="50"
fill=" " /...

JavaScript

API CSSVariablesMap
el.style.var.get('variable');
el.style.var.has('variable');
el.style.var.set('variable', 'value');
el....

get
has
set
delete
API CSSVariablesMap
el.style.var. ('variable');
el.style.var. ('variable');
el.style.var. ('variable', ...

API CSSVariablesMap
el.style.var.get('variable');
el.style.var.has('variable');
el.style.var.set('variable', 'value');
el....

getPropertyValue
setProperty
removeProperty
API CSSStyleDeclaration
getComputedStyle(document.documentElement). ('--variab...

'var(--anotherVariable, "fallback")
API CSSStyleDeclaration
getComputedStyle(document.documentElement).getPropertyValue('-...

Проверка
поддержки

Проверка поддержки в CSS
CSS
@supports (--a: 0) {
/* стили с поддержкой переменных */
}
@supports not (--a: 0) {
/* стили ...

@supports (--a: 0) {
}
Проверка поддержки в CSS
CSS
/* стили с поддержкой переменных */
@supports not (--a: 0) {
/* стили ...

@supports not (--a: 0) {
}
Проверка поддержки в CSS
CSS
@supports (--a: 0) {
/* стили с поддержкой переменных */
}
/* стил...

Проверка поддержки в CSS
CSS
@supports (--a: 0) {
/* стили с поддержкой переменных */
}
@supports not (--a: 0) {
/* стили ...

Проверка поддержки в JS
CSS
if (window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)) {
// сценарии с поддер...

Ограничения переменных CSS
• нельзя использовать в:
• в именах обычных свойств CSS: var(--side): 10px ;
• в значениях меди...

Таб Аткинс
Работает над:
• CSS Nesting Module Level 3
• CSS @apply Rule
• CSS When/Else Rules

@mixin
@apply

@apply
CSS
:root {
--clearfix: {
display: table;
clear: both;
content: '';
}
}
CSS глазами браузера
01.
02.
03.
04.
05.
06...

:root {
}
@apply
CSS
--clearfix: {
display: table;
clear: both;
content: '';
}
CSS глазами браузера
01.
02.
03.
04.
05.
06...

--clearfix
@apply
CSS
:root {
: {
display: table;
clear: both;
content: '';
}
}
CSS глазами браузера
01.
02.
03.
04.
05.
0...

display: table;
clear: both;
content: '';
@apply
CSS
:root {
--clearfix: {
}
}
CSS глазами браузера
01.
02.
03.
04.
05.
06...

@apply --clearfix;
display: table;
clear: both;
content: '';
@apply
CSS
:root {
--clearfix: {
display: table;
clear: both;...

chrome://ﬂags

@custom-selector

@custom-selector
CSS
article h1 + p,
article h2 + p,
article h3 + p,
article h4 + p,
article h5 + p,
article h6 + p {
marg...

@custom-selector
@custom-selector
CSS
article h1 + p,
article h2 + p,
article h3 + p,
article h4 + p,
article h5 + p,
arti...

:--heading
@custom-selector
CSS
article h1 + p,
article h2 + p,
article h3 + p,
article h4 + p,
article h5 + p,
article h6...

expansion: h1, h2, h3,
h4, h5, h6;
@custom-selector
CSS
article h1 + p,
article h2 + p,
article h3 + p,
article h4 + p,
ar...

:--heading
@custom-selector
CSS
article h1 + p,
article h2 + p,
article h3 + p,
article h4 + p,
article h5 + p,
article h6...

@custom-selector
CSS
article h1 + p,
article h2 + p,
article h3 + p,
article h4 + p,
article h5 + p,
article h6 + p {
marg...

Подытоживая
• Новые способы решения старых задач.
• Решение невозможных для препроцессоров задач.
• Расширение компонентов...

Спасибо за внимание! Вопросы?
Павел Ловцевич
CTO @ LOVATA
@zigzag_mcquack
p.lovtsevich@lovata.com

Не забудьте проголосовать!
http://bit.ly/css-var-edge

Share SlideShare

Facebook
Twitter
LinkedIn

Embed

Size (px)

Show related SlideShares at end

WordPress Shortcode

Link

Share
Email

Конструктор / Денис Паясь (Яндекс) by Ontico 1312 views
В погоне за производительностью. Пс... by Ontico 952 views
Angular 2 не так уж и плох... А есл... by Ontico 1911 views
Vue.js и его брат-близнец Vue-serve... by Ontico 2516 views
Библиотека UI компонентов, о которо... by Ontico 879 views
UX-дизайнер, ты ли это. Навыки прое... by Ontico 829 views

Top clipped slide

1 of 117 Ad

1 of 117 Ad