ZOMDir > Blog

Friday, 17 January 2014

A faster website with CSS media queries

Recently I have been working on the performance of ZOMDir.com. This time I wanted reduce the number of http requests by reducing the number of CSS files. This can be done by using CSS media queries.

Previously I used 4 CSS files. 

  1. s.css for normal and large computer screens;
  2. m.css for mobiles, and handhelds;
  3. t.css for the television;
  4. p.css for the printer.
With media queries I only have one CSS file, named c.css

I have experimented with several Methods of choosing a responsive design on several devices (at the moment of writing this blog, I realise I didn't have tested the pages on a television). The result so far is that the best option is: Basic media selectors like screen, handheld, print and tv with css queries in one single css file.

Note: This is true for all current browsers. In particular older versions of Internet Explorer do not support Media queries



Viewport

When I was coding the above mentioned experimental pages, I almost forgot to add the code:

<meta name="viewport" content="width=device-width" />
  
With this tag you tell the browser what the width is of your website, so it is essential for a responsive webpage.

CSS

The basic code of the c.css file is:

@media screen and (min-width: 731px), projector and (min-width: 731px) {

  /* A normal (large) screen, width > 730px    */
  /* Hide code not intended for large screens  */
  .mo,.po,.to{display:none}
}

@media handheld, screen and (max-width: 730px), projector and (max-width: 730px) {

  /* A mobil device or handheld, width <= 730px */
  /* Hide code not intended for small screena   */
  .so,.po,.to{display:none}
}

@media tv {

  /* A television                               */
  /* Hide code not intended for televisions     */
  .mo,.po,.so{display:none}
}

@media print {

  /* A printer                                  */
  /* Hide code not intended to be printed       */
  .mo,.so,.to{display:none}

}

No comments:

Post a Comment