简体   繁体   中英

Normalize-css on a portion of a page

I am developing a js plugin accessible through user's bookmark. When the user presses the bookmark, the plugin displays a popup with a form allowing him to type and save a note.

I would like to apply a normalize.css stylesheet to my plugin without using an iframe or affecting the rest of the page (which means that I can't embed the normalize.css stylehseet directly in my plugin).

Any idea/suggestion ?

While you may eventually be able to do this withhtml5 scoped styles , it's not currently possible in most modern browsers .

You will have to give your plugin elements a class or id, and manually "normalize" those elements within your plugin's css file (or via javascript).

edit:

Expanding on my answer re: @Tibos comment: you can never be absolutely sure your plugin elmenets will not be styled differently, but you can provide a reasonable amount of specificity in your css by namespacing your plugin with an id:

#myPlugin .container {
  background: #fff;
} 

#myPlugin input {
  border:0;
}

There is, as Tibos mentions, the nuclear option of !important but it may be best to save this for extreme situations (like the layout completely breaking). It's typically a good thing to give your users the chance to overwrite your styles if necessary.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM