CSS Tools: Reset and Diagnostics
Published 16 years, 10 months pastI’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.
Comments (21)
Hi, thanks for sharing. I really appreciate having an up-to-date reset made by a reknowned expert.
That’s great, Eric, they’re really useful, especially the diagnostics one, thank you very much!
Gonzalo
Thank you Eric, for making my coding life even easier/lazier.
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!
Thanks Eric,
It would be cool if it had a wee home in svn, for changes and the like?
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.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.
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!
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.
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.
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.
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.
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.
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 situations where it was important, like legal documents.
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.
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
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.
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!
Eric —
I’m not nearly the CSS expert that you are, but might I humbly suggest you add something like I describe here? :
http://striderweb.com/nerdaphernalia/2008/01/html-tip-cross-browser-sup-tags/
It fixes sup tags cross-browser. I suppose similar could be done for sub tags….
Stephen, the point of a reset is not to enforce one specific technique or another. It’s to create a baseline on top of which you can add your own preferred specific techniques, thus customizing the reset for your own use.
So take the reset and add the rules for ‘sup’ and ‘sub’ that you like best. Ditto list indentation, heading sizes, body background and foreground colors, and so on. Then use the resulting “reboot” or “baseline” styles—the reset plus what you added—to be your own personal starting point for your projects.
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.