Пользовательские 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, и они не требуют дополнительных действий для работы.

Как использовать пользовательские свойства

Практический пример: первичный и вторичный цвет сайта.

:root {
  --primary: #0B61A4;
  --secondary: #25567B;
}

header {
  background: var(--primary);
  border-bottom: 2px solid var(--secondary);
}

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

--bg: rgb(calc(var(--r) + var(--modifier)), calc(var(--g) + var(--modifier)), calc(var(--b) + (var(--modifier) + 50))); 

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

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

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

body {
  background: var(--primary, blue);
}

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

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

div {
  --primary: blue;
  margin-top: var(--primary, 12px);
} 

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

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

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

body {
  --primary: blue;
  background: var(--primary);
}

.my-component {
  --primary: yellow;
  background: var(--primary);
} 

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

body {
  background: red;
}

@supports(--foo: blue) {
  body {
 background: green;
  }
} 

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

:root {
  --foo: true;
}

body {
  background: red;
}

@supports(--foo: false) {
  body {
 background: green;
  }
} 

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

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

var myComponent = document.getElementsByClassName('my-component')[0];
myComponent.style.setProperty('--primary', 'green'); 

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

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

Источник: https://blogs.windows.com/

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

HTML5 и CSS3 с Нуля до Профи

Научись верстать сайты, используя все возможности HTML5 и CSS3, прямо сейчас

Научиться

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree