Book Image

Responsive Web Design with HTML5 and CSS3, Second Edition

By : Ben Frain
5 (1)
Book Image

Responsive Web Design with HTML5 and CSS3, Second Edition

5 (1)
By: Ben Frain

Overview of this book

Table of Contents (17 chapters)
Responsive Web Design with HTML5 and CSS3 Second Edition
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

CSS custom properties and variables


Thanks to the popularity of CSS pre-processors, CSS is starting to gain some more 'programmatic' features. The first of which is custom properties. They are more often referred to as variables although that is not necessarily their only use case. You can find the full specification at http://dev.w3.org/csswg/css-variables/. Be warned, as of early 2015, browser implementations are few and far between (only Firefox).

CSS custom properties allow us to store information in our style sheets that can then be utilized in that style sheet or perhaps acted upon with JavaScript. An obvious use case would be to store a font-family name and then reference it. Here is how we create a custom property:

:root {
  --MainFont: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

Here, we are using the :root pseudo-class to store the custom property in the document root (although you can store them inside any rule you like).

Note

The :root pseudo-class always references the top...