1 / 24

CSS and Internet Explorer

CSS and Internet Explorer. Adam Engelsgjerd UA Library May 9, 2007. Today’s Outline. Browsers & Standards Safe CSS Hacking Conditional Statements Making IE6 Behave Testing There Is No Spoon.

otto
Download Presentation

CSS and Internet Explorer

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS and Internet Explorer Adam Engelsgjerd UA Library May 9, 2007

  2. 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)

  3. 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. 1Content origin: Molly E. Holzschlag. An Event Apart, Boston 2007. Building Better Browsers

  4. Browsers & Standards • 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

  5. 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 IE5x width: 300px;} 1Content origin: Ethan Marcotte. An Event Apart, Boston 2007. Web Standards Stole My Truck.

  6. Conditional Statements • Allows you to serve different CSS for different IE browsers. • <head> <!-- [if IE 6]> <link rel="stylesheet" href="style.css" type="text/css"> <![endif] --></head> • Learn more:http://msdn2.microsoft.com/en-us/library/ms537512.aspx

  7. 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/

  8. 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

  9. Testing • Develop in Firefox • Test 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

  10. 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

  11. Designing Websites Questions?

  12. 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/

  13. 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/

  14. 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. • <!--[if IE 6]>styles or link to stylesheet<![endif]-->

  15. 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.

  16. 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.

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

  18. 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: <span class="tel“> <span class="type">home</span>: <span class="value">+1.415.555.1212</span></span> • http://microformats.org/

  19. 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.

  20. 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]

  21. 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).

  22. 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”

  23. 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.

  24. Designing Websites Questions?

More Related