Как пользоваться CSS переменными в Chrome 49
![Как пользоваться CSS переменными в Chrome 49](/uploads/posts/2016-02/1456333103_b43817e87da9cad8ebb654073c01751d.jpg)
Переменные, являются незаменимой частью профессионального программирования. Только представьте, необходимость вручную переопределять значения для каждого отдельного элемента, а не изменять их только одной переменной, из одной точки программы.
С появлением Chrome 49-ой версии, этот браузер стал поддерживать CSS переменные в виде пользовательских свойств и стилей. И это оказалось безумно полезно для многих веб-разработчиков. О важности CSS переменных в веб-разработке, вы можете узнать из этой статьи. А сейчас, следует пояснить, как можно их применять.
CSS переменные, подразумевают под собой кастомные свойства, возможность применения которых, может быть полезна в разных частях кода. Код может выглядеть примерно так:
:root { --index-color: #06c; } #foo h1 { color: var(--index-color); }
Здесь ‘--index-color’ играет роль свободно определяемой переменной пользовательского свойства, назвать ее можно, как угодно. Затем, можно указывать эту переменную в любом элементе на веб странице, и он будет иметь цвет, заданный в переменной. Указав эту переменную на нужных частях сайта, можно в любой момент изменить их цвет, просто задав иное значение переменной.
Комментариев 0