Return value | CSS Guides by Michael Geron

Revert Value allows you to reset the value of the property to the default style specified by the browser in its User Agent style sheet. At the time of writing, it only supports Firefox and Safari for Chrome. It can be applied to any CSS property including CSS shorts and all.

How is the return different from the initial value?

The initial value is defined per property where the reverse user agent resets the default value on the style sheet. To illustrate this we need to look at the fountain section of CSS where there are 3 sources from which CSS can come:

  1. Author Style Sheet: Written by the developer or web page or web site owner.
  2. User style sheet: Written by the user or, in other words, the viewer of this web page.
  3. User Agent Style Sheet: Default styling written by the browser vendor.

Summarizing the revert value takes into account the style of the user and the user agent which makes it really powerful as it can benefit users who use user style sheets to enhance their experience on the web. Yes if they need access.

Examples

Return all

There may be cases where you need to return everything by default. We can use it to do that. all Property and then back.

Our HTML can be:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="revert">Fusce sit amet luctus mi.</p>

Then CSS to return all styling to the second paragraph could be:

p{
 color: purple;
 background: yellow
}
.revert{
 all: revert
}

It will then be returned using all the CSS on the second paragraph. revert The name of the class, if we only want to return the color but not the background, then our CSS would be:

.revert{
 color: revert
}
Michael Geron

written by

Mike

Michael Geron is a Senior Interaction Designer at Companies House in Cardiff. Prior to that, Mike was a product designer at GoCo Group, including GoCompare, MyVoucherCodes and WeFlip. Also working for brands such as BrandContent and HEOR in South Wales.

Add a Comment

Your email address will not be published. Required fields are marked *