Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 the 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.
<html>
<head>
<style>
/* Styles for the parent element */
.parent {
background-color: green;
font-size: 24px;
}
/* Styles for the child elements */
.child1,
.child2 {
background-color: white;
}
.child1 {
color: revert;
font-size: revert;
background-color: revert;
}
</style>
</head>
<body>
<div class="parent">
<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>
In the above example, we have set the background-color and font-size of the parent element to be green and 24px respectively. Then, we have set the background-color of both the child elements to white. Thereafter, we have used revert keyword for the child1 for the color, font-size and background-color.
So, we can see that for child1 the font-size and background-color has all been reset to the inherited value from the parent element. Note that the color of the child1 element is reverted to the default value (that is, black) since it is not declared for the parent element.
Whereas child2 which does not use the revert keyword has white background-color and red text color. (Note that these two properties were also set for child1 but since revert keyword has been used for it afterwards, the values have been reset.)
The Unset Keyword
The unset keyword in CSS is used to restore a cascading style value to its inherited value or initial value. If that property is inherited by the parent, then it gets the inherited value. Otherwise, it resets to the initial value. In other words, if you assign a new value to a property other than its initial value and set it to “unset”, then the property’s value will be set to that 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 −
<html>
<head>
<style>
.parent {
font-family: Algerian;
font-size: 18px;
}
.child {
font-size: unset;
}
</style>
</head>
<body>
<div class="parent">
<p class="child"> This is an example. </p>
</div>
</body>
</html>
In the above example, the parent element has the font family as Algerian and the font size as 18 pixels. As we can see that the child element inherits the font family from its parent (that is, Algerian).
However, since we have set the font size value to be unset, it means the element will inherit the font size from its parent element (which is 18 pixels here).
If the child element had a different font size set in the CSS declaration, then the “unset” keyword would have reset it to the parent’s value.
Difference Between Revert and Unset
Following are the major differences between revert and unset −
| Revert | Unset |
|---|---|
The revert keyword is used to reset the value of a property to its inherited value, or to the default value (in case, it does not have any inherited value).If you don’t assign any inherited or default value for the property in the CSS declarations then, the revert keyword will have no effect. |
On the other hand, the unset keyword enables the developers to reset the value of a property to its inherited value or the initial value.This value can be different from the default value. We can use the unset keyword even for the properties which does not have an initial value. |
Revert or Unset- Which one to Choose?
If you have a property which has initial value and you want to set its value to inherited or default one, then use the revert keyword. Whereas if you want to reset a property to its initial value regardless of whether it has been assigned a different value or not, then go for unset keyword.
Conclusion
In this article, we have discussed about two keywords used in CSS- revert and unset. Depending upon the situation, it is helpful in resetting the value of a property to its default or inherited values. Revert keyword is supported in browsers like Google 84, Safari 9.1, Opera 70, Microsoft Edge 84 etc., In a nutshell, the unset keyword is used for resetting the value to its initial value while revert keyword resets to inherited or default value.
131 Views
To Continue Learning Please Login