CSS and Internet Explorer

ADAM ENGELSGJERDUA LIBRARYMAY 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 (http://www.d-toybox.com/spec/CSS3/content/crop.png) and the IE7 Logo (MS Corp)


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.

1Content origin: Molly E. Holzschlag. An Event Apart, Boston 2007. Building Better Browsers


Dead Bugs1

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

1Slide content origin: Eric Meyer. An Event Apart, Boston 2007. The State of CSS in an IE7 World

Safe CSS Hacking1

/*\*/ /**/ 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 mode)

@import ulr[“style.css”]; Hides rules from Netscape 4. P {

width: 400px;voice-family: “\”}\””; Hides Properties from Win IE5xwidth: 300px;

}

1Content origin: Ethan Marcotte. An Event Apart, Boston 2007. Web Standards Stole My Truck.

Conditional Statements

Allows you to serve different CSS for different IE browsers.

<head></head>

Learn more:

http://msdn2.microsoft.com/en-us/library/ms537512.aspx

http://msdn2.microsoft.com/en-us/library/ms537512.aspx

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: http://dean.edwards.name/IE7/

Making IE6 Behave

This means that we can take better advantage of IE7’s standards compliance. CSS3 Selectors1

A[href$=“.PDF”] {padding-right: 18px;background: url(/pix/pdf-icon.gif) 100% 50% no repeat;}

Does not address accessibility issues.

1Content origin: Eric Meyer. An Event Apart, Boston 2007. The State of CSS in an IE7 World

Testing

Develop in FirefoxTest in IE 7 (etc.)

Testing in IE6 Devote a machine to

IE6. Use evolt.org’s

standalone IE installation. http://

browsers.evolt.org/?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; }

http://intranet.library.arizona.edu/users/aengels/aea/meyer/tableGraph/

1Content origin: Eric Meyer. An Event Apart, Boston 2007. 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; }

http://intranet.library.arizona.edu/users/aengels/aea/meyer/tableGraph/

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.

http://dean.edwards.name/IE7/

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. 

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:+1.415.555.1212

 http://microformats.org/

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?

Documents

CSS and Internet Explorer