От автора: начиная с EdgeHTML 15 в Windows 10 Creators Update, Microsoft Edge представляет поддержку пользовательских CSS-свойств, нового примитивного типа значений для полностью каскадных переменных в свойствах CSS. Пользовательские CSS-свойства можно посмотреть в сборках Windows Insider Preview, начиная с EdgeHTML 15.15061. Откройте наше демо по этим свойствам, чтобы увидеть их в действии!
Что такое пользовательские CSS-свойства?
В SASS/LESS и других препроцессорах переменные появились уже довольно давно, что является одной из причин, почему в неофициальных опросах ~75% опрошенных веб-разработчиков используют эти инструменты в повседневной работе. Основной минус этих инструментов заключается в том, что, по сути, это «поиск и замена» заданного значения. То есть переменные нельзя обновить без перекомпиляции стилей.
Давайте познакомимся с пользовательскими CSS-свойствами (или CSS-переменными). Пользовательские свойства можно использовать по тому же назначению, однако у них есть плюс – эти свойства полностью каскадны, с ними можно взаимодействовать через JS, и они не требуют дополнительных действий для работы.
Как использовать пользовательские свойства
Практический пример: первичный и вторичный цвет сайта.
Профессия Frontend-разработчик PRO
Готовим Frontend-разработчиков с нуля
На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…
|
1 2 3 4 5 6 7 8 9 |
:root { --primary: #0B61A4; --secondary: #25567B; } header { background: var(--primary); border-bottom: 2px solid var(--secondary); } |
Давайте разберем код. Для объявления нового пользовательского свойства используются два тире. В примере выше мы создали два свойства —primary и —secondary. Использовать эти свойства можно с помощью функции var().
Важно отметить, что пользовательское свойство может хранить любой валидный CSS-код. Включите фантазию и используйте их на полную! Например, запись ниже является валидным пользовательским свойством:
|
1 |
--bg: rgb(calc(var(--r) + var(--modifier)), calc(var(--g) + var(--modifier)), calc(var(--b) + (var(--modifier) + 50))); |
Заметка: мы широко применяем методологию вычисления цветов в нашем демо с собакой, посмотрите сами!
Создание фолбеков
Чаще всего пользовательские свойства используются в компонентах. Вы спроектировали компонент, и вам нужно задать разумные значения по умолчанию для всех пользовательских свойств. Пользовательские свойства следуют тому же шаблону, что и другие CSS-значения, поэтому в них можно задавать фолбек значения. Например:
|
1 2 3 |
body { background: var(--primary, blue); } |
В этом случае если при подстановке свойство —primary не существует, будет использован цвет blue, а не прозрачный.
Заметка: фолбек нельзя создать для значений, которые не работают с данным свойством. Например:
|
1 2 3 4 |
div { --primary: blue; margin-top: var(--primary, 12px); } |
Код выше не сработает, так как blue не является корректным значением для свойства margin-top, но пользовательские свойства не умеют читать синтаксис правил свойств, к которым они применяются. Все, что важно – если ли у нас значение для —primary или нет. Так как у нас есть значение, мы его подставляем, пробуем распарсить margin-top: blue и выбрасываем свойство, как невалидное.
Область действия пользовательских свойств
Область действия пользовательских свойств работает точно также, как и в других CSS-свойствах путем каскадирования. Это ценно, когда, например, команда разработчиков создает вместе компоненты или секции сайта. Дабы проиллюстрировать, давайте возьмем наш предыдущий пример и добавим в него компонент со своим пользовательским свойством –primary:
|
1 2 3 4 5 6 7 8 9 |
body { --primary: blue; background: var(--primary); } .my-component { --primary: yellow; background: var(--primary); } |
В итоге мы получаем фон blue для тега body и yellow для .my-component.
Определение поддержки пользовательских свойств
Важно помнить, что CSS не должен показывать ошибки на экране, поэтому если браузер не поддерживает пользовательские свойства, вы заметите это только в том случае, если эти стили имеют визуальные значения. Простой способ использовать технику прогрессивного улучшения для пользовательских свойств на сайте – это использовать разные стили для браузеров, не поддерживающих пользовательские стили. Сделать это можно, обернув пользовательское свойство в блок @supports.
|
1 2 3 4 5 6 7 8 9 |
body { background: red; } @supports(--foo: blue) { body { background: green; } } |
Важно понять, что @supports проверяет —foo только на правильность синтаксиса, а не на совпадение свойства и значения. Например, в предыдущем примере и примере ниже фон body будет иметь цвет green в браузерах с поддержкой пользовательских свойств, несмотря на то, что текущее значение для —foo не false.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
:root { --foo: true; } body { background: red; } @supports(--foo: false) { body { background: green; } } |
Изменение пользовательских свойств через скрипт
Одно из главных преимуществ нативной поддержки пользовательских свойств заключается в способности динамической модификации через скрипт. Для этого необходимо изменить пользовательские свойства с помощью setProperty() и getPropertyValue(). Например, для изменения —primary на элементе .my-component необходимо сделать следующее:
|
1 2 |
var myComponent = document.getElementsByClassName('my-component')[0]; myComponent.style.setProperty('--primary', 'green'); |
Для получения вычисленного значения свойства необходимо использовать getPropertyValue() из getComputedStyle():
|
1 2 3 |
var myComponent = document.getElementsByClassName('my-component')[0]; var cs = getComputedStyle(myComponent); cs.getPropertyValue('--primary'); |
Анимация пользовательских свойств
Пользовательские свойства можно анимировать, но их нельзя интерполировать. Но что это значит? Давайте разберем пример:
Не забывайте, что вы можете хранить любой валидный идентификатор в пользовательском свойстве – считайте, что это свойство сохраняется в виде строки в движке. Браузер понимает, как интерполировать color: green в color: blue, но он не понимает, как интерполировать «hello» в «world». Что будет делать браузер в предыдущем примере? Браузер возьмет длительность и назначит подходящие значения для кадров. В нашем примере это означает 50px на 500ms и 0 для оставшихся 500ms. В спецификации это называется флип на 50%.
Но я хочу их интерполировать!
Мы тоже! CSS Houdini Task Force активно работает над этим в Properties & Values API. Если все получится, вы сможете создать свое свойство и сообщить движку его тип, чтобы тот мог корректно интерполировать значения. Браузеры начинают экспериментировать с этими API, проверяют их жизнеспособность и помогают в развитии спецификации. Следите за выходом API в свет.
Улучшения за рамками пользовательских свойств
В своей работе мы рассмотрели несколько демо от разных разработчиков. Некоторые из них работают, другие – нет. После сокращения числа поломанных демо для поиска багов мы сузили проблемы до других пробелов в нашем движке – не обязательно баги в реализации пользовательских свойств. Например, самый большой найденный пробел – это поддержка calc() в цветовых функциях (rgb(), hsl()). Мы решили эту проблему в нашем парсере, так как это замечательный пример использования пользовательских свойств.
«Прилив поднимает все лодки»
По мере работы над устранением пробелов в нашем движке мы также хотели убедиться в том, что веб-разработчики могут полагаться на совместные реализации, чтобы функция была полезна. Как только мы начали разработку, мы обнаружили, что ни в одном браузере не работает флип на 50% для анимации пользовательских свойств. Также мы заметили, что ни в одном браузере не работали ссылки на переменные через var() внутри кейфреймов. Мы работали вместе с CSSWG для решения этих проблем и реализации в Microsoft Edge.
Разумеется, работа в Edge – это лишь часть проверки на совместимость функции. По мере работы над нашей реализацией мы нашли баги в других браузерах. Мы открыли баги в Blink, Gecko и WebKit и надеемся на их исправление. Мы ждем исправления в Chrome 56, эта версия повысит совместимость пользовательских свойств.
Заключение
Пользовательские CSS-свойства не просто удовлетворяют общие потребности разработчиков и делают код более управляемым, они также открывают большой потенциал для более творческой работы в интернете. У веба светлое будущее, и мы только начали. Мы рады представить вам пользовательские CSS-свойства в Windows 10 Creators Update и с нетерпением ждем ваших работ! — Greg Whitworth, руководитель программы, Microsoft Edge
Автор: Greg Whitworth
Источник: //blogs.windows.com/
Профессия Frontend-разработчик PRO
Готовим Frontend-разработчиков с нуля
На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…
Редакция: Команда webformyself.
