Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Difference Between Revert and Unset Keyword in CSS
CSS is a powerful tool which enables developers to customize the appearance of websites according to their will. Since there are numerous features and properties provided by CSS, it is quite possible that developers use two keywords interchangeably in order to achieve a desired effect.
So, it is important to know about such confusing keywords in detail to avoid further mistakes. Two such keywords are "revert" and "unset". These two may appear similar, but have noticeable differences for some properties for certain elements. Here, we will discuss about these keywords, how and when to use them, and differences between them.
Revert Keyword
The "revert" keyword is used in CSS to restore a cascading style value to its inherited value or the default value (in case of no inherited value) as defined in the CSS declarations.
Suppose you apply the "revert" keyword to a property (such as font-weight, margin, color etc.,). Now, your browser will check the inheritance of that property from its parent element. If it finds out that property is inherited, the value of that property for the child element will be reset to the inherited value from the parent element. Whereas if the property is not inherited, the browser will assign the default value (as given in CSS declarations) to the child element.
Example
Let's understand this better with an example
<!DOCTYPE html>
<html>
<head>
<style>
/* Styles for the parent element */
.parent {
background-color: green;
font-size: 24px;
color: white;
padding: 20px;
}
/* Styles for the child elements */
.child1,
.child2 {
background-color: red;
color: yellow;
padding: 10px;
margin: 10px;
}
.child1 {
color: revert;
font-size: revert;
background-color: revert;
}
</style>
</head>
<body>
<div class="parent">
Parent Element
<p class="child1">This is the child element with revert keyword.</p>
<p class="child2">This is the child element without revert keyword.</p>
</div>
</body>
</html>
A green parent div with white text contains two paragraphs. The first paragraph (child1) has inherited white color from parent, 24px font size from parent, and transparent background (default for paragraphs). The second paragraph (child2) shows yellow text on red background with 10px padding.
In the above example, for child1 the font-size and color are inherited from the parent element, while background-color reverts to the default paragraph value (transparent) since paragraphs don't inherit background-color.
The Unset Keyword
The unset keyword in CSS is used to restore a cascading style value to its inherited value (for inherited properties) or initial value (for non-inherited properties). If that property is inherited by nature, then it gets the inherited value from parent. Otherwise, it resets to the initial value.
Here, the initial value of a property means the original value of the property which it had before any style rules were applied to it.
Example
Let's see an example
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
font-family: Arial, sans-serif;
font-size: 24px;
color: blue;
background-color: lightgray;
padding: 20px;
}
.child {
font-size: 12px;
color: red;
background-color: yellow;
padding: 5px;
margin: 10px;
}
.unset-child {
font-size: unset;
color: unset;
background-color: unset;
}
</style>
</head>
<body>
<div class="parent">
Parent Element
<p class="child">Normal child element</p>
<p class="child unset-child">Child with unset keyword</p>
</div>
</body>
</html>
A light gray parent div contains two paragraphs. The first paragraph shows red text on yellow background. The second paragraph shows blue text (inherited from parent) on transparent background (initial value), with 24px font size (inherited from parent).
In the above example, the child element with unset inherits font-size and color from its parent (these are inherited properties), while background-color resets to its initial value (transparent) since it's not an inherited property.
Key Differences Between Revert and Unset
| Revert | Unset |
|---|---|
| Resets to user agent stylesheet value or inherited value | Resets to inherited value (for inherited properties) or initial value (for non-inherited properties) |
| Falls back to browser default styles | Falls back to CSS specification initial values |
| Better for restoring semantic styling | Better for completely resetting custom styles |
When to Use Which?
Use revert when you want to restore browser default styling behavior. Use unset when you want to completely reset a property to its natural inheritance behavior or initial value as per CSS specifications.
Conclusion
Both revert and unset keywords help reset CSS properties, but they work differently. Revert restores browser default styles, while unset follows CSS inheritance rules and initial values. Choose based on whether you want browser defaults or specification-defined behavior.
288 Views
