SlideShare a Scribd company logo
1 of 15
1
SUPPORTINGSUPPORTING
MIDDLE-OUTMIDDLE-OUT
IN CSSIN CSS
18 APRIL, 201618 APRIL, 2016
LONDON WEB STANDARDSLONDON WEB STANDARDS
BY CHRIS BURNELLBY CHRIS BURNELL
2
Tailor CSS to specific ranges of output devices without changing HTML.
MEDIA QUERIESMEDIA QUERIES
Most common usage is for viewport width:
– max-width
– min-width​​
3
#1. Don’t spell it media query​s.
MEDIA QUERY STRATEGIESMEDIA QUERY STRATEGIES
Used to keep media queries in our control.
Coherent and expectable.
@media (min-width: 600px) { ... }
“When the browser width is at least 600 pixels wide, apply ‘these’ styles.”
Mobile First:
Model your breakpoints around your content (images, figures, tables,
etc.) rather than around specific devices or browsers.
4
MOBILE FIRST EXAMPLE - CSSMOBILE FIRST EXAMPLE - CSS
.column {
width: 100%;
}
.column {
width: 100%;
}
@media (min-width: 500px) {
.column {
width: 50%;
}
}
.column {
width: 100%;
}
@media (min-width: 500px) {
.column {
width: 50%;
}
}
@media (min-width: 800px) {
.column {
width: 25%;
}
}
5
Is there a performance impact from writing poor media queries?
PERFORMANCEPERFORMANCE
Not really.
Compared to a beefy Javascript framework or a couple of images?
Bottom line is file size.
Then why bother writing intelligent media queries?
What benefits are there?
Let’s look at an example:
6
NAVIGATION TOGGLE EXAMPLENAVIGATION TOGGLE EXAMPLE
Small screens Large screens
Toggle Navigation
7
NAVIGATION TOGGLE EXAMPLE - HTMLNAVIGATION TOGGLE EXAMPLE - HTML
<button class="toggle-navigation-button">
<span>Toggle Navigation</span>
</button>
<nav>
...
</nav>
8
NAVIGATION TOGGLE EXAMPLE - CSSNAVIGATION TOGGLE EXAMPLE - CSS
.toggle-navigation-button {
display: inline-block;
}
.toggle-navigation-button {
display: inline-block;
background-image: url("hamburger.png");
width: 40px;
height: 40px;
}
.toggle-navigation-button {
display: inline-block;
background-image: url("hamburger.png");
width: 40px;
height: 40px;
}
.toggle-navigation-button span {
display: none;
}
.toggle-navigation-button {
display: inline-block;
background-image: url("hamburger.png");
width: 40px;
height: 40px;
}
.toggle-navigation-button span {
display: none;
}
@media (min-width: 800px) {
}
.toggle-navigation-button {
display: inline-block;
background-image: url("hamburger.png");
width: 40px;
height: 40px;
}
.toggle-navigation-button span {
display: none;
}
@media (min-width: 800px) {
.toggle-navigation-button {
background-image: none;
width: auto;
height: auto;
}
}
.toggle-navigation-button {
display: inline-block;
background-image: url("hamburger.png");
width: 40px;
height: 40px;
}
.toggle-navigation-button span {
display: none;
}
@media (min-width: 800px) {
.toggle-navigation-button {
background-image: none;
width: auto;
height: auto;
}
.toggle-navigation-button span {
display: inline;
}
}
9
Resetting and unsetting of styles
PROBLEMS WITH THIS CSSPROBLEMS WITH THIS CSS
Reading through the CSS paints a muddy picture of what’s being
described.
– resetting the display property of the span element
– unsetting the background-image property of the button element
– resetting the width and height properties of the button element
Let’s try to clean it up and make it more succinct.
10
NAVIGATION TOGGLE EXAMPLE - CSS IMPROVED?NAVIGATION TOGGLE EXAMPLE - CSS IMPROVED?
.toggle-navigation-button {
display: inline-block;
}
.toggle-navigation-button {
display: inline-block;
}
@media (min-width: 800px) {
}
.toggle-navigation-button {
display: inline-block;
}
@media (min-width: 800px) {
.toggle-navigation-button {
border: 2px solid black;
}
}
.toggle-navigation-button {
display: inline-block;
}
@media (min-width: 800px) {
.toggle-navigation-button {
border: 2px solid black;
}
}
@media (max-width: 799px) {
}
.toggle-navigation-button {
display: inline-block;
}
@media (min-width: 800px) {
.toggle-navigation-button {
border: 2px solid black;
}
}
@media (max-width: 799px) {
.toggle-navigation-button span {
display: none;
}
}
.toggle-navigation-button {
display: inline-block;
}
@media (min-width: 800px) {
.toggle-navigation-button {
border: 2px solid black;
}
}
@media (max-width: 799px) {
.toggle-navigation-button span {
display: none;
}
.toggle-navigation-button {
background-image: url("hamburger.png");
width: 40px;
height: 40px;
}
}
11
When the end-result of our CSS is the same as far as the end-user is
concerned, we benefit.
SO WHO BENEFITS?SO WHO BENEFITS?
Consider describing the two approaches to the same CSS styles out
loud, as you might scan it in your head.
12
NAVIGATION TOGGLE EXAMPLE - CSSNAVIGATION TOGGLE EXAMPLE - CSS
.toggle-navigation-button {
display: inline-block;
background-image: url("hamburger.png");
width: 40px;
height: 40px;
}
.toggle-navigation-button span {
display: none;
}
@media (min-width: 800px) {
.toggle-navigation-button {
background-image: none;
width: auto;
height: auto;
}
.toggle-navigation-button span {
display: inline;
}
}
13
NAVIGATION TOGGLE EXAMPLE - CSS IMPROVED?NAVIGATION TOGGLE EXAMPLE - CSS IMPROVED?
.toggle-navigation-button {
display: inline-block;
}
@media (min-width: 800px) {
.toggle-navigation-button {
border: 2px solid black;
}
}
@media (max-width: 799px) {
.toggle-navigation-button span {
display: none;
}
.toggle-navigation-button {
background-image: url("hamburger.png");
width: 40px;
height: 40px;
}
}
14
TAKEAWAYSTAKEAWAYS
Use a strategy to keep your media queries under control
and consistent.
Writing coherent and understandable CSS:
– makes for a stronger codebase
– helps your teams
– helps newcomers
– helps you
Avoid resetting or unsetting styles.
15
THANKS!THANKS!
CHRIS BURNELLCHRIS BURNELL
@iamchrisburnell
chrisburnell.com

More Related Content

Viewers also liked

Phototheque Keepeek One
Phototheque Keepeek OnePhototheque Keepeek One
Phototheque Keepeek Onekeepeek
 
Summary of Usability Findings
Summary of Usability FindingsSummary of Usability Findings
Summary of Usability FindingsCindy Tong
 
Tugas control & audit sistem informasi
Tugas control & audit sistem informasiTugas control & audit sistem informasi
Tugas control & audit sistem informasiNur Fatrianti
 
Software architecture with SOA modeling Flavor
Software architecture with SOA modeling FlavorSoftware architecture with SOA modeling Flavor
Software architecture with SOA modeling FlavorMohamed Zakarya Abdelgawad
 
Ερωτόκριτος, Διάλογος Ηράκλη - Πεζόστρατου: Σχέδιο μαθήματος-Φύλλο εργασίας
Ερωτόκριτος, Διάλογος Ηράκλη - Πεζόστρατου: Σχέδιο μαθήματος-Φύλλο εργασίαςΕρωτόκριτος, Διάλογος Ηράκλη - Πεζόστρατου: Σχέδιο μαθήματος-Φύλλο εργασίας
Ερωτόκριτος, Διάλογος Ηράκλη - Πεζόστρατου: Σχέδιο μαθήματος-Φύλλο εργασίαςvserdaki
 
gulfam shaikh portfolio
gulfam shaikh portfoliogulfam shaikh portfolio
gulfam shaikh portfolioGulfam shaikh
 

Viewers also liked (9)

Phototheque Keepeek One
Phototheque Keepeek OnePhototheque Keepeek One
Phototheque Keepeek One
 
doc
docdoc
doc
 
Open Data in der Schweiz
Open Data in der SchweizOpen Data in der Schweiz
Open Data in der Schweiz
 
Summary of Usability Findings
Summary of Usability FindingsSummary of Usability Findings
Summary of Usability Findings
 
Tugas control & audit sistem informasi
Tugas control & audit sistem informasiTugas control & audit sistem informasi
Tugas control & audit sistem informasi
 
Software architecture with SOA modeling Flavor
Software architecture with SOA modeling FlavorSoftware architecture with SOA modeling Flavor
Software architecture with SOA modeling Flavor
 
Bachelorverteidigung
BachelorverteidigungBachelorverteidigung
Bachelorverteidigung
 
Ερωτόκριτος, Διάλογος Ηράκλη - Πεζόστρατου: Σχέδιο μαθήματος-Φύλλο εργασίας
Ερωτόκριτος, Διάλογος Ηράκλη - Πεζόστρατου: Σχέδιο μαθήματος-Φύλλο εργασίαςΕρωτόκριτος, Διάλογος Ηράκλη - Πεζόστρατου: Σχέδιο μαθήματος-Φύλλο εργασίας
Ερωτόκριτος, Διάλογος Ηράκλη - Πεζόστρατου: Σχέδιο μαθήματος-Φύλλο εργασίας
 
gulfam shaikh portfolio
gulfam shaikh portfoliogulfam shaikh portfolio
gulfam shaikh portfolio
 

Similar to Supporting Middle-Out in CSS

Responsive Websites
Responsive WebsitesResponsive Websites
Responsive WebsitesJoe Seifi
 
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktopThe specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktopbetabeers
 
Build 2017 - B8100 - What's new and coming for Windows UI: XAML and composition
Build 2017 - B8100 - What's new and coming for Windows UI: XAML and compositionBuild 2017 - B8100 - What's new and coming for Windows UI: XAML and composition
Build 2017 - B8100 - What's new and coming for Windows UI: XAML and compositionWindows Developer
 
Responsive Web Design for Universal Access
Responsive Web Design for Universal AccessResponsive Web Design for Universal Access
Responsive Web Design for Universal AccessKate Walser
 
What's new in Responsive Design - Rachel Andrew
What's new in Responsive Design - Rachel AndrewWhat's new in Responsive Design - Rachel Andrew
What's new in Responsive Design - Rachel AndrewWey Wey Web
 
Adaptive theming using compass susy grid
Adaptive theming using compass susy gridAdaptive theming using compass susy grid
Adaptive theming using compass susy gridsoovor
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web DesignShawn Calvert
 
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)Ontico
 
"Conditionally adaptive" Vadim Makeev
"Conditionally adaptive" Vadim Makeev"Conditionally adaptive" Vadim Makeev
"Conditionally adaptive" Vadim MakeevFwdays
 
Concept of CSS part 2
Concept of CSS part 2Concept of CSS part 2
Concept of CSS part 2SURBHI SAROHA
 
Going Responsive with WordPress
Going Responsive with WordPressGoing Responsive with WordPress
Going Responsive with WordPressJames Cryer
 
Sweet and Sassy Responsive Design
Sweet and Sassy Responsive DesignSweet and Sassy Responsive Design
Sweet and Sassy Responsive DesignMina Markham
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignJustin Avery
 
Responsive Web Design for Universal Access: 2019
Responsive Web Design for Universal Access: 2019Responsive Web Design for Universal Access: 2019
Responsive Web Design for Universal Access: 2019Kate Walser
 
Dynamic User Interfaces for Desktop and Mobile
Dynamic User Interfaces for Desktop and MobileDynamic User Interfaces for Desktop and Mobile
Dynamic User Interfaces for Desktop and Mobilepeychevi
 

Similar to Supporting Middle-Out in CSS (20)

Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
 
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktopThe specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
 
Build 2017 - B8100 - What's new and coming for Windows UI: XAML and composition
Build 2017 - B8100 - What's new and coming for Windows UI: XAML and compositionBuild 2017 - B8100 - What's new and coming for Windows UI: XAML and composition
Build 2017 - B8100 - What's new and coming for Windows UI: XAML and composition
 
Responsive Web Design for Universal Access
Responsive Web Design for Universal AccessResponsive Web Design for Universal Access
Responsive Web Design for Universal Access
 
What's new in Responsive Design - Rachel Andrew
What's new in Responsive Design - Rachel AndrewWhat's new in Responsive Design - Rachel Andrew
What's new in Responsive Design - Rachel Andrew
 
Css 3 session1
Css 3 session1Css 3 session1
Css 3 session1
 
Css3
Css3Css3
Css3
 
Adaptive theming using compass susy grid
Adaptive theming using compass susy gridAdaptive theming using compass susy grid
Adaptive theming using compass susy grid
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
 
"Conditionally adaptive" Vadim Makeev
"Conditionally adaptive" Vadim Makeev"Conditionally adaptive" Vadim Makeev
"Conditionally adaptive" Vadim Makeev
 
Concept of CSS part 2
Concept of CSS part 2Concept of CSS part 2
Concept of CSS part 2
 
Landing Pages 101
Landing Pages 101Landing Pages 101
Landing Pages 101
 
Going Responsive with WordPress
Going Responsive with WordPressGoing Responsive with WordPress
Going Responsive with WordPress
 
Sweet and Sassy Responsive Design
Sweet and Sassy Responsive DesignSweet and Sassy Responsive Design
Sweet and Sassy Responsive Design
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Responsive Web Design for Universal Access: 2019
Responsive Web Design for Universal Access: 2019Responsive Web Design for Universal Access: 2019
Responsive Web Design for Universal Access: 2019
 
Dynamic User Interfaces for Desktop and Mobile
Dynamic User Interfaces for Desktop and MobileDynamic User Interfaces for Desktop and Mobile
Dynamic User Interfaces for Desktop and Mobile
 

Recently uploaded

Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsRoxana Stingu
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSedrianrheine
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024Jan Löffler
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteMavein
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...APNIC
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfmchristianalwyn
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Shubham Pant
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpressssuser166378
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSlesteraporado16
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilitiesalihassaah1994
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxnaveenithkrishnan
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdfShreedeep Rayamajhi
 

Recently uploaded (12)

Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a Website
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpress
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilities
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptx
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
 

Supporting Middle-Out in CSS

  • 1. 1 SUPPORTINGSUPPORTING MIDDLE-OUTMIDDLE-OUT IN CSSIN CSS 18 APRIL, 201618 APRIL, 2016 LONDON WEB STANDARDSLONDON WEB STANDARDS BY CHRIS BURNELLBY CHRIS BURNELL
  • 2. 2 Tailor CSS to specific ranges of output devices without changing HTML. MEDIA QUERIESMEDIA QUERIES Most common usage is for viewport width: – max-width – min-width​​
  • 3. 3 #1. Don’t spell it media query​s. MEDIA QUERY STRATEGIESMEDIA QUERY STRATEGIES Used to keep media queries in our control. Coherent and expectable. @media (min-width: 600px) { ... } “When the browser width is at least 600 pixels wide, apply ‘these’ styles.” Mobile First: Model your breakpoints around your content (images, figures, tables, etc.) rather than around specific devices or browsers.
  • 4. 4 MOBILE FIRST EXAMPLE - CSSMOBILE FIRST EXAMPLE - CSS .column { width: 100%; } .column { width: 100%; } @media (min-width: 500px) { .column { width: 50%; } } .column { width: 100%; } @media (min-width: 500px) { .column { width: 50%; } } @media (min-width: 800px) { .column { width: 25%; } }
  • 5. 5 Is there a performance impact from writing poor media queries? PERFORMANCEPERFORMANCE Not really. Compared to a beefy Javascript framework or a couple of images? Bottom line is file size. Then why bother writing intelligent media queries? What benefits are there? Let’s look at an example:
  • 6. 6 NAVIGATION TOGGLE EXAMPLENAVIGATION TOGGLE EXAMPLE Small screens Large screens Toggle Navigation
  • 7. 7 NAVIGATION TOGGLE EXAMPLE - HTMLNAVIGATION TOGGLE EXAMPLE - HTML <button class="toggle-navigation-button"> <span>Toggle Navigation</span> </button> <nav> ... </nav>
  • 8. 8 NAVIGATION TOGGLE EXAMPLE - CSSNAVIGATION TOGGLE EXAMPLE - CSS .toggle-navigation-button { display: inline-block; } .toggle-navigation-button { display: inline-block; background-image: url("hamburger.png"); width: 40px; height: 40px; } .toggle-navigation-button { display: inline-block; background-image: url("hamburger.png"); width: 40px; height: 40px; } .toggle-navigation-button span { display: none; } .toggle-navigation-button { display: inline-block; background-image: url("hamburger.png"); width: 40px; height: 40px; } .toggle-navigation-button span { display: none; } @media (min-width: 800px) { } .toggle-navigation-button { display: inline-block; background-image: url("hamburger.png"); width: 40px; height: 40px; } .toggle-navigation-button span { display: none; } @media (min-width: 800px) { .toggle-navigation-button { background-image: none; width: auto; height: auto; } } .toggle-navigation-button { display: inline-block; background-image: url("hamburger.png"); width: 40px; height: 40px; } .toggle-navigation-button span { display: none; } @media (min-width: 800px) { .toggle-navigation-button { background-image: none; width: auto; height: auto; } .toggle-navigation-button span { display: inline; } }
  • 9. 9 Resetting and unsetting of styles PROBLEMS WITH THIS CSSPROBLEMS WITH THIS CSS Reading through the CSS paints a muddy picture of what’s being described. – resetting the display property of the span element – unsetting the background-image property of the button element – resetting the width and height properties of the button element Let’s try to clean it up and make it more succinct.
  • 10. 10 NAVIGATION TOGGLE EXAMPLE - CSS IMPROVED?NAVIGATION TOGGLE EXAMPLE - CSS IMPROVED? .toggle-navigation-button { display: inline-block; } .toggle-navigation-button { display: inline-block; } @media (min-width: 800px) { } .toggle-navigation-button { display: inline-block; } @media (min-width: 800px) { .toggle-navigation-button { border: 2px solid black; } } .toggle-navigation-button { display: inline-block; } @media (min-width: 800px) { .toggle-navigation-button { border: 2px solid black; } } @media (max-width: 799px) { } .toggle-navigation-button { display: inline-block; } @media (min-width: 800px) { .toggle-navigation-button { border: 2px solid black; } } @media (max-width: 799px) { .toggle-navigation-button span { display: none; } } .toggle-navigation-button { display: inline-block; } @media (min-width: 800px) { .toggle-navigation-button { border: 2px solid black; } } @media (max-width: 799px) { .toggle-navigation-button span { display: none; } .toggle-navigation-button { background-image: url("hamburger.png"); width: 40px; height: 40px; } }
  • 11. 11 When the end-result of our CSS is the same as far as the end-user is concerned, we benefit. SO WHO BENEFITS?SO WHO BENEFITS? Consider describing the two approaches to the same CSS styles out loud, as you might scan it in your head.
  • 12. 12 NAVIGATION TOGGLE EXAMPLE - CSSNAVIGATION TOGGLE EXAMPLE - CSS .toggle-navigation-button { display: inline-block; background-image: url("hamburger.png"); width: 40px; height: 40px; } .toggle-navigation-button span { display: none; } @media (min-width: 800px) { .toggle-navigation-button { background-image: none; width: auto; height: auto; } .toggle-navigation-button span { display: inline; } }
  • 13. 13 NAVIGATION TOGGLE EXAMPLE - CSS IMPROVED?NAVIGATION TOGGLE EXAMPLE - CSS IMPROVED? .toggle-navigation-button { display: inline-block; } @media (min-width: 800px) { .toggle-navigation-button { border: 2px solid black; } } @media (max-width: 799px) { .toggle-navigation-button span { display: none; } .toggle-navigation-button { background-image: url("hamburger.png"); width: 40px; height: 40px; } }
  • 14. 14 TAKEAWAYSTAKEAWAYS Use a strategy to keep your media queries under control and consistent. Writing coherent and understandable CSS: – makes for a stronger codebase – helps your teams – helps newcomers – helps you Avoid resetting or unsetting styles.