CSS Equalizer

November 4 2005 November 4, 2005

CSS Equalizer is basically just my attempt to create a stylesheet that "equalizes" the browser experience for web developers. I try to do this by re-defining all of the tag rules before any custom styles are applied. Theoretically if all styles start out equal they should end up equal. A pre-load of those rules should accomplish this ... and to a large extent it seems to be working.

Just try loading this CSS before your own styles and test it on different web browsers to see it in action. Oh and, of course, this website uses CSS Equalizer.

equalizer.css
  1. /**
  2.  * equalizer.css
  3.  *
  4.  * An equalizing stylsheet designed for the sole purpose of resetting the
  5.  * rendering behaviors of all modern web browsers before applying any custom
  6.  * CSS styles. This stylesheet must be loaded before all others.
  7.  *
  8.  * @author Toby Miller <tmiller@tobymiller.com>
  9.  * @copyright Copyright (C) 2008, Toby Miller
  10.  * @license http://www.opensource.org/licenses/mit-license.php The MIT License
  11.  * @version 0.2
  12.  */
  13.  
  14. HTML, LEGEND {
  15.   color:#000;
  16.   background:#FFF;
  17. }
  18. BODY {
  19.   font:13px/1.231em Verdana,Helvetica,Arial,sans-serif;
  20. }
  21. BODY, DIV, DL, DT, DD, UL, OL, LI, H1, H2, H3, H4, H5, H6, PRE, CODE, FORM,
  22. FIELDSET, LEGEND, INPUT, TEXTAREA, P, BLOCKQUOTE, TH, TD {
  23.   margin:0;
  24.   padding:0;
  25. }
  26. BLOCKQUOTE, UL, OL, DL {
  27.   margin:1em;
  28. }
  29. OL, UL, DL {
  30.   margin-left:2em;
  31. }
  32. DL DD {
  33.   margin-left:1em;
  34. }
  35. OL LI {
  36.   list-style: decimal outside;
  37. }
  38. UL LI {
  39.   list-style: disc outside;
  40. }
  41. TABLE {
  42.   border-collapse:collapse;
  43.   border-spacing:0;
  44.   font-size:inherit;
  45.   font-size:100%;
  46. }
  47. IMG {
  48.   border:0;
  49. }
  50. ADDRESS, CAPTION, CITE, CODE, DFN, EM, STRONG, TH, VAR {
  51.   font-style:normal;
  52.   font-weight:normal;
  53. }
  54. EM {
  55.   font-style:italic;
  56. }
  57. H1,H2,H3,H4,H5,H6,STRONG {
  58.   font-weight:bold;
  59. }
  60. PRE, CODE, KBD, SAMP, TT {
  61.   font-family:"Courier New",Courier,monospace;
  62.   line-height:100%;
  63. }
  64. LI {
  65.   list-style:none;
  66. }
  67. CAPTION, TH {
  68.   text-align:center;
  69. }
  70. CAPTION {
  71.   margin-bottom:.5em;
  72. }
  73. TH {
  74.   font-weight:bold;
  75. }
  76. TH, TD {
  77.   border:1px solid #000;
  78.   padding:.5em;
  79. }
  80. H1, H2, H3, H4, H5, H6 {
  81.   font-size:100%;
  82. }
  83. H1 {
  84.   font-size:138.5%;
  85. }
  86. H2 {
  87.   font-size:123.1%;
  88. }
  89. H3 {
  90.   font-size:108%;
  91. }
  92. H1,H2,H3 {
  93.   margin:1em 0;
  94. }
  95. P, FIELDSET, TABLE, PRE {
  96.   margin-bottom:1em;
  97. }
  98. Q:before, Q:after {
  99.   content:'';
  100. }
  101. ABBR, ACRONYM {
  102.   border:0;
  103.   border-bottom:1px dotted #000;
  104.   font-variant:normal;
  105.   cursor:help;
  106. }
  107. SUP {
  108.   vertical-align:text-top;
  109. }
  110. SUB {
  111.   vertical-align:text-bottom;
  112. }
  113. INPUT, TEXTAREA, SELECT {
  114.   font-family:inherit;
  115.   font-size:inherit;
  116.   font-weight:inherit;
  117. }
  118. TEXTAREA {
  119.   overflow:auto;
  120.   overflow-y:scroll;
  121. }
  122.  
  123.  

And for those of you that still have to support IE, pity. Load this in as well.

equalizer-ie.css
  1. /**
  2.  * equalizer-ie.css
  3.  *
  4.  * An companion equalizing stylsheet to equalizer.css designed for the sole
  5.  * purpose of resetting the rendering behaviors of IE browsers which without
  6.  * the employ of any CSS hacks. This stylesheet must be loaded after
  7.  * equalizer.css but before all others.
  8.  *
  9.  * To load this stylesheet for IE browsers only please use the following
  10.  * syntax:
  11.  *
  12.  * <!--[if lt IE 8]>
  13.  *     <link rel="stylesheet" type="text/css" media="all" href="css/equalizer-ie.css"/>
  14.  * <![endif]-->
  15.  *
  16.  * @author Toby Miller <tmiller@tobymiller.com>
  17.  * @copyright Copyright (C) 2008, Toby Miller
  18.  * @license http://www.opensource.org/licenses/mit-license.php The MIT License
  19.  * @version 0.2
  20.  */
  21.  
  22. BODY {
  23.   font-size:small;
  24.   font:x-small;
  25. }
  26. PRE, CODE, KBD, SAMP, TT {
  27.   font-size:108%;
  28. }
  29. INPUT, TEXTAREA, SELECT {
  30.   font-size:100%;
  31. }
  32.  
  33.  

I like input so please pass it on if you have some. =)