App performance is important! Media Queries!

The second post in the application performance series will be about media queries and the benefits of using them! Thank you for joining, buckle up and let us begin!

Introduction

Let us imagine having multiple devices at our home, for example, a desktop computer with a huge screen, a notebook, a tablet, and a phone. With media queries, we can apply styling only when the width and height of the browser match a certain ruleset. Media queries are an important tool and are useful for creating different layouts depending on the size of the screen, but additionally, they can be used to detect further information about the environment the site is running on.

Some simple queries

They generally follow the same syntactical rule, consisting of a media type (what kind of media is the code written for – in our case screen), a media expression (which is the rule that needs to be passed in order for the CSS code to be executed, and the CSS code that will be run if the media expression passes. We can combine media queries to produce more complex media queries using the ‘and’ keyword, in which case we can search for different use cases.

For example, we have a web page that has a cover image – a photograph of the space. That image is quite heavy and we don’t want to show the image to the mobile user – a black background would do just fine in that case, right? Additionally, we want to reduce the font size, as the current size would be too large for mobile phones. We can do all of this simply by writing the following code.

@media screen and (max-width: 500px) {
    body {
      background:black 
    }
  
    h1 {
        color: white;
        font-size: 30px;
    }
  
    p {
        color: white;
        font-size: 18px
    }
  }

@media screen and (min-width: 500px) {
  body {
    background: url("./space.jpg") no-repeat center center fixed;
    background-size: cover;
  }

  h1 {
      color: white;
      font-size: 55px;
  }

  p {
      color: white;
      font-size: 30px
  }
}

And we would get the following result:

So what?

You might be wondering – why do we even care. Well, if you check the Network tab in DevTools for Chrome browsers (any other modern browser will do, because all of them have Developer Tools integrated) by clicking the shortcut CTRL + SHIFT + I, we can see all the loaded files for our application. If we check the Network tab while looking at our mobile version, we see… that the image is not pulled! This happens because the browser sees the media query and says “I won’t need this image at this point in time!”. With this, we actually reduced the size of our application, and the client machine can more swiftly paint our application!

If we increase the width of the browsers by grabbing the edge of the Developer Tools panel, we will see that as soon as we hit the media query breakpoint – we download the image (look at the space.jpg)!

More about media queries

We only scratched the surface when it comes to media queries. Let us see some additional examples and let us describe them in more detail.

The first two code blocks deal with different media types – although we primarily use screens to interact with our webpages we can also use print, which targets printers. By using a comma we can target more than one media type. Media types that can be used are all, print, screen, and speech. There is a handful of deprecated ones too!

The third code block actually targets a media feature – the most common one, the range of the device, by selecting only the screens that have the maximum width of 850 pixels. Additionally, we could use features for different specific characteristics of a device, selecting hover when using the mouse, applying any device with a color screen or other.

The last code block is an example in creating more complex media queries by chaining them with the and keyword, in which case both features have to be true in order to run the block. We could also use not, only and ,(comma).

Conclusion

Hope you had fun learning about media queries! They are really useful when dealing with different screen sizes, and when we want to create a more responsive, mobile-friendly app, and they’re used in every web app that I’ve seen so far!

For more articles on Application Performance please click on any link below: