пользовательские свойства как основа архитектуры CSS

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

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

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

Преимущества переменныхПеременные — основа современного правильно сконструированного проекта.

Карен Менезес, Variables: The Backbone Of CSS Architecture

• Модульность.

• Уменьшение повторяемости.

• Сокращение объема.

• Повышение читаемости.

• Стайлгайд.

Переменные. Когда и какие?Условие

• Значение встречается в коде два и более раз.

• Значение в будущем может изменяться.

Тип

• Измерения (размеры, отступы, радиусы скругления и т.п.).

• Цветовые схемы.

• Типографика.

• Наборы иконок.

• Брейкпойнты.

Переменные в 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 — массовое внедрение в браузерах.

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

• Существуют в DOM'е и ограничены областью видимости узла.

• Наследуются до последнего потомка узла DOM!

Переменные Пользовательские свойства CSSПользователькое свойство

Особая разновидность свойств CSS с

префиксом -- , объявляющим имя

переменной, и заданным значением.

--Variable: value;

Переменная

Функция CSS, связывающая идентификатор --

variable и его значение.

var(--Variable);

Переменные Пользовательские свойства CSSПользователькое свойство

Особая разновидность свойств CSS с

префиксом -- , объявляющим имя

переменной, и заданным значением.

-- ariable: value;

Переменная

Функция CSS, связывающая идентификатор --

variable и его значение.

var(-- ariable);

Поддержка в браузерах

PostCSS-костыль IE/Edge.

Проголосовать за внедрение в Edge

http://bit.ly/css-var-edge

Область видимостиSASS

$variable: value;

:root {

--variable: value;

:root {

$variable: value;

--variable: value;

html {

$variable: value;

:root {

--variable: value;

Альтернативная запись:

--variable: value;

;!global

$variable: value;

Глобальная из локальной:

selector {

$variable: value

:root {

--variable: value;

Альтернативная запись:

html {

--variable: value;

Ограничение области видимостиSASS

selector {

$variable: value;

selector {

--variable: value;

А также:

• вложенный селектор;

• @mixin.

А также:

• псевдокласс;

• @media.

СинтаксисSASS

Объявление:

$variable: value;

Вызов:

selector {

property: $variable;

:root {

--variable: value;

Вызов:

selector {

property: var(--variable);

$variable: value;

selector {

Голосуем за вариант SASSSASS

Вызов:

:root {

--variable: value;

Вызов:

selector {

:root {

--variable: value;

selector {

Голосуем за вариант CSSSASS

$variable: value;

Вызов:

selector {

Вызов:

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

будущих новых вещей, подобных на переменные.

Таб Аткинс, Let's Talk about CSS Variables

На самом деле:

• совместимость с препроцессорами;

• нативные "грамматика" и "пунктуация" CSS.

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

all-in-one.css

Один большой CSSHTML

<head>

</head>

<body>

</body>

Много мелких CSSHTML

<head>

</head>

<body>

</body>

main.css

<head>

</head>

<body>

</body>

block.css

<head>

</head>

<body>

</body>

block.css

<head>

</head>

<body>

</body>

Блокировка отображенияHTML

<head>

rel="stylesheet"

href="main.css">

</head>

main.css

:root {

--block-display: none;

.block {

display: var(--block-display);

main.css

<head>

rel="stylesheet"

href=" ">

</head>

main.css

:root {

--block-display: none;

.block {

display: var(--block-display);

display

<head>

rel="stylesheet"

href="main.css">

</head>

main.css

:root {

--block-display: ;

.block {

: var(--block-display);

block.css

Снятие блокировкиHTML

<body>

rel="stylesheet"

href=" ">

…</div>

</body>

block.css

.block {

--block-display: block;

Снятие блокировкиHTML

<body>

rel="stylesheet"

href="block.css">

…</div>

</body>

block.css

.block {

--block-display: ;

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

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

:root {

--gutter: 1em;

.сontainer {

padding: var(--gutter);

CSS глазами браузера

:root {

--gutter: ;

.сontainer {

@media (min-width: 1200px) {

:root { --gutter: ; }

:root {

--gutter: ;

.сontainer {

:root { --gutter: ; }

.сontainer {

padding: ;

.сontainer {

padding: ;

Переменные в @media (SASS)SASS

$gutter: 1em;

.сontainer {

padding: $gutter;

$gutter: 2em;

.сontainer {

padding: ;

$gutter: 2em;

Переменные в @media (SASS)SASS

$gutter: 1em;

.сontainer {

padding: $gutter;

.сontainer {

padding: ;

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

button

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

:root {

--main-color: black;

background:

var(--main-color);

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

:root {

--main-color: ;

button {

background:

var(--main-color);

.black-box {

--main-color: ;

button {

background: ;

.black-box button {

background: ;

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

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

но закрыты для изменения.

Плохо

.button {

background: black;

.header .button {

background: white;

Хорошо

.button {

background: var(--main-color, black);

.header {

--main-color: white;

Плохо

.button {

background: black;

.header .button {

background: white;

Хорошо

.button {

background: var(--main-color, );

.header {

Плохо

.button {

background: black;

.header .button {

background: white;

Хорошо

.button {

background: var(--main-color, black);

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

Локальный fallbackCSS

:root {

--main-color: initial;

button {

background: var(--main-color,

green);

initial

:root {

--main-color: ;

button {

green);

:root {

--main-color: initial;

button {

background: ;

red red

:root {

--main-color: ;

button {

green);

button {

background: ;

Глобальный fallbackCSS

:root {

--main-color:

var(--main-color-custom,

green);

--main-color-custom: initial;

button {

background: var(--main-color);

--main-color

:root {

green);

button {

--main-color-custom

:root {

--main-color:

green);

: initial;

button {

--main-color-custom

:root {

--main-color:

var( ,

green);

: initial;

button {

:root {

--main-color:

button {

:root {

--main-color:

button {

background: ;

:root {

--main-color:

green);

--main-color-custom: ;

button {

background: ;

Fallback в SASSSASS

$color: null;

$color: green !default;

button {

background: $color;

$color

: null;

: green !default;

button {

background: $color;

$color: ;

button {

background: $color;

!default

$color: null;

$color: green ;

button {

background: $color;

green green

$color: null;

$color: !default;

button {

background: $color;

button {

background: ;

$color: ;

button {

background: $color;

button {

background: ;

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

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

I18nHTML

<body>

<q>Чебурашка</q>

</body>

</html>

I18nHTML

<body>

</body>

</html>

“ ”

I18nHTML

<body>

</body>

</html>

quotes: var(--quotes-l)

var(--quotes-r);

:root:lang(ru) {

--quotes-l: " "; --quotes-r: " ";

:root:lang(en) {

I18nHTML

<body>

</body>

</html>

Результат

Чебурашка

var(--quotes-r);

:root:lang(ru) {

:root:lang(en) {

--quotes-l: "“"; --quotes-r: "”";

“ ”

I18nHTML

<body>

</body>

</html>

Результат

Чебурашка

var(--quotes-r);

:root:lang(ru) {

--quotes-l: "«"; --quotes-r: "»";

:root:lang(en) {

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

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

:root {

--line-height: 1.5;

margin-bottom:

var(--line-height)rem;

margin-bottom

:root {

--line-height: 1.5;

:root {

margin-bottom:

1.5 rem

:root {

--line-height: 1.5;

margin-bottom:

var(--line-height) ;

margin-bottom: ;

:root {

--line-height: 1.5;

margin-bottom:

calc(var(--line-height) *

1rem);

var(--line-height)

:root {

--line-height: 1.5;

margin-bottom:

calc( *

1rem);

:root {

--line-height: 1.5;

margin-bottom:

:root {

--line-height: 1.5;

margin-bottom:

margin-bottom: ;

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

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

<circle cx="50" cy="50"

r="50"

fill="red" />

</svg>

r="50"

fill=" " />

</svg>

--main-color

r="50"

fill="var( )" />

</svg>

:root {

var(--main-color-custom, green);

--main-color-custom: red;

r="50"

fill="var(--main-color)" />

</svg>

:root {

--main-color:

var(--main-color-custom, );

--main-color-custom: red;

--main-color-custom

r="50"

fill="var(--main-color)" />

</svg>

:root {

--main-color:

: red;

red red

Цветовые схемы и SVGSVG глазами браузера

r="50"

fill=" " />

</svg>

:root {

--main-color:

--main-color-custom: ;

JavaScript

API CSSVariablesMapel.style.var.get('variable');

el.style.var.has('variable');

el.style.var.set('variable', 'value');

el.style.var.delete('variable');

delete

API CSSVariablesMapel.style.var. ('variable');

el.style.var. ('variable');

el.style.var. ('variable', 'value');

el.style.var. ('variable');

API CSSVariablesMapel.style.var.get('variable');

el.style.var.has('variable');

el.style.var.set('variable', 'value');

el.style.var.delete('variable');

API удалено из стандарта в поисках лучшего решения.

getPropertyValue

setProperty

removeProperty

API CSSStyleDeclarationgetComputedStyle(document.documentElement). ('--variable');

element.style. ('--variable', 'value');

element.style. ('--variable');

'var(--anotherVariable, "fallback")

API CSSStyleDeclarationgetComputedStyle(document.documentElement).getPropertyValue('--variable');

element.style.setProperty('--variable', 'value');

element.style.removeProperty('--variable');

И даже так:

element.style.setProperty('--variable', ');

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

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

@supports (--a: 0) {

/* стили с поддержкой переменных */

@supports not (--a: 0) {

/* стили без поддержки переменных */

Не работает в IE!

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

if (window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)) {

// сценарии с поддержкой переменных

} else {

// сценарии бех поддержки переменных

Ограничения переменных CSS• нельзя использовать в:

• в именах обычных свойств CSS: var(--side): 10px ;

• в значениях медиа-запросов: @media screen and (min-width: var(--desktop-

breakpoint) { } ;

• в подстановке URL: url(var(--image-url)) ;

• будьте осторожны с вычислениями calc() :

• со сложными вычислениями в принципе;

• в Chrome с умножением/делением дробных значений;

• в Firefox с вычислениями внутри функций rgba() .

• нельзя одномоментно cбрасывать значения всех переменных: --: initial .

Таб Аткинс Работает над:

• CSS Nesting Module Level 3

• CSS @apply Rule

• CSS When/Else Rules

@mixin @apply

@applyCSS

:root {

--clearfix: {

display: table;

clear: both;

content: '';

:root {

@applyCSS

--clearfix: {

display: table;

clear: both;

content: '';

--clearfix

@applyCSS

:root {

display: table;

clear: both;

content: '';

display: table;

clear: both;

content: '';

@applyCSS

:root {

--clearfix: {

@apply --clearfix;

display: table;

clear: both;

content: '';

@applyCSS

:root {

--clearfix: {

display: table;

clear: both;

content: '';

.box:after {

chrome://flags

@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;

@custom-selector :--heading {

expansion: h1, h2, h3,

h4, h5, h6;

@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;

:--heading {

h4, h5, h6;

:--heading

@custom-selectorCSS

article h1 + p,

article h2 + p,

article h3 + p,

article h4 + p,

article h5 + p,

article h6 + p {

margin-top: 0;

@custom-selector {

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;

:--heading

@custom-selectorCSS

article h1 + p,

article h2 + p,

article h3 + p,

article h4 + p,

article h5 + p,

article h6 + p {

margin-top: 0;

h4, h5, h6;

article + p {

margin-top: 0;

@custom-selectorCSS

article h1 + p,

article h2 + p,

article h3 + p,

article h4 + p,

article h5 + p,

article h6 + p {

margin-top: 0;

h4, h5, h6;

article :--heading + p {

margin-top: 0;

Полифил PostCSS Custom Selectors.

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

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

• Расширение компонентов через наследование.

• Широкая поддержка в браузерах.

• Простой нативный способ взаимодействия с JS, SVG и т.п.

• Начало конца эры препроцессоров :-P

Спасибо за внимание! Вопросы? Павел Ловцевич

CTO @ LOVATA

@zigzag_mcquack

p.lovtsevich@lovata.com

Не забудьте проголосовать!

http://bit.ly/css-var-edge

пользовательские свойства как основа архитектуры CSS

Software

Первоэлементы архитектуры

презентация архитектуры Iv_еэфм

шедевры мировой архитектуры

Выбор зрителей: пользовательские предпочтения и тенденция развития тв

Денис Тучин - Пользовательские истории в Agile-проектах

виды архитектуры

Пользовательские тренировки

История русской архитектуры

ДЕПАРТАМЕНТ СТРОИТЕЛЬСТВА, АРХИТЕКТУРЫ, …

Изыски бренд архитектуры

Пользовательские истории

Проект архитектуры ИИСВВТ

Моделирование корпоративной архитектуры

Смолина Пользовательские интерфейсы систем лингвистической разметки текстов

Археология Архитектуры 2003

Основы современной архитектуры

Московская школа архитектуры

Пользовательские интерфейсы почтовых клиентов

«Пользовательские переменные. Тонкие настройки Google Analytics». Андрей Осипов

Моделирование архитектуры предприятия