What Does Unset Value Mean in CSS

What is the difference between the initial and unset values?

According to your link:

unset is a CSS value that's the same as "inherit" if a property is inherited or "initial" if a property is not inherited

Here is an example:

pre {

  color: #f00;

}

.initial {

  color: initial;

}

.unset {

  color: unset;

}

<pre>

  <span>This text is red because it is inherited.</span>

  <span class="initial">[color: initial]: This text is the initial color (black, the browser default).</span>

  <span class="unset">[color: unset]: This text is red because it is unset (which means that it is the same as inherited).</span>

</pre>

What does unset value mean in CSS?

unset means

If the cascaded value of a property is the unset keyword, then if it is an inherited property, this is treated as inherit, and if it is not, this is treated as initial. This keyword effectively erases all declared values occurring

In your case, position is not an inherited property so it will always consider initial

Each property has an initial value, defined in the property’s definition table.

For position, it's static So you can simply use position:static and it will behave the same as position:unset

---

Reference: https://drafts.csswg.org/css-cascade-3/

---

To make this more generic you have to either use:

• property:inherit if it's an inhertied propety
• property:<initial_value> if it's not an inhertied propety. Then you look at the property’s definition table to find the initial value.

https://developer.mozilla.org/en-US/docs/Web/CSS/position

What does does the z-index value 'unset' do?

Unset is a global value. It is not just a value for z-index.

From MDN:

The unset CSS keyword resets a property to its inherited value if it
inherits from its parent, and to its initial value if not. In other
words, it behaves like the inherit keyword in the first case, and like
the initial keyword in the second case. It can be applied to any CSS
property.

What's the difference between `all: unset` and `all: revert'

From the MDN:

The unset CSS keyword resets a property to its inherited value if it inherits from its parent, and to its initial value if not. In other words, it behaves like the inherit keyword in the first case, and like the initial keyword in the second case.

So unset is either inherit or initial

The revert CSS keyword reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the current element. Thus, it resets the property to its inherited value if it inherits from its parent or to the default value established by the user agent's stylesheet (or by user styles, if any exist).

Suppose the browser apply a default style to your element. Using revert, you will put back those styles while unset will not.

Example:

p {

  margin: 50px;

}

<p style="margin:revert">

  some text here

</p>

<p style="margin:unset">

  some text here

</p>

Unset css property in css. Is it possible?

You can use display: unset:

The unset CSS keyword resets a property to its inherited value if it
inherits from its parent, and to its initial value if not.

function add() {

  document.querySelector('.target').classList.add('rolledDown');

}

.whenRolledUp {

    display: none;

}

.rolledDown .whenRolledUp {

    display: unset;

}

<div class="target">

  <div class="whenRolledUp">whenRolledDown</div>

</div>

<button onClick="add()">Add rolledDown</button>

CSS: unset and not set difference

From MDN DOCS:

The unset CSS keyword resets a property to its inherited value if the
property naturally inherits from its parent, and to its initial value
if not. In other words, it behaves like the inherit keyword in the
first case, when the property is an inherited property, and like the
initial keyword in the second case, when the property is a
non-inherited property.

unset can be applied to any CSS property, including the CSS shorthand
all.

In your first case:

#element {
    border: unset; // Here the border is set to its default value 
}

#element {
    /*nothing here!*/ In this case you have not used any CSS property on the element so border remains its default value 
}

In your second part: No they "" and "unset" don't behave the same:

element.style.border = ""; // This will simply have no effect on the border and border will stay whatever it was in CSS
element.style.border = "unset"; // In this case your border will not apply now and default value of the border will be set.

DEMO CODE:

document.querySelector(".test1").style.background = "";
document.querySelector(".test2").style.background="unset"; // It is set to the default value and no background color is applied

.test1,.test2{
  height:100px;
  width:100px;
  border:5px solid red;
  background:blue;
  margin-bottom:1rem;
}

<div class="test1">
</div>

<div class="test2">
</div>

How to set CSS variable to the value unset, --unset-it: unset?

Like I did in this previous answer with inherit You need to make unset the fallback value and consider initial to activate it:

* {

  box-sizing: border-box;

}

#ex {

  background: yellow;

  padding: 0.5rem;

  margin: 1rem 0;

}

#div1 {

  --unset-it: 2px dotted red;

  outline: var(--unset-it, unset);

}

<div id="ex">

  <p id="div1">

    outline: 2px dotted red;

  </p>

  <p id="div1" style="--unset-it:initial">

    outline: unset;

  </p>

</div>

How can I nullify css property?

You have to reset each individual property back to its default value. It's not great, but it's the only way, given the information you've given us.

In your example, you would do:

.c1 {
    height: auto;
}

You should search for each property here:

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

For example, height:

Initial value : auto

Another example, max-height:

Initial value : none

---

In 2017, there is now another way, the unset keyword:

.c1 {
    height: unset;
}

Some documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/unset

The unset CSS keyword is the combination of the initial and inherit
keywords. Like these two other CSS-wide keywords, it can be applied to
any CSS property, including the CSS shorthand all. This keyword resets
the property to its inherited value if it inherits from its parent or
to its initial value if not. In other words, it behaves like the
inherit keyword in the first case and like the initial keyword in the
second case.

Browser support is good: http://caniuse.com/css-unset-value

Why can't values on the ::after pseudo-element be unset?

According to this:

unset is a CSS value that's the same as "inherit" if a property is
inherited or "initial" if a property is not inherited

As after element is inherited from p element, unset will be as inherit and the color will be the red same as p tag.

Use initial instead

<!DOCTYPE html>

<html>

<head>

<style>

p {color:red}

p::after { 

  content: " and after";

  color: initial;

}

</style>

</head>

<body>

<p>before</p>

</body>

</html>

---

Related Topics