Нативный css что это

Нативные переменные в CSS. Уже пора…

Всем привет, тема переменных в CSS давно ходит по интернету, однако не все знают о том, что это такое, да и сама технология не так давно вышла в релиз. И хоть использовать её во многих случаях рановато, уже пора понимать что она из себя представляет и как ею пользоваться. Давайте попробуем разобраться с технологией вместе. Обращу ваше внимание, что эта статья для тех, кто не знает о CSS переменных (кастомных свойствах) или только слышал о них. Если вы знакомы и умеете работать с данной фичей, то вам данная статья будет не интересна.

Итак, тема с переменными в стилях уже затерта до дыр, т.к. они давным давно существуют в препроцессорах. Это удобно, я уже плохо представляю себе написание стилей без возможности сохранить где-то определенное значение (цвет, величину, название шрифта, тип маркера у списка, всё что может придти в голову. ). Однако препроцессоры не могут дать нам той гибкости, которую дают нативные переменные в CSS, и скоро вы поймете, почему.

Для начала нужно понять, как объявлять и использовать переменные. Переменные объявляются в селекторах:

Как видно из листинга выше, переменные объявляются двумя дефисами перед именем:
—variable-name

Чтобы использовать переменную, необходимо воспользоваться функцией var. Она имеет 2 параметра. Это, естественно, имя переменной, а вторым необязательным параметром идёт значение свойства, которое необходимо использовать в случае отсутствия переменной.

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

.title < --wrapper-width: 50%; width: var(--wrapper-width); >@media (max-width: 320px)

Всё! Этого достаточно, чтобы свойство width изменило свое значение!

Если CSS способен отслеживать изменения своих переменных, это значит, что с этим можно взаимодействовать различными способами.

Что насчёт JavaScript?

Управляя аттрибутом style, можно изменить стиль, прибегая к минимальным затратам усилий. Приведу грубый пример на React.

changeColor() < this.setState(< style: >); > 
onClick=>Title
 

Теперь по клику на элемент с классом title будет меняться цвет фона у элемента. Круто? Ещё бы! Не нужно добавлять новый класс, переопределять свойство или делать другие действия, способствующие изменению фонового цвета у элемента.

Если кто-то не знаком с React или кому-то просто непонятно, что произошло. Мы просто средствами JavaScript изменили аттрибут style у элемента, изменив значение переменной
—background

Используя переменные, изменять css извне стало проще, методов использования можно придумать массу, а мы пойдем дальше.

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

Нужно сказать пару слов об области видимости CSS переменных, здесь всё просто. Объявленная переменная доступна всем селекторам дочерних элементов данного селектора. Т.е. в листинге ниже использовать переменную —b в тэге html будет нельзя. А вот переменная —a в body и всех дочерних элементах будет работать без проблем (если её конечно не переопределят где-то ниже).

(я знаю, что цвета в примерах скучные, но я плохо помню цвета по hex-коду :))

Переменные и calc

Как и любое числовое значение свойства, вы можете использовать переменную в функции calc.

Круто! Особенно если учесть что переменную —title-width, можно менять как внутри CSS, так и извне.

Заметьте, что величину мы обязаны положить в переменную. Дописать px, %, rem и т.д. к вызванной переменной у нас не получится. Однако ничто не мешает нам умножить с помощью функции calc значение на единицу в необходимой нам величине.

В заключение

CSS переменные дают много гибкости, это мощный инструмент, который может быть очень полезен в ряде случаев. Однако спешить его применять в боевых проектах я не рекомендую. Если мы заглянем на caniuse, то увидим что IE вообще не поддерживает данную технологию, а Edge частично.

Источник

Нативные переменные CSS: долгожданное дополнение или огромная ошибка?

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

Pros

• Поддерживать проекты проще
• Напиши меньше “код”
• Более упорядоченная интеграция с JavaScript
• Обновите настройки и параметры для всего сайта с одним изменением значения

Cons

• Должен ли CSS быть сложным?
• Более высокий барьер входа для дизайнеров
• Текущий предложенный синтаксис покажется слишком запутанным для некоторых

Как это работает?

Прежде чем мы продвинемся, имейте в виду, что эти разработки все еще находятся на экспериментальной стадии. Они еще не были реализованы ни в одном браузере.

Если вы скромно знакомы с CSS-препроцессорами, такими как Less или SASS , у вас будет общее представление о том, чего ожидать от этих дополнений. (Тем не менее, предлагаемый синтаксис, к сожалению, немного отличается.) В будущем у вас будет возможность создавать переменные (глобальные и локальные) и миксины, которые вы можете рассматривать как набор стилей, которые легко можно ссылки.

Что так долго?

Насколько я помню, сообщество требовало CSS-переменных; так что же это за задержка? Одним словом: несогласие. На самом деле, еще в 2008 году, webkit играл с этой функцией – даже до того момента, когда она была реализована в ночных клубах, – но вскоре предложение зашло в тупик. Многие считали, что превращение CSS в язык, похожий на программист, вызовет лишь разочарование; некоторые даже считали, что это может смутить дизайнеров. Например, если основной цвет в вашем проекте хранится в переменной – предположительно в верхней части таблицы стилей – тогда потребуется, чтобы дизайнер ссылался на два местоположения.

Источник

Нативные переменные в CSS. Уже пора…

Всем привет, тема переменных в CSS давно ходит по интернету, однако не все знают о том, что это такое, да и сама технология не так давно вышла в релиз. И хоть использовать её во многих случаях рановато, уже пора понимать что она из себя представляет и как ею пользоваться. Давайте попробуем разобраться с технологией вместе. Обращу ваше внимание, что эта статья для тех, кто не знает о CSS переменных (кастомных свойствах) или только слышал о них. Если вы знакомы и умеете работать с данной фичей, то вам данная статья будет не интересна.

Итак, тема с переменными в стилях уже затерта до дыр, т.к. они давным давно существуют в препроцессорах. Это удобно, я уже плохо представляю себе написание стилей без возможности сохранить где-то определенное значение (цвет, величину, название шрифта, тип маркера у списка, всё что может придти в голову. ). Однако препроцессоры не могут дать нам той гибкости, которую дают нативные переменные в CSS, и скоро вы поймете, почему.

Для начала нужно понять, как объявлять и использовать переменные. Переменные объявляются в селекторах:

Как видно из листинга выше, переменные объявляются двумя дефисами перед именем:
—variable-name

Чтобы использовать переменную, необходимо воспользоваться функцией var. Она имеет 2 параметра. Это, естественно, имя переменной, а вторым необязательным параметром идёт значение свойства, которое необходимо использовать в случае отсутствия переменной.

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

.title < --wrapper-width: 50%; width: var(--wrapper-width); >@media (max-width: 320px)

Всё! Этого достаточно, чтобы свойство width изменило свое значение!

Если CSS способен отслеживать изменения своих переменных, это значит, что с этим можно взаимодействовать различными способами.

Что насчёт JavaScript?

Управляя аттрибутом style, можно изменить стиль, прибегая к минимальным затратам усилий. Приведу грубый пример на React.

changeColor() < this.setState(< style: >); > 
onClick=>Title
 

Теперь по клику на элемент с классом title будет меняться цвет фона у элемента. Круто? Ещё бы! Не нужно добавлять новый класс, переопределять свойство или делать другие действия, способствующие изменению фонового цвета у элемента.

Если кто-то не знаком с React или кому-то просто непонятно, что произошло. Мы просто средствами JavaScript изменили аттрибут style у элемента, изменив значение переменной
—background

Используя переменные, изменять css извне стало проще, методов использования можно придумать массу, а мы пойдем дальше.

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

Нужно сказать пару слов об области видимости CSS переменных, здесь всё просто. Объявленная переменная доступна всем селекторам дочерних элементов данного селектора. Т.е. в листинге ниже использовать переменную —b в тэге html будет нельзя. А вот переменная —a в body и всех дочерних элементах будет работать без проблем (если её конечно не переопределят где-то ниже).

(я знаю, что цвета в примерах скучные, но я плохо помню цвета по hex-коду :))

Переменные и calc

Как и любое числовое значение свойства, вы можете использовать переменную в функции calc.

Круто! Особенно если учесть что переменную —title-width, можно менять как внутри CSS, так и извне.

Заметьте, что величину мы обязаны положить в переменную. Дописать px, %, rem и т.д. к вызванной переменной у нас не получится. Однако ничто не мешает нам умножить с помощью функции calc значение на единицу в необходимой нам величине.

В заключение

CSS переменные дают много гибкости, это мощный инструмент, который может быть очень полезен в ряде случаев. Однако спешить его применять в боевых проектах я не рекомендую. Если мы заглянем на caniuse, то увидим что IE вообще не поддерживает данную технологию, а Edge частично.

Источник

Готов ли CSS заменить препроцессоры?

Доклад Серёжи Попова от 6 сентября 2018 года. Презентацию можно посмотреть здесь. Сразу обозначу, что этим докладом я не хочу задеть чьи-либо чувства или профессиональную точку зрения. Я просто хочу рассказать про CSS, каким я вижу его сегодня: что стоит писать, как не стоит писать и так далее. Поэтому если вас что-то заденет — ничего личного. Это просто CSS.

Что такое препроцессоры? И когда они появились?

Препроцессор SASS. 2006 год.

Препроцессор LESS. 2009 год.

Комбинация SASS и LESS.

Препроцессор Stylus. 2009 год.

PostCSS. 2013 год.

Возникает вопрос: зачем за 7 лет появилось 5 разных инструментов, один из которых пережил перемену синтаксиса? Я думаю, что проблема в самом CSS. Вот для примера 2-е, 3-е и 4-е издание книги по CSS Эрика Мейера.

Последняя книга такая же, как два издания предыдущих. Интересно, каким будет следующим издание:)

Почему появились препроцессоры?

Потому что CSS не давал возможностей, которых хотелось бы разработчикам. Он был просто слаб.

В нём не было достаточно возможностей, чтобы использовать его нативно, то есть без препроцессоров. При этом препроцессоры принесли много функций, которые мы стали использовать.

Что нужно от препроцессоров?

Препроцессоры — это мощный инструмент, который по-разному что-то решает. Но всё ли из этого нужно, и в каком объеме?

Источник