Is there a way to reproduce that but using additional css rules ?
My specific problem is how to disable a framework rule (that i cannot modify or edit) using additional css the same way firefox and chrome dev tools do.
What you might mean is the CSS unset or inherit keyword. By that, you can rule out CSS-properties assigned from other CSS sources (that probably aren't your own, e.g. coming from some theme files). unset makes it as if it wasn't set in the first place while inherit makes it inherit the parent's property.
Then just define the selector you're targeting and switch off a certain CSS property, e.g.:
.foo .bar {
font-family: unset;
}
You might have to enforce that with !important in case your selector is less powerful than some other.
Disabling code in css while leaving it in place for possible later use is done by commenting it out. All code between /* and */ will not be used.
/* .foo {
display:block;
} */
Lets say I have a plugin's CSS which loads later as my style.css
/*style.css*/
.something {
position:absolute;
left: 0px !important;
}
/*plugin's CSS*/
.something {
position:absolute;
left: -50px;
}
/now it has 0px but i want no left value at all/
i know i can set !important so that property wont be overriden, but is there any solution to turn "left" off as Chrome DevTools uncheck a property?
As far as I am aware (someone please feel free to correct me) there is no way to directly "turn off" a CSS property like in the Chrome DevTools.
The closest you can get it to reset the property to its default. In your example, it would be "left:auto;"
P.S. You may wish to adjust your tags to get more views and hopefully answers.
You should use the "auto" value for left:
.something
{
position:absolute;
left:auto !important;
}
"auto" will reset to the default (that is set by browsers for that style)
more info here: http://www.w3schools.com/cssref/pr_pos_left.asp
Specificity is the key to selecting the CSS attribute that you really want. Leverage the specific structure of the HTML in the plugin vs. non-plugin case so that specificity rules select the CSS you desire when plugin rules should apply.
There's a great overview of specificity here:
Source: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
One thought that comes to mind is to use an additional class, plugin, along with an appropriate selector.
If you are trying to override it then you can play with CSS Specificity Rules
I have created a web widget. That my client put in their websites. Basically on load it calls webservice and loads data specific to client.
As a result it looks like:
<div class="widget">
<div class="container">
</div>
</div>
Dynamically I apply CSS styles to my widget class. To look consistent with our corporate styling.
The problem is when client application styles overwrite the style I applied run time.
For example if client has, it overwrites my styles:
body {
margin: 0 auto;
padding: 0;
width: 90%;
font: 70%/1.4 Verdana, Georgia, Times, "Times New Roman";
}
Is there any way to break inheritance? Just to say whatever div with class widget styles has do not inherit parent styles.
I don't think you can break CSS inheritance per se, but you can try to circumvent it by following the rules of CSS specificity. Here's a good article about Specificity.
As a last resort, try adding !important to styles in the widget to give it a higher specificity than the default styles.
#myWidget{
font: 100%/1 "Times New Roman", Serif !important;
}
If the client is also using !important it could cause problems. If you could setup a jsFiddle with an example, we could help find the issue.
Note, going the route of adding !important should be a last resort as it's the 'nuclear option' of style specificity.
You can not force elements to NOT inherit parent styles.
You can however override all possible styles that you do not want changed. If your CSS specificity is higher than the customers specificity then your styles will be dominate/expressed on the page.
See:
CSS Specificity via css-tricks.com
Per your example using the code below would be more specific than the body declaration and thus override :
.widget .container {
font-family: Arial;
}
You can't break style inheritance as such, but you can ensure that your styles are either more important or loaded in the right order so yours comes out on top.
Have a look at the !important tag.
Alternatively if you load your stylesheets after theirs yours will take precedent (unless theirs is inline). You can use Javascript to load your styles after the body has loaded (But then you'd get a "flicker" effect).
You could also try inline styling. Inline styling has the highest priority. This will work if client overrides use an imported stylesheet.
Like others have mentioned, another option is !important.
You can also read up the relevant specs at http://www.w3.org/TR/CSS2/cascade.html where they describe exactly how they cascade. If above mentioned tricks don't work, perhaps specs will give you a clue or you will know for certain that this is not possible.
Use of the !important css attribute is considered a bad practice. Because it introduces the potential for precedence conflicts, and makes it extremely difficult to troubleshoot css in the long run.
A less intrusive approach to this problem is to delimit your widget with an id, and in your stylesheet, to reset some of the most important style declarations using the "universal" selector, such as:
#myWidget *{
margin: 0;
padding: 0;
background: none;
border: none;
}
For example. Then, define your overrides specifically.
I found this reset.css file inside a jquery image slider demo, but it was never included in the main index.html file. what is is suppose to do, and more importantly, where do you put it? Do you put it before any referenced stylesheets()?
Here is the code inside reset.css
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
input{
border:1px solid #b0b0b0;
padding:3px 5px 4px;
color:#979797;
width:190px;
}
address,caption,cite,code,dfn,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
In the beginning, there was no standardisation on how styles worked, each browser implemented what it felt was right. One of the reasons you see so many questions about style errors in IE is because IE was the browser with the most dissimilarities from other browsers in terms of styling. Though IE has improved and so have other browsers they still apply their own borders, padding and margins, zoom, fonts to elements to give their own unique feel to pages. One example is, chrome gives its own yellow borders to text boxes. The "reset" actually "resets" all these styles to zero/none, so that you don't see any styles you haven't applied to your page.
If these styles are not "reset", you will see unwanted styles/effects and things breaking. Its generally recommended to "reset" the browser's styles.
Have a look at this article Should you Reset Your CSS?
reset.css is used to normalize browser's default styles.
Example:
Looking at the answers here there seems to be a bit of mixup between "reset" and "normalize". Their goals are slightly different.
A CSS reset is a set of styles you load prior to your other styles, to remove browser built-in styles. One of first and most popular ones was Eric Mayer's Reset CSS.
Another option is to harmonize browser built-in styles. The most popular tool to achieve this is currently Normalize.css.
Browser have different "built-in" styles which they apply to different html-elements. These styledefinitions may vary accross different browsers. The normalizing css files are meant to „normalize“ the rendering of the page across browsers by resetting these browser-specific styes.
You have to include it before your own style definitions. Otherwise these styles would possibly override (due to the cascading nature of css) your declarations too, which wouldn't make much sense;)
The most popular styles reset is probably Eric Meyer's which comes along with a little background information..
Browsers may render the HTML and CSS received according to its native rendering engine. Different browsers may use different rendering approaches [IE ;) if you know what i mean] so the intension of reset.css is to set all the attributes to common predefined values so the developers/ designers are can forget some rendering engine and start development from the scratch.
A CSS Reset (or “Reset CSS”) is a short, often compressed (minified)
set of CSS rules that resets the styling of all HTML elements to a
consistent baseline.
In case you didn’t know, every browser has its own default ‘user
agent’ stylesheet, that it uses to make unstyled websites appear more
legible. For example, most browsers by default make links blue and
visited links purple, give tables a certain amount of border and
padding, apply variable font-sizes to H1, H2, H3 etc. and a certain
amount of padding to almost everything. Ever wondered why Submit
buttons look different in every browser?
Obviously this creates a certain amount of headaches for CSS authors,
who can’t work out how to make their websites look the same in every
browser.
Using a CSS Reset, CSS authors can force every browser to have all its
styles reset to null, thus avoiding cross-browser differences as much
as possible
refer http://www.cssreset.com/what-is-a-css-reset/
Every browser has its own default user agent stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3, etc. and a certain amount of padding to almost everything.
Ever wondered why Submit buttons look different in every browser?
Obviously this creates a certain amount of headaches for CSS authors, who can’t work out how to make their websites look the same in every browser.
Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible.
From the consistent base that you’ve set up via your reset, you can then go on to re-style your document, safe in the knowledge that the browsers’ differences in their default rendering of HTML can’t touch you!
Hopefully it helped, you may want to take a look at this article, Which CSS Reset Should I Use?.
In simple words CSS reset is required due to browsers’ inconsistency. In detail all browsers rendering are not the same. Therefore web rendering could be different from browser to browser.
Meyer Web providing a utmost CSS reset code if you're want to use/reset. You can find it here. If you need more details, here also you can find out what CSS reset in more details and why we need to use it.
I have a page where the UL is set to padding-left: 40px and I can't find where it is being set. In firebug it shows in 'computed' but isn't in the inherited styles list. I've tried removing the jquery in case it was set in js. I've removing the css - it's still there. I've set a breakpoint on attribute change - nothing.
Setting padding-left:0px doesn't fix IE7
Is there a plugin or some better way of inspecting applied css rules?
It's probably a browser default. If it's not in firebug's style tab, it's being applied by the browser itself.
To get Firebug to show user-agent defined CSS, click on the style tab drop-down and click "Show User Agent CSS" (thanks Gerben).
You can override styles that are set by the user-agent, simply by defining the style attribute for that element:
ul{
padding-left:20px;
}
Note that IE7 uses margin instead of padding as the default style for lists.
You can 'reset' all user-agent defined rules using something like Yahoo's reset stylesheet.
You can also 'normalise' the style applied to a page. This means overriding user-agent defined styles so that all browsers use a standard style. I personally prefer this method over 'resetting' the CSS and having to explicitly define CSS rules for everything. It's easier and takes up less space. Try this library.
That padding-left on ul is coming from the user agent stylesheet.
You can remove it with:
ul {
padding-left: 0;
margin-left: 0
}
Firebug is already the best Firefox plugin for this sort of task. You just need to enable this option: