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.

<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.

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

By ,

November 5, 2015

a

You might also like…

AI-Driven Software Development: The Role of ChatGPT

In the rapidly evolving world of technology, artificial intelligence (AI) is playing an increasingl...

Low-Code: The Key to Accessible Digital Transformation

Digital transformation is imperative for companies wishing to remain competitive in the current era...

Low-code: Simplifying Development Without Sacrificing Quality

In today's agile and competitive world, productivity is crucial for the success of any business. Th...

You might also like…

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.