SlideShare a Scribd company logo
CSS3
MEDIA QUERIES
Why should
you care about
media queries?
Media queries are one of the
most exciting aspects about
        CSS today.
Media queries will allow us to
  change our layouts to suit the
exact need of different devices
 - without changing the content.
For example, we will be able to
move away from “one-size-fits-
 all” solutions such as liquid,
elastic and fixed width layouts.
Let’s take a standard
3 column 1000px wide layout…
Imagine if it could become a
2 column 800px wide if the user
    has a narrower browser
           window…
…or a single column 400px
 wide layout if the user has a
mobile device or a very narrow
      browser window…
And all done with CSS alone - no
          JavaScript…
This is just one quick example
  of how media queries can
    help us deliver CSS in
   new and exciting ways
But… before we talk about
media queries, we need to do a
quick overview of media types.
So, what are
media types?
CSS can be used to specify
how a document is presented
    in different media.
There are ten media types
    defined in CSS 2.1
all   suitable for all devices
     aural    for speech synthesizers
    braille   for Braille tactile feedback devices
embossed      for paged Braille printers
 handheld     for handheld devices
     print    for print material
projection    for projected presentations
   screen     for color computer screens
        tty   for teletypes and terminals
         tv   for television type devices
There are five methods that can
   be used to specify media
        for style sheets.
Method 1:
<link> within HTML
You can use a <link> element in
the head of your HTML document
 to specify the target media of an
       external style sheet.


  <link rel="stylesheet"
  href="a.css" type="text/css"
  media=”screen" />
Method 2:
<?xml stylesheet>
   within XML
You can use <?xml-stylesheet ?>
in the head of your XML document
  to specify the target media of an
        external style sheet.


  <?xml-stylesheet
  media="screen" rel="stylesheet"
  href="example.css" ?>
Method 3:
@import within
   HTML
You can use @import in the head
if your HTML document to specify
   the target media of an external
             style sheet.


  <style type="text/css"
  media="screen">
  @import "a.css";</style>
Warning:
              @import should be avoided as it
                can cause issues in some
               versions of Internet Explorer.




http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
Method 4:
@import within CSS
You can specify the target medium
 within a CSS file using @import




  @import url("a.css") screen;
Media-types within @import
rules are not supported by IE5,
IE6 or IE7. The rule is ignored.
Method 5:
@media within CSS
You can specify the target medium
 within a CSS file using @media




  @media screen
  {
      body { color: blue; }
  }
Why should we care
 about these five
    methods?
Because you can use these five
methods to define not only media
   types, but media queries
Let’s talk
media queries
Media queries are a CSS3
extension to media types that gives
 us more control over rendering
     across different devices.


   <link rel="stylesheet"
   type="text/css" href="a.css"
   media="screen and (color)">
A media query is a logical
 expression that is either
      true or false.
The CSS associated with the
media query expression is only
  applied to the device if the
     expression is true.
Media query
  syntax
A media query generally consists of
  a media type and zero or more
          expressions.


<link rel="stylesheet"
type="text/css" href="a.css"
media=”screen and (color)">

      Media type   Expression
An expression consists of zero or
   more keywords and a media
             feature.


<link rel="stylesheet"
type="text/css" href="a.css"
media=”screen and (color)">

          Keyword   Media feature
Media features are placed within
            brackets.



<link rel="stylesheet"
type="text/css" href="a.css"
media=”screen and (color)">

                 Media feature
A media feature can be used
  without a media type or keyword.
The media type is assumed to be “all”.


<link rel="stylesheet"
type="text/css" href="a.css"
media=”(color)">

      Media feature
Most media features accept
“min-” or “max-” prefixes.



<link rel="stylesheet"
type="text/css" href="a.css"
media="screen and
(min-height: 20em)">
Media features can often be used
        without a value.


  <link rel="stylesheet"
  type="text/css" href="a.css"
  media="screen and (color)">
Media features only accept single
values: one keyword, one number,
 or a number with a unit identifier.

     Except aspect-ratio and device-aspect-ration which require two numbers




   (orientation: portrait)
   (min-width: 20em)
   (min-color: 2)
   (device-aspect-ratio: 16/9)
The full media
 feature list
Feature               Value                             min/max
aspect-ratio          ratio (integer/integer)           yes
color                 integer                           yes
color-index           integer                           yes
device-aspect-ratio   ratio (integer/integer)           yes
device-height         length                            yes
device-width          length                            yes
grid                  integer                           no
height                length                            yes
monochrome            integer                           yes
orientation           keyword (portrait/landscape)      no
resolution            resolution (dpi)                  yes
scan                  keyword (progressive/interlace)   no
width                 length                            yes
A simple example
The CSS file in this example
    should be applied to screen
    devices that are capable of
        representing color.

<link rel="stylesheet"
type="text/css" href="a.css"
media="screen and (color)">
This same media enquiry could be
  used with @import via HTML.




<style type="text/css"
media="screen and (color) ">
@import "a.css";</style>
It could be used with
        @import via CSS.




@import url("a.css")
screen and (color);
Or using @media via CSS.




@media screen and (color)
{
    body { color: blue; }
}
Multiple expressions
You can use multiple
expressions in a media query if
  you join them with the “and”
            keyword.
The CSS file in this example will be
 applied by hand-held devices, but
   only if the viewport width is at
        > 20em and < 40em.

<link rel="stylesheet"
type="text/css" href="a.css"
media="handheld and (min-width:20em)
and (max-width:40em)">
Comma separated
You can also use multiple,
comma-separated media queries.
  The comma acts like an “or”
           keyword.
The CSS file in this example will be
   applied to screen with color or
   handheld devices with color.


<link rel="stylesheet"
type="text/css" href="a.css"
media="screen and (color),
handheld and (color)">
Using the “not”
   keyword
You can use the not keyword in a
media query if you want your CSS
to be ignored by a specific device.
The CSS file in this example will be
 applied to all devices except those
         with color screens.


<link rel="stylesheet"
type="text/css" href="a.css"
media="not screen and (color)">
Using the “only”
  expression
The CSS file in this example will be
   applied only to all devices with
           color screens.


<link rel="stylesheet"
type="text/css" href="a.css"
media="only screen and (color)">
Support for
media queries
Browser support for media queries:

    IE8                            no
    Firefox 3.6                    yes
    Safari 4                       yes
    Opera 10                       yes
    Chrome 5                       yes

   * Based on basic testing only
What do other
browsers see?
Browsers that do not support
     media queries should still
     support the media type.


<link rel="stylesheet"
type="text/css" href="a.css"
media="screen and (color)">
The “only” keyword is sometimes
   used to hide CSS from devices
 that do not support media queries,
    but may read the media type.

<link rel="stylesheet"
type="text/css" href="a.css"
media="only screen and (color)">
Targeting the
   iPhone
The iPhone does not support
   handheld media type. Apple
recommends targeting the iPhone
     using media queries.
This rule will be applied by the
   iPhone which has a maximum
   device width (screen width) of
                480px.

<link rel="stylesheet"
type="text/css" href="a.css"
media="only screen and
(max-device-width: 480px)" >
Using media
  queries to
control layouts
So, how could we use media
 queries to change a page layout
so that it can appear wide, medium
 or narrow depending on the width
            of the screen?
Here is a quick step
 by step example
Step 1:
    Add a link to your style sheet




<link rel="stylesheet"
type="text/css" href=”master.css"
media="screen" >
Step 2:
Add your “wide page layout” CSS
    rules into your CSS file
Step 3:
  Add a @media rule with a media
             query


@media screen and (max-width:999px)
{
    /* add your rules here */
}
Step 4:
 Add your “medium page layout”
CSS rules inside this @media rule.
Step 5:
 Add a second @media rule with a
          media query

@media screen and (max-width:480px)
{
    /* add your rules here */
}
Step 6:
 Add your “narrow page layout”
CSS rules inside this new @media
               rule.
Your CSS file should be structured
      something like this:

  Wide page layout CSS rules

@media screen and (max-width:999px)
{
   Medium page layout CSS rules
}

@media screen and (max-width:480px)
{
   Narrow page layout CSS rules
}
A note on the CSS
Devices wider than 1000px will see
the “wide page layout” CSS only.
Devices narrower than 1000px will
see the “wide page layout” CSS
 AND the “medium page layout”
             CSS.
Devices narrower than 480px will
  see the “wide page layout”,
  “medium page layout” and
  “narrow page layout” CSS.
What does this
   mean?
This means that rules written inside
  each @media statements must
   override the previous rules.
A quick
 recap
I believe that as media queries
become supported, we will see a
 radical change in the way we
develop websites in the future.
Now is a good time to get
  your head around these
powerful CSS3 expressions
so that you are ready when
     the time comes!
We’re done

More Related Content

What's hot

Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
Chris Poteet
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
Rachel Andrew
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
Eliran Eliassy
 
CSS3 Media Queries And Creating Adaptive Layouts
CSS3 Media Queries And Creating Adaptive LayoutsCSS3 Media Queries And Creating Adaptive Layouts
CSS3 Media Queries And Creating Adaptive Layouts
Svitlana Ivanytska
 
Css
CssCss
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheet
Michael Jhon
 
Css Ppt
Css PptCss Ppt
Css Ppt
Hema Prasanth
 
Css ppt
Css pptCss ppt
Css ppt
Nidhi mishra
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
WordPress Memphis
 
Javascript
JavascriptJavascript
Javascript
mussawir20
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
David Lindkvist
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
Amit Tyagi
 
Javascript
JavascriptJavascript
Javascript
Sun Technlogies
 
computer language - Html frames
computer language - Html framescomputer language - Html frames
computer language - Html frames
Dr. I. Uma Maheswari Maheswari
 
Css selectors
Css selectorsCss selectors
Css selectors
Parth Trivedi
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginners
Singsys Pte Ltd
 
CSS
CSSCSS
Dom
DomDom
CSS Font & Text style
CSS Font & Text style CSS Font & Text style
CSS Font & Text style
Yaowaluck Promdee
 

What's hot (20)

Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
Css
CssCss
Css
 
CSS3 Media Queries And Creating Adaptive Layouts
CSS3 Media Queries And Creating Adaptive LayoutsCSS3 Media Queries And Creating Adaptive Layouts
CSS3 Media Queries And Creating Adaptive Layouts
 
Css
CssCss
Css
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheet
 
Css Ppt
Css PptCss Ppt
Css Ppt
 
Css ppt
Css pptCss ppt
Css ppt
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
Javascript
JavascriptJavascript
Javascript
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
 
Javascript
JavascriptJavascript
Javascript
 
computer language - Html frames
computer language - Html framescomputer language - Html frames
computer language - Html frames
 
Css selectors
Css selectorsCss selectors
Css selectors
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginners
 
CSS
CSSCSS
CSS
 
Dom
DomDom
Dom
 
CSS Font & Text style
CSS Font & Text style CSS Font & Text style
CSS Font & Text style
 

Viewers also liked

Media queries and frameworks
Media queries and frameworksMedia queries and frameworks
Media queries and frameworks
Nicole Ryan
 
Beyond Media Queries: Anatomy of an Adaptive Web Design
Beyond Media Queries: Anatomy of an Adaptive Web DesignBeyond Media Queries: Anatomy of an Adaptive Web Design
Beyond Media Queries: Anatomy of an Adaptive Web Design
Brad Frost
 
AngularJS best practices
AngularJS best practicesAngularJS best practices
AngularJS best practices
Filip Bruun Bech-Larsen
 
The Art of AngularJS in 2015
The Art of AngularJS in 2015The Art of AngularJS in 2015
The Art of AngularJS in 2015
Matt Raible
 
AngularJS best-practices
AngularJS best-practicesAngularJS best-practices
AngularJS best-practices
Henry Tao
 
AngularJS Best Practices
AngularJS Best PracticesAngularJS Best Practices
AngularJS Best Practices
Betclic Everest Group Tech Team
 
New Features in Angular 1.5
New Features in Angular 1.5New Features in Angular 1.5
New Features in Angular 1.5
Kenichi Kanai
 
CSS Best practice
CSS Best practiceCSS Best practice
CSS Best practice
Russ Weakley
 
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best PracticesMobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Litmus
 
Css best practices style guide and tips
Css best practices style guide and tipsCss best practices style guide and tips
Css best practices style guide and tips
Chris Love
 
AngularJS Best Practices
AngularJS Best PracticesAngularJS Best Practices
AngularJS Best Practices
Narek Mamikonyan
 

Viewers also liked (11)

Media queries and frameworks
Media queries and frameworksMedia queries and frameworks
Media queries and frameworks
 
Beyond Media Queries: Anatomy of an Adaptive Web Design
Beyond Media Queries: Anatomy of an Adaptive Web DesignBeyond Media Queries: Anatomy of an Adaptive Web Design
Beyond Media Queries: Anatomy of an Adaptive Web Design
 
AngularJS best practices
AngularJS best practicesAngularJS best practices
AngularJS best practices
 
The Art of AngularJS in 2015
The Art of AngularJS in 2015The Art of AngularJS in 2015
The Art of AngularJS in 2015
 
AngularJS best-practices
AngularJS best-practicesAngularJS best-practices
AngularJS best-practices
 
AngularJS Best Practices
AngularJS Best PracticesAngularJS Best Practices
AngularJS Best Practices
 
New Features in Angular 1.5
New Features in Angular 1.5New Features in Angular 1.5
New Features in Angular 1.5
 
CSS Best practice
CSS Best practiceCSS Best practice
CSS Best practice
 
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best PracticesMobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
 
Css best practices style guide and tips
Css best practices style guide and tipsCss best practices style guide and tips
Css best practices style guide and tips
 
AngularJS Best Practices
AngularJS Best PracticesAngularJS Best Practices
AngularJS Best Practices
 

Similar to CSS3 Media Queries

CSS media types
CSS media typesCSS media types
CSS media types
Russ Weakley
 
Mediaqueries
MediaqueriesMediaqueries
Mediaqueries
Brillio
 
Web Programming
Web ProgrammingWeb Programming
Web Programming
NilaNila16
 
Print CSS
Print CSSPrint CSS
Print CSS
Russ Weakley
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
Shawn Calvert
 
HTML5, CSS3 & Responsive Design
HTML5, CSS3 & Responsive DesignHTML5, CSS3 & Responsive Design
HTML5, CSS3 & Responsive Design
Fawzia Essa
 
Meta layout: a closer look at media queries
Meta layout: a closer look at media queriesMeta layout: a closer look at media queries
Meta layout: a closer look at media queries
Stephen Hay
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Jason Harwig
 
Lect-4-Responsive-Web-06032024-082044am.pptx
Lect-4-Responsive-Web-06032024-082044am.pptxLect-4-Responsive-Web-06032024-082044am.pptx
Lect-4-Responsive-Web-06032024-082044am.pptx
zainm7032
 
Team styles
Team stylesTeam styles
Team styles
nathanscott
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Tung Dang
 
New Css style
New Css styleNew Css style
New Css style
BUDNET
 
Organize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksOrganize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS Tricks
Andolasoft Inc
 
Web Accessibility for the 21st Century
Web Accessibility for the 21st CenturyWeb Accessibility for the 21st Century
Web Accessibility for the 21st Century
dreamwidth
 
Pfnp slides
Pfnp slidesPfnp slides
Pfnp slides
William Myers
 
Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011
Patrick Lauke
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
McSoftsis
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1
Heather Rock
 
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Christian Rokitta
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
danpastori
 

Similar to CSS3 Media Queries (20)

CSS media types
CSS media typesCSS media types
CSS media types
 
Mediaqueries
MediaqueriesMediaqueries
Mediaqueries
 
Web Programming
Web ProgrammingWeb Programming
Web Programming
 
Print CSS
Print CSSPrint CSS
Print CSS
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
 
HTML5, CSS3 & Responsive Design
HTML5, CSS3 & Responsive DesignHTML5, CSS3 & Responsive Design
HTML5, CSS3 & Responsive Design
 
Meta layout: a closer look at media queries
Meta layout: a closer look at media queriesMeta layout: a closer look at media queries
Meta layout: a closer look at media queries
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Lect-4-Responsive-Web-06032024-082044am.pptx
Lect-4-Responsive-Web-06032024-082044am.pptxLect-4-Responsive-Web-06032024-082044am.pptx
Lect-4-Responsive-Web-06032024-082044am.pptx
 
Team styles
Team stylesTeam styles
Team styles
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
New Css style
New Css styleNew Css style
New Css style
 
Organize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksOrganize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS Tricks
 
Web Accessibility for the 21st Century
Web Accessibility for the 21st CenturyWeb Accessibility for the 21st Century
Web Accessibility for the 21st Century
 
Pfnp slides
Pfnp slidesPfnp slides
Pfnp slides
 
Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1
 
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 

More from Russ Weakley

Accessible chat windows
Accessible chat windowsAccessible chat windows
Accessible chat windows
Russ Weakley
 
Accessible names & descriptions
Accessible names & descriptionsAccessible names & descriptions
Accessible names & descriptions
Russ Weakley
 
A deep dive into accessible names
A deep dive into accessible namesA deep dive into accessible names
A deep dive into accessible names
Russ Weakley
 
What are accessible names and why should you care?
What are accessible names and why should you care?What are accessible names and why should you care?
What are accessible names and why should you care?
Russ Weakley
 
How to build accessible UI components
How to build accessible UI componentsHow to build accessible UI components
How to build accessible UI components
Russ Weakley
 
What is WCAG 2 and why should we care?
What is WCAG 2 and why should we care?What is WCAG 2 and why should we care?
What is WCAG 2 and why should we care?
Russ Weakley
 
Accessible states in Design Systems
Accessible states in Design SystemsAccessible states in Design Systems
Accessible states in Design Systems
Russ Weakley
 
Creating accessible modals and autocompletes
Creating accessible modals and autocompletesCreating accessible modals and autocompletes
Creating accessible modals and autocompletes
Russ Weakley
 
Building an accessible progressive loader
Building an accessible progressive loaderBuilding an accessible progressive loader
Building an accessible progressive loader
Russ Weakley
 
Accessibility in Design systems - the pain and glory
Accessibility in Design systems - the pain and gloryAccessibility in Design systems - the pain and glory
Accessibility in Design systems - the pain and glory
Russ Weakley
 
Accessible Inline errors messages
Accessible Inline errors messagesAccessible Inline errors messages
Accessible Inline errors messages
Russ Weakley
 
Accessible Form Hints and Errors
Accessible Form Hints and ErrorsAccessible Form Hints and Errors
Accessible Form Hints and Errors
Russ Weakley
 
What is accessibility?
What is accessibility?What is accessibility?
What is accessibility?
Russ Weakley
 
Accessibility in Pattern Libraries
Accessibility in Pattern LibrariesAccessibility in Pattern Libraries
Accessibility in Pattern Libraries
Russ Weakley
 
Accessibility in pattern libraries
Accessibility in pattern librariesAccessibility in pattern libraries
Accessibility in pattern libraries
Russ Weakley
 
Building an accessible auto-complete - #ID24
Building an accessible auto-complete - #ID24Building an accessible auto-complete - #ID24
Building an accessible auto-complete - #ID24
Russ Weakley
 
Building an accessible auto-complete
Building an accessible auto-completeBuilding an accessible auto-complete
Building an accessible auto-complete
Russ Weakley
 
Creating Acessible floating labels
Creating Acessible floating labelsCreating Acessible floating labels
Creating Acessible floating labels
Russ Weakley
 
Creating an Accessible button dropdown
Creating an Accessible button dropdownCreating an Accessible button dropdown
Creating an Accessible button dropdown
Russ Weakley
 
Creating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off SwitchCreating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off Switch
Russ Weakley
 

More from Russ Weakley (20)

Accessible chat windows
Accessible chat windowsAccessible chat windows
Accessible chat windows
 
Accessible names & descriptions
Accessible names & descriptionsAccessible names & descriptions
Accessible names & descriptions
 
A deep dive into accessible names
A deep dive into accessible namesA deep dive into accessible names
A deep dive into accessible names
 
What are accessible names and why should you care?
What are accessible names and why should you care?What are accessible names and why should you care?
What are accessible names and why should you care?
 
How to build accessible UI components
How to build accessible UI componentsHow to build accessible UI components
How to build accessible UI components
 
What is WCAG 2 and why should we care?
What is WCAG 2 and why should we care?What is WCAG 2 and why should we care?
What is WCAG 2 and why should we care?
 
Accessible states in Design Systems
Accessible states in Design SystemsAccessible states in Design Systems
Accessible states in Design Systems
 
Creating accessible modals and autocompletes
Creating accessible modals and autocompletesCreating accessible modals and autocompletes
Creating accessible modals and autocompletes
 
Building an accessible progressive loader
Building an accessible progressive loaderBuilding an accessible progressive loader
Building an accessible progressive loader
 
Accessibility in Design systems - the pain and glory
Accessibility in Design systems - the pain and gloryAccessibility in Design systems - the pain and glory
Accessibility in Design systems - the pain and glory
 
Accessible Inline errors messages
Accessible Inline errors messagesAccessible Inline errors messages
Accessible Inline errors messages
 
Accessible Form Hints and Errors
Accessible Form Hints and ErrorsAccessible Form Hints and Errors
Accessible Form Hints and Errors
 
What is accessibility?
What is accessibility?What is accessibility?
What is accessibility?
 
Accessibility in Pattern Libraries
Accessibility in Pattern LibrariesAccessibility in Pattern Libraries
Accessibility in Pattern Libraries
 
Accessibility in pattern libraries
Accessibility in pattern librariesAccessibility in pattern libraries
Accessibility in pattern libraries
 
Building an accessible auto-complete - #ID24
Building an accessible auto-complete - #ID24Building an accessible auto-complete - #ID24
Building an accessible auto-complete - #ID24
 
Building an accessible auto-complete
Building an accessible auto-completeBuilding an accessible auto-complete
Building an accessible auto-complete
 
Creating Acessible floating labels
Creating Acessible floating labelsCreating Acessible floating labels
Creating Acessible floating labels
 
Creating an Accessible button dropdown
Creating an Accessible button dropdownCreating an Accessible button dropdown
Creating an Accessible button dropdown
 
Creating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off SwitchCreating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off Switch
 

Recently uploaded

How to Fix the Import Error in the Odoo 17
How to Fix the Import Error in the Odoo 17How to Fix the Import Error in the Odoo 17
How to Fix the Import Error in the Odoo 17
Celine George
 
How to Manage Your Lost Opportunities in Odoo 17 CRM
How to Manage Your Lost Opportunities in Odoo 17 CRMHow to Manage Your Lost Opportunities in Odoo 17 CRM
How to Manage Your Lost Opportunities in Odoo 17 CRM
Celine George
 
How to Setup Warehouse & Location in Odoo 17 Inventory
How to Setup Warehouse & Location in Odoo 17 InventoryHow to Setup Warehouse & Location in Odoo 17 Inventory
How to Setup Warehouse & Location in Odoo 17 Inventory
Celine George
 
Film vocab for eal 3 students: Australia the movie
Film vocab for eal 3 students: Australia the movieFilm vocab for eal 3 students: Australia the movie
Film vocab for eal 3 students: Australia the movie
Nicholas Montgomery
 
Life upper-Intermediate B2 Workbook for student
Life upper-Intermediate B2 Workbook for studentLife upper-Intermediate B2 Workbook for student
Life upper-Intermediate B2 Workbook for student
NgcHiNguyn25
 
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...
Dr. Vinod Kumar Kanvaria
 
Liberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdfLiberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdf
WaniBasim
 
Advanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docxAdvanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docx
adhitya5119
 
Cognitive Development Adolescence Psychology
Cognitive Development Adolescence PsychologyCognitive Development Adolescence Psychology
Cognitive Development Adolescence Psychology
paigestewart1632
 
What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...
What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...
What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...
GeorgeMilliken2
 
South African Journal of Science: Writing with integrity workshop (2024)
South African Journal of Science: Writing with integrity workshop (2024)South African Journal of Science: Writing with integrity workshop (2024)
South African Journal of Science: Writing with integrity workshop (2024)
Academy of Science of South Africa
 
MARY JANE WILSON, A “BOA MÃE” .
MARY JANE WILSON, A “BOA MÃE”           .MARY JANE WILSON, A “BOA MÃE”           .
MARY JANE WILSON, A “BOA MÃE” .
Colégio Santa Teresinha
 
Digital Artifact 1 - 10VCD Environments Unit
Digital Artifact 1 - 10VCD Environments UnitDigital Artifact 1 - 10VCD Environments Unit
Digital Artifact 1 - 10VCD Environments Unit
chanes7
 
PIMS Job Advertisement 2024.pdf Islamabad
PIMS Job Advertisement 2024.pdf IslamabadPIMS Job Advertisement 2024.pdf Islamabad
PIMS Job Advertisement 2024.pdf Islamabad
AyyanKhan40
 
DRUGS AND ITS classification slide share
DRUGS AND ITS classification slide shareDRUGS AND ITS classification slide share
DRUGS AND ITS classification slide share
taiba qazi
 
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdfবাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
eBook.com.bd (প্রয়োজনীয় বাংলা বই)
 
Hindi varnamala | hindi alphabet PPT.pdf
Hindi varnamala | hindi alphabet PPT.pdfHindi varnamala | hindi alphabet PPT.pdf
Hindi varnamala | hindi alphabet PPT.pdf
Dr. Mulla Adam Ali
 
The basics of sentences session 6pptx.pptx
The basics of sentences session 6pptx.pptxThe basics of sentences session 6pptx.pptx
The basics of sentences session 6pptx.pptx
heathfieldcps1
 
The History of Stoke Newington Street Names
The History of Stoke Newington Street NamesThe History of Stoke Newington Street Names
The History of Stoke Newington Street Names
History of Stoke Newington
 
Pengantar Penggunaan Flutter - Dart programming language1.pptx
Pengantar Penggunaan Flutter - Dart programming language1.pptxPengantar Penggunaan Flutter - Dart programming language1.pptx
Pengantar Penggunaan Flutter - Dart programming language1.pptx
Fajar Baskoro
 

Recently uploaded (20)

How to Fix the Import Error in the Odoo 17
How to Fix the Import Error in the Odoo 17How to Fix the Import Error in the Odoo 17
How to Fix the Import Error in the Odoo 17
 
How to Manage Your Lost Opportunities in Odoo 17 CRM
How to Manage Your Lost Opportunities in Odoo 17 CRMHow to Manage Your Lost Opportunities in Odoo 17 CRM
How to Manage Your Lost Opportunities in Odoo 17 CRM
 
How to Setup Warehouse & Location in Odoo 17 Inventory
How to Setup Warehouse & Location in Odoo 17 InventoryHow to Setup Warehouse & Location in Odoo 17 Inventory
How to Setup Warehouse & Location in Odoo 17 Inventory
 
Film vocab for eal 3 students: Australia the movie
Film vocab for eal 3 students: Australia the movieFilm vocab for eal 3 students: Australia the movie
Film vocab for eal 3 students: Australia the movie
 
Life upper-Intermediate B2 Workbook for student
Life upper-Intermediate B2 Workbook for studentLife upper-Intermediate B2 Workbook for student
Life upper-Intermediate B2 Workbook for student
 
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...
 
Liberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdfLiberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdf
 
Advanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docxAdvanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docx
 
Cognitive Development Adolescence Psychology
Cognitive Development Adolescence PsychologyCognitive Development Adolescence Psychology
Cognitive Development Adolescence Psychology
 
What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...
What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...
What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...
 
South African Journal of Science: Writing with integrity workshop (2024)
South African Journal of Science: Writing with integrity workshop (2024)South African Journal of Science: Writing with integrity workshop (2024)
South African Journal of Science: Writing with integrity workshop (2024)
 
MARY JANE WILSON, A “BOA MÃE” .
MARY JANE WILSON, A “BOA MÃE”           .MARY JANE WILSON, A “BOA MÃE”           .
MARY JANE WILSON, A “BOA MÃE” .
 
Digital Artifact 1 - 10VCD Environments Unit
Digital Artifact 1 - 10VCD Environments UnitDigital Artifact 1 - 10VCD Environments Unit
Digital Artifact 1 - 10VCD Environments Unit
 
PIMS Job Advertisement 2024.pdf Islamabad
PIMS Job Advertisement 2024.pdf IslamabadPIMS Job Advertisement 2024.pdf Islamabad
PIMS Job Advertisement 2024.pdf Islamabad
 
DRUGS AND ITS classification slide share
DRUGS AND ITS classification slide shareDRUGS AND ITS classification slide share
DRUGS AND ITS classification slide share
 
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdfবাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
 
Hindi varnamala | hindi alphabet PPT.pdf
Hindi varnamala | hindi alphabet PPT.pdfHindi varnamala | hindi alphabet PPT.pdf
Hindi varnamala | hindi alphabet PPT.pdf
 
The basics of sentences session 6pptx.pptx
The basics of sentences session 6pptx.pptxThe basics of sentences session 6pptx.pptx
The basics of sentences session 6pptx.pptx
 
The History of Stoke Newington Street Names
The History of Stoke Newington Street NamesThe History of Stoke Newington Street Names
The History of Stoke Newington Street Names
 
Pengantar Penggunaan Flutter - Dart programming language1.pptx
Pengantar Penggunaan Flutter - Dart programming language1.pptxPengantar Penggunaan Flutter - Dart programming language1.pptx
Pengantar Penggunaan Flutter - Dart programming language1.pptx
 

CSS3 Media Queries

  • 2. Why should you care about media queries?
  • 3. Media queries are one of the most exciting aspects about CSS today.
  • 4. Media queries will allow us to change our layouts to suit the exact need of different devices - without changing the content.
  • 5. For example, we will be able to move away from “one-size-fits- all” solutions such as liquid, elastic and fixed width layouts.
  • 6. Let’s take a standard 3 column 1000px wide layout…
  • 7.
  • 8. Imagine if it could become a 2 column 800px wide if the user has a narrower browser window…
  • 9.
  • 10. …or a single column 400px wide layout if the user has a mobile device or a very narrow browser window…
  • 11.
  • 12. And all done with CSS alone - no JavaScript…
  • 13. This is just one quick example of how media queries can help us deliver CSS in new and exciting ways
  • 14. But… before we talk about media queries, we need to do a quick overview of media types.
  • 16. CSS can be used to specify how a document is presented in different media.
  • 17. There are ten media types defined in CSS 2.1
  • 18. all suitable for all devices aural for speech synthesizers braille for Braille tactile feedback devices embossed for paged Braille printers handheld for handheld devices print for print material projection for projected presentations screen for color computer screens tty for teletypes and terminals tv for television type devices
  • 19. There are five methods that can be used to specify media for style sheets.
  • 21. You can use a <link> element in the head of your HTML document to specify the target media of an external style sheet. <link rel="stylesheet" href="a.css" type="text/css" media=”screen" />
  • 23. You can use <?xml-stylesheet ?> in the head of your XML document to specify the target media of an external style sheet. <?xml-stylesheet media="screen" rel="stylesheet" href="example.css" ?>
  • 25. You can use @import in the head if your HTML document to specify the target media of an external style sheet. <style type="text/css" media="screen"> @import "a.css";</style>
  • 26. Warning: @import should be avoided as it can cause issues in some versions of Internet Explorer. http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
  • 28. You can specify the target medium within a CSS file using @import @import url("a.css") screen;
  • 29. Media-types within @import rules are not supported by IE5, IE6 or IE7. The rule is ignored.
  • 31. You can specify the target medium within a CSS file using @media @media screen { body { color: blue; } }
  • 32. Why should we care about these five methods?
  • 33. Because you can use these five methods to define not only media types, but media queries
  • 35. Media queries are a CSS3 extension to media types that gives us more control over rendering across different devices. <link rel="stylesheet" type="text/css" href="a.css" media="screen and (color)">
  • 36. A media query is a logical expression that is either true or false.
  • 37. The CSS associated with the media query expression is only applied to the device if the expression is true.
  • 38. Media query syntax
  • 39. A media query generally consists of a media type and zero or more expressions. <link rel="stylesheet" type="text/css" href="a.css" media=”screen and (color)"> Media type Expression
  • 40. An expression consists of zero or more keywords and a media feature. <link rel="stylesheet" type="text/css" href="a.css" media=”screen and (color)"> Keyword Media feature
  • 41. Media features are placed within brackets. <link rel="stylesheet" type="text/css" href="a.css" media=”screen and (color)"> Media feature
  • 42. A media feature can be used without a media type or keyword. The media type is assumed to be “all”. <link rel="stylesheet" type="text/css" href="a.css" media=”(color)"> Media feature
  • 43. Most media features accept “min-” or “max-” prefixes. <link rel="stylesheet" type="text/css" href="a.css" media="screen and (min-height: 20em)">
  • 44. Media features can often be used without a value. <link rel="stylesheet" type="text/css" href="a.css" media="screen and (color)">
  • 45. Media features only accept single values: one keyword, one number, or a number with a unit identifier. Except aspect-ratio and device-aspect-ration which require two numbers (orientation: portrait) (min-width: 20em) (min-color: 2) (device-aspect-ratio: 16/9)
  • 46. The full media feature list
  • 47. Feature Value min/max aspect-ratio ratio (integer/integer) yes color integer yes color-index integer yes device-aspect-ratio ratio (integer/integer) yes device-height length yes device-width length yes grid integer no height length yes monochrome integer yes orientation keyword (portrait/landscape) no resolution resolution (dpi) yes scan keyword (progressive/interlace) no width length yes
  • 49. The CSS file in this example should be applied to screen devices that are capable of representing color. <link rel="stylesheet" type="text/css" href="a.css" media="screen and (color)">
  • 50. This same media enquiry could be used with @import via HTML. <style type="text/css" media="screen and (color) "> @import "a.css";</style>
  • 51. It could be used with @import via CSS. @import url("a.css") screen and (color);
  • 52. Or using @media via CSS. @media screen and (color) { body { color: blue; } }
  • 54. You can use multiple expressions in a media query if you join them with the “and” keyword.
  • 55. The CSS file in this example will be applied by hand-held devices, but only if the viewport width is at > 20em and < 40em. <link rel="stylesheet" type="text/css" href="a.css" media="handheld and (min-width:20em) and (max-width:40em)">
  • 57. You can also use multiple, comma-separated media queries. The comma acts like an “or” keyword.
  • 58. The CSS file in this example will be applied to screen with color or handheld devices with color. <link rel="stylesheet" type="text/css" href="a.css" media="screen and (color), handheld and (color)">
  • 60. You can use the not keyword in a media query if you want your CSS to be ignored by a specific device.
  • 61. The CSS file in this example will be applied to all devices except those with color screens. <link rel="stylesheet" type="text/css" href="a.css" media="not screen and (color)">
  • 62. Using the “only” expression
  • 63. The CSS file in this example will be applied only to all devices with color screens. <link rel="stylesheet" type="text/css" href="a.css" media="only screen and (color)">
  • 65. Browser support for media queries: IE8 no Firefox 3.6 yes Safari 4 yes Opera 10 yes Chrome 5 yes * Based on basic testing only
  • 67. Browsers that do not support media queries should still support the media type. <link rel="stylesheet" type="text/css" href="a.css" media="screen and (color)">
  • 68. The “only” keyword is sometimes used to hide CSS from devices that do not support media queries, but may read the media type. <link rel="stylesheet" type="text/css" href="a.css" media="only screen and (color)">
  • 69. Targeting the iPhone
  • 70. The iPhone does not support handheld media type. Apple recommends targeting the iPhone using media queries.
  • 71. This rule will be applied by the iPhone which has a maximum device width (screen width) of 480px. <link rel="stylesheet" type="text/css" href="a.css" media="only screen and (max-device-width: 480px)" >
  • 72. Using media queries to control layouts
  • 73. So, how could we use media queries to change a page layout so that it can appear wide, medium or narrow depending on the width of the screen?
  • 74. Here is a quick step by step example
  • 75. Step 1: Add a link to your style sheet <link rel="stylesheet" type="text/css" href=”master.css" media="screen" >
  • 76. Step 2: Add your “wide page layout” CSS rules into your CSS file
  • 77. Step 3: Add a @media rule with a media query @media screen and (max-width:999px) { /* add your rules here */ }
  • 78. Step 4: Add your “medium page layout” CSS rules inside this @media rule.
  • 79. Step 5: Add a second @media rule with a media query @media screen and (max-width:480px) { /* add your rules here */ }
  • 80. Step 6: Add your “narrow page layout” CSS rules inside this new @media rule.
  • 81. Your CSS file should be structured something like this: Wide page layout CSS rules @media screen and (max-width:999px) { Medium page layout CSS rules } @media screen and (max-width:480px) { Narrow page layout CSS rules }
  • 82. A note on the CSS
  • 83. Devices wider than 1000px will see the “wide page layout” CSS only.
  • 84. Devices narrower than 1000px will see the “wide page layout” CSS AND the “medium page layout” CSS.
  • 85. Devices narrower than 480px will see the “wide page layout”, “medium page layout” and “narrow page layout” CSS.
  • 86. What does this mean?
  • 87. This means that rules written inside each @media statements must override the previous rules.
  • 89. I believe that as media queries become supported, we will see a radical change in the way we develop websites in the future.
  • 90. Now is a good time to get your head around these powerful CSS3 expressions so that you are ready when the time comes!