Переменные в CSS. CSS Custom Properties или CSS Variables?

Показать описание

Сергей Фомин, преподаватель Компьютерной школы Hillel, в своём докладе рассказывает о том, что такое переменные в CSS, а так же о приёмах, при которых кастомные CSS-свойства делают вёрстку более удобной и упорядоченной. Возможно, уже совсем скоро возможности нативного CSS смогут заменить препроцессоры, к которым мы так привыкли. Первый шаг в этом направлении уже сделан, так как реализация CSS Custom Properties полностью заменяет одну из "фишек" препроцессоров - переменные. Теперь есть возможность использовать переменные прямо в браузере, а не только до компиляции.

00:00 Вступление
02:28 Что такое переменные
04:10 Препроцессоры
08:05 CSS Custom Properties или CSS Variables?
08:54 Как работают CSS-переменные
10:25 Глобальное объявление переменных
11:14 Отличие CSS-переменных от переменных в препроцессорах
12:33 Наследование переменных
13:45 Область видимости
14:28 Задача. Обработка не валидных значений в кастомных свойствах
17:31 Математика в препроцессорах и в CSS
18:36 Эмуляция несуществующих свойств с помощью Custom Properties
20:01 Поддержка браузерами
21:15 Создание цветовых тем для страницы с помощью css переменных
26:24 Взаимодействие с переменными с помощью JavaScript
28:28 Использование переменных в отзывчивой верстке
31:30 SVG
32:16 Анимации
33:26 Работа с цветами. HSL + CSS Variables
36:24 Преимущества препроцессоров. Аналогия препроцессорам в чистом CSS
40:46 Комбинация препроцессоров и CSS-переменных
41:39 Выводы
43:19 Вопросы
44:50 Скорость обработки CSS-переменных браузером
47:04 Баги или фичи переменных в CSS
47:47 DOS-атака с помощью CSS-переменных
48:39 Анимация кастомных свойств в CSS. Нестрогая типизация CSS-переменных.
50:06 Использование переменных в условиях медиа-выражений
50:51 Последовательность перезаписи конфликтующих переменных
51:28 Обработка не валидных значений переменных в составных CSS-свойствах
53:08 Трения в команде по поводу использования Custom Properties

Компьютерная Школа Hillel