Logical operators in Media Queries

Logical operators in Media Queries: 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.

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.

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 (“,”).

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.

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.

Know Visit our blog and check out more content!
Know Scriptcase?