CSS Tools: Reset and Diagnostics
I’ve hinted and teased and promised, and I’ve yet to make good on any of it. I’m sorry. Can I make it up to you?
Okay, then, here you go: a permanent home for my reset styles. It takes up residence in a new “CSS” subsection of the Toolbox section of the site, along with my efforts to create a generic set of diagnostic styles. In the case of the resets, I’ll increment the version number and date whenever I make changes, and probably maintain an archive of previous versions. Not that I expect that to happen with any frequency, but you never know.
The diagnostics are a lot more experimental and thus aren’t so formal as to have things like version numbers. If I change anything of specific interest there, I’ll try to write a post about it. I should get around to writing about the shown-in-page stylesheet one of these days, though I figure anyone can view source and work out the particulars without too much effort.
18 Responses»
D wrote in to say...
Hi, thanks for sharing. I really appreciate having an up-to-date reset made by a reknowned expert.
Gonzalo wrote in to say...
That’s great, Eric, they’re really useful, especially the diagnostics one, thank you very much!
Gonzalo
Josh Walsh wrote in to say...
Thank you Eric, for making my coding life even easier/lazier.
Alan Bristow wrote in to say...
Thanks Eric, this is most welcome. I really value a well considered reset approach.
God[ ] / The Devil [ ] is in the detail so I see this as rather important for consistency from browsers. Hurrah!
Stephen wrote in to say...
Thanks Eric,
It would be cool if it had a wee home in svn, for changes and the like?
Jason Crosse wrote in to say...
Nice one.
I do have a suggestion, though. To fix inconsistent behaviour in Gecko, I personally add
li {-moz-float-edge:content-box;}to my own default stylesheet.Jason G wrote in to say...
Quick question, I looked around but did not see an answer, why does a table still need cellspacing=”0″ with the reset styles? I suspect this has to do with IE5 or 6.
Eric Meyer wrote in to say...
You suspect largely correctly, Jason G. Support for ‘border-spacing’ is not quite as widespread as I’d like, so I left in the reminder. Over time, that will become unnecessary.
Thanks for the suggestion, Jason C. I’m reluctant to include it given that it will break validation, though I can be talked out of that reluctance. What inconsistent behavior are you fixing with that rule?
I don’t think I’m going to put this into a version-control system (CVS, Subversion, etc.) other than the one in my head, Stephen. Sorry, but it just seems like massive overkill to me. Maybe I could wiki-ize it, but for that I’d have to set up a wiki. Again, feels like hitting a fly with a cruise missile. Maybe I’ll just run diffs and post them as needed? Dunno.
To everyone else: you’re welcome, and thanks for your interest and support!
Jason G wrote in to say...
It is funny because I ran into this exact problem today while fixing some table CSS. IE 7 does not support
border-spacing, however, when usingborder-collapse: collapse, the border spacing is irrelevant. I am unable to test this in IE 6 at the moment.The worst table offender has to be the caption element though, I am convinced it is not possible to have identical and correct rendering across the major browsers.
Will Kelly wrote in to say...
Just noticed a problem with using ‘background: transparent;’ and transparent background PNG’s in IE7. Child elements contained within an element styled in such a way causes the bg to disappear where they overlay, showing through anything below.
Not that transparent PNG’s don’t have major issues in IE7 anyway (especially in large backgrounds with contained floats), but thought this might be worth noting.
Jason Crosse wrote in to say...
It’s hard to explain: I was using nested lists, and they would not float as expected (they worked fine in Safari, Opera, IE). Here’s the bug on bugzilla, and here is a very good illustration of the problem.
Neal G wrote in to say...
I never thought of using CSS in this manner. It never dawned on my when I was the web developer toolbar that I could just write my own customer CSS and tailor it my way.
I expanded on your ideas and made it my own. Check out my version of CSS Diagnostics. I included a lot of depreciated elements and attributes.
James Hopkins wrote in to say...
Eric, while I would be in favour of using a more ‘custom’ style reset declaration, I disagree with your decision to use the :before and :after pseudo elements to remove the user-agent generated quote marks from the Q elements, in this particular instance. As per the W3C guidelines, it is the user-agent’s responsibility “… that the content of the Q element is rendered with delimiting quotation marks”.
While Paul Chaplin most likely had IE6 in mind (and it’s inability to render the necessary delimiting quote marks), an author should not manually include the quote marks (in the form of ampersands or other) in the markup – as I’ve mentioned before, this is the sole responsibility of the user-agent.
Eric Meyer wrote in to say...
James, I disagree with the W3C’s guidelines in this area, because they assume perfect support for things like generated content and user agents using it by default. That’s kind of like writing a guideline that requies all vector graphics to be done with SVG on the assumption that all user agents support it.
As I’ve said before, I would no more rely on generated content to insert quotation marks than I would rely on ‘counter’-based automated list numbering in situatoins where it was important, like legal documents.
James Hopkins wrote in to say...
Eric, thanks for your reply – interesting to hear your thoughts on the matter.
Whilst I agree with you in principle, I am with the W3C on this, in that you’re having to remove the default, correct behaviour of standards compliant user-agents in order to achieve cross browser compliancy with regards to inferior browsers (IE7 and below).
I’m much more in favour for ignoring IE’s need for authors to include specific ampersands in the markup, and rather include a conditional IE style declaration that indicates to the users using IE that it is indeed a short quote – perhaps italic font style? I guess this could be seen as an element of progressive enhancement – default, correct behaviour for standards-compliant UA’s, and a fallback option for users of IE.
I guess at the end of the day, it comes down to what the author deems the most suitable solution for that partiular instance.
Just my two cents though.
Doug Gibson wrote in to say...
Hey Eric. I recently upgraded to your reset.css v1.0 and noticed that the background:transparent doesn’t play well with IE 6 or 7. All of my striped tables with a class applied to the TR no longer show up. This otherwise has always worked cross-browser. I blogged about it a little more in-depth here:
http://dgibson.net/blog/article.cfm/articleid=10/Meyers-CSS-Reset-v1-0-Doesnt-Play-Well-With-IE
Doug Gibson wrote in to say...
Thanks for the comment, Eric. That’s an interesting bug I haven’t experienced until now. Your explanation gives me a way to work around it (with descendant selectors) even if I keep the background:transparent too.
But my question then is what is the purpose of the declaration? Are there any known browser issues (minus NS4, which everyone filters out) with background inheritance that necessitate setting the background explicitly like this? If so, I would definitely keep it in there and put the IE fixes in my iehacks.css. If not, it seems kind of silly to declare it and have to undo it for IE (and on multiple classes and hover states) for no other good reason.
Thanks for your insights.
Mark S wrote in to say...
What scares me is how designer CSS is omitting a huge new market – Reset and W3C could have a king-pin role here, if they would only stop smooching in the lockers. CSS Reset is a reliable and invaluable tool that W3C should take very seriously. The politic is so obvious. White faces in corp heaven don’t want to interfere, but … but what? I have found that Eric’s model works well in a plain XHTML frame, however, devices and javascript-dom are pushing reset into a catchup phase. We know W3C should get their “reset” set as desktop standard a.s.a.p. For example,
displayandclearmake unstable inserts for Hendrick’s pinkandyellow.com Carpet due to the latest and greatest js presence. Well, this means Reset should also be de-constructing burgeoning mobile device frames as our sites are now beginning to leak into an entirely new universe. Another example,azimuthshould interest GPS techs lapping up next year’s enviro jaunts, yes? Anyone adding ‘critical’ device goodies to the recipe? Anyway, we know you inimicable genii, gracing Eric’s zone and all are already roasting critical corp hotlines and keeping test labs hard at work! … Me? I’m a pilfering novice lost in wonder over things like why that text wrappping around an inline side-bar div on W3 Schools is glaringly absent (DoodlesdeeBee @ css-discuss, 2005 – concurrently we mocked up a lab at mountainclubs.bc.ca) now, three (3) years later. Yes, Reset needs some formal educating. Maintain our communication standards with up front user contact.Please do not reset this message!