CSS custom attribute cascading variable var ()

All Essays/CSS3

As the front-end small white, keen front-end technology, recently learning CSS3. A few days ago saw an article: "must understand the CSS variable (var)", see this title is immediately attracted. Naninani? is var not a JavaScript keyword, and when does CSS work? When do you say that CSS can also declare variables? Is it not the function of a CSS compiler like SASS/SCSS?

After reading the blog post and more in-depth review, wrote this blog post for communication. There are many references to the original blog post content, if there is infringement, please contact me to quickly delete. At the end of the article attached to the original blog and RELATED links.

Name

• is called "CSS variable" at the beginning.
• After extension and refactoring, change to "CSS custom properties"
• CSS add @apply rule, name changes to "CSS custom attribute cascade variable"

Grammar

1. Definition syntax:--variablename:value;

Variable name ( variableName ) Usage specification:

• Start with "--", followed by numbers, letters, underscores, hyphens, kanji, etc., but cannot contain $, [, ^, (,%, etc. characters).
• Case sensitive (also: in CSS, case insensitive when writing property names, but case sensitive when writing selectors)
• Definition can only appear within block {}
• Can be modified with !important
• Scope is the selection of the selector, when the scope crosses, the variable override rule with the same name depends on the selector weight

1 . A {2    --container-bg-color: #0ff;  3 }4{5  --container-bg-color: #0f0!important;  6 }

View Code

2. Use the syntax: Csspropertyname:var (--variablename[,declarationvalue]);

• Declarationvalue: Limited to alternative options when--variablename variables are undefined
• Val () can only be referenced and cannot be assigned a value. That can only appear on the right side of ":"
• cannot be used as an address, such as: URL (var (--url));
• var () is followed by a space by default, so the unit behind it is invalid, such as:

--size:20; Font-size:var (--size) px;

is parsed into font-size:20 px; Note that there is a space between "20" and "px", causing the statement to be invalid. The unit shall be added when defined, such as:

--size:20px; Font-size:val (--size);

Check browser support

1. Using @supports method

1 0 ) {  2  3/   ** / 4  5}  6  70)) {  8  9  */**  Ten One}

View Code

2. Using JavaScript

1 if(window. CSS &&window. Css.supports &&window. Css.supports ('--size',0)) {2 3   /*Support*/4 5}Else{6 7   /*not supported*/8 9}

View Code

Manipulating native property variables using JavaScript

• window.getComputedStyle (element, ' Pseudo-class ' |null): [Ie9+,firefox,chrome,safari, Opera] gets all the CSS property values that the current element eventually uses, Returns a read-only CSS style declaration object.
• window.getComputedStyle (element, ' Pseudo-class ' |null). GetPropertyValue (' PropertyName ')
• window.getComputedStyle (element, ' Pseudo-class ' |null). SetProperty (' PropertyName ', value)

1 var document. getElementById ("D1"),2window. getComputedStyle (D1, ": After"); 3  4 var document. getElementById ("D2"),5windownull); 6 7 var value = D1.getpropertyvalue ('--variablename ');

View Code

Browser compatible

Reference article:

• CSS variables (VAR) that must be understood
• Deep Learning CSS Custom properties (CSS variables)

CSS custom attribute cascading variable var ()