Articles :: CSS :: Equalizer
written by Toby Miller on August 2, 2005 August 2, 2005
The Equalizer is an external style sheet that provides cross browser style rendering for web pages. It should never need changed unless you're improving on the project (at least that's the theory). What it does is pre-define all of the styles that are important to a HTML/XHTML tag, which in effect makes your site work better across all of the modern web browsers typically used today.
How it works
The reason this works is simple. Most browsers have their own basic idea of how a particular tag is defaultly rendered. If you pre-define how you want that tag to render regardless of browser, then you've created a cross-browser behavior for that tag. Do that for all of the tags that you might use and you've essentially created cross browser rendering behaviors which act the way you expect them to in the first place. Now add in your own site/page specific styles and you have a cross browser web page. This site uses Equalizer.
It can be implemented like this:
highlighted code:
1:DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
2:<html lang="en" xml:lang="en">
3:<head>
4:<title>your page title</title>
5:<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
6:<link rel="stylesheet" type="text/css" href="/styles/equalizer.css"/>
7:<link rel="stylesheet" type="text/css" href="/styles/site_specific.css"/>
8:<link rel="stylesheet" type="text/css" href="/styles/page_specific.css"/>
9:<link rel="SHORTCUT ICON" href="/favicon.ico"/>
10:</head>
11:<body>
12:your html output
13:</body>
14:</html>
Note: If you still support Internet Explorer (as most of us still do) then you'll have to make special accomodations in your markup for some form elements. All INPUT fields (except for text fields) will need to use pre-defined class names to let IE know the difference between the different INPUT types. Here are some examples:
BAD
highlighted code:
1:<input type="checkbox" name="mycheck" value="1"/>
2:<input type="radio" name="myradio" value="1"/>
3:<input type="button" value="click me"/>
4:<input type="reset" value="reset me"/>
5:<input type="submit" value="submit me"/>
GOOD
highlighted code:
1:<input type="checkbox" class="checkbox" name="mycheck" value="1"/>
2:<input type="radio" class="radio" name="myradio" value="1"/>
3:<input type="button" class="button" value="click me"/>
4:<input type="reset" class="reset" value="reset me"/>
5:<input type="submit" class="submit" value="submit me"/>
BETTER
highlighted code:
1:<input type="checkbox" class="checkbox" name="mycheck" value="1"/>
2:<input type="radio" class="radio" name="myradio" value="1"/>
3:<button>click me</button>
4:<button type="reset">reset me</button>
5:<button type="submit">submit me</button>
Source Code
Try it for yourself, just copy and paste the following CSS into a text file and save it as "equalizer.css". If you end up finding this code useful or know of other similar projects I'd love to hear about it.
highlighted code:
1:/**
2:* A generic CSS stylsheet meant to bring all of the browsers down to a common
3:* denominator before applying your own stylesheets. Just make sure this
4:* stylesheet is loaded first.
5:*
6:* @author Toby Miller
7:* @copyright Copyright (C) 2004-2006, Toby Miller
8:* @license http://www.gnu.org/copyleft/lesser.html GNU Lesser General Public License
9:*/
10:
11:/**
12:* Default Fonts
13:*/
14:BODY, DIV, P, TH, TD {
15:/*A, B, ADDRESS, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, DD,
16:DEL, DFN, DIV, DL, DT, EM, FORM, H1, H2, H3, H4, H5, H6, I, INPUT, INS, KBD,
17:LABEL, LEGEND, LI, OL, OPTGROUP, OPTION, P, PRE, SAMP, SELECT, SMALL, SPAN,
18:STRONG, SUB, SUP, TD, TEXTAREA, TH, TT, U, UL, VAR {*/
19: font-family:Verdana,Arial,Helvetica,sans-serif;
20: font-style:normal;
21: font-weight:normal;
22: font-size:11px;
23: line-height:140%;
24:}
25:SUB, SUP {
26: font-size:0.7em;
27:}
28:BIG {
29: font-size:1.1em;
30:}
31:H1 {
32: font-size:1.3em;
33:}
34:H2 {
35: font-size:1.25em;
36:}
37:H3 {
38: font-size:1.2em;
39:}
40:H4 {
41: font-size:1.15em;
42:}
43:H5 {
44: font-size:1.1em;
45:}
46:H6 {
47: font-size:1.05em;
48:}
49:SMALL {
50: font-size:0.9em;
51:}
52:ADDRESS, CITE, DFN, EM, I, OPTGROUP, VAR {
53: font-style:italic;
54:}
55:B, BIG, H1, H2, H3, H4, H5, H6, OPTGROUP, STRONG, TH {
56: font-weight:bold;
57:}
58:B A, BIG A, H1 A, H2 A, H3 A, H4 A, H5 A, H6 A, OPTGROUP A, STRONG A, TH A {
59: font-size:1.0em;
60: font-weight:bold;
61:}
62:CODE, KBD, PRE, SAMP, TT {
63: font-family:monospace;
64: font-size:1.1em;
65:}
66:
67:/**
68:* Default Spacing
69:* TM: Removed IFRAME
70:*/
71:ADDRESS, BLOCKQUOTE, BODY, CAPTION, DIV, DD, DL, DT, FORM,
72:HR, HTML, IMG, LI, PRE, SPAN, TABLE, TR, TD, TH {
73: margin: 0;
74: padding: 0;
75:}
76:DT {
77: margin-left:1em;
78:}
79:DD {
80: margin-left:2em;
81:}
82:P, H1, H2, H3, H4, H5, H6 {
83: padding:0;
84: margin:1.5em 0 1.5em 0;
85:}
86:TABLE {
87: border-collapse: collapse;
88: border-spacing: 0;
89:}
90:INPUT, TEXTAREA {
91: margin:0;
92: padding:0.2em 0.25em;
93:}
94:BUTTON, INPUT[type='button'], INPUT[type='submit'], INPUT[type='reset'], INPUT[type='file'] {
95: margin:0;
96: padding:0.1em 1em;
97:}
98:INPUT[type='checkbox'], INPUT[type='radio'] {
99: margin:0.2em;
100: padding:0;
101:}
102:SELECT, OPTION {
103: margin:0;
104: padding:0;
105:}
106:HR {
107: border:0;
108:}
109:FIELDSET {
110: padding:1em;
111: margin:1.5em 0 1.5em 0;
112:}
113:LEGEND {
114: margin:0 0 1em 0;
115: padding:0 0.5em;
116:}
117:FIELDSET > LEGEND {
118: margin:0 0 0.3em 0;
119:}
120:UL, OL {
121: margin:0 0 0 3em;
122: padding:0;
123:}
124:OPTGROUP OPTION {
125: margin:0 0 0 2em;
126: padding:0;
127:}
128:
129:/**
130:* Default Colors
131:*/
132:HTML, BODY {
133: background-color: #fff;
134:}
135:BODY, BUTTON, CAPTION, INPUT, OPTION, SELECT, TEXTAREA {
136: color: #333;
137:}
138:A {
139: cursor:pointer;
140:}
141:A,
142:A:link {
143: color: #369;
144:}
145:A:visited {
146: color: #369;
147:}
148:A:active {
149: color: #960000;
150:}
151:INPUT, SELECT, TEXTAREA {
152: background-color:#fff;
153: border:1px solid #000;
154:}
155:INPUT[type='checkbox'], INPUT[type='radio'] {
156: background-color:transparent;
157: border:0;
158:}
159:BUTTON {
160: background-color: #d3d3d3;
161: border:2px outset #d3d3d3;
162:}
163:INPUT[type='button'], INPUT[type='submit'], INPUT[type='reset'] {
164: background-color: #d3d3d3;
165: border-style:outset;
166:}
167:HR {
168: color:#333;
169: background-color:#333;
170:}
171:FIELDSET {
172: border:1px solid #000;
173:}
174:/*
175:IFRAME {
176: border:1px solid #000;
177:}
178:*/
179:
180:/**
181:* Default Link Behaviors
182:*/
183:A:link, A:visited, A:active {
184: text-decoration: none;
185:}
186:A:hover {
187: text-decoration: underline;
188:}
189:IMG {
190: border:none;
191:}
192:/*BUTTON, INPUT[type='button'], INPUT[type='submit'], INPUT[type='reset'] {
193: cursor: pointer;
194:}*/
195:
196:/**
197:* Default List Behavior
198:*/
199:OL, OL OL OL OL, OL OL OL OL OL OL OL, OL OL OL OL OL OL OL OL OL OL {
200: list-style: decimal;
201:}
202:OL OL, OL OL OL OL OL, OL OL OL OL OL OL OL OL, OL OL OL OL OL OL OL OL OL OL OL {
203: list-style: lower-alpha;
204:}
205:OL OL OL, OL OL OL OL OL OL, OL OL OL OL OL OL OL OL OL, OL OL OL OL OL OL OL OL OL OL OL OL {
206: list-style: lower-roman;
207:}
208:UL, UL UL UL UL, UL UL UL UL UL UL UL, UL UL UL UL UL UL UL UL UL UL {
209: list-style: disc;
210:}
211:UL UL, UL UL UL UL UL, UL UL UL UL UL UL UL UL, UL UL UL UL UL UL UL UL UL UL UL {
212: list-style: circle;
213:}
214:UL UL UL, UL UL UL UL UL UL, UL UL UL UL UL UL UL UL UL, UL UL UL UL UL UL UL UL UL UL UL UL {
215: list-style: square;
216:}
217:
218:/**
219:* Default Dimensions
220:*/
221:TEXTAREA {
222: width:20em;
223: height:5em;
224:}
225:/*
226:IFRAME {
227: width:50em;
228: height:20em;
229:}
230:*/
231:HR {
232: width:100%;
233: height:2px;
234:}
235:
236:/**
237:* Miscellaneous Behaviors
238:*/
239:TEXTAREA {
240: overflow:auto;
241:}
242:
243:/**
244:* IE Specific Hacks
245:* What style sheet would be complete without this section?
246:*/
247:* HTML BODY BUTTON
248:{
249: padding:0;
250:}
251:* HTML BODY FIELDSET {
252: margin:0.5em 0 1.5em 0;
253:}
254:* HTML BODY OPTGROUP OPTION {
255: margin:0;
256: padding:0;
257:}
258:* HTML BODY SUB {
259: font-size:0.8em;
260:}
261:* HTML BODY SUP {
262: font-size:0.8em;
263:}
264:* HTML BODY INPUT.checkbox {
265: margin:0;
266: padding:0;
267: border:0;
268:}
269:* HTML BODY INPUT.radio {
270: margin:0;
271: padding:0;
272: border:0;
273:}
274:INPUT.button {
275: margin:0;
276: padding:0.1em 1em;
277: background-color: #d3d3d3;
278: border:2px outset #d3d3d3;
279: cursor: pointer;
280:}
281:INPUT.submit {
282: margin:0;
283: padding:0.1em 1em;
284: background-color: #d3d3d3;
285: border:2px outset #d3d3d3;
286: cursor: pointer;
287:}
288:INPUT.reset {
289: margin:0;
290: padding:0.1em 1em;
291: background-color: #d3d3d3;
292: border:2px outset #d3d3d3;
293: cursor: pointer;
294:}
295:* HTML BODY INPUT.button {
296: padding:0;
297:}
298:* HTML BODY INPUT.submit {
299: padding:0;
300:}
301:* HTML BODY INPUT.reset {
302: padding:0;
303:}
304:
305:/**
306:* Browser Notes
307:*
308:* If possible:
309:* DO NOT USE <input type='button'/>, USE <button></button>
310:* DO NOT USE <input type='submit'/>, USE <button type='submit'></button>
311:* DO NOT USE <input type='reset'/>, USE <button type='reset'></button>
312:* DO NOT USE <input type='checkbox'/>, USE <button type='checkbox'></button>
313:* DO NOT USE <input type='radio'/>, USE <button type='radio'></button>
314:*
315:* If not possible:
316:* USE <input type='button' class="button"/>
317:* USE <input type='submit' class="submit"/>
318:* USE <input type='reset' class="reset"/>
319:* USE <input type='checkbox' class="checkbox"/>
320:* USE <input type='radio' class="radio"/>
321:*
322:* Do regardless:
323:* DO NOT USE <q></q>, DOES NOT WORK IN IE
324:* DO NOT USE <menu></menu>, USE UL INSTEAD
325:* DO NOT USE <dir></dir>, USE UL INSTEAD
326:* IFRAME MUST CONTAIN <iframe frameborder="0" src=""></iframe> MINIMUM
327:*/
328:
Download Source Code
I hope this information was useful. As always let me know if you have any questions, find mistakes in my code or just want to chat about the topic.
permalink
|
Natural Living (5)
Heating & Cooling (1)
Herbal Remedies (1)
Personal (0)
Family (1)
Humor (11)
Miscellaneous (1)
Politics (5)
Technology (2)
System Administration (4)
Linux (1)
Solaris (0)
Web Development (2)
CSS (3)
Design (1)
Flash (1)
JavaScript (11)
PHP (1)
CakePHP (1)
Web Browsers (2)
Firefox (1)
Internet Exploder (0)
Netscape (1)
|
