We need to talk about IE6
Support and non-support in a Standards-aware world

by Elliot Jay Stocks
elliotjaystocks.com/ski...
What Is a Reward?
What Is a Reward?
A visual treat for the more capable browser
What Is a Reward?
A visual treat for the more capable browser, e.g:

Drop shadows on text (CSS3 spec, Safari / Opera 9.5)
...
What Is a Reward?
A visual treat for the more capable browser, e.g:

Drop shadows on text (CSS3 spec, Safari / Opera 9.5)
...
What Is a Punishment?
What Is a Punishment?
A decision to REMOVE visual treats
What Is a Punishment?
A decision to REMOVE visual treats

• The designer giveth... and the designer taketh away!
Just beca...
What Is a Punishment?
A decision to REMOVE visual treats

• The designer giveth... and the designer taketh away!
Just beca...
What Is a Punishment?
A decision to REMOVE visual treats

• The designer giveth... and the designer taketh away!
Just beca...
Reward & Punishment
In Practice: elliotjaystocks.com
Reward & Punishment
In Practice: elliotjaystocks.com
To reduce the need for unnecessary class names, more
advanced CSS sel...
Reward & Punishment
In Practice: elliotjaystocks.com
To reduce the need for unnecessary class names, more
advanced CSS sel...
Attribute Selectors
ul.blogroll li a[href=quot;http://hicksdesign.co.ukquot;]
{ background:url(../images/hicksFavicon.ico) }
Attribute Selectors
ul.blogroll li a[href=quot;http://hicksdesign.co.ukquot;]
{ background:url(../images/hicksFavicon.ico)...
Adjacent Sibling Selectors
ol.portfolioList li h2+a:hover { border:none }
Adjacent Sibling Selectors
ol.portfolioList li h2+a:hover { border:none }


Safari                       IE6
Reward & Punishment
In Practice: stuffandnonsense.co.uk
Safari               IE6
But Why Reward or Punish?
But Why Reward or Punish?
• Encourage users to adopt modern browsers
But Why Reward or Punish?
• Encourage users to adopt modern browsers
• Encourage browser vendors to create modern browsers
But Why Reward or Punish?
• Encourage users to adopt modern browsers
• Encourage browser vendors to create modern browsers...
A Word of Warning
A Word of Warning
• Not suitable in some commercial environments
A Word of Warning
• Not suitable in some commercial environments
• Pay attention to client requirements
A Word of Warning
• Not suitable in some commercial environments
• Pay attention to client requirements
• Adapt to suit yo...
When In Doubt...
When In Doubt...
... use a badge!
Accessibility:
Catering For Users Without
Resorting To Punishment
Accessibility:
Catering For Users Without
Resorting To Punishment
In some circumstances, a browser’s lack of support
for c...
Accessibility:
Catering For Users Without
Resorting To Punishment
In some circumstances, a browser’s lack of support
for c...
Problem: JS Tab Navigation
The absolute positioning used to display the different
information boxes on rollover is rendere...
Solution: Specific Styles For
Javascript-Disabled Users
Solution: Specific Styles For
Javascript-Disabled Users
1. Use Javascript to write the class of hasJavascript to
the <body...
Solution: Specific Styles For
Javascript-Disabled Users
1. Use Javascript to write the class of hasJavascript to
the <body...
Solution: Specific Styles For
Javascript-Disabled Users
Users without Javascript see a completely different
navigation sys...
Conclusion
Conclusion
• Decide whether to reward or punish:
  - What are the browser’s capabilities?
  - Who is the target user / bro...
Conclusion
• Decide whether to reward or punish:
  - What are the browser’s capabilities?
  - Who is the target user / bro...
Conclusion
• Decide whether to reward or punish:
  - What are the browser’s capabilities?
  - Who is the target user / bro...
Thank You
elliotjaystocks.com/geeknight
Upcoming SlideShare
Loading in...5
×

We Need To Talk About IE6

2,422

Published on

Elliot Jay Stocks' talk at Skillswap Bristol

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,422
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
23
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

We Need To Talk About IE6

  1. 1. We need to talk about IE6 Support and non-support in a Standards-aware world by Elliot Jay Stocks elliotjaystocks.com/skillswap
  2. 2. What Is a Reward?
  3. 3. What Is a Reward? A visual treat for the more capable browser
  4. 4. What Is a Reward? A visual treat for the more capable browser, e.g: Drop shadows on text (CSS3 spec, Safari / Opera 9.5) Full PNG alpha transparency (no IE6 without hack) si8.shauninman.com
  5. 5. What Is a Reward? A visual treat for the more capable browser, e.g: Drop shadows on text (CSS3 spec, Safari / Opera 9.5) Full PNG alpha transparency (no IE6 without hack)
  6. 6. What Is a Punishment?
  7. 7. What Is a Punishment? A decision to REMOVE visual treats
  8. 8. What Is a Punishment? A decision to REMOVE visual treats • The designer giveth... and the designer taketh away! Just because a browser supports a feature doesn’t mean you have to offer it
  9. 9. What Is a Punishment? A decision to REMOVE visual treats • The designer giveth... and the designer taketh away! Just because a browser supports a feature doesn’t mean you have to offer it • Don’t be forced into hacking Feature support can require complex hacks and it’s often not necessary
  10. 10. What Is a Punishment? A decision to REMOVE visual treats • The designer giveth... and the designer taketh away! Just because a browser supports a feature doesn’t mean you have to offer it • Don’t be forced into hacking Feature support can require complex hacks and it’s often not necessary • Don’t compromise the neatness of your code Avoid littering markup with unnecessary classes and IDs
  11. 11. Reward & Punishment In Practice: elliotjaystocks.com
  12. 12. Reward & Punishment In Practice: elliotjaystocks.com To reduce the need for unnecessary class names, more advanced CSS selectors were used.
  13. 13. Reward & Punishment In Practice: elliotjaystocks.com To reduce the need for unnecessary class names, more advanced CSS selectors were used. These selectors are not supported by IE6 and as a result it lacks some of the visual treats...
  14. 14. Attribute Selectors ul.blogroll li a[href=quot;http://hicksdesign.co.ukquot;] { background:url(../images/hicksFavicon.ico) }
  15. 15. Attribute Selectors ul.blogroll li a[href=quot;http://hicksdesign.co.ukquot;] { background:url(../images/hicksFavicon.ico) } Safari IE6
  16. 16. Adjacent Sibling Selectors ol.portfolioList li h2+a:hover { border:none }
  17. 17. Adjacent Sibling Selectors ol.portfolioList li h2+a:hover { border:none } Safari IE6
  18. 18. Reward & Punishment In Practice: stuffandnonsense.co.uk Safari IE6
  19. 19. But Why Reward or Punish?
  20. 20. But Why Reward or Punish? • Encourage users to adopt modern browsers
  21. 21. But Why Reward or Punish? • Encourage users to adopt modern browsers • Encourage browser vendors to create modern browsers
  22. 22. But Why Reward or Punish? • Encourage users to adopt modern browsers • Encourage browser vendors to create modern browsers • Push technology and ideologies forward
  23. 23. A Word of Warning
  24. 24. A Word of Warning • Not suitable in some commercial environments
  25. 25. A Word of Warning • Not suitable in some commercial environments • Pay attention to client requirements
  26. 26. A Word of Warning • Not suitable in some commercial environments • Pay attention to client requirements • Adapt to suit your target audience
  27. 27. When In Doubt...
  28. 28. When In Doubt... ... use a badge!
  29. 29. Accessibility: Catering For Users Without Resorting To Punishment
  30. 30. Accessibility: Catering For Users Without Resorting To Punishment In some circumstances, a browser’s lack of support for certain features can ruin the user experience.
  31. 31. Accessibility: Catering For Users Without Resorting To Punishment In some circumstances, a browser’s lack of support for certain features can ruin the user experience. In this instance, alternative display systems should be considered.
  32. 32. Problem: JS Tab Navigation The absolute positioning used to display the different information boxes on rollover is rendered useless if the user has Javascript disabled.
  33. 33. Solution: Specific Styles For Javascript-Disabled Users
  34. 34. Solution: Specific Styles For Javascript-Disabled Users 1. Use Javascript to write the class of hasJavascript to the <body> tag. No Javascript? No hasJavascript class!
  35. 35. Solution: Specific Styles For Javascript-Disabled Users 1. Use Javascript to write the class of hasJavascript to the <body> tag. No Javascript? No hasJavascript class! 2. Use CSS to style descendants of hasJavascript differently; e.g: body div { background:#000 } body.hasJavascript div { background:#fff }
  36. 36. Solution: Specific Styles For Javascript-Disabled Users Users without Javascript see a completely different navigation system. Hurrah!
  37. 37. Conclusion
  38. 38. Conclusion • Decide whether to reward or punish: - What are the browser’s capabilities? - Who is the target user / browser?
  39. 39. Conclusion • Decide whether to reward or punish: - What are the browser’s capabilities? - Who is the target user / browser? • Be gentle: - Proceed with caution - Consider displaying a warning ‘badge’
  40. 40. Conclusion • Decide whether to reward or punish: - What are the browser’s capabilities? - Who is the target user / browser? • Be gentle: - Proceed with caution - Consider displaying a warning ‘badge’ • Stay accessible: - Usability is more important than punishment - If necessary, offer alternative styling for different browsers
  41. 41. Thank You elliotjaystocks.com/geeknight
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×