Media Queries 11
if you’re writing rules that will apply to all media types you won’t need to
specify them in the media query constructor; that being the case, these
examples are functionally identical:
@media all and (expression) { rules }
@media (expression) { rules }
noTe To make the code examples in the rest of this book more concise, I’ll omit the media
type where not essential.
The first new attribute for the @media rule is logic. This optional key-
word can have the value of either only or not:
@media only media and (expression) { rules }
@media not media and (expression) { rules }
The only value is mainly useful if you want to hide the rule from older
browsers that don’t support the syntax; for browsers that do support it, only
is effectively ignored. The not value is used to negate the query; you use not
to apply the styles if the parameters you set are not met.
If you use logic or media in your query, you also need to use the and
operator, as in the previous examples, to combine them with the required
expression attribute. This attribute is used to set parameters that offer func-
tionality beyond the media type. These parameters are known as media
features, and they’re critical to the power of media queries. That being the
case, let’s explore them in detail.
Media QuerieS
Media features are information about the device that’s being used to display
the web page: its dimensions, resolution, and so on. This information is
used to evaluate an expression, the result of which determines which style
rules are applied. That expression could be, for example, “apply these styles
only on devices that have a screen wider than 480 pixels” or “only on devices
that are orientated horizontally.”
In media queries, most media feature expressions require that a value
be supplied:
@media (feature: value) { rules }
This value is needed to construct the example expressions I just men-
tioned. In a few cases, however, you can leave out the value and just test the
existence of the media feature itself against the expression:
@media (feature) { rules }
