Geek Answers Handbook

Is this CSS Reset good?

I was going to use Eric Meyer CSS reset, but I came across some differences between browsers (e.g. input fields). Based on this, I came up with a more aggressive approach:

(This is deprecated. Remember to check the current revision at the end of this question and criticize it as you see fit)

 /* CSS Reset by Hugo Leonardo. Based on Eric Meyer CSS Reset (just google it). */ * { margin: 0; padding: 0; border: 0; outline: 0; font: inherit; text-decoration: none; /* in case "font: inherit" fails (IE7) */ font-family: "times new roman"; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; /* remove this block if you DON'T want to support lame browsers */ } :before, :after { content: ''; } :link, :visited, :hover, :active { color: inherit; color: #000; /* for IE7 'inherit' problem (again) */ text-decoration: none; } :focus { outline: 0; } ol li, ul li { list-style: none; } table { /* "collapse" here is because of IE7 (maybe others?). don't remove it as it affects other browsers as well */ border-collapse: collapse; border-spacing: 0; } /* this entire block was copied from Eric Meyer CSS reset */ /* HTML5 "display" reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

It worked smoothly in all tested browsers:

  • IE7
  • IE8
  • Chrome (newest)
  • Firefox (newest)
  • Opera (newest)

Question: Does anyone see a problem here? I consider myself not very good in CSS, so I don’t know if this will affect me in the future.

Designation: this reset is for cross-browser issues only. It should (or should!) Be followed by general rules for elements such as input , a , code , etc. (For example: input type "text" will be invisible without borders!). I will add things like general styles a and stuff later. At the moment, I am reloading things, getting rid of (almost) everything that is not the same in the main browsers.

PROBLEMS DEDICATED TO SO FAR

  • The selector * can cause performance problems.

  • The selector * with some rules overrides some default element styles in such a way that they cannot be restored. ex: default input style of type submit.

  • It's amazing that :before, :after { content: ''; } :before, :after { content: ''; } crashed select elements in Firefox.

  • In the revised version, I tried to set margin: 0 to all input elements. Most browsers ignored it for input like checkbox and radio .

REVISED VERSION

 /* CSS Reset by Hugo Leonardo Leão Mota Based on Eric Meyer CSS Reset: http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/ Helped by fellows in stackoverflow: http://stackoverflow.com/questions/6892982/is-this-css-reset-okay */ /* resetting style for every visible element except 'ruby' family and form controls browsers deal with controls (and ruby style) in their own way */ a, abbr, acronym, address, b, big, blockquote, body, br, caption, cite, code, col, colgroup, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, hr, html, i, img, ins, kbd, label, legend, li, noscript, object, ol, p, pre, q, samp, small, span, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, ul, var { margin: 0; padding: 0; border: 0; outline: 0; font: inherit; text-decoration: none; /* in case "font: inherit" fails (IE7) */ font-family: "times new roman"; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; /* remove this block if you DON'T want to support lame browsers */ } /* browsers are free to handle controls but we can't let them mess up with the other elements */ button, select, textarea, input[type=text], input[type=password], input[type=submit], input[type=image], input[type=reset], input[type=button], input[type=file] { margin: 0; } :link, :visited, :hover, :active { color: inherit; color: #000; /* for IE7 'inherit' problem (again) */ text-decoration: none; } :focus { outline: 0; } ol li, ul li { list-style: none; } table { /* "border-collapse" here is because of IE7 different behaviour (maybe others?). don't remove it as it affects other browsers as well */ border-collapse: collapse; border-spacing: 0; } /* the next two blocks were copied from Eric Meyer CSS reset */ blockquote:before, blockquote:after, q:before, q:after { content: ''; } /* HTML5 "display" reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

End

Well, the more I tried to improve my reset, the more it looked like meyer css reset , so I gave mine and accepted it. works fine: p

+4
source share
4 answers

I generally think that large-scale CSS dumps are not the best. I agree with Rus Wakeley, who is “nullified” on three big issues:

  • Each item that reset needs to be redefined. CSS file size and maintenance may increase.
  • You may forget to redo something that you reset.
  • Some dumping is harmful for users who rely on the keyboard for navigation.

See your entire presentation here: http://www.maxdesign.com.au/articles/css-reset/

In particular, I think the following should not be reset, as it is in your stylesheet

 :before, :after { content: ''; } :link, :visited, :hover, :active { color: inherit; color: #000; /* for IE7 'inherit' problem (again) */ text-decoration: none; } :focus { outline: 0; } ol li, ul li { list-style: none; }

focus is an accessibility problem.

ol and ul must have their default styles. Most likely, they will be needed. (Although you may need to rewrite them for navigation.)

:link, :visited, :hover, :active I would use reset only as needed.

As indicated and acknowledged by you *{ // } , performance problems may occur and may cause unforeseen problems.

Also, I would like to add something to reset the large upper and lower margins in the headers

h1, h2, h3, h4, h5, h6 {margin-top:0; margin-bottom:0;}

+6
source

This uses * , which will affect everything. You cannot get borders for input, select , etc. Using a "later" style sheet.

In addition, * is considered bad for performance . The use of explicit tags is preferred.

Try html5boilerplate reset if you have problems with Eric (not sure if he will resolve them, but it’s worth taking a picture)

+4
source

My only problem is the performance issue caused by using the * selector

+1
source

I do not see any problems with this, if you tested it and it works, then everything should be fine.

0
source

More articles:


All Articles