What are Media Types?

The language through which is submitted an HTML document in any type of device is the CSS – however, the same code that was used in the development of a page style may occasionally not work on all devices that access it. For this reason, the W3C offers an access device identification feature known as media type.

In general, the media type defines which file or CSS code will be used in the display in a particular type of access device. You can use the feature in two ways:

The first one is exporting the file using the import command, and secondly, indicating the file and the media type.

@import url(“impressao.css”) print;

In the example, we are indicating a specific type of CSS file to file in print format. The second way to use the media type is indicating directly in CSS the code that should be used.

@media print {

/* Code CSS */

}

The syntax presented in this example, you can just select the @media command and then the type of device. The CSS code that will be used should be written in class format. In the examples above, we used the type print media for illustration, but a number of others are also available:

• all: is used for the CSS code to be applied to any device;

• braille: suitable for tactile devices;

• embossed: suitable for devices that print Braille;

• handheld: suitable for handheld devices, cell phones and other similar devices. Usually with small screens and limited bandwidth;

• print: suitable for printing on paper;

• projection: suitable for presentations, such as PowerPoint;

• screen: suitable for devices with color screens and high resolution;

• speech: suitable for speech synthesizers;

• tty: suitable for devices that use a fixed grid for character display, such as teletypes, terminals, portable devices with limited display;

• TV: for devices such as televisions, ie, with low resolution, with good amount of colors and limited scroll.

The first step to ensure the compatibility of a site or application WEB is to understand the basic concept of media types and so implement codes that are highly compatible with the user device used. This aspect is fundamental and prioritizes the quality of any type of project.

Check out more content on our blog!
Learn all about Scriptcase.