loading...

CSS Media Queries

ziizium profile image Habdul Hazeez Updated on ・7 min read

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

Internet users access the web from a variety of devices from desktop computers, tablets, mobile phones (high end and smaller phones) to assistive technologies.

Designing a website to accommodate these devices can be a daunting task due to different screen sizes, browser viewport, resolution and device type.

There is a particular CSS feature that can make this task approachable and if done right most of the devices accessing your site(s) will get the appropriate user experience.

Introducing Media queries. Literally speaking the word "media" means the device(s) and "queries" in this context refer to the code that will be used to target these devices.

This post will serve as an introduction and the knowledge acquired therein will serve as a stepping stone that you can build upon and will also be of great help in the Final Project of this series.

The following snippets will be used in this post with slight modifications along the way. Please save the snippets with the .html and .css extension respectively and make sure the CSS file is linked with the HTML. Remember all HTML snippets should be placed between the start and closing body tag in your HTML.

<header>
  <h1>CSS MEDIA QUERIES</h1>
</header>
<main>
  <h1>Hello world</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</main>
/*
 * Nothing sophisticated the codes are just cosmetics
*/

header {
  padding: 1.2em;
  text-align: center;
  background-color: #1560bd;
  color: #ffffff;
}

main {
  background-color: #dddddd;
  padding: 1.2em;
  border: 5px solid #1560bd;
}

p {
  font-size: 1.2em;
  color: black;
}

And kindly note that all screenshots are from Firefox 70 web browser and its Developer Tools.

With that out of the way, Let's start.


Media queries are used to modify your website or web application depending on the device type or characteristics.

They have varying use cases but the most common one you'll find is; Responsive Design. Responsive design is all about altering the layout of your site based on device screen size or orientation.

We'll talk about media types that we can target and also their characteristics better known as media features.

Let's start with media types.

TARGETING MEDIA TYPES

The category of devices that can be targeted with a media query can be categorized into four. Technically speaking these categories are referred to as Media Types . They are:

  • all - This will be applicable to all devices
  • print - This apply to document that will be printed by the user
  • screen - Mainly for screen like computers and handheld devices
  • speech - This is intended for speech synthesizers

Now that we know the category of devices we'll cater for, what's next is how to actually use a media query.

Media queries can be applied to an HTML document using any of the following method:

  • via the media attribute for the style and link tags
  • using the @media rule in your CSS files

It's time for some code. But first, load the HTML in your browser.

White and black text on colored backgrounds

Back to our code editor we will apply some media attribute to the style tag to hide the h1.

Add the following to your in the head tag of your HTML:

<style media="screen">
  h1 {
   display: none;
  }
</style>

Refresh your browser, you will realize the h1 tag is hidden, technically speaking you should not hide critical part of the web page on screen like we just did. This is just for learning purposes only.

White and black text on colored backgrounds

The h1 is only hidden from the screen, if you print the document you will realize it will appear in the printed document.

A printed document

I mentioned earlier that you should not do this on screen but hiding less important part of the document when its printed is a recommended practice as it saves printer ink.

If you check our previous image you will realize the border shows up in our document in reality anyone that prints your document won't care about the border in this particular context so its best if we just hide it when the document is printed.

We'll update the code in the style tag to optimize it for printed media:

<style media="print">
  main {
    border: none;
  }
</style>

Save and refresh your browser, you'll notice no change. Go ahead and print the document, the border will not be printed.

A printed document

We can repeat the same step using the@media rule inside our CSS file.

The basic syntax of the @media rule is:

@media <device type> {
    /* your CSS rules */
}

From the syntax above please note the following:

  • You replace <device type> with screen or print depending on the scenario
  • Your CSS rules are stuff you are used to in this series e.g p { font-weight: 12em; }

Now, delete the style tag and every code in it and switch to your CSS file then add the following at the top of your code:

/*
 * Note i have used the keyword !important to make it more
 * specific to prevent the "cascade" from overriding it
*/

@media print {
  main {
    border: none !important;
  }
}

Refresh your browser and print the document. The result will be the same.

speech should be used when you want to target speech synthesizers and all should be used for all devices.


TARGETING MEDIA FEATURES

Apart from Media Types we can also target Media Features which describe specific characteristics of the browser output device or environment.

We can not cover all media features but let's discuss the most common ones:

  • color - This will apply to any output device that has color
  • height - Height of the viewport i.e the height of the available browser window
  • width - Width of the available browser window
  • min-width - The minimum width
  • max-width - The maximum width
  • hover - This will check if the user can hover over elements e.g mouse hover
  • orientation - orientation of the viewport which can be landscape or portrait

Time for some code.

The following code will apply to any device with a color screen:

@media (color) {
  /* your CSS rules here */
}

Do you want to check if user can hover over elements? Here you go:

@media (hover) {
  /* your CSS rules here */
}

The specification states that this value (hover) is at risk which means it can be dropped if the specification reaches a Candidate Recommendation level. So be careful before you use it.

The min-width and max-width have a close relationship because you might want to apply some specific styles to a particular range of device screen. The min- and max- are called prefixes and they stand for minimum and maximum.

The following media rule will apply to devices with at least 320px screen size:

@media (min-width: 320px) {
     /* your CSS rules here */
}

The code inside the following media rule will apply to devices with a landscape orientation:

@media (orientation: landscape) {
     /* your CSS rules here */
}

height and width follow the same pattern. You write the width or height followed by a semicolon then the value e.g

@media (height: 450px) { /*your CSS rules here*/ }

You might find yourself in a situation where you might want a single @media rule that will test for multiple media features discussed above this is where complex media queries comes into the picture.


CREATING COMPLEX MEDIA QUERIES

Complex media queries come in handy if you want to test several device features at once. To do this we will have to familiarize ourselves with some basic Boolean logic also called Logical operators

The Boolean logic allowed in media queries are

  • and
  • not
  • , (comma)

Others include:

  • only

and

When you use the and logical operator with @media rule every condition has to return true in order for the query to be true. If the query returns false the CSS code within the media query will not execute.

Take the following the example:

@media screen and (min-width: 12em) {
  /*
    * The CSS code will only execute if the device has a screen and a
    * width of at least 12em
  */
}

Another example:

@media screen and (min-width: 12em) and (orientation: landscape) {
  /*
   * The CSS code will only run if device has a screen and
   * width of at least 12em and the device orientation is landscape
  */
}

not

The not operator is used to negate a media query, returning true if the query would otherwise return false.

Take the following example:

@media not screen and (orientation: portrait) {
  /*
   * The main background color will only change to yellow if
   * the device orientation is not portrait which means the
   * background color will be yellow in landscape mode or if
   * the device orientation is too small to be considered as a portrait
  */

   main {
     background-color: yellow !important; 
   }
}

Update the media query in your CSS with the code above and resize the browser to a portrait format, the background color will default to the other value declared in our CSS.

device height too small to be considered as portrait

device too small to be considered as portrait

Device in portrait orientation

Device in portrait orientation

only

The only operator is used to apply a style only if an entire query matches. The specification states:

The only keyword has no effect on the media query’s result, but will cause the media query to be parsed by legacy user agents as specifying the unknown media type “only”, and thus be ignored.

This means the only keyword is useful for preventing older browsers from applying selected styles. If you have to deal with an old web browser this keyword will definitely come in handy but this would be rare.

Up next, CSS Typography.

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

Posted on Nov 28 '19 by:

ziizium profile

Habdul Hazeez

@ziizium

I teach and write code with interests in Web Development, Computer Security, and Artificial Intelligence.

Discussion

markdown guide