CODEWITHSUNDEEP
htmlcss
Hao Wu
Hao Wu

Reputation: 20699

Why "all: initial" makes <style> tag visible? And how do I reset everything to initial state in css?

I'm making a plugin that dynamically generates a container on any page.

Because there might be some predefined rules that change the appearance of the contents inside my .my-plugin, so I set

.my-plugin * {
  all: inital;
}

to the <style> tag inside of it.

But somehow it makes the <style> tag visible:

/* The style that from the page, which is uncertain */
h1 {
  color: red;
}
<h1>This is red</h1>

<!-- dynamically injected code -->
<div class="my-plugin">
  <style>
    .my-plugin * {
      /* reset everything to default state */
      all: initial;
    }
    
    .my-plugin {
      border: solid 1px black;
    }
  </style>
  
  <h1>This is not red</h1>
</div>

How do I set everything inside a tag back to their initial states?

I know I can do something like .my-plugin style { display: none; }, but what about other tags that should not be invisible as well?

Ultimately I just don't want the h1 inside .my-plugin to be red.

Is there a better approach?

Upvotes: 1

Views: 217

Answers (1)

Alohci
Alohci

Reputation: 82986

initial for display is inline for all elements which obviously includes style elements. This overrides the display:none style applied by the user-agent style sheet.

To get the styles as they were before the author styles start being applied, what you really want is { all: revert; } but the browser compatibility is not good yet.

Upvotes: 4

Related Questions