IE7 & Newly Supported
    Features of CSS
Internet Explorer 7

• Number of behavior changes (bug fixes or new
  features) in IE7: over 200
• Added alpha channel PNG...
Internet Explorer 7

Added support for the following CSS 2.1 features
•   Min/max widths and heights
•   Transparent borde...
CSS Selectors

What is a selector anyway?
• Selectors “select” elements on a web page which follow
  specific patterns. If...
CSS Selectors

Widely supported:
•   Universal             *
•   Type                  h1
•   Class                 .info
...
CSS Selectors

Poorly supported (before IE7)
•   child
•   first-child
•   adjacent sibling
•   attribute
Advanced Selectors

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

child selector example


      <div>
      <strong>Text one</strong>
      <p><strong>Text two</strong...
Advanced Selectors

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

first-child selector example

                      Method 1:
                      ul li { border-top...
Advanced Selectors

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

adjacent sibling selector example

 Lead-in paragraphs
                        Method 1:
             ...
Advanced Selectors

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

attribute selector example


                        Input borders




Method 1:                      ...
New Properties and Values

• min-width and max-width
• min-height and max-height
• fixed positioning
   – Fixed boxes do n...
When can we start using this stuff?




      Depends on             Depends on
      the project            methodology
What methodology?




       Graceful      Progressive
      degradation   enhancement
So, what’s the difference?

These two concepts influence decision-making
  about browser support. Because they reflect
  d...
Upcoming SlideShare
Loading in...5
×

IE7 & Newly Supported Features of CSS

1,423

Published on

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.

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

  • Be the first to like this

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

No notes for slide

IE7 & Newly Supported Features of CSS

  1. 1. IE7 & Newly Supported Features of CSS
  2. 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. 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. 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. 5. CSS Selectors Widely supported: • Universal * • Type h1 • Class .info • Id #header • Descendant div p • link pseudo-classes a:link, a:visited
  6. 6. CSS Selectors Poorly supported (before IE7) • child • first-child • adjacent sibling • attribute
  7. 7. Advanced Selectors child selector • div > p • Matches any P element that is a child of a DIV element.
  8. 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. 9. Advanced Selectors first-child selector • p:first-child • Matches element P when P is the first child of its parent
  10. 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. 11. Advanced Selectors adjacent sibling selector • p+p • Matches any P element immediately preceded by a sibling element P
  12. 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. 13. Advanced Selectors attribute selector • img[alt] • Matches any IMG element that has an ALT attribute, regardless of its value
  14. 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. 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. 16. When can we start using this stuff? Depends on Depends on the project methodology
  17. 17. What methodology? Graceful Progressive degradation enhancement
  18. 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]

×