Understanding the “Initial”, “Inherit” and “Unset” CSS Keywords

栏目: IT技术 · 发布时间: 4年前

内容简介: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.

Understanding the “Initial”, “Inherit” and “Unset” CSS Keywords

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:

Understanding the “Initial”, “Inherit” and “Unset” CSS Keywords
Line-height’s inital value is “nornal”

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:

Understanding the “Initial”, “Inherit” and “Unset” CSS Keywords

h1 element styles from the chrome browser user agent

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’s initial value will always be black

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

Understanding the “Initial”, “Inherit” and “Unset” CSS Keywords

display initial value — info in MDN

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 another font-size on an inner HTML element style.

Understanding the “Initial”, “Inherit” and “Unset” CSS Keywords

font-size inherit property — taken from MDN
  • 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.

Understanding the “Initial”, “Inherit” and “Unset” CSS Keywords

border un-inherit property — taken from MDN

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)?

HTML div tag’s user agent’s 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 .

Understanding the “Initial”, “Inherit” and “Unset” CSS Keywords

You can find me in my Facebook groups:

CSS Masters

CSS Masters Israel

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

The Art of Computer Programming, Volume 4,  Fascicle 3

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》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具