4

What is the difference between this two:

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

I always thought that by default media queries affected all medias, therefore there is no need for that all, but I see that so frequently lately that I'm not sure any more.

Is there really a difference?

Vandervals
  • 5,774
  • 6
  • 48
  • 94
  • please check this link http://stackoverflow.com/questions/11404744/media-queries-max-width-or-max-height with details about CSS Media Queries & Logical Operators – user1162084 Jul 03 '15 at 10:52
  • @user1162084: all is not a logical operator. You may be confusing it with and. – BoltClock Jul 03 '15 at 10:55

2 Answers2

2

As the documentation says:

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

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) { … }
Vucko
  • 20,555
  • 10
  • 56
  • 107
  • why is people using it a lot, then? They just love to make their css longer or what? – Vandervals Jul 03 '15 at 10:50
  • Well, idk really, maybe they don't know that there is a shorter version. I always use [Bootstraps media querys](https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css#L1585), which are also in the shorther version. – Vucko Jul 03 '15 at 10:54
1

There's no difference, feels like just an artefact from the spec authors, left there maybe so that the code can be more intuitive.

lucian
  • 623
  • 10
  • 21