内容简介:CSS has default keywords for various values. In this article I’m going to talk about three of them:There’s a good chance that although most web developers have encountered them, many of even the most experienced ones don’t fully understand them.For a long
CSS has default keywords for various values. In this article I’m going to talk about three of them: initial
, inherit
, and the relatively new one, unset
.
There’s a good chance that although most web developers have encountered them, many of even the most experienced ones don’t fully understand them.
For a long time, the only thing I knew about these keywords was that they’re used for resetting styles in CSS. But if all of those keywords are a kind of reset, then why are there so many? What exactly are the differences between them? I decided to explore these three keywords deeply, to fully understand, once and for all, the differences between these three common keywords values.
The Basic Styles of the Web
Before we start to understand the CSS keywords, it’s important to understand from where we get our basic styles in our browser.
The Initial Value of Every Property in CSS
Every property of CSS has an initial value. This initial value has no connection to the type of HTML element it’s applied to.
An example from MDN of the initial
value:
The User-Agent Browser Styles
After applying the initial styles of all the CSS properties, the browser loads its styles. These styles have nothing to do with the base initial values of the CSS properties.
An example of user-agent style:
HTML elements do not have initial style values! The basic styles of an HTML element, such as the <h1>
tag for example, comes from the browser user agent stylesheet, and not from the initial
value of the properties of CSS.
Now let’s start talking about the CSS keywords!
The Inherit Keyword
The keyword value of inherit
tells the browser to search for the closest parent element’s value and let the current element inherit that value. If the closest parent has an inherit value too, the browser will continue going up the DOM until it finds some value. If there isn’t any value, the browser will use its user-agent style, and if there isn’t any user-agent style, it will use the initial
base style.
CSS Initial Keyword
To understand the initial
keyword, we have to remember an important fact: Every property in CSS has a default value, which has nothing to do with the user agent's default value. User-agent styles are the basic styles that the browser applies to HTML elements in the browser. We tend to think that they come automatically with the HTML, but they don't.
The initial
keyword tells the browser to use the CSS default value of the given property. For example:
- The
color
property’sinitial
value will always beblack
This behavior can be very confusing because, as we said before, the default value of a CSS property isn’t necessarily the default value that the browser defines for an element. For example, the initial
value of the display
property is inline
, for all elements. Therefor if a <div>
element gets an initial
value on its display
property, its display will be inline
, and not block
, which is its user-agent style.
Example:
div.box{
background-color: red;
display: initial; /* will be equal to inline and not to block */
}
An example on CodePen of the Initial on div element’s display property
The Unset Keyword
The unset
keyword is unique in that it works differently on different types of properties. In CSS, there are two types of properties:
- Inherited properties — properties that affect their children. All the properties which affect text have this natural behavior . For example, if we define a
font-size
on the HTML element, it will apply to all HTML elements until you set anotherfont-size
on an inner HTML element style.
- Non-inherited properties — All the other natural properties, which affect only the element which they define. These are all of the properties that don’t apply to text . For example, if you put a
border
on a parent element, its child will not get a border.
The unset
value works the same as inherit
for inherited properties types. For example, for the text color
property, it will work like inherit
value, that is, look for a parent element with a definition to the property, and if none is found — use the user-agent value, and if there isn’t any user-agent style, it will use the initial
base style.
For non-inherited properties, the unset
will work the same as the initial
value, that is, apply the CSS default value; for example, for border-color
, it will work as initial
.
.some-class{
color: unset; /* will be equal to 'inherit' value */
display: unset; /* will be equal to 'initial' value*/
}
Why Use Unset if it Works Exactly the Same as Inherit and Initial?
If unset acts like initial
and inherit
, why would we want to use unset
?
If we’re resetting only one property, then unset
is unnecessary: we can just use the inherit
or initial
values instead.
But nowadays we have a new property called all
which brings with it a new capability: to reset both all of the inherited properties and the non-inherited properties at once!
In this new way, you don’t need to reset properties one by one. Thus, Applying the unset
value to the all
property will reset all the inherited properties to inherit
and all of the non-inherited properties to initial.
This is the only reason for the existence of the new unset
keyword value! Otherwise, we could use the inherit
and initial
values instead.
Instead of resetting properties one by one, for example:
/* Bad */
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
We can use the new all
property with the unset
value, which will affect all the existing properties, for example:
/* Good */
.common-content *{
all: unset;
}
I wrote a small example to demonstrate how properties behave when using the all
property with the unset
value: some act as if the inherit
value was applied, and some — as if the initial
value was applied. A CodePen Example of all: unset;
.
The Revert Keyword
But what if we want to reset the property’s styles to its original user agent style and not to the property’s base style? For example, to revert the display
property of a <div>
element to block
(its user agent style) and not inline
(its CSS base style)?
For that, we will soon get a new CSS keyword: revert
. The revert
keyword is very similar to unset
, the only difference being that it prefers the user-agent’s styles to the CSS property’s basic style. For Example:
div{ display: revert; /* = block */ }h1{ font-weight: revert; /* = bold */ font-size: revert; /* = 2em */ }
This way if we want to reset all styles of an HTML tag to the browser’s base style, we can do it like this:
/* Good */
.common-content *{
all: revert;
}
Thus the revert
gives us even more powerful possibilities than the unset
keyword. But for now, the revert
keyword works only in Firefox and in Safari.
Browser Support
-
inherit
— works in all browsers, including Internet Explorer 11 -
initial
&unset
— work in all browsers except for Internet Explorer 11 -
revert
— works only in Firefox & Safari, for now.
Final Words
That’s all.
I hope you’ve enjoyed this article and learned from my experience.
If you like this post, I would appreciate applause and sharing :-)
You can follow me via Twitter .
- Understanding the Difference Between CSS Resolution and Device Resolution
Who Am I?
I am Elad Shechter, a Web Developer specializing in CSS & HTML design and architecture. I work at Investing.com .
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
The Art of Computer Programming, Volume 4, Fascicle 3
Donald E. Knuth / Addison-Wesley Professional / 2005-08-05 / USD 19.99
Finally, after a wait of more than thirty-five years, the first part of Volume 4 is at last ready for publication. Check out the boxed set that brings together Volumes 1 - 4A in one elegant case, and ......一起来看看 《The Art of Computer Programming, Volume 4, Fascicle 3》 这本书的介绍吧!