javascripthtmlcssnormalizenormalize-css

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 ?

Solution

  • 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.