How To Support Internet Explorer and Still Be Cutting Edge

Advertisement

Everyone has been going on about how we should use CSS3 more and all of the possibilities and flexibility that come with it, but that we should still consider IE6 and other troubling browsers.

But how do we actually do that? How do we create websites that are up to date with the latest coding techniques but that are also usable for people experiencing the Web on Internet Explorer?

In this article, we’ll see what measures we can take to provide a good experience for IE users but keep moving on. We will mainly focus on the CSS part but will also provide some handy tips on dealing with overall markup.

Also consider our previous articles:

The Content Is What Matters

Jeffrey Zeldman once said4, “content precedes design. Design in the absence of content is not design; it’s decoration.” In fact, the most important thing on your website is the content. This is what everyone should be able to get, no matter which browser they’re using.

Using CSS3 doesn’t mean we should forget about older browsers and lock visitors out of our websites. We should check our websites on browsers as old as maybe IE5 or 5.5 and make sure the content is accessible for every user.

This doesn’t mean we should quit the fight to eradicate IE6 either. We can still follow the example of websites such as Twitter and YouTube and add visible but not dead-end warnings to upgrade.

YouTube's IE6 warning message5

Twitter IE6 warning message6
YouTube and Twitter warning messages for IE6 users

And remember: each profession has the duty to educate those who are not familiar with their trade. We must explain how stuff works to our clients without being patronizing. It’s not their job to know this after all.

Basics First: The Three Layers (HTML, CSS and JavaScript)

When we create a new website, we do it in steps. First, the HTML. We will mark up our content in the most semantic way possible: titles should be marked up as headings, lists as lists, etc. The bottom line is that our content should be perfectly readable and its hierarchy understandable with only this part of the coding done. The content has to make sense, and we must never forget that this layer is the foundation on which we will develop all the rest.

Secondly, we add the style, the CSS. In this step, we add the visual elements to our design; we give the website its personality. We also make sure that the content is accessible without the third layer.

And finally, the third layer, the JavaScript, the behavior. Here we add the interactive elements to our website. We make the experience richer using things such as tabs, sliders, lightboxes, etc.

With this path in mind, our content will always be accessible in any browser. We make sure that older browsers get only the basic content and disregard more complex layers that could hamper their users’ access to it.

Adding Basic Style For Old Browsers

So our semantic markup is done, and we know that some browsers cannot render CSS properly or at all, such as browsers before Netscape 4.0 or Internet Explorer 4.0. For those browsers, displaying the bare content—the naked version—is the safest choice.

Some people say that, today, there is no need to do this. But if you’d like to make sure that these people on these browsers don’t run into any problems, just link to a basic version of your CSS with the link tag and then to the more advanced file with the @import declaration:

<link rel="stylesheet" type="text/css" href="basic.css" media="screen" />
<style type="text/css">
	@import "advanced.css";
</style>

You can also skip the link tag altogether and leave them with a text-only version of the website:

<style type="text/css">
	@import "style.css";
</style>

Embracing The Differences

Now let’s deal with the black sheep of commonly used browsers: Internet Explorer 6.

You’ve got two options:

  1. If only a negligible percentage of your audience is browsing the Web with it and you don’t want to throw your client’s money down the drain, you could create a basic style sheet for IE6.
  2. Acknowledge that your design will not look the same in IE6, and make decisions on what to leave out: which IE6 quirks will you fix and which will you leave be.

If you choose to feed IE6 a basic style sheet, the best course is to use the Universal IE6 CSS7. Your website will have virtually no design, but this style sheet makes sure that the body has a readable width, that heading sizes are reasonable and that the content has some nice white space surrounding it.

In your HTML, you will have to add some conditional comments to link to the style sheet and to hide the other sheets from IE6:


	<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />


In the first conditional comment, we link our main style sheet to all browsers that are not IE6 (hence the “!”). And in the second comment, we link directly to the Universal IE6 style sheet on Google’s repository (and save some bandwidth at that!).

Make Photoshop Faster on Firefox8

Make Photoshop Faster on IE69
The Make Photoshop Faster website uses the Universal style sheet for IE6

If you prefer the second route, you must be prepared to embrace the differences between browser renderings. Know that some details of your design will not be visible or render as nicely in IE6, or even IE7 and 8. And don’t be upset about it.

Resets

As you know, all browsers have different default styles for the various HTML elements. This is why using a reset style sheet is wise, so that we can start with a clean slate.

Plenty of style sheets are around on the Internet for anyone’s benefit. The one that is usually considered the standard and most often implemented is Eric Meyer’s reset10, or some variation of it.

Eric Meyer's CSS Reset11

With the advent of HTML5, including the new HTML elements in your CSS reset is also a good idea. html5doctor12 provides a good update to Eric Meyer’s reset that you can use for free in your projects.

html5doctor's CSS reset13

You can use a CSS reset either by embedding it at the top of your own CSS file, or, if you like to keep things tidy, by importing it from your style sheet:

@import url(reset.css);

CSS Differences That Could Break Your Layout

If you decide to use the Universal IE6 CSS, you’ve just saved yourself many a headache. But don’t let the shiny logos of IE7 and 8 fool you: if you intend to use the latest CSS techniques, you still have to do a lot to cater to them.

IE6 and PNG support

We all know that PNG images with alpha-channel transparency (i.e. the good-looking ones) don’t play nice on IE6. We’ve all seen that annoying light-blue background on our carefully crafted logos.

You can choose from among a few workarounds to this problem so that IE6 can display PNGs. Each is fairly quick to implement and does make a difference in the overall design.

Here are a few of the best scripts and techniques for dealing with this issue:

That said, we should mention that more and more Web designers nowadays opt not to fix the PNG issue on IE6:

31three website on IE619
The newly revamped 31three website doesn’t apply any fix for PNGs in IE6.

Advanced Selectors

These selectors are almost the definition of smooth CSS development by themselves, because they hold the true power of CSS and can make our lives as developers so much easier (and our budgets so much lower!).

The decision of whether to make them work on Internet Explorer or not depends largely on what you are using them for.

For example, if you are using them to add extra detail to your designs, such as small icons to represent different file types, it won’t make a lot of difference if the icons don’t display on some browsers. Visitors to your website won’t know what they are missing, and the links will still be perfectly usable.

These selectors are also widely used to enhance typographic detail, and lack of support for them won’t be a big issue for your designs.

Comparison of the rendering of the Hicksdesign website on Firefox and IE20
Hicksdesign uses advanced selectors for numbered bullets in its navigation menu, and they simply aren’t visible for IE6 users

Which browsers don’t support this? Internet Explorer 6 will not see styles applied with virtually any advanced selector. It only really understands simple descendant combinators and classes and ID selectors. It even struggles with multiple classes applied to the same element! It’s not to be trusted.

IE7 ignores the :lang selector and pseudo-elements, such as :first-line, :first-letter, :before and :after. But it does understand all attribute selectors.

Also, none of the Internet Explorer releases to date supports the :target pseudo-class, UI element states pseudo-classes (:enabled, :disabled, etc.), structural pseudo-classes (like :nth-child, :nth-of-type or :first-child) or the negation pseudo-element.

Box-Sizing

Box-sizing allows you to tell the browser how you want it to calculate the width and height of an element.

For example, if you set the box-sizing property to border-box, then the paddings and borders will be subtracted from the specified width and height of that element, instead of added to them (as stated in the W3C’s specifications for the standard box model).

This can make it easier to control the size of elements and to make sizes behave the same across different browsers.

If you believe that your website renders in IE in quirks mode (and therefore renders with the non-standard box model), you may want to use this property in your style sheets to make all browsers uniform.

Make sure to add the standard property and the vendor-specific ones:

div {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

Which browsers don’t support this? If the website is rendered in quirks mode, IE6 will render using the non-standard box model, so it will already be rendering as if it had the “border-box” property on. You can force IE6 to render in quirks mode. There are a few ways of doing this; one way is by adding an HTML comment before the doctype declaration of your HTML pages.

Media Queries

Media queries aren’t fully supported by most browsers, and Internet Explorer doesn’t support them at all.

However, because they are mostly used to call variations of style sheets for handheld devices, such as the iPhone, this fact is almost irrelevant in that case.

If you use media queries mainly to cater to the iPhone, the fact that they are not supported by other browsers makes no difference anyway, and their use is highly encouraged.

If you are using them to create a more flexible website design that adapts to changes in, say, window size, then know that only Safari, Firefox and Opera support them (partially).

Which browsers don’t support this? Internet Explorer and, in some instances, Safari and Firefox.

CSS Differences That Are Mainly Decorative

These are the issues that are best left alone for non-supporting browsers, because the lack of support won’t be a problem for users who want to access your content (i.e. your pages won’t break).

This has to do mainly with some of the new CSS3 properties, such as border-radius, text-shadow and border-image.

Border-radius

This is the first CSS3 property that designers learned to live without on Internet Explorer, because of its clearly decorative nature. With border-radius, you are better off not trying to replicate it on IE at all. Just let it be.

Gowalla's homepage on Firefox21

Gowalla's homepage on IE622
Gowalla uses border-radius on its website, but Internet Explorer users don’t see it.

Which browsers don’t support this? All Internet Explorer browsers. Opera, too.

Font-face

Font-face can be used with IE, but you may need to use Microsoft’s Web Embedding Fonts tool23 to convert your fonts to EOT.

Microsoft Web Embedding Fonts Tool (WEFT)24

If you are including both font formats in your website, your CSS will probably follow this structure:

@font-face {
	  font-family: "Delicious";
	  src: url("Delicious-Roman.eot");
	  src: local("Delicious"), url("Delicious-Roman.otf") format("opentype");
}

Usually, a browser not being able to render the first font in a font stack shouldn’t break the website or hamper in any way the user’s access to the content. So, the recommendation here is to carefully ponder which fonts you want the visitor to see if their browser doesn’t support font-face and has to rely on the fonts you have declared in the style sheet.

Elliot Jay Stock's website on Firefox25

Elliot Jay Stock's website on IE26
A browser that doesn’t support font-face simplys show the next available font in the font stack

Which browsers don’t support this? If you use the EOT version for IE, even IE users will see the correct fonts.

Multiple Columns

Rather than create multiple floating DIVs to organize your text into columns, you can create columns automatically by using the multiple column properties in CSS3. But this means that some browsers won’t see them.

Multiple columns are better used for text, not layout. If you use them on your website, the worst thing that will happen is that visitors see a wider line of text.

If you’re dealing only with short text, than why not go ahead and use it and finish the job in two minutes? But if it would seriously impair the readability of your content, then your best option is to stick to the regular DIVs to create columns.

Multiple columns on Firefox27

Multiple columns not rendered on IE28
Here, the introductory text is displayed using CSS multiple columns. IE users will see normal single-column text.

Which browsers don’t support this? Internet Explorer and Opera.

RGBa and Opacity

RGBa colors are bliss. Rather than use hard-to-update PNG files for backgrounds, you can create the same transparency effect with CSS. But IE doesn’t get it. IE6 doesn’t even understand the PNGs to begin with.

It’s safe to assume that these transparencies won’t usually be applied to elements that cover important content; in which case, the content shouldn’t be behind another element in the first place.

So, when using RGBa colors, make sure to include a normal color before the RBGa one, so that browsers that don’t understand it will still have a fallback color:

div {
	background-color:  #FFFFFF;
	background-color: rgba(255,255,255,.5);
}

Opacity can be applied to IE using the opacity filter, but IE filters work only on elements that have layout:

div {
	filter: alpha(opacity = 50);
}

Also, remember that opacity works differently than RGBa colors: all of the elements enclosed in this DIV will be rendered transparent.

24ways website on FIrefox29

24ways website on IE830
24ways uses RGBa colors and alpha transparency heavily, even though Internet Explorer doesn’t render the transparency.

Which browsers don’t support this? Every browser sees opacity, provided that filters are applied. IE doesn’t see RGBa colors.

Text-shadow

This is an easy call: ignore it. Assuming that the text is still readable, trying to recreate text-shadow any other way than with CSS is a Herculean task. So, unless missing text-shadow would seriously reduce the clarity of a large amount of text, or a small amount (in which case you could use image replacement), you’re better off without it.

Brokers Direct website on Firefox with text-shadow31

Brokers Direct website on IE with no text-shadow32
The white text-shadow on Brokers Direct’s website is not visible on Internet Explorer.

Which browsers don’t support this? Internet Explorer.

Border-image

The border-image property gives us an easy way to add beautiful borders to our elements that would otherwise be a nightmare to implement (and that in most instances we would probably choose not to implement).

Because the property is almost always decorative, the best option would be to include a fallback for browsers that don’t support it using the normal border property, and adding the enhanced CSS after it for other browsers.

SpoonGraphics blog on Firefox with border-image33

SpoonGraphics blog on IE with no border-image34
SpoonGraphics uses border-image, but it is not visible in Internet Explorer.

Which browsers don’t support this? Answering the opposite question is easier: for now, only Safari and Firefox support this feature.

Multiple Backgrounds

This feature depends on the design of your website, but in a lot of cases, the lack of a second or even third background will not affect the readability of the page.

Multiple backgrounds in CSS saves us a lot of the development headaches that were caused by having to use different HTML hooks and nested elements to achieve the same effect. So, if you opt to use multiple backgrounds, you are already choosing which browsers to display the results to.

If all users seeing all of the backgrounds is important to you, then do it the old way and apply different backgrounds to different elements.

If not, your best bet is to give a fallback to browsers that don’t support it: pick the background that you feel is most important or that best fits the overall design and add that property before the multiple backgrounds one. Browsers that don’t support it will ignore the second property.

Which browsers don’t support this? Internet Explorer, Opera and Firefox up until version 3.5 (version 3.6 is currently in beta, but it supports multiple backgrounds!).

Tools

Modernizr

Modernizr homepage35

Modernizr36 is a little JavaScript that is quite useful if you are using advanced CSS properties. It adds some classes to the html tag in your pages, to see whether a browser supports certain CSS features, such as:

  • @font-face
  • rgba()
  • hsla()
  • border-image
  • border-radius
  • box-shadow
  • Multiple backgrounds
  • opacity
  • CSS animations
  • CSS columns
  • CSS gradients
  • CSS reflections
  • CSS 2-D transforms
  • CSS 3-D transforms
  • CSS transitions

Take border-image. When a page loads in a browser that supports the property, it output borderimage. If the browser doesn’t support it, it outputs no-borderimage.

Modernizr doesn’t enable these features in browsers that don’t support them, but rather gives you important information (in the form of classes) that you can use in your style sheets to apply distinct selectors and properties to elements.

IE-7.js

IE-7.js37 makes IE5+ behave like IE8, supporting more advanced selectors and fixing some rendering bugs. Here’s an excerpt from the creator’s website38:

  • Added support for advanced selectors: >, + and ~; attribute selectors; :hover, :active, :focus for all elements; :first-child, :last-child, :only-child, :nth-child, :nth-last-child; :checked, :disabled, :enabled; :empty, :not; :before, :after, :content; :lang.
  • It uses the standard box model in standards and quirks mode.
  • Supports min- and max-width and -height.
  • Supports PNG alpha transparency (but doesn’t solve the PNG problem for repeated or positioned backgrounds).

The disadvantage of this technique is that JavaScript has to be enabled for it to work, which is unfortunate. So, you will have to be careful to give users who have disabled JavaScript an acceptable version of your website, especially if some behaviors will not work or, worse, if the lack of JavaScript will break your layout.

Examples

As they say it, this is easier said than done. So, we’ll show that these ideas can actually be put into practice with some nice examples. These are websites we’ve come across that render differently in different browsers. In some cases, the differences are quite noticeable, but the developers have chosen to embrace those differences.

Twitter

Twitter on Firefox39
Twitter in Firefox

Twitter on IE640
Twitter in IE6

WordPress

WordPress on Firefox41
WordPress in Firefox

WordPress on IE642
WordPress in IE6

WWF

WWF on Firefox43
WWF in Firefox

WWF on IE644
WWF in IE6

Conclusion

Remember that the purpose of this post is not to teach you how to hack IE or deal with its quirks or even how to achieve effects by resorting to JavaScript. Rather, it is to explain how we can design and build websites knowing that differences will arise between browsers.

You won’t see people rioting over the lack of rounded corners on Twitter or WordPress; they aren’t even upset by it, because those differences don’t fundamentally break the websites. People can still use the websites and have a good experience. In most cases, they won’t even notice it!

All we have to do now is explain this politely but seriously to our clients, so that we can all contribute to the ever-evolving Web.

Further Reading And References

Do your designs have a support for older versions of Internet Explorer (<= 7.0)?

Related posts

You may be interested in the following related posts:

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/
  2. 2 http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/
  3. 3 http://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/
  4. 4 http://twitter.com/zeldman/statuses/804159148
  5. 5 http://youtube.com
  6. 6 http://twitter.com
  7. 7 http://code.google.com/p/universal-ie6-css/
  8. 8 http://makephotoshopfaster.com/
  9. 9 http://makephotoshopfaster.com/
  10. 10 http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
  11. 11 http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
  12. 12 http://html5doctor.com/html-5-reset-stylesheet/
  13. 13 http://html5doctor.com/html-5-reset-stylesheet/
  14. 14 http://www.dillerdesign.com/experiment/DD_belatedPNG/
  15. 15 http://allinthehead.com/retro/338/supersleight-jquery-plugin
  16. 16 http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/
  17. 17 http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/
  18. 18 http://www.smashingmagazine.com/2009/07/25/png-optimization-guide-more-clever-techniques/
  19. 19 http://www.31three.com/
  20. 20 http://www.hicksdesign.co.uk/journal/
  21. 21 http://gowalla.com
  22. 22 http://gowalla.com
  23. 23 http://www.microsoft.com/typography/WEFT.mspx
  24. 24 http://www.microsoft.com/typography/WEFT.mspx
  25. 25 http://elliotjaystocks.com
  26. 26 http://elliotjaystocks.com
  27. 27 http://yaili.com
  28. 28 http://yaili.com
  29. 29 http://24ways.org
  30. 30 http://24ways.org
  31. 31 http://brokersdirect.net
  32. 32 http://brokersdirect.net
  33. 33 http://www.blog.spoongraphics.co.uk/
  34. 34 http://www.blog.spoongraphics.co.uk/
  35. 35 http://www.modernizr.com/
  36. 36 http://www.modernizr.com/
  37. 37 http://code.google.com/p/ie7-js/
  38. 38 http://dean.edwards.name/IE7/
  39. 39 http://twitter.com
  40. 40 http://twitter.com
  41. 41 http://wordpress.org
  42. 42 http://wordpress.org
  43. 43 http://panda.org
  44. 44 http://panda.org
  45. 45 http://www.quirksmode.org/css/quirksmode.html
  46. 46 http://www.satzansatz.de/cssd/onhavinglayout.html
  47. 47 http://24ways.org/2008/the-ie6-equation
  48. 48 http://www.virtuosimedia.com/tutorials/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs
  49. 49 http://sixrevisions.com/web-development/definitive-guide-to-taming-the-ie6-beast/
  50. 50 http://webdesignernotebook.com/css/how-to-use-modernizr/
  51. 51 http://answers.polldaddy.com/poll/2325530/
  52. 52 http://www.polldaddy.com
  53. 53 http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/
  54. 54 http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/
  55. 55 http://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/

↑ Back to top Tweet itShare on Facebook

Inayaili de León is a London-based Portuguese web designer, specialist in cross-browser, semantic HTML and CSS, and clean, functional design. She writes frequently for well-known online and print publications and also on her own web design blog, Web Designer Notebook. In May 2011, she published a book, Pro CSS for High Traffic Websites, and she speaks frequently at local and international web conferences and meetups. She is currently working as a web designer on Canonical's Design team.

Advertisement
  1. 1

    Because you are getting paid to.

    0
  2. 102

    Good post, I’m forced to support IE6 at work. There’s still a large amount of IE6 users out there but Firefox has been doing pretty well on the statistics for our sites and still growing.

    0
  3. 203

    This was one amazing post that I have read… Great job – Inayaili de Leon… It goes in my delicious… I will come back to this whenever I am stuck anywhere as it has an amazing list sites that will help in solving IE issues…

    0
  4. 304

    We, as web enthusiasts, know ALL about browser issues. We spend a lot of our time debating them. And now consider how most of the websites we design and / or build are for other people with a totally different set of priorities.

    Yes, I’d like everyone to use and getting holier-than-thou just because people make different tech choices than we think they should isn’t as user-centred as it might be when we consider why they don’t upgrade.

    I don’t know anyone else (other than web designers / developers) who gets as excited as I do about CSS3. But that’s not their fault! It’s more important to me that users are able to satisfy their own goals when they visit a site, not that I get to flaunt new tricks.

    0
  5. 405

    Maybe Ashton Kutcher could finally have a purpose?

    0
  6. 506

    I use IE7.js (actually IE8.js) on all my sites so that I can use advanced CSS selectors and do away with unnecessary extra classes or IDs.

    I don’t really see the point of Modernizr at the moment as my approach is to always provide a fallback for browsers that don’t understand a more advanced CSS feature, or only use it if its absence doesn’t negatively impact a layout. About the only CSS feature I’d find useful that would cause problems in browsers that don’t understand it is multiple backgrounds and I can’t see the value of Modernizr for that as I’d nearly always want all the extra imagery to be available to all browsers anyway.

    0
  7. 607

    mmh, sometimes I use Netscape Navigator 4… why didn’t you mention it? ;-)

    0
  8. 708

    Not sure if anyone ever will read my message since it is so far down but:
    “Border-radius
    This is the first CSS3 property that designers learned to live without on Internet Explorer, because of its clearly decorative nature.” clearly contradicts with this phrase in the new smashing magazine book: “They look nice and add that extra bit of visual polish to your
    interface; but that’s not all they can be used for. Rounded corners define boundaries of objects.”

    0
  9. 809

    RAGHAVENDRA MAHENDRAKAR

    December 3, 2009 5:56 am

    What a exceptional, wonderful resources found here…!

    0
  10. 910

    IE – 70% ( IE6 53%, IE7 26%, IE8 20% ) – !@#$% happened and I work in country where IE has that many users.

    I always do for IE6 and in fact its not that much work. Good css and reset is a key to success . Than few hacks and Js for png – result – everything works fine on every computer.

    The websites are for people not only for designer/developers.

    0
  11. 1011

    Didrik Nordström

    December 4, 2009 1:05 am

    Still don’t agree :) Content sure is the main thing, however, what I think I meant, is that it’s not the responsibility of site creators to make it available to everyone.

    Should we ban hockey because it’s expensive equipment and not everybody can afford it? Come on, we’re talking like 7 clicks to install firefox. It’s free and all good. What’s the problem here? IE6 is 8 years old ffs! IE7 has been here forever and IE8 is free for all Windows XP-7 users as well.

    0
  12. 1112

    Thanks for this article. Rapidly added to my favourites.

    0
  13. 1213

    Nikolaos Dimopoulos

    December 7, 2009 5:52 am

    Good post that focuses on some interesting points.

    Like others that have commented, I am too forced to provide support for IE6, although it is an antiquated browser imo. With the announcement of IE9 I find myself using a great deal of my time to make the site look like it does in other browsers (FF/Chrome/Opera/Safari) on a browser that does not adhere to standards…..

    I think that it is really good that we can work around issues like the ones mentioned above (how IE behaves vs. other browsers) but I wonder if it were easier for IE and Microsoft to follow some standards …. Others do so can Microsoft :)

    /end_wishful_thinking

    0
  14. 1314

    This is a slightly ironic article given SM’s stance on IE6 during their revamp… but still, in a surprising move, my company upgraded to IE7 over the weekend, so at least now I can visit Smashing Magazine again. So I’m not bitter. :)

    0
  15. 1415

    Try looking at this very page in IE6 just for a good laugh.

    0
  16. 1516

    Thanks for this very very helpfull info!

    0
  17. 1617

    exceptional! I have something good to read this wknd, Thanks!

    0
  18. 1718

    For cross-browser friendly font embedding for your title bars and headers etc., you can always use SIFR – a flash replacement technique. So far it was the best method to embed font on specific parts of the site.

    0
  19. 1819

    what the…
    very well written article…

    i see it as advanced CSS article rather than article about how to support older browser :P there’s still many CSS tech i’ve never heard :D

    0
  20. 1920

    Sign the petition to urge the UK government to upgrade away from IE6.

    http://petitions.number10.gov.uk/ie6upgrade/

    You can only sign if you’re a UK citizen. Please tweet this link, put it on facebook or blog about it!

    0
  21. 2021

    François Germain

    April 27, 2010 3:43 am

    I found and extended a conditional comments technic which offers some selectors to deal with Internet Explorer and javascript, selectors like :
    .ie, .ie6, .gt-ie5, .lt-ie7…
    Demonstration and source code here :
    http://www.cahnory.fr/css/browser-check.html

    0
  22. 2122

    Support for Technology

    June 14, 2010 11:32 pm

    i see it as advanced CSS article rather than article about how to support older browser :P there’s still many CSS tech i’ve never heard :Thanks for this very very helpfull info!
    Support for Technology
    sophia

    0
  23. 2223

    Support for Technology

    June 14, 2010 11:34 pm

    i see it as advanced CSS article rather than article about how to support older browser :P there’s still many CSS tech i’ve never heard :Thanks for this very very helpfull info!
    sophia

    0
  24. 2324

    “if the lack of JavaScript will break your layout.”

    i assume you mean in IE6, when using ie7-js.

    but, isn’t ie7-js designed NOT to break anything? in other words, in IE6 browsers without javascript enabled, won’t ie7-js simply do nothing, in which case it’s IE6 that’s breaking your layout, not ie7-js. Further, isn’t ie7-js designed to have no effect at all in non-IE6 browsers, whether or not they have javascript enabled?

    thanks

    0

↑ Back to top