This presentation covers some of the newly support features of CSS in IE7, mainly: advanced selectors and properties/values. It also addresses how these changes affect our own techniques in the way websites are laid-out.

1. IE7 & Newly Supported
Features of CSS

2. Internet Explorer 7
• Number of behavior changes (bug fixes or new
features) in IE7: over 200
• Added alpha channel PNG support
• Enable :hover on all elements not just on <a>
• Background-attachment: fixed works on all
elements

3. Internet Explorer 7
Added support for the following CSS 2.1 features
• Min/max widths and heights
• Transparent borders
• Fixed positioning
• Advanced Selectors: first-child, adjacent, attribute, child

4. CSS Selectors
What is a selector anyway?
• Selectors “select” elements on a web page which follow
specific patterns. If the pattern matches, then the
declarations within that rule are applied.
• p { color: #f00; }

5. CSS Selectors
Widely supported:
• Universal *
• Type h1
• Class .info
• Id #header
• Descendant div p
• link pseudo-classes a:link, a:visited

6. CSS Selectors
Poorly supported (before IE7)
• child
• first-child
• adjacent sibling
• attribute

7. Advanced Selectors
child selector
• div > p
• Matches any P element that is a child of a DIV element.

8. Advanced Selectors
child selector example
<div>
<strong>Text one</strong>
<p><strong>Text two</strong></p>
</div>
Method 1: Method 2:
div strong { color:#f00; } div > strong { color:#f00; }
div p strong { color:#000; }

9. Advanced Selectors
first-child selector
• p:first-child
• Matches element P when P is the first child of its parent

10. Advanced Selectors
first-child selector example
Method 1:
ul li { border-top: 1px dotted #000; }
ul li.firstline { border-top: none; }
Border removal
Method 2:
ul li { border-top: 1px dotted #000; }
ul li:first-child { border-top: none; }

11. Advanced Selectors
adjacent sibling selector
• p+p
• Matches any P element immediately preceded by a
sibling element P

12. Advanced Selectors
adjacent sibling selector example
Lead-in paragraphs
Method 1:
p.intro { font-size: 2em; }
Method 2:
h1 + p { font-size: 2em; }

13. Advanced Selectors
attribute selector
• img[alt]
• Matches any IMG element that has an ALT attribute,
regardless of its value

14. Advanced Selectors
attribute selector example
Input borders
Method 1: Method 2:
input.text { input[type=text] {
border: 1px solid #888;
border: 1px solid #888;
border-bottom-color: #DDD;
border-bottom-color: #DDD;
border-right-color: #DDD;
border-right-color: #DDD;
}
}

15. New Properties and Values
• min-width and max-width
• min-height and max-height
• fixed positioning
– Fixed boxes do not move when the document is
scrolled

16. When can we start using this stuff?
Depends on Depends on
the project methodology

17. What methodology?
Graceful Progressive
degradation enhancement

18. So, what’s the difference?
These two concepts influence decision-making
about browser support. Because they reflect
different priorities, they frame the support
discussion differently. Graceful degradation
prioritizes presentation, and permits less
widely-used browsers to receive less (and give
less to the user). Progressive enhancement
puts content at the center, and allows most
browsers to receive more (and show more to the
user). While close in meaning, progressive
enhancement is a healthier and more forward-
looking approach. [Yahoo]