Пользовательские CSS-свойства в Microsoft Edge

Пользовательские CSS-свойства в Microsoft Edge

От автора: начиная с 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-разработчиков с нуля

На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…

До 10 проектов в портфолио для старта карьеры
Подходит для новичков без опыта в программировании
Практика на вебинарах с разработчиками из крупных компаний

Давайте разберем код. Для объявления нового пользовательского свойства используются два тире. В примере выше мы создали два свойства —primary и —secondary. Использовать эти свойства можно с помощью функции var().

Важно отметить, что пользовательское свойство может хранить любой валидный CSS-код. Включите фантазию и используйте их на полную! Например, запись ниже является валидным пользовательским свойством:

Заметка: мы широко применяем методологию вычисления цветов в нашем демо с собакой, посмотрите сами!

Создание фолбеков

Чаще всего пользовательские свойства используются в компонентах. Вы спроектировали компонент, и вам нужно задать разумные значения по умолчанию для всех пользовательских свойств. Пользовательские свойства следуют тому же шаблону, что и другие CSS-значения, поэтому в них можно задавать фолбек значения. Например:

В этом случае если при подстановке свойство —primary не существует, будет использован цвет blue, а не прозрачный.

Заметка: фолбек нельзя создать для значений, которые не работают с данным свойством. Например:

Код выше не сработает, так как blue не является корректным значением для свойства margin-top, но пользовательские свойства не умеют читать синтаксис правил свойств, к которым они применяются. Все, что важно – если ли у нас значение для —primary или нет. Так как у нас есть значение, мы его подставляем, пробуем распарсить margin-top: blue и выбрасываем свойство, как невалидное.

Область действия пользовательских свойств

Область действия пользовательских свойств работает точно также, как и в других CSS-свойствах путем каскадирования. Это ценно, когда, например, команда разработчиков создает вместе компоненты или секции сайта. Дабы проиллюстрировать, давайте возьмем наш предыдущий пример и добавим в него компонент со своим пользовательским свойством –primary:

В итоге мы получаем фон blue для тега body и yellow для .my-component.

Определение поддержки пользовательских свойств

Важно помнить, что CSS не должен показывать ошибки на экране, поэтому если браузер не поддерживает пользовательские свойства, вы заметите это только в том случае, если эти стили имеют визуальные значения. Простой способ использовать технику прогрессивного улучшения для пользовательских свойств на сайте – это использовать разные стили для браузеров, не поддерживающих пользовательские стили. Сделать это можно, обернув пользовательское свойство в блок @supports.

Важно понять, что @supports проверяет —foo только на правильность синтаксиса, а не на совпадение свойства и значения. Например, в предыдущем примере и примере ниже фон body будет иметь цвет green в браузерах с поддержкой пользовательских свойств, несмотря на то, что текущее значение для —foo не false.

Изменение пользовательских свойств через скрипт

Одно из главных преимуществ нативной поддержки пользовательских свойств заключается в способности динамической модификации через скрипт. Для этого необходимо изменить пользовательские свойства с помощью setProperty() и getPropertyValue(). Например, для изменения —primary на элементе .my-component необходимо сделать следующее:

Для получения вычисленного значения свойства необходимо использовать getPropertyValue() из getComputedStyle():

Анимация пользовательских свойств

Пользовательские свойства можно анимировать, но их нельзя интерполировать. Но что это значит? Давайте разберем пример:

Не забывайте, что вы можете хранить любой валидный идентификатор в пользовательском свойстве – считайте, что это свойство сохраняется в виде строки в движке. Браузер понимает, как интерполировать 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-разработчиков с нуля

На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…

До 10 проектов в портфолио для старта карьеры
Подходит для новичков без опыта в программировании
Практика на вебинарах с разработчиками из крупных компаний

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: