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,274
  • 5
  • 40
  • 86
  • 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
  • 19,890
  • 7
  • 55
  • 105
  • 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
  • 586
  • 6
  • 17