Progressive Enhancement

1
Progressive Enhancement

• Leave No One Behind

Steve Branson Department of Health Services
2
What isProgressive Enhancement

• Progressive enhancement is an approach to web
  design that builds documents for the least
  capable devices first
• then moves on to enhance those documents with
  separate logic for presentation
• in ways that do not place an undue burden on
  baseline devices but which allow a richer
  experience for those users with modern graphical
  browser software.

http//www.hesketh.com/publications/progressive_en
hancement_paving_way_for_future.html - Steve
Champeon
3
Progressive Enhancement Uses

• Longstanding characteristics of markup
• Bugs in various browsers
• Relies on the client request to determine the
  appropriate style rather than on browser sniffing

4
Why Progressive Enhancement

• Cost Savings
• Improved User Experience
• Inclusive

5
Obsolete Browsers

• Not being maintained
• Not getting new features
• But, old bugs are reliably . . . Buggy

6
Exploit Browser Differences

• Child Selector
• CSS Signature
• Will the Browser Apply the Rule?
• http//centricle.com/ref/css/filters/

http//www.w3.org/TR/REC-CSS2/selector.html
7
Objective forChild Selector

• Create an alternate design for Internet Explorer
  that looks good and renders smoothly.

8
The Child Selector

• It is written using the gt combinator
• It must appear between two other selectors.
• For example bodygtp color green
• This rule will make green any paragraph which is
  a direct child of the body element. Therefore,
  any paragraph which is the child of some other
  element-- for example, a div or a table cell--
  will not be matched by this rule.

http//meyerweb.com/eric/articles/webrev/200006b.h
tml
9
Lets Create Different behavior for Capitol image
for IE

• divextraDiv2
• background-image url(CapitolBuilding.gif)
• background-repeat no-repeat
• background-position left bottom
• position absolute
• left 0
• bottom 0
• height 600px
• width 265px

10
And now the cool stuff, hiding from IE with
child-selectors

• bodyca-dot-govgtdivextraDiv2
• background-image url(CapitolBuilding.gif)
• background-repeat no-repeat
• background-position left bottom
• position fixed
• left 0
• bottom 0
• height 594px
• width 300px
• z-index 2

11
Why Does This Work?

• Because child selectors imply greater
  specificity, the rule takes precedence
• But, only if the browser understands it.

12
Other Important Topics

• Bugs are Your Friends
• Print Anywhere
• Adjacent Selectors
• Attribute Selectors
• Pattern Matching

13
Questions?