ADAM ENGELSGJERD UA LIBRARY MAY 9, 2007 CSS and Internet Explorer

Today’s Outline  Browsers & Standards  Safe CSS Hacking  Conditional Statements  Making IE6 Behave  Testing  There Is No Spoon Graphic a combination of Wooly the CSS Sheep ( and the IE7 Logo (MS Corp)

Browsers & Standards Browsers are developed by people, and people have agendas, moods, and are fallible. 1 “We come to find at the end of it all, Web standards don’t really matter. What matters is what features are implemented and what is put to use, no matter its origin” 1 Internet Explorer 3.0 beta for Windows introduced the first widely usable CSS implementation (July, 1996) 1 Standards are a shifting target. Standards are not standards, but recommendations. 1 Content origin: Molly E. Holzschlag. An Event Apart, Boston Building Better Browsers

Browsers & Standards Dead Bugs 1  Peek-a-boo bug  Guillotine bug  Duplicate character bug  Duplicate indent  3 pixel text jog  Creeping text bug  Double float margin bug  Bottom margin bug on hover  IE/Win line:height bug  Quirky percentages in IE 1 Slide content origin: Eric Meyer. An Event Apart, Boston The State of CSS in an IE7 World

Safe CSS Hacking 1 /*\*/ /**/ Hides rules from Mac IE5 /*/*/ /**/ Hides rules from Netscape 4 /*\*//*/ /**/ Shows rules to Mac IE5 * html p { } Shows rules to Mac IE and Win IE (But not IE7 in standards ulr[“style.css”]; Hides rules from Netscape 4. P { width: 400px; voice-family: “\”}\””; Hides Properties from Win IE5x width: 300px; } 1 Content origin: Ethan Marcotte. An Event Apart, Boston Web Standards Stole My Truck.

Conditional Statements Allows you to serve different CSS for different IE browsers. Learn more:

Making IE6 Behave The Dean Edwards “IE7 Script”  Created at a time when Microsoft claimed IE6 was dead.  From the site:  IE7 loads and parses all style sheets into a form that Explorer can understand. You can then use most CSS2/CSS3 selectors without having to resort to CSS hacks. The lightweight script is a single-line inclusion in your HTML/XML document. No alteration of your original markup is necessary. Neither do you have to alter your CSS.  If you’re Yahoo, it’s not for you.  Learn More:

Making IE6 Behave This means that we can take better advantage of IE7’s standards compliance.  CSS3 Selectors 1  A[href$=“.PDF”] { padding-right: 18px; background: url(/pix/pdf-icon.gif) 100% 50% no repeat;}  Does not address accessibility issues. 1 Content origin: Eric Meyer. An Event Apart, Boston The State of CSS in an IE7 World

Testing Develop in Firefox Test in IE 7 (etc.) Testing in IE6  Devote a machine to IE6.  Use evolt.org’s standalone IE installation.  ?ie/32bit/standalone ?ie/32bit/standalone

There Is No Spoon “Standard” HTML element behavior is driven by local CSS files. 1  html.css; quirk.css  /* hidden elements */ area, base, basefont, head, meta, script, style, title, noembed, param { display: none; }  p, dl, multicol { display: block; margin: 1em 0; }  Content origin: Eric Meyer. An Event Apart, Boston Secrets of the CSS Jedi

Designing Websites Questions?

CSS – There Is No Spoon “Standard” HTML element behavior is driven by local CSS files.  html.css; quirk.css  /* hidden elements */ area, base, basefont, head, meta, script, style, title, noembed, param { display: none; }  p, dl, multicol { display: block; margin: 1em 0; } 

CSS – Making IE Play Nice The Dean Edwards IE7 Script  Created at a time when Microsoft claimed IE6 was dead.  From the site:  IE7 loads and parses all style sheets into a form that Explorer can understand. You can then use most CSS2/CSS3 selectors without having to resort to CSS hacks. The lightweight script is a single-line inclusion in your HTML/XML document. No alteration of your original markup is necessary. Neither do you have to alter your CSS.  If you’re Yahoo, it’s not for you. 

CSS – Making IE Play Nice This means that we can take better advantage of IE7’s standards compliance.  CSS3 Selectors  A[href$=“.PDF”] { padding-right: 18px; background: url(/pix/pdf-icon.gif) 100% 50% no repeat;}  Does not address accessibility issues.  The use of conditional comments is still the best way to apply IE hacks to a large site like ours.  styles or link to stylesheet

DESIGN – Writing Copy If content is king; if fresh content is what drives users back; if textual content provides the majority of the interface navigation; then all large sites must have large writing budgets and content czars…right? Only 2 people out of 500 at the conference had one person in charge of content, and no one budgeted for writing. We need to make content work for us.

DESIGN – Writing Copy Modifying textual content is often the most cost effective way to improve your site. Is the copy concise? Click here to enter your username and get started! vs. Sign in! Does it serve its purpose (hard vs. soft sell, inviting vs. professional) Audience appropriate copy can mean that it’s just not inappropriate.

DESIGN – Typography Usability and design via textual design. How does typography affect the flow of a site? What typography fits with the content?

DESIGN - Microformats Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. Instead of throwing away what works today, microformats intend to solve simpler problems first by adapting to current behaviors and usage patterns (e.g. XHTML, blogging).  hCard: home : 

DESIGN – Integrity Testing Integrity tests  Turn off the images  Take a screen shot of a page and blur it  Turn off CSS  Increase and decrease the font size  Wrapping elements using EM can allow the entire design to increase as the user increases or decreases their font size.

USABILITY – Pearls from Krug “The best way to learn about [the] usability [of anything] is to watch people use things. “You can hire someone once a year to do Spring Cleaning, but that’s not the way to do it; you really need someone in house to address the usability issues as they come up…and they come up all the time.  Take 3 people, once a month, and do testing with them. “There are endorphins involved here [in the design process]

ACCESSABILITY The current state:  User agents are not in synch in how they interpret code.  Browsers and user agents are not communicating well.  Even the technical lead of accessibility at Adobe is barely able to keep his head above water. What this means for us?  We already code with access keys and with basic web accessibility compliance; for the time being this seems adequate (unless we get another position somewhere along the way).

BROWSER DESIGN Browsers are developed by people, and people have agendas, moods, and are fallible. “We come to find at the end of it all, Web standards don’t really matter. What matters is what features are implemented and what is put to use, no matter its origin”

STANDARDS Standards are not standards, but recommendations. Designing to standards is a goal, but a 100% compliant site is not required. It can allow for easier future growth of the site to multiple client devices (e.g. mobile devices). All the standards compliance in the world doesn’t mean a thing if the code will be mangled by a CMS, or if it’s so complicated the uses/maintainer can’t understand it.

Designing Websites Questions?