Let's say I have widget that uses complicated CSS, and must be embedded in multiple websites that all have their CSSes.
If I prefix all widget's CSS rules with "#widget", they won't apply to anything on the outside, so one problem fixed. Unfortunately CSS rules of the site can still mess the widget.
If I reset all CSS inside #widget with proper reset rules, then hopefully they will override all outside rules, right? (because my rules use #id and outside rules don't know any ids inside my widget, they cannot override them, right? !important notwithstanding)
What's the best way to reset all CSS to known state? Most CSS resets start from browser defaults, they don't reset arbitrary CSSes. Is there any CSS reset that works no matter what?
I came across cleanslate.css while trying to solve the same problem:
https://github.com/premasagar/cleanslate
I've not use it in production yet, but it apparently came out of the development of the BBC World Service widget.
Yes, your css should override anything declared outside the widget, but your reset must be quite comprehensive. I suggest using a modified version of http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/, but you'll have to modify all the selectors yourself.
I would be tempted to strengthen your selectors also, so rather than
#widget tagname{}
Use
html body #widget tagname{}
Your selectors will now have a much higher weight.
Use namespace & reset & LESS
#my-ns {
#import ".../reset.less";
... your other styles ...
}
I use Eric Meyer's reset reloaded to reset CSS styles.
Link:
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
Related
I'm implementing a booking process into an already excising WP website. The website has a MailChimp plugin that uses jQuery UI and has a theme designated for that, this part is out of my hands to remove or change.
This affects my code in the booking process by overwriting my custom css (less) for jQuery Datepicker.
My question is how can I reset all the jQuery UI components that have a specific ancestor class (.odin)? So that only components below that class will be reset.
br.
If you must overwrite the css, as seems to be your case, simply use a higher specificity. Get your selectors from your element inspector of choice and add the added specificity of your wrapper class. .odin .datepicker td{ /* your rule */ }
.odin {
*
}
this is called clear hack, its not a good practice to do it. Check alternatives first.
I think the answer to your problem lies not in jQuery but in CSS. You need to have better, more specific css selectors which do not end up getting beaten out by the jQuery UI rules.
I find using this calculator helps!
I'm not sure this is possible, but id like to set all user styles back to chrome defaults for div and descendants.
I'm building a Chrome plugin that creates a popup on any web page, however due to the fact every page has a plethora of custom styles, trying to track down every inconsistency and overwrite it with my divs (and descendants) custom style, it is becoming a nightmare.
Every time I think I've covered all bases another site implements something else that needs to be overridden.
What would be the easiest approach to standardize my popup in this situation?
One approach I can think of is to (bite the bullet) and get a hold of the the default Chrome CSS styles and implement them into a series of catch all descendant selectors, however surely there is a better way.
If you want to be absolutely sure that the styling of your elements is not affected by the web-page's CSS, there are 2 possible solutions:
Use an iframe to implement your popup. (This solution is "safe" and simple enough, but based on the kind of interaction between the popup and the web-page it might become cumbersome.)
Utilize the Shadow DOM. (This is probably the "proper" solution, but the implementation might be a little more complicated.)
Some resources regarding the 2nd solution:
An introductory tutorial.
An actual example of incorporating the "Shadow DOM" concept into a Chrome extension:
RobW's Display Anchors extension
There is a third option worth discussing and rejecting, which is to reset all the style properties of the div and its descendents to its default value. Pseudo-code:
#my-div, #my-div * {
#for-every-css-property {
%propertyName: initial !important;
}
}
This answer shows an attempt at such a solution. It uses specific values instead of initial which will work in older browsers without the initial keyword, but will not correctly reset elements which have a different default from the base (e.g. user566245 mentions that textarea elements should have a border).
Issues:
Unfortunately initial is not actually the browser's default value.
If we don't use !important above then there is a risk that the page might have provided a rule with a more specific elector which overrides our own. For example if the page specified properties for table > tr > td then this would be applied over our rule because that selector is more specific than #my-div *.
Since we do use !important, any custom styling we want to do after the reset must also use !important on every property.
If the page happens to inject any additional CSS styles after ours that uses !important then these can override our reset.
It is rather inefficient. We are asking the browser to apply a huge bunch of CSS rules to every element under our div.
Vendor-specific properties should also be reset. (E.g. -webkit-animation-name.)
If new CSS properties come into existence in future, you will need to update your list.
Whilst this solution can be applied to current browsers, it is rather horrible, so roll on Shadow DOM! I would recommend the <iframe> solution in the meantime.
I don't know if anyone has tried this, but a more efficient solution might be to use Javascript to detect what site-defined CSS properties could be problematic, and reset only those.
I'm working on a browser extension that adds it's UI to the pages DOM. On some pages I have the problem certain styles affect my UI. To counter this I keep my UI underneath a common root which resets most of the styles to the default value.
Sometimes I missed things which causes visual glitches in my UI. (i.e. the pages CSS file sets form { width: 80%; } so I need to add form { width: auto; } to my reset styles.
Is there a collection of styles that reset every CSS attribute to the value that is declared as default by the standard for every element?
I have come across the same problem. The usual CSS normalizers listed by the other answers does not answer the question because it is made to cancel the differences across the browser's default styles.
In the context of an extension, I needed to cancel every specific style that may exist on a random website.
I have come across this solution (I am not sure if it was possible at the time of the question, 7 years ago).
.your-container-class,
.your-container-class *,
.your-container-class *::before,
.your-container-class *::after {
all: initial;
}
So far it seems to achieve the goal by removing the differences across websites. The downside is that it resets even some default styles (ol, ul, li not behaving like lists for example).
Eric Meyer’s “Reset CSS” 2.0
(the original one)
HTML5 Doctor CSS Reset
(extends the Eric Meyer's one to improve HTML5 tags reset)
Yahoo! (YUI 3) Reset CSS
(based on Normalize.css)
Universal Selector ‘*’ Reset
Normalize.css 1.0 2.1.3
("…as used by Twitter Bootstrap, HTML5 Boilerplate, YUI 3, Pure, TweetDeck, Soundcloud, Medium, NASA, GOV.UK, Guardian, Rdio, Favstar, iA, and many others.")
There are others, but this were (and still are) the 2012’s most popular CSS Reset scripts.
I recommend using a quick Google search to find something like so: http://meyerweb.com/eric/tools/css/reset/
You can implement the reset in as-is and then if any problems arise down the road, simply add to it as needed.
Be aware that some pre-made CSS resets require a shout-out to using them.
Yes, absolutely.
There are two schools of thought to this. One is the zeroing style reset sheets, which basically remove all margin, padding and other such settings from the css. A good example of this is Eric Meyer's Reset CSS
The other approach is to set everything to roughly what you'd sensibly expect it to be, setting a reasonably looking margin to paragraphs and headings, indenting lists etc. A good example of this is Normalize.css
Some browsers also support the initial value, which sets the value of a property back to what it intially was. It's not widely supported enough to use in production, IMO.
Html5 boilerplate has an normalize.css which sets al lot of css styles to a default.
http://html5boilerplate.com/
As you are applying your styles to different pages with different unique styles, its hard to say if you will get success on removing all styles from all pages with some CSS reset.
But maybe these can help:
Normalize.css (used by many CSS frameworks)
CSS Reset by Meyer
I have element that could be injected into any page using a Firefox Addon.
Naturally, it and its ancestors are affected by the CSS rules defined on that page.
I can get so far by simply being explicit about every attribute, but even then my declarations may be overridden by an earlier declaration on the page with greater specificity.
Without making a huge mess of needlessly specific selectors and hanus use of !important, how could I go about resetting all elements' attributes under a given element (div#my_root_container_element) and ensure that my declarations under this parent element apply.
Using an iFrame is one option, but I would rather avoid it if possible - is there another way? Given the application, solutions need only work in Firefox.
Thanks.
Obviously, it seems like this aims to override the "specificity" which is core to CSS in general, but this is the closest I remember ever seeing someone attempt it. It seemed somewhat reputable at the time coming from someone involved with the YUI project:
http://developer.yahoo.com/yui/reset/#code
Using SASS, it's not too unpalatable nesting everything under a div with an ID to achieve sufficient specificity, which is the solution I've opted for.
That said, any !important declaration made in the page CSS will overrule my styles.
I am injecting some html + css into every page from my firefox plugin. But this styles is sometimes getting overridden by the style sheet. I want to stop this behavior.
I know this can be solved by some css tricks. Adding !important for instance. But is there a way available in firefox or xul to do this easily?
Using !important alone is not enough, the webpage could do the same and still override your styls. You can use the Stylesheet Service to register a user stylesheet. If you then use !important then web pages will no longer be able to override your styles.
Note that user stylesheets are always global and apply to all webpages as well as browser's own XUL documents. You can restrict them to particular webpages using #-moz-document.
#MEGA_PLUNGIN a {}
#MEGA_PLUNGIN span {}
#MEGA_PLUNGIN div {}
#MEGA_PLUNGIN table {}
...
Not the best solution but right...
To me, this is one case where you would certainly use !important.
That said, you can try to use specificity to ensure your styles are being set.
So, make sure that you are targeting the elements are precisely as possible, in order to override those styles that are not as specific.
For instance, if you have this structure
<body>
<div>
<h1 class="something">
<a href>
The site's styles may target
h1.something a{
You should aim to do this
body div h1.something a{
which is more specific and would override the above styles.
The other thing you might be able to do is append your styles just before the </head>, which would make them appear last in the cascade, and, if they are equal, will be applied.