SlideShare une entreprise Scribd logo
1  sur  53
CSS3: Not Magic Pixie Dust
CSS3: Not Magic Pixie Dust
SourceForge.net: A Case Study
Remember:
Big
Time Savers
Sleek
& Fast
Happy

Sexy
Some History
Redesign #1
Better downloading
Redesign #2
Better looking downloading
CSS3
Time to rock and roll!
Compass Extensions
A Crash Course
git pull
git pull




SFX: PHP
git pull




SFX: PHP              SF.py: Python
git pull




SFX: PHP                  SF.py: Python




           Allura: Python
Fast Forward
Hello, CSS3
Old   New
Images
Images



  24
          9
    Old   New
Requests
Requests



  33
           16
    Old    New
Total Weight
Total Weight



668K 564K
    Old        New
CSS
CSS



            115K
  77K
      Old    New
Problem:
CSS Bloat
Replacing Images




 border-bottom-left-radius: 4px;
 border-bottom-right-radius: 4px;
 background-image: linear-gradient(top,
            #ffffff 0%, #cccccc 100%);
Vendor Prefixes


 -moz-border-radius-bottomleft: 4px;
 -webkit-border-bottom-left-radius: 4px;
 -o-border-bottom-left-radius: 4px;
 -ms-border-bottom-left-radius: 4px;
 -khtml-border-bottom-left-radius: 4px;
 border-bottom-left-radius: 4px;
 -moz-border-radius-bottomright: 4px;
 -webkit-border-bottom-right-radius: 4px;
 -o-border-bottom-right-radius: 4px;
 -ms-border-bottom-right-radius: 4px;
 -khtml-border-bottom-right-radius: 4px;
 border-bottom-right-radius: 4px;
 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #ffffff), color-
stop(100%, #cccccc));
 background-image: -moz-linear-gradient(top, #ffffff 0%, #cccccc 100%);
 background-image: linear-gradient(top, #ffffff 0%, #cccccc 100%);
Inefficient SASS
DRY: Mixins
@mixin inverse-text {        #footer {
  background-color: black;     background-color: black;
  color: white;                color: white;
}                              ...
                             }
#footer {
  @include inverse-text;     #header {
  ...                          background-color: black;
}                              color: white;
                               ...
#header {                    }
  @include inverse-text;
  ...
}
           SASS                         CSS
DRY: Extends
.inverse-text {               #footer, #header {
   background-color: black;     background-color: black;
   color: white;                color: white;
}                             }

#footer {                     #header {
  @extends .inverse-text;       ...
  ...                         }
}
                              #footer {
#header {                       ...
  @include .inverse-text;     }
  ...
}
           SASS                           CSS
Mixins rock…
…except when they don’t.
@mixin razzledazzle {
  @include border-radius(4px);
  @include box-shadow(black, 0, 1px, 5px);
  @include linear-gradient(…);
}

#header {
  @include razzledazzle;
  …
}

#footer {
  @include razzledazzle;
  …
}
#header {
  background-image: -webkit-gradient(…);
  background-image: -moz-linear-gradient(…);
  background-image: linear-gradient(…);
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  -khtml-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0 1px 5px black;
  -webkit-box-shadow: 0 1px 5px black;
  -o-box-shadow: 0 1px 5px black;
  box-shadow: 0 1px 5px black;
  …
}

#footer {
 background-image: -webkit-gradient(…);
 background-image: -moz-linear-gradient(…);
 background-image: linear-gradient(…);
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 -o-border-radius: 4px;
 -ms-border-radius: 4px;
 -khtml-border-radius: 4px;
 border-radius: 4px;
 -moz-box-shadow: 0 1px 5px black;
 -webkit-box-shadow: 0 1px 5px black;
 -o-box-shadow: 0 1px 5px black;
 box-shadow: 0 1px 5px black;
 …
.razzledazzle {
   @include border-radius(4px);
   @include box-shadow(black, 0, 1px, 5px);
   @include linear-gradient(…);
}

#header {
  @extend .razzledazzle;
  …
}

#footer {
  @extend .razzledazzle;
  …
}
#header, #footer {
  background-image: -webkit-gradient(…);
  background-image: -moz-linear-gradient(…);
  background-image: linear-gradient(…);
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  -khtml-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0 1px 5px black;
  -webkit-box-shadow: 0 1px 5px black;
  -o-box-shadow: 0 1px 5px black;
  box-shadow: 0 1px 5px black;
}

#header {
  …
}

#footer {
  …
}
Keep an eye on your CSS.
Vendor prefixes and mixins don’t, er… mix.
?
Remember:
Big
Time Savers
Sleek
& Fast
Happy

Sexy
Not Magic
Not
pixie dust
Work Smart
Have Fun

Contenu connexe

Tendances

The Basics of CSS3
The Basics of CSS3The Basics of CSS3
The Basics of CSS3joshsurovey
 
CSS'in Gücü Adına
CSS'in Gücü AdınaCSS'in Gücü Adına
CSS'in Gücü AdınaAdem Ilter
 
Open Web Camp: CSS3 Implementable Features
Open Web Camp: CSS3 Implementable FeaturesOpen Web Camp: CSS3 Implementable Features
Open Web Camp: CSS3 Implementable FeaturesEstelle Weyl
 
CSS3 For WebKit: iPadDevCamp Presentation
CSS3 For WebKit: iPadDevCamp PresentationCSS3 For WebKit: iPadDevCamp Presentation
CSS3 For WebKit: iPadDevCamp PresentationEstelle Weyl
 
CSS3 Tips & Techniques
CSS3 Tips & TechniquesCSS3 Tips & Techniques
CSS3 Tips & TechniquesUIEpreviews
 
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleWeb Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleEstelle Weyl
 
CSS3 Implementable Features
CSS3 Implementable FeaturesCSS3 Implementable Features
CSS3 Implementable FeaturesEstelle Weyl
 
Using Sass - Building on CSS
Using Sass - Building on CSSUsing Sass - Building on CSS
Using Sass - Building on CSSSayanee Basu
 

Tendances (11)

Css 2
Css 2Css 2
Css 2
 
The Basics of CSS3
The Basics of CSS3The Basics of CSS3
The Basics of CSS3
 
CSS'in Gücü Adına
CSS'in Gücü AdınaCSS'in Gücü Adına
CSS'in Gücü Adına
 
Open Web Camp: CSS3 Implementable Features
Open Web Camp: CSS3 Implementable FeaturesOpen Web Camp: CSS3 Implementable Features
Open Web Camp: CSS3 Implementable Features
 
CSS3 For WebKit: iPadDevCamp Presentation
CSS3 For WebKit: iPadDevCamp PresentationCSS3 For WebKit: iPadDevCamp Presentation
CSS3 For WebKit: iPadDevCamp Presentation
 
CSS3 Tips & Techniques
CSS3 Tips & TechniquesCSS3 Tips & Techniques
CSS3 Tips & Techniques
 
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleWeb Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
 
CSS3 Implementable Features
CSS3 Implementable FeaturesCSS3 Implementable Features
CSS3 Implementable Features
 
Using Sass - Building on CSS
Using Sass - Building on CSSUsing Sass - Building on CSS
Using Sass - Building on CSS
 
Css 3 checklist
Css 3 checklistCss 3 checklist
Css 3 checklist
 
Css3 process bar
Css3 process barCss3 process bar
Css3 process bar
 

En vedette

Power point dimension cognitiva
Power point dimension cognitivaPower point dimension cognitiva
Power point dimension cognitivadoradelgadog
 
A novel microfluidic device for rapid melanoma diagnosis
A novel microfluidic device for rapid melanoma diagnosisA novel microfluidic device for rapid melanoma diagnosis
A novel microfluidic device for rapid melanoma diagnosisRegine Labog
 
Continuum biomechanics modeling of homologue proteins
Continuum biomechanics modeling of homologue proteinsContinuum biomechanics modeling of homologue proteins
Continuum biomechanics modeling of homologue proteinsRegine Labog
 
Jackie's projects
Jackie's projectsJackie's projects
Jackie's projectsmdross27
 

En vedette (6)

Hurricane katrina absorb activity
Hurricane katrina absorb activityHurricane katrina absorb activity
Hurricane katrina absorb activity
 
Power point dimension cognitiva
Power point dimension cognitivaPower point dimension cognitiva
Power point dimension cognitiva
 
A novel microfluidic device for rapid melanoma diagnosis
A novel microfluidic device for rapid melanoma diagnosisA novel microfluidic device for rapid melanoma diagnosis
A novel microfluidic device for rapid melanoma diagnosis
 
Hurricane katrina absorb activity
Hurricane katrina absorb activityHurricane katrina absorb activity
Hurricane katrina absorb activity
 
Continuum biomechanics modeling of homologue proteins
Continuum biomechanics modeling of homologue proteinsContinuum biomechanics modeling of homologue proteins
Continuum biomechanics modeling of homologue proteins
 
Jackie's projects
Jackie's projectsJackie's projects
Jackie's projects
 

Similaire à CSS3 is Not Magic Pixie Dust

Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive NewsMobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive NewsKaelig Deloumeau-Prigent
 
Preprocessor presentation
Preprocessor presentationPreprocessor presentation
Preprocessor presentationMario Noble
 
Sass and Compass - Getting Started
Sass and Compass - Getting StartedSass and Compass - Getting Started
Sass and Compass - Getting Startededgincvg
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid PrototypingEven Wu
 
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IVSass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IVDirk Ginader
 
Wrangling the CSS Beast with Sass
Wrangling the CSS Beast  with SassWrangling the CSS Beast  with Sass
Wrangling the CSS Beast with SassRob Friesel
 
Big Design Conference: CSS3
Big Design Conference: CSS3 Big Design Conference: CSS3
Big Design Conference: CSS3 Wynn Netherland
 
Getting Started with Sass & Compass
Getting Started with Sass & CompassGetting Started with Sass & Compass
Getting Started with Sass & CompassRob Davarnia
 
CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書拓樹 谷
 
Work and play with SASS & Compass
Work and play with SASS & CompassWork and play with SASS & Compass
Work and play with SASS & CompassAndreas Dantz
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockMarco Pinheiro
 
LESS : The dynamic stylesheet language
LESS : The dynamic stylesheet languageLESS : The dynamic stylesheet language
LESS : The dynamic stylesheet languageKatsunori Tanaka
 

Similaire à CSS3 is Not Magic Pixie Dust (20)

Sass, Compass
Sass, CompassSass, Compass
Sass, Compass
 
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive NewsMobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
 
Preprocessor presentation
Preprocessor presentationPreprocessor presentation
Preprocessor presentation
 
Sass and Compass - Getting Started
Sass and Compass - Getting StartedSass and Compass - Getting Started
Sass and Compass - Getting Started
 
CSS Extenders
CSS ExtendersCSS Extenders
CSS Extenders
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid Prototyping
 
Accelerated Stylesheets
Accelerated StylesheetsAccelerated Stylesheets
Accelerated Stylesheets
 
Theming and Sass
Theming and SassTheming and Sass
Theming and Sass
 
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IVSass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
 
Wrangling the CSS Beast with Sass
Wrangling the CSS Beast  with SassWrangling the CSS Beast  with Sass
Wrangling the CSS Beast with Sass
 
Big Design Conference: CSS3
Big Design Conference: CSS3 Big Design Conference: CSS3
Big Design Conference: CSS3
 
Sass compass
Sass compassSass compass
Sass compass
 
Getting Started with Sass & Compass
Getting Started with Sass & CompassGetting Started with Sass & Compass
Getting Started with Sass & Compass
 
CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書
 
Work and play with SASS & Compass
Work and play with SASS & CompassWork and play with SASS & Compass
Work and play with SASS & Compass
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, Greensock
 
Sass
SassSass
Sass
 
FCIP SASS Talk
FCIP SASS TalkFCIP SASS Talk
FCIP SASS Talk
 
SASS Lecture
SASS Lecture SASS Lecture
SASS Lecture
 
LESS : The dynamic stylesheet language
LESS : The dynamic stylesheet languageLESS : The dynamic stylesheet language
LESS : The dynamic stylesheet language
 

Dernier

DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamUiPathCommunity
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusZilliz
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024The Digital Insurer
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfOverkill Security
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Victor Rentea
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Orbitshub
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...apidays
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...Zilliz
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...apidays
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Victor Rentea
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfOverkill Security
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Jeffrey Haguewood
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesrafiqahmad00786416
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 

Dernier (20)

DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 

CSS3 is Not Magic Pixie Dust

  • 1.
  • 2. CSS3: Not Magic Pixie Dust
  • 3. CSS3: Not Magic Pixie Dust SourceForge.net: A Case Study
  • 10.
  • 12.
  • 13. CSS3 Time to rock and roll!
  • 14.
  • 16.
  • 17.
  • 20. git pull SFX: PHP SF.py: Python
  • 21. git pull SFX: PHP SF.py: Python Allura: Python
  • 23. Old New
  • 25. Images 24 9 Old New
  • 27. Requests 33 16 Old New
  • 30.
  • 31. CSS
  • 32. CSS 115K 77K Old New
  • 34. Replacing Images border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; background-image: linear-gradient(top, #ffffff 0%, #cccccc 100%);
  • 35. Vendor Prefixes -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -o-border-bottom-left-radius: 4px; -ms-border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -o-border-bottom-right-radius: 4px; -ms-border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #ffffff), color- stop(100%, #cccccc)); background-image: -moz-linear-gradient(top, #ffffff 0%, #cccccc 100%); background-image: linear-gradient(top, #ffffff 0%, #cccccc 100%);
  • 37. DRY: Mixins @mixin inverse-text { #footer { background-color: black; background-color: black; color: white; color: white; } ... } #footer { @include inverse-text; #header { ... background-color: black; } color: white; ... #header { } @include inverse-text; ... } SASS CSS
  • 38. DRY: Extends .inverse-text { #footer, #header { background-color: black; background-color: black; color: white; color: white; } } #footer { #header { @extends .inverse-text; ... ... } } #footer { #header { ... @include .inverse-text; } ... } SASS CSS
  • 41. @mixin razzledazzle { @include border-radius(4px); @include box-shadow(black, 0, 1px, 5px); @include linear-gradient(…); } #header { @include razzledazzle; … } #footer { @include razzledazzle; … }
  • 42. #header { background-image: -webkit-gradient(…); background-image: -moz-linear-gradient(…); background-image: linear-gradient(…); -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 1px 5px black; -webkit-box-shadow: 0 1px 5px black; -o-box-shadow: 0 1px 5px black; box-shadow: 0 1px 5px black; … } #footer { background-image: -webkit-gradient(…); background-image: -moz-linear-gradient(…); background-image: linear-gradient(…); -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 1px 5px black; -webkit-box-shadow: 0 1px 5px black; -o-box-shadow: 0 1px 5px black; box-shadow: 0 1px 5px black; …
  • 43. .razzledazzle { @include border-radius(4px); @include box-shadow(black, 0, 1px, 5px); @include linear-gradient(…); } #header { @extend .razzledazzle; … } #footer { @extend .razzledazzle; … }
  • 44. #header, #footer { background-image: -webkit-gradient(…); background-image: -moz-linear-gradient(…); background-image: linear-gradient(…); -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 1px 5px black; -webkit-box-shadow: 0 1px 5px black; -o-box-shadow: 0 1px 5px black; box-shadow: 0 1px 5px black; } #header { … } #footer { … }
  • 45. Keep an eye on your CSS. Vendor prefixes and mixins don’t, er… mix.
  • 46. ?
  • 51.

Notes de l'éditeur

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n