SlideShare une entreprise Scribd logo
1  sur  10
Télécharger pour lire hors ligne
It’s Business Time:
Gettin’ Down With the Graceful
Degradation of CSS3


                             Denise R. Jacobs
                      The Future of Web Design London
#gdcss3
The
passionate
love affair
with CSS3
only grows
stronger over
time
What’s not to love?

Easier
implementation of
visual effects

Effects that
enhance the user
experience
As with many seemingly perfect
  romances, there are issues…
Relationship Status:
Still a working draft
Validation (or lack thereof)
Uneven browser support,



        Proprietary properties,


                      And code bloat,
    Oh my!
Despite our most fervent
   wishes otherwise…

Contenu connexe

En vedette

GERMAN ANITUA
GERMAN ANITUAGERMAN ANITUA
GERMAN ANITUAlavelada
 
Credit Training Presentation
Credit Training PresentationCredit Training Presentation
Credit Training Presentationguest7f7d4
 
Adv 2 Teens Review For Final Written Exam
Adv 2 Teens Review For Final Written ExamAdv 2 Teens Review For Final Written Exam
Adv 2 Teens Review For Final Written ExamGilmar Mattos
 
The detail matters
The detail mattersThe detail matters
The detail mattersraymond4u
 
Digital Agency Gaumina
Digital Agency GauminaDigital Agency Gaumina
Digital Agency Gauminaziviles
 
Can The Afrosphere Survive the Age of Obama?
Can The Afrosphere Survive the Age of Obama?Can The Afrosphere Survive the Age of Obama?
Can The Afrosphere Survive the Age of Obama?Denise Jacobs
 
Joseba Abaitua
Joseba AbaituaJoseba Abaitua
Joseba Abaitualavelada
 
Towards an Agile Design Process
Towards an Agile Design ProcessTowards an Agile Design Process
Towards an Agile Design ProcessDenise Jacobs
 
AMA SIG Social Media 11-4-09
AMA SIG Social Media 11-4-09AMA SIG Social Media 11-4-09
AMA SIG Social Media 11-4-09Tom Williams
 
I Giovani Di Federmanager 2008
I Giovani Di Federmanager 2008I Giovani Di Federmanager 2008
I Giovani Di Federmanager 2008guest1c2ad5
 
Webquest
WebquestWebquest
Webquesttrevas
 
Staff Housing
Staff HousingStaff Housing
Staff Housingezran
 
matter states
matter statesmatter states
matter statesmatter
 
Creativity (R)Evolution - ThatConference 2013
Creativity (R)Evolution - ThatConference 2013Creativity (R)Evolution - ThatConference 2013
Creativity (R)Evolution - ThatConference 2013Denise Jacobs
 
The Graceful Degradation of CSS3
The Graceful Degradation of CSS3The Graceful Degradation of CSS3
The Graceful Degradation of CSS3Denise Jacobs
 
Banish Your Inner Critic to Unblock Creativity - Adobe Max 2015
Banish Your Inner Critic to Unblock Creativity - Adobe Max 2015Banish Your Inner Critic to Unblock Creativity - Adobe Max 2015
Banish Your Inner Critic to Unblock Creativity - Adobe Max 2015Denise Jacobs
 
Lost In The Cloud Unizo
Lost In The Cloud UnizoLost In The Cloud Unizo
Lost In The Cloud UnizoCombell NV
 

En vedette (20)

GERMAN ANITUA
GERMAN ANITUAGERMAN ANITUA
GERMAN ANITUA
 
Credit Training Presentation
Credit Training PresentationCredit Training Presentation
Credit Training Presentation
 
Adv 2 Teens Review For Final Written Exam
Adv 2 Teens Review For Final Written ExamAdv 2 Teens Review For Final Written Exam
Adv 2 Teens Review For Final Written Exam
 
The detail matters
The detail mattersThe detail matters
The detail matters
 
Digital Agency Gaumina
Digital Agency GauminaDigital Agency Gaumina
Digital Agency Gaumina
 
Ecce March 6 2009
Ecce   March 6 2009Ecce   March 6 2009
Ecce March 6 2009
 
Can The Afrosphere Survive the Age of Obama?
Can The Afrosphere Survive the Age of Obama?Can The Afrosphere Survive the Age of Obama?
Can The Afrosphere Survive the Age of Obama?
 
Joseba Abaitua
Joseba AbaituaJoseba Abaitua
Joseba Abaitua
 
Towards an Agile Design Process
Towards an Agile Design ProcessTowards an Agile Design Process
Towards an Agile Design Process
 
Ecce 2009 Class 1
Ecce 2009 Class 1Ecce 2009 Class 1
Ecce 2009 Class 1
 
AMA SIG Social Media 11-4-09
AMA SIG Social Media 11-4-09AMA SIG Social Media 11-4-09
AMA SIG Social Media 11-4-09
 
I Giovani Di Federmanager 2008
I Giovani Di Federmanager 2008I Giovani Di Federmanager 2008
I Giovani Di Federmanager 2008
 
Webquest
WebquestWebquest
Webquest
 
Staff Housing
Staff HousingStaff Housing
Staff Housing
 
matter states
matter statesmatter states
matter states
 
Creativity (R)Evolution - ThatConference 2013
Creativity (R)Evolution - ThatConference 2013Creativity (R)Evolution - ThatConference 2013
Creativity (R)Evolution - ThatConference 2013
 
0702 Innovationclusters
0702 Innovationclusters0702 Innovationclusters
0702 Innovationclusters
 
The Graceful Degradation of CSS3
The Graceful Degradation of CSS3The Graceful Degradation of CSS3
The Graceful Degradation of CSS3
 
Banish Your Inner Critic to Unblock Creativity - Adobe Max 2015
Banish Your Inner Critic to Unblock Creativity - Adobe Max 2015Banish Your Inner Critic to Unblock Creativity - Adobe Max 2015
Banish Your Inner Critic to Unblock Creativity - Adobe Max 2015
 
Lost In The Cloud Unizo
Lost In The Cloud UnizoLost In The Cloud Unizo
Lost In The Cloud Unizo
 

Similaire à It's Business Time: The Graceful Degradation of CSS3

CSS3: Are you experienced?
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?Denise Jacobs
 
Designing with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & EfficientlyDesigning with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & EfficientlyZoe Gillenwater
 
CSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondCSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondDenise Jacobs
 
Simply Responsive CSS3
Simply Responsive CSS3Simply Responsive CSS3
Simply Responsive CSS3Denise Jacobs
 
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 Jeffrey Barke
 
CSS3: Ripe and Ready
CSS3: Ripe and ReadyCSS3: Ripe and Ready
CSS3: Ripe and ReadyDenise Jacobs
 
Ease into HTML5 and CSS3
Ease into HTML5 and CSS3Ease into HTML5 and CSS3
Ease into HTML5 and CSS3Brian Moon
 
We Need To Talk About IE6
We Need To Talk About IE6We Need To Talk About IE6
We Need To Talk About IE6elliotjaystocks
 
Active Web Development
Active Web DevelopmentActive Web Development
Active Web DevelopmentDivya Manian
 
Vadim Mirgorod.Best practices for cross browser compatibility of drupal websi...
Vadim Mirgorod.Best practices for cross browser compatibility of drupal websi...Vadim Mirgorod.Best practices for cross browser compatibility of drupal websi...
Vadim Mirgorod.Best practices for cross browser compatibility of drupal websi...camp_drupal_ua
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS TroubleshootingDenise Jacobs
 
Rethinking accessibility related best practices for CSS in the modern age
Rethinking accessibility related best practices for CSS in the modern ageRethinking accessibility related best practices for CSS in the modern age
Rethinking accessibility related best practices for CSS in the modern ageshwetank
 
The Sankofa of CSS3: Moving forward while looking back
The Sankofa of CSS3: Moving forward while looking backThe Sankofa of CSS3: Moving forward while looking back
The Sankofa of CSS3: Moving forward while looking backDenise Jacobs
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksNathan Smith
 
Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3Zoe Gillenwater
 
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSHighly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSZoe Gillenwater
 

Similaire à It's Business Time: The Graceful Degradation of CSS3 (20)

CSS3: Are you experienced?
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?
 
Designing with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & EfficientlyDesigning with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & Efficiently
 
CSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondCSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to Respond
 
Simply Responsive CSS3
Simply Responsive CSS3Simply Responsive CSS3
Simply Responsive CSS3
 
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
 
CSS3: Ripe and Ready
CSS3: Ripe and ReadyCSS3: Ripe and Ready
CSS3: Ripe and Ready
 
Ease into HTML5 and CSS3
Ease into HTML5 and CSS3Ease into HTML5 and CSS3
Ease into HTML5 and CSS3
 
Intro to CSS3
Intro to CSS3Intro to CSS3
Intro to CSS3
 
We Need To Talk About IE6
We Need To Talk About IE6We Need To Talk About IE6
We Need To Talk About IE6
 
Active Web Development
Active Web DevelopmentActive Web Development
Active Web Development
 
Vadim Mirgorod.Best practices for cross browser compatibility of drupal websi...
Vadim Mirgorod.Best practices for cross browser compatibility of drupal websi...Vadim Mirgorod.Best practices for cross browser compatibility of drupal websi...
Vadim Mirgorod.Best practices for cross browser compatibility of drupal websi...
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
 
Reward & Punishment
Reward & PunishmentReward & Punishment
Reward & Punishment
 
Rethinking accessibility related best practices for CSS in the modern age
Rethinking accessibility related best practices for CSS in the modern ageRethinking accessibility related best practices for CSS in the modern age
Rethinking accessibility related best practices for CSS in the modern age
 
The Sankofa of CSS3: Moving forward while looking back
The Sankofa of CSS3: Moving forward while looking backThe Sankofa of CSS3: Moving forward while looking back
The Sankofa of CSS3: Moving forward while looking back
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
 
Practical HTML5
Practical HTML5Practical HTML5
Practical HTML5
 
CSS Frameworks
CSS FrameworksCSS Frameworks
CSS Frameworks
 
Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3
 
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSHighly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
 

Plus de Denise Jacobs

Amplify-U: Cultivating Career Confidence Through Banishing Your Inner Critic ...
Amplify-U: Cultivating Career Confidence Through Banishing Your Inner Critic ...Amplify-U: Cultivating Career Confidence Through Banishing Your Inner Critic ...
Amplify-U: Cultivating Career Confidence Through Banishing Your Inner Critic ...Denise Jacobs
 
Banish Your Inner Critic: Transform Self-Talk - IABC Southern Region Conferen...
Banish Your Inner Critic: Transform Self-Talk - IABC Southern Region Conferen...Banish Your Inner Critic: Transform Self-Talk - IABC Southern Region Conferen...
Banish Your Inner Critic: Transform Self-Talk - IABC Southern Region Conferen...Denise Jacobs
 
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - UX Hus...
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - UX Hus...Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - UX Hus...
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - UX Hus...Denise Jacobs
 
How to Have Difficult Conversations With Confidence - MTP Digital 2020
How to Have Difficult Conversations With Confidence -  MTP Digital 2020How to Have Difficult Conversations With Confidence -  MTP Digital 2020
How to Have Difficult Conversations With Confidence - MTP Digital 2020Denise Jacobs
 
Overcome Self-Doubt to Amplify Your Impact and Create a Better World - GSLA 202
Overcome Self-Doubt to Amplify Your Impact and Create a Better World  - GSLA 202Overcome Self-Doubt to Amplify Your Impact and Create a Better World  - GSLA 202
Overcome Self-Doubt to Amplify Your Impact and Create a Better World - GSLA 202Denise Jacobs
 
Banish Your Inner Critic: Reduce Anxiety - Nonprofit Storytelling Conference ...
Banish Your Inner Critic: Reduce Anxiety - Nonprofit Storytelling Conference ...Banish Your Inner Critic: Reduce Anxiety - Nonprofit Storytelling Conference ...
Banish Your Inner Critic: Reduce Anxiety - Nonprofit Storytelling Conference ...Denise Jacobs
 
Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...
Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...
Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...Denise Jacobs
 
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - Speake...
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - Speake...Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - Speake...
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - Speake...Denise Jacobs
 
Banish Your Inner Critic – Stanford HCI Group 2020
Banish Your Inner Critic – Stanford HCI Group 2020Banish Your Inner Critic – Stanford HCI Group 2020
Banish Your Inner Critic – Stanford HCI Group 2020Denise Jacobs
 
Banish Your Inner Critic: Reduce Anxiety and Unblock Creativity - Emergent Le...
Banish Your Inner Critic: Reduce Anxiety and Unblock Creativity - Emergent Le...Banish Your Inner Critic: Reduce Anxiety and Unblock Creativity - Emergent Le...
Banish Your Inner Critic: Reduce Anxiety and Unblock Creativity - Emergent Le...Denise Jacobs
 
Banish Your Inner Critic: Reduce anxiety and Unblock Creativity - SpeakAid 2020
Banish Your Inner Critic: Reduce anxiety and Unblock Creativity - SpeakAid 2020Banish Your Inner Critic: Reduce anxiety and Unblock Creativity - SpeakAid 2020
Banish Your Inner Critic: Reduce anxiety and Unblock Creativity - SpeakAid 2020Denise Jacobs
 
Banish Your Inner Critic: Elevate Performance - Nonprofit Storytelling Confer...
Banish Your Inner Critic: Elevate Performance - Nonprofit Storytelling Confer...Banish Your Inner Critic: Elevate Performance - Nonprofit Storytelling Confer...
Banish Your Inner Critic: Elevate Performance - Nonprofit Storytelling Confer...Denise Jacobs
 
Co-Create: Creating Better Together - Clarity Conference 2019
Co-Create: Creating Better Together - Clarity Conference 2019Co-Create: Creating Better Together - Clarity Conference 2019
Co-Create: Creating Better Together - Clarity Conference 2019Denise Jacobs
 
Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019
Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019
Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019Denise Jacobs
 
Step-up: Unleash Your Creative (Super) Power - D3 Expo 2019
Step-up: Unleash Your Creative (Super) Power - D3 Expo 2019Step-up: Unleash Your Creative (Super) Power - D3 Expo 2019
Step-up: Unleash Your Creative (Super) Power - D3 Expo 2019Denise Jacobs
 
Banish Your Inner Critic: Hack Your Productivity and Elevate Performance
Banish Your Inner Critic: Hack Your Productivity and Elevate PerformanceBanish Your Inner Critic: Hack Your Productivity and Elevate Performance
Banish Your Inner Critic: Hack Your Productivity and Elevate PerformanceDenise Jacobs
 
Banish Your Inner Critic v2.0: Swipe Left! - Adobe Max 2018
Banish Your Inner Critic v2.0: Swipe Left!  - Adobe Max 2018Banish Your Inner Critic v2.0: Swipe Left!  - Adobe Max 2018
Banish Your Inner Critic v2.0: Swipe Left! - Adobe Max 2018Denise Jacobs
 
The Creativity (R)Evolution – CMX Summit 2018
The Creativity (R)Evolution – CMX Summit 2018The Creativity (R)Evolution – CMX Summit 2018
The Creativity (R)Evolution – CMX Summit 2018Denise Jacobs
 
Banish Your Inner Critic v2.0: Swipe Left! – IIBA Columbus 2018
Banish Your Inner Critic v2.0: Swipe Left! – IIBA Columbus 2018Banish Your Inner Critic v2.0: Swipe Left! – IIBA Columbus 2018
Banish Your Inner Critic v2.0: Swipe Left! – IIBA Columbus 2018Denise Jacobs
 
Co-Create: Creating Better Together - DevCamp Brazil 2018
Co-Create: Creating Better Together - DevCamp Brazil 2018Co-Create: Creating Better Together - DevCamp Brazil 2018
Co-Create: Creating Better Together - DevCamp Brazil 2018Denise Jacobs
 

Plus de Denise Jacobs (20)

Amplify-U: Cultivating Career Confidence Through Banishing Your Inner Critic ...
Amplify-U: Cultivating Career Confidence Through Banishing Your Inner Critic ...Amplify-U: Cultivating Career Confidence Through Banishing Your Inner Critic ...
Amplify-U: Cultivating Career Confidence Through Banishing Your Inner Critic ...
 
Banish Your Inner Critic: Transform Self-Talk - IABC Southern Region Conferen...
Banish Your Inner Critic: Transform Self-Talk - IABC Southern Region Conferen...Banish Your Inner Critic: Transform Self-Talk - IABC Southern Region Conferen...
Banish Your Inner Critic: Transform Self-Talk - IABC Southern Region Conferen...
 
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - UX Hus...
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - UX Hus...Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - UX Hus...
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - UX Hus...
 
How to Have Difficult Conversations With Confidence - MTP Digital 2020
How to Have Difficult Conversations With Confidence -  MTP Digital 2020How to Have Difficult Conversations With Confidence -  MTP Digital 2020
How to Have Difficult Conversations With Confidence - MTP Digital 2020
 
Overcome Self-Doubt to Amplify Your Impact and Create a Better World - GSLA 202
Overcome Self-Doubt to Amplify Your Impact and Create a Better World  - GSLA 202Overcome Self-Doubt to Amplify Your Impact and Create a Better World  - GSLA 202
Overcome Self-Doubt to Amplify Your Impact and Create a Better World - GSLA 202
 
Banish Your Inner Critic: Reduce Anxiety - Nonprofit Storytelling Conference ...
Banish Your Inner Critic: Reduce Anxiety - Nonprofit Storytelling Conference ...Banish Your Inner Critic: Reduce Anxiety - Nonprofit Storytelling Conference ...
Banish Your Inner Critic: Reduce Anxiety - Nonprofit Storytelling Conference ...
 
Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...
Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...
Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...
 
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - Speake...
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - Speake...Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - Speake...
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - Speake...
 
Banish Your Inner Critic – Stanford HCI Group 2020
Banish Your Inner Critic – Stanford HCI Group 2020Banish Your Inner Critic – Stanford HCI Group 2020
Banish Your Inner Critic – Stanford HCI Group 2020
 
Banish Your Inner Critic: Reduce Anxiety and Unblock Creativity - Emergent Le...
Banish Your Inner Critic: Reduce Anxiety and Unblock Creativity - Emergent Le...Banish Your Inner Critic: Reduce Anxiety and Unblock Creativity - Emergent Le...
Banish Your Inner Critic: Reduce Anxiety and Unblock Creativity - Emergent Le...
 
Banish Your Inner Critic: Reduce anxiety and Unblock Creativity - SpeakAid 2020
Banish Your Inner Critic: Reduce anxiety and Unblock Creativity - SpeakAid 2020Banish Your Inner Critic: Reduce anxiety and Unblock Creativity - SpeakAid 2020
Banish Your Inner Critic: Reduce anxiety and Unblock Creativity - SpeakAid 2020
 
Banish Your Inner Critic: Elevate Performance - Nonprofit Storytelling Confer...
Banish Your Inner Critic: Elevate Performance - Nonprofit Storytelling Confer...Banish Your Inner Critic: Elevate Performance - Nonprofit Storytelling Confer...
Banish Your Inner Critic: Elevate Performance - Nonprofit Storytelling Confer...
 
Co-Create: Creating Better Together - Clarity Conference 2019
Co-Create: Creating Better Together - Clarity Conference 2019Co-Create: Creating Better Together - Clarity Conference 2019
Co-Create: Creating Better Together - Clarity Conference 2019
 
Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019
Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019
Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019
 
Step-up: Unleash Your Creative (Super) Power - D3 Expo 2019
Step-up: Unleash Your Creative (Super) Power - D3 Expo 2019Step-up: Unleash Your Creative (Super) Power - D3 Expo 2019
Step-up: Unleash Your Creative (Super) Power - D3 Expo 2019
 
Banish Your Inner Critic: Hack Your Productivity and Elevate Performance
Banish Your Inner Critic: Hack Your Productivity and Elevate PerformanceBanish Your Inner Critic: Hack Your Productivity and Elevate Performance
Banish Your Inner Critic: Hack Your Productivity and Elevate Performance
 
Banish Your Inner Critic v2.0: Swipe Left! - Adobe Max 2018
Banish Your Inner Critic v2.0: Swipe Left!  - Adobe Max 2018Banish Your Inner Critic v2.0: Swipe Left!  - Adobe Max 2018
Banish Your Inner Critic v2.0: Swipe Left! - Adobe Max 2018
 
The Creativity (R)Evolution – CMX Summit 2018
The Creativity (R)Evolution – CMX Summit 2018The Creativity (R)Evolution – CMX Summit 2018
The Creativity (R)Evolution – CMX Summit 2018
 
Banish Your Inner Critic v2.0: Swipe Left! – IIBA Columbus 2018
Banish Your Inner Critic v2.0: Swipe Left! – IIBA Columbus 2018Banish Your Inner Critic v2.0: Swipe Left! – IIBA Columbus 2018
Banish Your Inner Critic v2.0: Swipe Left! – IIBA Columbus 2018
 
Co-Create: Creating Better Together - DevCamp Brazil 2018
Co-Create: Creating Better Together - DevCamp Brazil 2018Co-Create: Creating Better Together - DevCamp Brazil 2018
Co-Create: Creating Better Together - DevCamp Brazil 2018
 

Dernier

Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 

Dernier (20)

Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 

It's Business Time: The Graceful Degradation of CSS3

  • 1. It’s Business Time: Gettin’ Down With the Graceful Degradation of CSS3 Denise R. Jacobs The Future of Web Design London
  • 3. The passionate love affair with CSS3 only grows stronger over time
  • 4. What’s not to love? Easier implementation of visual effects Effects that enhance the user experience
  • 5. As with many seemingly perfect romances, there are issues…
  • 9. Uneven browser support, Proprietary properties, And code bloat, Oh my!
  • 10. Despite our most fervent wishes otherwise…
  • 11. Many users are still using older browsers
  • 15. “Do websites need to look exactly the same in every browser?”
  • 19. They do shape user perception and experience
  • 20. Compatibility is the foundation of strong relationships
  • 21. So, which is better, Graceful Degradation or Progressive Enhancement?
  • 23. Sites need be usable and look good to as many people as possible. Period.
  • 24. (It doesn’t matter how you get there)
  • 25. Do you want to date my browser?
  • 34. A bit of technique goes a long way
  • 35. (Re)set the mood A CSS reset insures that you are starting from a common base point in all browsers.
  • 36. Leverage source order Place browser-specific properties ahead of standard properties.
  • 37. Use advanced selectors Advanced selectors are a good way to specifically target styles for modern browsers.
  • 38. Create conditional comments <!--[if gte IE 6]> <link href="ie_stylesheet.css" rel="stylesheet"> <![endif]--> (place after the regular stylesheet link to override styles)
  • 39. Presumptions • POSH markup • You know your audience’s browser profile Precautions • Many properties are browser-specific • Syntax differences between browser-specific properties and the standard property • Increase in the amount of CSS
  • 41. 8 CSS3 Properties and Their Graceful Degradation
  • 42. @font-face 1 • Tips & issues – Potential font license restrictions – Flash of unstyled text (fout) • Browser Support – IE requires fonts to be in EOT format
  • 43. @font-face 1 • Graceful degradation – Desired font should display in all browsers. If not, fallback fonts will display – Extra credit: image replacement through conditional comments
  • 44. @font-face 1 @font-face { font-family: “Colaborate Light"; src: url(ColabLig.eot); src: url(ColabLig.ttf) format("truetype"); } Then later in the stylesheet: h2 {font: 1.58em/1.45em “Colaborate Light”, sans-serif;}
  • 45. @font-face 1 In modern browsers In IE 8: fallback font
  • 46. 2 text-shadow • Tips & issues – Can help accentuate text – No impact on accessibility • Browser Support – IE does not support
  • 47. 2 text-shadow • Graceful degradation – If it doesn’t show up, that’s okay – Extra credit: image replacement
  • 48. 2 text-shadow #nav-primary a.current { text-shadow:1px 1px 0 rgba(0,0,0,.5); }
  • 49. 2 text-shadow In modern browsers In IE 7 without text shadow
  • 50. border-radius 3 • Tips & issues – Different syntax for mozilla, webkit, and opera browsers • Browser Support – IE does not support, Opera: 10.5 only
  • 51. border-radius 3 • Graceful Degradation – Square corners are okay – Extra credit: serve images through conditional comments
  • 52. border-radius 3 #contentcolumn { -moz-border-radius: 20px 20px 0 0; -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; border-radius: 20px 20px 0 0; }
  • 53. border-radius 3 In IE 6, no image replacement In IE 7, image replacement In modern browsers through conditional comments
  • 54. 4 box-shadow • Tips & issues – Different syntax for mozilla, webkit, and opera browsers • Browser Support – IE does not support, Opera only 10.5
  • 55. 4 box-shadow • Graceful degradation – Okay if users do not see effect – Extra credit: serve images through conditional comments
  • 56. 4 box-shadow .portfolio { -moz-box-shadow: 0 5px 20px rgba(0,0,0,0.6); -webkit-box-shadow: 0 5px 20px rgba(0,0,0,0.6); box-shadow: 0 5px 20px rgba(0,0,0,0.6); }
  • 57. 4 box-shadow In modern browsers In IE 7, sans box shadow
  • 58. opacity 5 • Tips & issues – Do not use on elements that would cover important content • Browser Support – IE does not support
  • 59. opacity 5 • Graceful degradation – Accept that effect will not work in non-supportive browsers
  • 60. opacity 5 #feature-meta { background:none repeat scroll 0 0 #3C4C55; opacity:0.85; }
  • 61. opacity 5 In modern browsers In IE7, no opacity
  • 62. 6 rgba • Tips & issues – More granular control of particular elements than opacity • Browser Support – IE does not support
  • 63. 6 rgba • Graceful degradation – Place after regular rgb color property to override in modern browsers; older browsers will ignore it – Use a png for fallback if desired
  • 64. 6 rgba #about { color: rgba(255, 255, 255, 0.8); background-color: rgba(142, 213, 87, 0.3); }
  • 65. 6 rgba In modern browsers In IE 7, no rgba
  • 66. transform 7 • Tips & issues – Mozilla, webkit, and opera properties • Browser Support – IE does not support, Opera 10.5 only
  • 67. transform 7 • Graceful degradation – Leave images in standard orientation – Extra credit: serve images or image sprites with conditional comments
  • 68. transform 7 #photos img { -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -o-transform: rotate(-2deg); }
  • 69. transform 7 In modern browsers In IE 7 without transform
  • 70. 8 gradient • Tips & issues – Different syntax for mozilla and webkit browsers • Browser Support – IE and Opera do not support
  • 71. 8 gradient • Graceful degradation – Gradient will not appear older browsers – Establish fallback background image first in code
  • 72. 8 gradient #mainnav li a { background-color: #f7f6f4; background-image: url(bg_navitems.gif); background-image: -moz-linear-gradient(100% 100% 90deg, #ccc9ba, #ffffff); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#ccc9ba)); }
  • 73. 8 gradient In IE, with fallback image; conditional In modern browsers comment for rounded corners
  • 75. Multiple Stylesheets Use multiple stylesheets to add layers of style complexity for multiple platforms See: http://www.alistapart.com/articles/progressive enhancementwithcss
  • 76. Useful Tools Ie7.js: A javascript library that make IE act like a standards-compliant browser http://code.google.com/p/ie7-js/ Modernizr: detects support of CSS3 properties in browsers http://www.modernizr.com/
  • 77. Making plans for the future
  • 78. Don’t be afraid to commit to using CSS3
  • 79. Feel the love: Put in some hands-on quality time
  • 80. One thing you can do in the next week 1. Find some favorite CSS3 and graceful degradation resources
  • 81. Two things you can do in the next month 1. Incorporate CSS3 properties in to a personal site 2. Seek out CSS3 inspiration and sounding boards
  • 82. Three things you can do in the next three months 1. Convince your boss that using CSS3 is a beneficial move 2. Plan to use CSS3 in your next project 3. Share CSS3 with colleagues or your team
  • 83. Re/sources delicious.com/denisejacobs/ gdcss3 delicious.com/denisejacobs/ gdcss3examples
  • 84. Book Love Come to the book signing today from 12:25 – 1:55pm at the Peach Pit table! CSSDetectiveGuide.com twitter.com/cssdetective
  • 85. Book Love InterActWithWebStandards.com Also available during the book signing today from 12:25 – 1:55pm at the Peach Pit table!
  • 87. Flickr Love http://www.flickr.com/photos/victoriapeckham/2091704 http://www.flickr.com/photos/deapeajay/2969264395/ 802/ http://www.flickr.com/photos/mogwai_83/2055034959/ http://www.flickr.com/photos/shibanidutta/4115390982/ http://www.flickr.com/photos/thisparticulargreg/5148172 http://www.flickr.com/photos/cybervin/266632074/ 08/ http://www.flickr.com/photos/spierzchala/66232046/ http://www.flickr.com/photos/criminalintent/3282026121 http://www.flickr.com/photos/bdwaydiva1/2400841641/ / http://www.flickr.com/photos/1k3r/1371314660/ http://www.flickr.com/photos/nostri-imago/3216359107/ http://www.flickr.com/photos/porcupiny/783990790/ http://musicselections.files.wordpress.com/2007/03/marv http://www.flickr.com/photos/mwichary/2240608755/ in-gaye-16.jpg http://www.flickr.com/photos/tom1231/273579455/ http://www.flickr.com/photos/gorriti/426787181/ http://www.flickr.com/photos/gideon/6582069/ http://www.flickr.com/photos/unfrenziedspace/45515056 64/ http://www.flickr.com/photos/shirinwiniger/3680885289/ http://www.flickr.com/photos/erikogan/3481255/ http://www.flickr.com/photos/briankameoka/3754385207 / http://www.flickr.com/photos/possible248/3695594410/ http://www.flickr.com/photos/tomergabel/3355451483/ http://www.flickr.com/photos/carbonnyc/3160373238/ http://www.flickr.com/photos/johnsnape/4258191545/ http://www.flickr.com/photos/boklm/486646798/in/set- 72157600208217964/ http://www.flickr.com/photos/hookdesignalter/42735654 89/ (& http://www.robotjohnny.com/) http://www.flickr.com/photos/soerenheuer/17879000/ http://www.flickr.com/photos/tnarik/899866806/ http://www.flickr.com/photos/nickwebb/2919914290/ http://www.billwisserphoto.com
  • 88. Superstar Sponsor Love! Aarron Walter Chijioke Amah Janet Tu Marlon Norris Adam Avitia Chris Coyier Jay F Hicks Mary M Morgan Adria Richards Chris Fullman Jean MacDonald Maurice Cherry Adriana Vega Chris Lawson Jeffrey Croft Mou Mukherjee Alina Balean Chris Rainey Jennifer Dixey Natascha Dela Cruz Amber Zimmerman Christopher Coldewey Jennifer Strickland Nicholas St Surin Andrea Gietz Craig Simon Jessica Gidal Phil Pickering Andrea Wang David Bisset Jewel Figueras Priscilla Janney-Pace Andy Stratton David J. Shea Jim & Betty Felder Ralph Brandi Angela Betancourt Denise Gaudy Jonathan Snook Robbie Mae Lowe Ann Daramola Deloria Jacobs Juanetta Whylie Robert Chafino Anukul Gurung Donna Freeman Julia Wakefield Robert Dellow Baratunde Thurston Emily Dykstra Kevin V. Michael Ron Smith Barbara Fleming Eric Marden, XENTEK.net Kim Andre Ottesen Ryan Carson Barbara Hyman Erica Mauter Kiratiana Freelon S. Elizabeth Burr Belinda Thurston Evan Schneider Kornelia Rybitwa Stephanie Hobson Beth Kipnis Faruk Ates Kris Krug Stephanie Sullivan Betsy Soler Fredric Mitchell Kristin Quintas Stephen Malagodi Betty Hairston Gail Simpson Kristine Hofstra Sue Parker Bryce Kerley George Kelly Kyle Hurst Tony Carrera Jr Carol Ferrari Hans Verschooten Lori Todd Vanessa Montes Cecily Walker Havivah Schwartz Lynne d Johnson Wayne Sutton Cesar Abueg Ivan Mladenovic Marc Hall William James Lowe Charmell Slaughter J. Todd Bennett Marlo Salawou Winifred Day
  • 90. <bowing>Thank you!</bowing> denisejacobs.com twitter.com/denisejacobs slideshare.net/denisejacobs