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.

what are media types

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.

You might also like…

How to implement A2F using Own Development in NodeJS in a Scriptcase application

A2F using Own Development in NodeJS A2F: In a previous article, we talked about Swivel as an extern...

Specialists or generalists, who gets a better advantage by using Scriptcase?

Hey there! Today  we will figure what are the ideal profiles for those who wish to take advantage o...

Disabling autofill and autocomplete Chrome browser in login screens

Hello, here I want to show an alternative to disable the autofill and autocomplete of the chrome bro...

Comment this post

Get new posts, resources, offers and more each week.

We will use the information you provide to update you about our Newsletter and Special Offers. You can unsubscribe any time you want by clinck in a link in the footer of any email you receive from us, or by contacting us at sales@scriptcase.net. Learn more about our Privacy Police.