Adaptive design and media queries (CSS)




Multiple stylesheets and/or media queries (adaptive design)

For various reasons it can be an advantage to have several stylesheets for handling different function, set-ups and/or browsers. With the introduction of smartphones and tablets, where the screens are significantly smaller than computers for work in general, it has become really important to have a design that either works when scaled down to a few inches or adapts to the type of computer and/or screen size. It can be something as practical as when you print out a page, only the relevant parts are printed out, e.g. headline and content, while navigation pane and adds are ignored. This is called adaptive design.

Adaptive design can be done in several ways, and as form follows function, the choice of which solution to use is a matter of what you need to do.





Media types

For the LINK tag you have the attribute MEDIA, and for each MEDIA you have a variabel for selection. Therefore you can have a specific style sheet for e.g. printouts, which is where the site often looks weird. Default for MEDIA is 'all', without variables, and you have the following option for MEDIA and variable:

Media typeDevice type
allAll devices use this
brailleUsed for braille tactile feedback devices, i.e. devices giving an embossed surface the user can touch and feel.
embossedUsed for braille printers.
handheldUsed for hand held devices (smartphones and tablets do NOT use this mediatype!).
printUsed for printouts, including when a page is shown as "print preview".
projectionUsed for projectors/beamers.
screenfor screens, also including tablets and smartphones.
speechUsed for text-to-speech-emulators.
ttyUsed for media with a fixed character width (e.g. teletypes, terminals, or portable devices with limited display capabilities).
tvUsed for television-type devices (low resolution, color, limited-scrollability screens, sound available).


VariableEffect
widthWith of the current window (in pixels)
heightHeight of the current window (in pixels)
device-widthWidth of the device screen (in pixels)
device-heightHeight of the device screen (in pixels)
orientationIs the page seen in landscape or portrait orientation
aspect-ratioHeight to width ratio for the current window
device-aspect-ratioHeight to width ratio for the device screen
colorThe number of color bits per color component
color-indexNumber of colors the device can show
monochromeNumber of bits per pixel in a monochrome frame buffer
resolutionScreen resolution for the device, either as dots per inch (dpi) or dots per centimeter (dpcm)
scanIs the display progressive or interlaced
gridIs the device grid-based?


The variables can, for some of them, be found as extended versions with a minimum and maximum. These are the ones I know of, but there may be more:

VariableEffect
max-widthMaximum width of the current window (in pixels)
min-widthMinimum width of the current window (in pixels)
max-heightMaximum height of the current window (in pixels)
min-heightMinimum height of the current window (in pixels)
max-device-widthMaximum width of the current device screen (in pixels)
min-device-widthMinimum width of the current device screen (in pixels)
max-device-heightMaximum height of the current device screen (in pixels)
min-device-heightMinimum height of the current device screen (in pixels)
max-aspect-ratioMaximum height to width ratio for the current window
min-aspect-ratioMinimum height to width ratio for the current window
max-device-aspect-ratioMaximum height to width ratio for the current device screen
min-device-aspect-ratioMaximum height to width ratio for the current device screen
max-resolutionMaximum screen resolution for the device
min-resolutionMinimum screen resolution for the device


The way to use it is to either have a separate LINK with its own style sheet, eller et media query.

LINK, e.g. for printouts formatted by the style sheet named PrinterFriendly.css, is just a line after the link used for the general layout:

<LINK REL="stylesheet" HREF="GeneralLayout.css" TYPE="text/css" MEDIA="all" />
<LINK REL="stylesheet" HREF="PrinterFriendly.css" TYPE="text/css" MEDIA="print" />

Media query are sections in the style sheet used for the general formatting of the site:

@media print {
}

As seen, it looks like defining a class, except using the at sign instead of the dot. Actually it is more like making a style sheet in the current style sheet, because you specify your tags and attributes, e.g. if you don't want the navigation part (the NAV tag) in your printout:

@media print {
NAV {
display:none;
}
}

The printer function specifically is one of the functions where using LINK in stead of media query can be an advantage, as some old browsers cannot use media query (e.g. IE8 and earlier), but use LINK without any problems, it may be better to use LINK for the print function.

The extensions using minimum and maximum is where you can really work with the various types of computers, in regards to being a laptop, tablet or a smartphone. Especially since the media types and variables can be combined. Media types and variables are combined using "and".

If we take a look at an example, then on a computer with a high screen resolution you can easily use font size 24pt for your main headline (the H1 tag). For a lower screen resolution, this will cause problems, as the size becomes overwhelming, so here you use a smaller font, to maintain the readability of the page. Here's an example adapting to three different screen resolutions:

H1 {
font-size:24.0pt;
}

@media screen and (max-device-width: 960px) {
H1 {
font-size:18.0pt;
}
}

@media screen and (max-device-width: 480px) {
H1 {
font-size:12.0pt;
}
}

Currently there is no specific way of selecting smartphones, tablets or PC's, which would have made sense, but combining device-width, aspect ratio and resolution, you can get a useful sorting of the various screen types/sizes.

One of the more alternative ways of selecting is browser type, i.e.

-webkitGoogle Chrome and Apple Safari
-mozMozilla Firefox
-oOpera
-msMicrosoft Internet Explorer (only ver. 9 and later)

so if you need something specifically for Firefox on a screen which is max. 960 pixels wide, it will be -moz-max-device-width: 960px. It will especially be things like vertical text, where the placement is highly browser dependent, where it makes sense using this option.

In general it can be said that the choice between multiple css files or media query is a matter of how much you have to change between the various media. Very large and complex css files can be difficult to maintain, on the other hand, you don't have to add a new line with LINK on all the pages on your site. In practice most people will probably end up using a combination.





Internet Explorer 8 and earlier

Internet Explorer 8 and earlier can't use the MEDIA tag above. Here we use another trick. Today the problem is quite small, as these browsers vanished when Windows XP was discontinued, but there is still a few people out there, using these browsers. So for those who want to compensate for this, here goes:

Browsers read css files from the top down. If the same tag is given two different values for the same attribute, it will use the last one it read. Because Internet Explorer is one of the browsers able to read what is called conditional comments, you can start with reading a general css file, and if you have an Internet Explorer requiring something else, you overwrite the values with whatever new values that may be needed.

The evolution from Internet Explorer 6 to 7 is quite small, whereas there was quite a lot of development from 7 to 8, so you can expect to have a two tracks, one for handling Internet Explorer 8, and one for handling Internet Explorer 7 and before.

The code for "If Internet Explorer 8" is:

<!--[if IE 8]>
The code that Internet Explorer 8 have to read is inserted here
<![endif]-->

The code for "If Internet Explorer 7 or earlier version" is:

<!--[if lte IE 7]>
The code that Internet Explorer 7, or earlier version, have to read is inserted here
<![endif]-->

The code can be used in two ways, and the choice between them, is a matter of personal taste. Both have their advantages and disadvantages in regards to your site's structure and content.

The first one, and the one I used myself, is having three separate css files. One for handling the general parts, we can call it Layout.css, and two for handling Internet Explorer 7 and earlier (we can call it LayoutIE7.css) and one for Internet Explorer 8 (which we will call LayoutIE8.css).

<LINK HREF="Layout.css" REL="stylesheet" TYPE="text/css">
<!--[if IE 8]>
<LINK HREF="LayoutIE8.css" REL="stylesheet" TYPE="text/css">
<![endif]-->
<!--[if lte IE 7]>
<LINK HREF="LayoutIE7.css" REL="stylesheet" TYPE="text/css">
<![endif]-->

Notice! In the two css files handling the old versions of Internet Explorer, you only write the attributter that needs to be changed from what is stated in the Layout.css-filen. Writing everything else gives you noting but problems with site maintenance.

Remember that because the code is read from the top down, conditional comments have to be after the style sheet handling the general layout.


The other way of using the conditional comments, is directly in the css file. Let's say that for the tag H1, the left margin has to be 50 pixels wide under normal conditions, but for Internet Explorer 8 it has to be 45 pixels and for Internet Explorer 7 and before, it has to be 55 pixels. For all browsers the text has to be bold and italic in font size 24.0pt. Then the css file looks like this:

H1 {
font-size:24.0pt;
font-weight:bold;
font-style: italic;
margin-left:50px;
<!--[if IE 8]>
margin-left:45px;
<![endif]-->
<!--[if lte IE 7]>
margin-left:55px;
<![endif]-->
}