Kevin Powell - Community•2w ago

revert vs unset & svg focusable attribute

Hey, i have a couple questions regarding the topics in the title- 1) mdn says the difference between the revert and unset values is that revert changes a set of styles back to the user agent styles whilst unset changes a set of styles back to the inherited value and if not then the user agent styles. I don't understand logically the need for unset since the default behavior would be to inherit a value if possible anyways right? unless there's more to it? 2) I've seen people add focusable="false" to svgs to stop them being added into the tab order or being caught in a screen reader, i don't quite understand this since i don't believe svgs are focusable by default anyways? I'd appreciate getting some help clearing those up, thanks in advance.

5 Replies

clevermissfox•2w ago

1. Yes revert sets them back to the browser defaults. Unset works as either “initial” or “inherit” (depending on if it’s declared on an inheritable property or not). “Initial” sets the property back to what is defined in the spec , which could differ from the browser defaults. For example ,

.parent
  .child

.parent
  .child

.parent { color: lime; }
.child { color: pink; } 
/* more code in between */
.child { color: unset; } 
/* .child color will be lime */ 


.child { color: revert;}
/* .child color will be browser default , usually black but depends on the color-scheme/theme */

.parent { color: lime; }
.child { color: pink; } 
/* more code in between */
.child { color: unset; } 
/* .child color will be lime */ 


.child { color: revert;}
/* .child color will be browser default , usually black but depends on the color-scheme/theme */

clevermissfox•2w ago

This may be helpful : https://youtu.be/Xgd9luoTyjA

Steve Griffith - Prof3ssorSt3v3

YouTube

CSS unset, revert, and initial property values

When CSS is being applied in the browser there is actually two layers of values that get applied before your own stylesheet - the initial values and then the user-agent stylesheet. This video explains how you can use the unset, revert, and initial property values to target these different layers of the cascade. Code from video: https://gist.git...

clevermissfox•2w ago

As well as this from KPow himself: https://www.kevinpowell.co/article/initial-unset-revert/

Initial, Unset and Revert | Initial, Unset and Revert

An exploration into CSS' "initial", "unset", and "revert" values and when they might come in handy.

clevermissfox•2w ago

2. In IE and possibly still in Edge , SVGs were focusable by default which can disrupt the user flow and tab order and the click event it triggers doesn’t do anything. So focusable=false prevents that behaviour

snxxwyyOP•2w ago

oh awesome, i'll check those out, thanks

Gaming

Programming

revert vs unset & svg focusable attribute