The Complete List of CSS Tools

There are so many great CSS Tools out there to use!  Please feel free to use this list as the most up to date list on the Internet.  Also if you love this list, make sure you sign up for the newsletter at the top right of the site!

Other Great Real World Lists

User Interface

Accesability Checkers

Formatters and Optimizers

Fonts

Forms

Layout

Galleries

Help Guides / Hacks / Learning Materials


  • Explains the structure of CSS- and HTML-documents. Enter semi-colon separated selectors or just paste in your existing rulesets into the “Direct Input” area, or provide the URL of a stylesheet or an HTML document with an embedded stylesheet in the “URL Input” area. English, Spanish, German and Bulgarian versions are available.
  • Tom Lee has a tutorial on Max-width in IE Using a CSS Expression. Word of caution: I hear using this method can be rather hairy, in some cases crashing the browser.
  • Future-proof your CSS with Conditional Comments from Bruce Lawson is a great comprehensive collection of CSS’s that, when combined, addresses most of CSS issues with different browsers.
  • IE Word Wrap Doppelganger Bug — Sitepoint on how heading elements could leave a small trail of itself as it wraps to the next line in IE6.
  • Images, Tables, and Mysterious Gaps seems like something I should’ve known already about the behavior of inline elements in strict mode. But of course it took me an hour of agony before finally realizing the ultimate truth: I’m not that smart.
  • Easy CSS hacks for IE7 — Some CSS hacks that will work with IE7. Hey, you never know.
  • Web Browser CSS Support with updated listings for IE7, Firefox 1.5, and Opera 8.5.
  • snook.ca on the “+” CSS hack which you can use to target IE6 and IE7 only.
  • On having layout reveals some information and workarounds for IE’s strange and proprietary ‘rendering-concept’: hasLayout — one of the major causes for headache when it comes to how IE decides to pain the boundaries of certain HTML elements:
    • “…A lot of Internet Explorer’s rendering inconsistencies can be fixed by giving an element “layout.” John Gallant and Holly Bergevin classified these inconsistencies as “dimensional bugs,” meaning that they can often be solved by applying a width or height. This leads to a question of why “layout” can change the rendering of and the relationships between elements. The question, albeit a good one, is hard to answer. In this article, the authors focus on some aspects of this complicated matter. For more thorough discussions and examples, please refer to the links provided.”
  • Negative text-indent and underline — No matter how far on the left the real text is, the underline will be stretched all the way to the right in some PC browsers, namely the Firefox.
  • IE6 Multi Class Bug — Again, something that could’ve brought to my attention last week!
    • “…Internet Explorer fails to render backgrounds for elements that have both an ID and a class defined. For instance, #photos.background1 will display the corresponding background in IE6 for Windows, but once that has been defined, #photos.background2, #photos.background3, etc. will not be displayed.”
  • Ten more CSS tricks you may not know — includes few IE bug fix techniques
  • The “Holly” Hack — taming IE/Win CSS display bug by assigning a dimensional value such as height:1%;
  • CSS tests — a great list of all the CSS gotcha’s under one roof.
  • max-width in IE using VERY little known IE-only CSS “Dynamic properties”
  • List of @import hacks to hide CSS from different browsers.
  • Essentials of CSS Hacking For Internet Explorer — an excellent list of quick hints on safeguarding your CSS against IE.
  • Web browser standards support — Charts comparing IE 6, Firefox 1.0, and Opera 8.
  • Full CSS property browser compatibility chart
  • The perils of using XHTML properly — Potential pitfalls of declaring application/xhtml+xml MIME type.
  • IE Double Float Margin Bug.

Tips and Tricks