Modular CSS

Slide 1: Modular CSS Creating flexible, hack-free and browser-stable CSS Russ Weakley, Max Design

Slide 2: Anyone here build websites?

Slide 3: OK… let’s assume you’re building a new site

Slide 4: and… let’s assume you’ve done all the right things…

Slide 5: so… your markup is valid

Slide 6: What does this mean? You’ve checked your web documents against a formal standard).

Slide 7: your markup is semantic

Slide 8: What does this mean? You have used appropriate HTML elements to give your content meaning.

Slide 9: your markup is accessible

Slide 10: What does this mean? Your site can be navigated & read by everyone, regardless of disability, location, experience or technology.

Slide 11: your markup is separated

Slide 12: What does this mean? You’ve removed behaviour and presentation from the markup.

Slide 13: and of course, your site fails gracefully

Slide 14: What does this mean? Your site fails so that it continues to operate for lower end users.

Slide 15: Basically, you’re feeling good!

Slide 16: however…

Slide 17: You’re about to face some horrid problems

Slide 18: Mainly to do with browsers and bugs

Slide 19: So, who are the main offenders?

Slide 20: Offender 1 Windows Internet Explorer 5, 5.5 and 6

Slide 21: Offender 2 Macintosh Internet Explorer 5

Slide 22: Offender 3 Old browsers like Internet Explorer 4 and Netscape 4

Slide 23: on top of that…

Slide 24: You have to make some important decisions

Slide 25: Will you use hacks to overcome these browser bugs?

Slide 26: Will your CSS be maintainable into the future?

Slide 27: Will you be able to manage your CSS across a growing site?

Slide 28: is there a solution?

Slide 29: The solution may be modular CSS

Slide 30: what is it?

Slide 31: A system for managing your CSS

Slide 32: …developed over time

Slide 33: … after lots of tears

Slide 34: how does it work?

Slide 35: Step 1 Build your HTML HTML file

Slide 36: Step 2 Build your CSS HTML file Master CSS file

Slide 37: Master CSS file /* container styles */ #container { } /* header styles */ #header { } #header h1 { } /* content styles */ #content { } #content h2 { } /* footer styles */ #footer { } #footer p { }

Slide 38: Step 3 Separate your CSS container.css HTML file header.css content.css

Slide 39: New CSS files #container { } container styles #header { } header styles #header h1 { } #content { } content styles #content h2 { } #footer { } footer styles #footer p { }

Slide 40: Question Why separate CSS files? • Easier to find rules • More than one developer at a time • Files can be turned on/off as needed

Slide 41: Step 4 Add a bridging CSS file HTML file Bridging CSS file

Slide 42: Question Why add a bridging file? • One link to all CSS files in HTML • Change CSS without changing HTML • Add or remove files as needed

Slide 43: Step 5 Link to bridging file HTML file Bridging CSS file

Slide 44: HTML file <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN” \"http://www.w3.org/TR/html4/strict.dtd\"> <html> <head> <title>Modular CSS</title> <link rel=\"stylesheet\" href=\"bridging.css\" type=\"text/css” media=\"screen, projection\"> </head> <body> …

Slide 45: Question Why double media type? • The bridging file will use @import • NN4 crashes on @import • NN4 ignores multiple media types • NN4 will not see bridging file

Slide 46: Netscape 4 No CSS for you! NN4 HTML file Bridging CSS file

Slide 47: Step 6 Import CSS HTML file Bridging CSS file

Slide 48: Bridging CSS file @import \"container.css\"; @import \"header.css\"; @import \"content.css\"; @import \"footer.css\";

Slide 49: Question How do @imports work? • Imports all rules from one file into other • Exactly as if written in other file • Order and placement are important • Cannot be read by older browsers

Slide 50: Old browsers No CSS for you either! IE4 NN4 IE3 HTML file Bridging CSS file

Slide 51: mac/ie5

Slide 52: Step 7 - option a Hide rules from Mac/IE HTML file Bridging CSS file

Slide 53: Bridging CSS file @import \"container.css\"; @import \"header.css\"; @import \"content.css\"; @import \"footer.css\"; @import 'hide-from-mac-ie5.css';

Slide 54: Question How does this work? • Place specific rules in a separate file • @import using single quotes • Mac/IE will ignore single quotes • Mac/IE will ignore chosen rules

Slide 55: Step 7 - option b Hide all from Mac/IE HTML file Bridging CSS file

Slide 56: Bridging CSS file @import ‘container.css’; @import ‘header.css’; @import ‘content.css’; @import ‘footer.css’;

Slide 57: win/ie

Slide 58: Hacking hacks can bite • hacks and later versions of browser • hacks sitting inside CSS files • hacks may become unnecessary

Slide 59: A better solution Conditional comments? • No hacks scattered through CSS files • Can be turned on or off • Can deal with different versions of IE • Recommended by the IE team

Slide 60: Step 8 Dealing with Win/IE Bridging HTML file CSS file new file

Slide 61: HTML file <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN” \"http://www.w3.org/TR/html4/strict.dtd\"> <html> <head> <title>Modular CSS</title> <link rel=\"stylesheet\" href=\"bridging.css\" type=\"text/css” media=\"screen, projection\">  </head>

Slide 62: HTML file <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN” \"http://www.w3.org/TR/html4/strict.dtd\"> <html> <head> <title>Modular CSS</title> <link rel=\"stylesheet\" href=\"bridging.css\" type=\"text/css” media=\"screen, projection\">  </head>

Slide 63: HTML file <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN” \"http://www.w3.org/TR/html4/strict.dtd\"> <html> <head> <title>Modular CSS</title> <link rel=\"stylesheet\" href=\"bridging.css\" type=\"text/css” media=\"screen, projection\">  </head>

Slide 64: but what about print?

Slide 65: Step 9 - option a Simple print CSS Bridging HTML file CSS file Print CSS

Slide 66: HTML file <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN” \"http://www.w3.org/TR/html4/strict.dtd\"> <html> <head> <title>Modular CSS</title> <link rel=\"stylesheet\" href=\"bridging.css\" type=\"text/css” media=\"screen, projection\">  <link rel=\"stylesheet\" href=”print.css\" type=\"text/css” media=”print\"> </head>

Slide 67: Print CSS file /* print styles */ #container { } #header { } #header h1 { } #content { } #content h2 { }

Slide 68: Step 9 - option b Advanced print CSS Bridging HTML file CSS file

Slide 69: HTML file <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN” \"http://www.w3.org/TR/html4/strict.dtd\"> <html> <head> <title>Modular CSS</title> <link rel=\"stylesheet\" href=\"bridging.css\" type=\"text/css” media=\"screen, projection\">  <link rel=\"stylesheet\" href=”print.css\" type=\"text/css” media=”print\"> </head>

Slide 70: Bridging CSS file @import ‘container.css’; @import ‘header.css’; @import ‘content.css’; @import ‘footer.css’; /* print styles */ #container { } #header { } #header h1 { } #content { } #content h2 { }

Slide 71: a recap?

Slide 72: 1. Build you HTML 2. Build your CSS 3. Separate the CSS 4. Add a bridging file 5. Link from HTML to bridging file 6. Import CSS into bridging file 7. Hide from Mac/IE as needed 8. Hide from Win/IE as needed 9. Add print CSS

Slide 73: downsides

Slide 74: No perfect solution • Still involves dancing around browsers • Uses conditional comments • May be overly complex for tiny sites

Slide 75: upsides

Slide 76: Good points • modular • flexible • maintainable • browser-specific • hack free (well… sorta…)

Slide 77: questions or abuse?

Slideshare.net (beta)