11
It was not uncommon to go through situations where the browser itself interferes with the stylesheet by adding defaults parameters such as margin size and headers fonts, default line height.
Is there any way to reset a CSS, ie "reset" all parameters to prevent browser interference?
11
There is no standard and absolute solution to remove browser interference, but you can upgrade the standards to a certain standard by inserting a CSS normalization file that sets all CSS rules to a standard, I recommend using the normalize.css (code).
It seems to be the most complete and updated option for this function.
6
You can use the Generic selector and reset everything as you see fit...
*{
margin: 0;
padding: 0;
...
}
2
I know two ways, one of them is a well known and discussed reset
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
But there are criticisms that a reset is not the ideal mode, that instead of ending all styles the most appropriate would be to normalize the styles between browsers. For this they created the normalize.css
2
This could be a starting point.
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126
License: none (public domain)*/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p,
blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em,
img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u,
i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table,
caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details,
embed, figure, figcaption, footer, header, hgroup, menu, nav, output,
ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu,
nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
In http://cssreset.com/ You have this and 4 other options, it’s worth a look.
I think clearing the browser cache also helps in some cases
The browser cache has nothing to do with it...it clears the cached css data of the application in question, not default browser data...
Meyer is my favorite because it is the one that gives me least cross-browser problem.
1
Usually I use the Normalize.css
Normalize.css makes browsers render all Elements more consistently and in line with Modern standards. It precisely targets only the Styles that need normalizing.
translating:
Normalize.css makes browsers play all elements more consistently and to modern standards. It achieves uniquely and precisely the styles that need to be normalized.
1
Knows the Normaset? It is a normalizer and CSS reset.
According to his website:
1
Each makes the css reset according to the way it works I for example like my css reset so
* {margin:0; padding:0; list-style:none; vertical-align:baseline;}
or you can be a little more violent and reset it like this
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p,
blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em,
img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u,
i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table,
caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details,
embed, figure, figcaption, footer, header, hgroup, menu, nav, output,
ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu,
nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
That goes from each one
Lucas, welcome! This answer is almost identical to the accepted answer. So it seems to me unnecessary to publish it. If you want to develop more and explain the code, others may find it useful and vote, but I suggest deleting it.
Browser other questions tagged css
You are not signed in. Login or sign up in order to post.
I used to use Normaliza, but a few days ago I met this other normalizer here http://christianfortes.github.io/normaset/ have a try on it.
– Daniel Castro
It has already been well answered, but it is always good to remember that the interference of the browser in general is a sign that the author lacked to define a rule for that element. Generally making a dedicated css pro site and/or application in question makes normalizers unnecessary.
– Bacco