SlideShare ist ein Scribd-Unternehmen logo
1 von 18
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 support
• Enable :hover on all elements not just on <a>
• Background-attachment: fixed works on all
  elements
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
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; }
CSS Selectors

Widely supported:
•   Universal             *
•   Type                  h1
•   Class                 .info
•   Id                    #header
•   Descendant            div p
•   link pseudo-classes   a:link, a:visited
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></p>
      </div>




    Method 1:                        Method 2:
    div strong { color:#f00; }       div > strong { color:#f00; }
    div p strong { color:#000; }
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: 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; }
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:
                        p.intro { font-size: 2em; }




                        Method 2:
                        h1 + p { font-size: 2em; }
Advanced Selectors

attribute selector
• img[alt]
• Matches any IMG element that has an ALT attribute,
  regardless of its value
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;
}
                                        }
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
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
  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]

Weitere ähnliche Inhalte

Ähnlich wie IE7 & Newly Supported Features of CSS

Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01Hatem Mahmoud
 
An Introduction to Cascading Style Sheets (CSS3)
An Introduction to Cascading Style Sheets (CSS3)An Introduction to Cascading Style Sheets (CSS3)
An Introduction to Cascading Style Sheets (CSS3)Ardee Aram
 
Style Your Site Part 1
Style Your Site Part 1Style Your Site Part 1
Style Your Site Part 1Ben MacNeill
 
CSS for Developers
CSS for DevelopersCSS for Developers
CSS for DevelopersNascenia IT
 
CSS- Smacss Design Rule
CSS- Smacss Design RuleCSS- Smacss Design Rule
CSS- Smacss Design Rule皮馬 頑
 
Real Browser Check Scripting Guide - Rigor Monitoring
Real Browser Check Scripting Guide - Rigor MonitoringReal Browser Check Scripting Guide - Rigor Monitoring
Real Browser Check Scripting Guide - Rigor MonitoringAnthony Ferrari
 
Angular2 and TypeScript
Angular2 and TypeScriptAngular2 and TypeScript
Angular2 and TypeScriptDavid Giard
 
IT2255 Web Essentials - Unit II Web Designing
IT2255 Web Essentials - Unit II  Web DesigningIT2255 Web Essentials - Unit II  Web Designing
IT2255 Web Essentials - Unit II Web Designingpkaviya
 
Oocss & progressive css3 selectors
Oocss & progressive css3 selectorsOocss & progressive css3 selectors
Oocss & progressive css3 selectorsdaniel_sternlicht
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS TroubleshootingDenise Jacobs
 
Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3Todd Zaki Warfel
 
Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyAdvanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyDenise Jacobs
 

Ähnlich wie IE7 & Newly Supported Features of CSS (20)

Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01
 
An Introduction to Cascading Style Sheets (CSS3)
An Introduction to Cascading Style Sheets (CSS3)An Introduction to Cascading Style Sheets (CSS3)
An Introduction to Cascading Style Sheets (CSS3)
 
CSS3 and Selectors
CSS3 and SelectorsCSS3 and Selectors
CSS3 and Selectors
 
CSS CASCADE
CSS CASCADECSS CASCADE
CSS CASCADE
 
Accessibility and css - Lisa Seeman
Accessibility and css - Lisa SeemanAccessibility and css - Lisa Seeman
Accessibility and css - Lisa Seeman
 
Style Your Site Part 1
Style Your Site Part 1Style Your Site Part 1
Style Your Site Part 1
 
CSS for Developers
CSS for DevelopersCSS for Developers
CSS for Developers
 
Css3
Css3Css3
Css3
 
CSS- Smacss Design Rule
CSS- Smacss Design RuleCSS- Smacss Design Rule
CSS- Smacss Design Rule
 
CSS3 Refresher
CSS3 RefresherCSS3 Refresher
CSS3 Refresher
 
Real Browser Check Scripting Guide - Rigor Monitoring
Real Browser Check Scripting Guide - Rigor MonitoringReal Browser Check Scripting Guide - Rigor Monitoring
Real Browser Check Scripting Guide - Rigor Monitoring
 
Angular2 and TypeScript
Angular2 and TypeScriptAngular2 and TypeScript
Angular2 and TypeScript
 
IT2255 Web Essentials - Unit II Web Designing
IT2255 Web Essentials - Unit II  Web DesigningIT2255 Web Essentials - Unit II  Web Designing
IT2255 Web Essentials - Unit II Web Designing
 
CSS
CSSCSS
CSS
 
Oocss & progressive css3 selectors
Oocss & progressive css3 selectorsOocss & progressive css3 selectors
Oocss & progressive css3 selectors
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
 
Html5
Html5Html5
Html5
 
css v1 guru
css v1 gurucss v1 guru
css v1 guru
 
Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3
 
Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyAdvanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & Efficiency
 

Kürzlich hochgeladen

The End of Business as Usual: Rewire the Way You Work to Succeed in the Consu...
The End of Business as Usual: Rewire the Way You Work to Succeed in the Consu...The End of Business as Usual: Rewire the Way You Work to Succeed in the Consu...
The End of Business as Usual: Rewire the Way You Work to Succeed in the Consu...Brian Solis
 
Upgrade Your Banking Experience with Advanced Core Banking Applications
Upgrade Your Banking Experience with Advanced Core Banking ApplicationsUpgrade Your Banking Experience with Advanced Core Banking Applications
Upgrade Your Banking Experience with Advanced Core Banking ApplicationsIntellect Design Arena Ltd
 
Intellectual Property Licensing Examples
Intellectual Property Licensing ExamplesIntellectual Property Licensing Examples
Intellectual Property Licensing Examplesamberjiles31
 
Mihir Menda - Member of Supervisory Board at RMZ
Mihir Menda - Member of Supervisory Board at RMZMihir Menda - Member of Supervisory Board at RMZ
Mihir Menda - Member of Supervisory Board at RMZKanakChauhan5
 
AMAZON SELLER VIRTUAL ASSISTANT PRODUCT RESEARCH .pdf
AMAZON SELLER VIRTUAL ASSISTANT PRODUCT RESEARCH .pdfAMAZON SELLER VIRTUAL ASSISTANT PRODUCT RESEARCH .pdf
AMAZON SELLER VIRTUAL ASSISTANT PRODUCT RESEARCH .pdfJohnCarloValencia4
 
PDT 88 - 4 million seed - Seed - Protecto.pdf
PDT 88 - 4 million seed - Seed - Protecto.pdfPDT 88 - 4 million seed - Seed - Protecto.pdf
PDT 88 - 4 million seed - Seed - Protecto.pdfHajeJanKamps
 
NASA CoCEI Scaling Strategy - November 2023
NASA CoCEI Scaling Strategy - November 2023NASA CoCEI Scaling Strategy - November 2023
NASA CoCEI Scaling Strategy - November 2023Steve Rader
 
7movierulz.uk
7movierulz.uk7movierulz.uk
7movierulz.ukaroemirsr
 
A flour, rice and Suji company in Jhang.
A flour, rice and Suji company in Jhang.A flour, rice and Suji company in Jhang.
A flour, rice and Suji company in Jhang.mcshagufta46
 
Borderless Access - Global B2B Panel book-unlock 2024
Borderless Access - Global B2B Panel book-unlock 2024Borderless Access - Global B2B Panel book-unlock 2024
Borderless Access - Global B2B Panel book-unlock 2024Borderless Access
 
Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024Borderless Access
 
Project Brief & Information Architecture Report
Project Brief & Information Architecture ReportProject Brief & Information Architecture Report
Project Brief & Information Architecture Reportamberjiles31
 
NewBase 25 March 2024 Energy News issue - 1710 by Khaled Al Awadi_compress...
NewBase  25 March  2024  Energy News issue - 1710 by Khaled Al Awadi_compress...NewBase  25 March  2024  Energy News issue - 1710 by Khaled Al Awadi_compress...
NewBase 25 March 2024 Energy News issue - 1710 by Khaled Al Awadi_compress...Khaled Al Awadi
 
MC Heights construction company in Jhang
MC Heights construction company in JhangMC Heights construction company in Jhang
MC Heights construction company in Jhangmcgroupjeya
 
Data skills for Agile Teams- Killing story points
Data skills for Agile Teams- Killing story pointsData skills for Agile Teams- Killing story points
Data skills for Agile Teams- Killing story pointsyasinnathani
 
TalentView Webinar: Empowering the Modern Workforce_ Redefininig Success from...
TalentView Webinar: Empowering the Modern Workforce_ Redefininig Success from...TalentView Webinar: Empowering the Modern Workforce_ Redefininig Success from...
TalentView Webinar: Empowering the Modern Workforce_ Redefininig Success from...TalentView
 
Building Your Personal Brand on LinkedIn - Expert Planet- 2024
 Building Your Personal Brand on LinkedIn - Expert Planet-  2024 Building Your Personal Brand on LinkedIn - Expert Planet-  2024
Building Your Personal Brand on LinkedIn - Expert Planet- 2024Stephan Koning
 
Developing Coaching Skills: Mine, Yours, Ours
Developing Coaching Skills: Mine, Yours, OursDeveloping Coaching Skills: Mine, Yours, Ours
Developing Coaching Skills: Mine, Yours, OursKaiNexus
 
Anyhr.io | Presentation HR&Recruiting agency
Anyhr.io | Presentation HR&Recruiting agencyAnyhr.io | Presentation HR&Recruiting agency
Anyhr.io | Presentation HR&Recruiting agencyHanna Klim
 

Kürzlich hochgeladen (20)

The End of Business as Usual: Rewire the Way You Work to Succeed in the Consu...
The End of Business as Usual: Rewire the Way You Work to Succeed in the Consu...The End of Business as Usual: Rewire the Way You Work to Succeed in the Consu...
The End of Business as Usual: Rewire the Way You Work to Succeed in the Consu...
 
Upgrade Your Banking Experience with Advanced Core Banking Applications
Upgrade Your Banking Experience with Advanced Core Banking ApplicationsUpgrade Your Banking Experience with Advanced Core Banking Applications
Upgrade Your Banking Experience with Advanced Core Banking Applications
 
Intellectual Property Licensing Examples
Intellectual Property Licensing ExamplesIntellectual Property Licensing Examples
Intellectual Property Licensing Examples
 
Mihir Menda - Member of Supervisory Board at RMZ
Mihir Menda - Member of Supervisory Board at RMZMihir Menda - Member of Supervisory Board at RMZ
Mihir Menda - Member of Supervisory Board at RMZ
 
AMAZON SELLER VIRTUAL ASSISTANT PRODUCT RESEARCH .pdf
AMAZON SELLER VIRTUAL ASSISTANT PRODUCT RESEARCH .pdfAMAZON SELLER VIRTUAL ASSISTANT PRODUCT RESEARCH .pdf
AMAZON SELLER VIRTUAL ASSISTANT PRODUCT RESEARCH .pdf
 
PDT 88 - 4 million seed - Seed - Protecto.pdf
PDT 88 - 4 million seed - Seed - Protecto.pdfPDT 88 - 4 million seed - Seed - Protecto.pdf
PDT 88 - 4 million seed - Seed - Protecto.pdf
 
NASA CoCEI Scaling Strategy - November 2023
NASA CoCEI Scaling Strategy - November 2023NASA CoCEI Scaling Strategy - November 2023
NASA CoCEI Scaling Strategy - November 2023
 
7movierulz.uk
7movierulz.uk7movierulz.uk
7movierulz.uk
 
A flour, rice and Suji company in Jhang.
A flour, rice and Suji company in Jhang.A flour, rice and Suji company in Jhang.
A flour, rice and Suji company in Jhang.
 
Borderless Access - Global B2B Panel book-unlock 2024
Borderless Access - Global B2B Panel book-unlock 2024Borderless Access - Global B2B Panel book-unlock 2024
Borderless Access - Global B2B Panel book-unlock 2024
 
Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024
 
Project Brief & Information Architecture Report
Project Brief & Information Architecture ReportProject Brief & Information Architecture Report
Project Brief & Information Architecture Report
 
NewBase 25 March 2024 Energy News issue - 1710 by Khaled Al Awadi_compress...
NewBase  25 March  2024  Energy News issue - 1710 by Khaled Al Awadi_compress...NewBase  25 March  2024  Energy News issue - 1710 by Khaled Al Awadi_compress...
NewBase 25 March 2024 Energy News issue - 1710 by Khaled Al Awadi_compress...
 
MC Heights construction company in Jhang
MC Heights construction company in JhangMC Heights construction company in Jhang
MC Heights construction company in Jhang
 
Data skills for Agile Teams- Killing story points
Data skills for Agile Teams- Killing story pointsData skills for Agile Teams- Killing story points
Data skills for Agile Teams- Killing story points
 
TalentView Webinar: Empowering the Modern Workforce_ Redefininig Success from...
TalentView Webinar: Empowering the Modern Workforce_ Redefininig Success from...TalentView Webinar: Empowering the Modern Workforce_ Redefininig Success from...
TalentView Webinar: Empowering the Modern Workforce_ Redefininig Success from...
 
Investment Opportunity for Thailand's Automotive & EV Industries
Investment Opportunity for Thailand's Automotive & EV IndustriesInvestment Opportunity for Thailand's Automotive & EV Industries
Investment Opportunity for Thailand's Automotive & EV Industries
 
Building Your Personal Brand on LinkedIn - Expert Planet- 2024
 Building Your Personal Brand on LinkedIn - Expert Planet-  2024 Building Your Personal Brand on LinkedIn - Expert Planet-  2024
Building Your Personal Brand on LinkedIn - Expert Planet- 2024
 
Developing Coaching Skills: Mine, Yours, Ours
Developing Coaching Skills: Mine, Yours, OursDeveloping Coaching Skills: Mine, Yours, Ours
Developing Coaching Skills: Mine, Yours, Ours
 
Anyhr.io | Presentation HR&Recruiting agency
Anyhr.io | Presentation HR&Recruiting agencyAnyhr.io | Presentation HR&Recruiting agency
Anyhr.io | Presentation HR&Recruiting agency
 

IE7 & Newly Supported Features of CSS

  • 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]