CSS Reset for Chrome

Question

Hi I realise what I should have done is start with a CSS reset but I developed my website in Chrome with its defaults and then started trying to make it cross browser compatible once I finished. If I add any of the common CSS resets I loose margins, text becomes smaller and in-line Span tags with backgrounds even overlap each other, everything is messed up.

So I guess what I'm looking for is a CSS reset, set to Chrome, that will make all other browsers look like my page does in Chrome. Is there anything like this or a way of doing it?

Answer 1

Found a solution to my own question for once. I just tried normalize.css from http://necolas.github.com/normalize.css/ and it keeps the useful modern styles and fixes insentiences with other browsers (ie. IE). Looks about the same on both Chrome and IE when using "IE9 document standards".

Answer 2

When you do this, It will be nice for chrome users, But not for firefox, edge, opera, safari, and internet explorer users.

Chrome's html.css file includes some vendor prefixes that will not work on other browsers.

Maybe they are not also available in other browsers. Example: -webkit-fill-available, for that no values, even prefixed available in browsers except firefox.

The html.css file is more based upon prefixes. They try to use prefixes even if the universal property works in the browser.

It can be a native experience for chrome users, but on the other hand, be compromised for the rest of 30% of users.

Moreover, it will add a burden to you. Because more than 70% of the users are using chromium-based (Yes, all of the browsers have some tweaks in the html.css file) browsers. Simply useless loading on 80% of browsers.

I don't think the file is short enough. To be compressed to less than 5kb.

I recommend using a CSS normalizer. Something based upon normalize.css, But maintained and better.

List of a few perfect CSS Normalizers

• Reseter.css - https://github.com/krishdevdb/reseter.css
• Sanitize.css - https://github.com/csstools/sanitize.css

Answer 3

You may want to take a look at http://html5boilerplate.com/, it has structure and CSS for most modern browsers.

Cheers

Iain

Answer 4

I've always use Eric Meyers css reset snippet. I actually like it more than the one included in html5 boilerplate.

/* 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;
}

Answer 5

There is no css reset for a special browser. And that is exactly the thing, you want to reset the css to have in every browser the same starting position.

The problem you face is, that you haven't implemented the reset right away. You will have no other choice then do the additional amount of work to integrate the reset now and learn for your next project, that you start with the reset and build your css based on that.

Answer 6

According to this post:

Browsers' default CSS for HTML elements

http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css is the CSS used by Chrome. I haven't tested it though so try it out and see if it works.

Answer 7

Recently, Firefox 27 has added a new CSS3 property and defaulting keywords.

You can now, in Firefox 27+ reset the entire page with:

* { all: unset !important; }

That's a hammer approach. You can be much more refined as well.

blockquote, option { margin:unset; }
a { text-decoration: initial; }

etc.