With the evolution of CSS, more and more resources are presented for front-end developers and with that the work ends up gaining more agility and quality. An example of this evolution is the use of logical operators in CSS references. Sentences of denial, exclusion and exclusivity are now part of life of those who understand the need to develop a layout that is fully compatible with many existing access devices.

Logical operators in Media Queries

Just as in programming, the logical operators may be used to condition the media queries using a style sheet determined according to the type of access device.

Following, we will present the three logical operators available, namely: not, or & only.

The operator NOT, as its name suggests, is used to deny a specific device. This means that it will not use a particular CSS file according to the identified device.

<link rel=”styleSheet” hef=”style.css” media=”All and (not color)” />

 

In the above code example, we are denying using the color element, thus allowing the page is also displayed in monochrome devices.

The operator OR, in turn, limits the use of various types of media in a single sentence. Its most common use is with the use of the comma (“,”).

<link rel=”styleSheet” hef=”style.css” media=”All and (color), projection and (color)” />

In the example, the comma separates the conditional of use by type of device in which the CSS is used between all sorts of colorful media and/or colorful projections.

Finally, the operator ONLY indicates that the style sheet will be used only in a particular media type.

<link rel=”styleSheet” hef=”style.css” media=”Only screen and (color)” />

 

In the example shown, only colorful and high resolution screens use the CSS file indicated.

 

Logical operators by default are used to solve problems that often rely on conditional. The main idea with its use is objectively solve a given situation. With a few lines, complex problems are solved, thus ensuring greater productivity and efficiency in development.

You might also like…

PROCESAMIENTO AJAX EN SCRIPTCASE

Ajax en los formularios de Scriptcase puede usarse para recargar un campo de tipo de select basado e...

IMPORTAR IMAGENES DE LA BASE DE DATOS Y UTILIZAR CLASES DE BOOSTRAP

Como muchas personas ya saben, Bootstrap es una biblioteca de front-end libre y de código abierto p...

TENDENCIAS DE DESARROLLO WEB PARA 2017

Usted verá en este post tendencias para 2017 en Diseño Web, en el medio digital y en el desarrollo...

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.