Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What's a @media rule without a media type do?

I inherited this and was wondering what does a media query without a "media type" do?

 @media (min-width: 768px) {
   .commentlist-item .commentlist-item {
    padding: 0 0 0 2em;
   }
}

Standard syntax per www.w3schools.com/css/css3_mediaqueries.asp

  @media not|only mediatype and (expressions) {
    CSS-Code;
}
like image 314
user3020047 Avatar asked Feb 26 '16 18:02

user3020047


People also ask

What is @media rule?

The @media rule is used in media queries to apply different styles for different media types/devices. Media queries can be used to check many things, such as: width and height of the viewport. width and height of the device. orientation (is the tablet/phone in landscape or portrait mode?)

What does @media do in CSS file?

The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.

What is @media only screen?

only screen: The only keyword is used to prevent older browsers that do not support media queries with media features from applying the specified styles. Syntax: @media only screen and (max-width: width) Example 2. <! DOCTYPE html>

What do media queries allow us to do?

Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse.


1 Answers

If the media type is not explicitly given it is all. ~ W3C Media Queries

In other words, an @media rule without a media type is shorthand syntax, where all is implied.

More from the spec:

2. Media Queries

A shorthand syntax is offered for media queries that apply to all media types; the keyword all can be left out (along with the trailing and). I.e. if the media type is not explicitly given it is all.

EXAMPLE 5

I.e. these are identical:

@media all and (min-width: 500px) { ... } 
@media (min-width: 500px) { ... }

As are these:

@media (orientation: portrait) { ... }
@media all and (orientation: portrait) { ... }

...

EXAMPLE 7

I.e. these are equivalent:

@media all { ... }
@media { ... }

source: https://www.w3.org/TR/css3-mediaqueries/#media0

like image 173
Michael Benjamin Avatar answered Oct 16 '22 14:10

Michael Benjamin