With the advent of more and more IoT (Internet of Things) devices becoming commonplace in our lives, it is ever more important that developers of web applications and websites factor this into their designs. That is where CSS stylesheet media types come into play.
In some isolated cases it may just make sense to develop multiple versions of your web app to target these numerous devices. That we know is not very practical in the long run. We just can no longer design a user interface for every individual device or brand in different form factors. It is already a task to keep up with the growing number of mobile devices let alone your Internet-connected bathing soap dispenser.
So how do CSS Stylesheet Media Types Work?
These stylesheet media types are designed to load different external CSS stylesheets based on the target device type. What this means without changing your HTML or back-end server code, you can load and display parts of HTML when viewing on a Desktop device and others when viewing on a mobile device. Then if you decide to print out the material you can get a different print-friendly layout altogether.
Here is how you can use your media queries on your HTML page. You can simply insert the code below in between the tags on the HTML page.
<link rel="stylesheet" type="text/css" href="screen.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css" media="print">The “media” attribute can then have different values as desired from the list below.
Possible CSS Stylesheet Media Types Values
- all: This can be used for all media type devices and is the default media type for HTML pages
- aural: This is used for speech and sound synthesizers
- braille: This is used for braille and tactile feedback devices
- embossed: This can be used for paged braille printers
- handheld: This can be used for mobile, small or generally handheld devices
- print: Used to style documents sent to the printers
- projection: Used to style slides and more so PowerPoint style projected presentations
- screen: This is used for computer screens
- tty: Used for teletypes and terminals or media using a fixed-pitch character grid
- tv: Used for television devices
Found this article interesting? Follow Brightwhiz on Facebook, Twitter, and YouTube to read and watch more content we post.