Was Media-Query ever part of CSS2?

user_2685914 0
Viewed 426

I got a simple question - Were Media_Queries present in CSS2 (launched Nov 1997) or it came only in CSS 3(7 June 2011)?

Media queries is a feature of CSS3 allowing content rendering to adapt to different conditions such as screen resolution (e.g. mobile and desktop screen size). It became a W3C recommended standard in June 2012,[1] and is a cornerstone technology of responsive web design (RWD).

Source: https://en.wikipedia.org/wiki/Media_queries

CSS2 Introduced Media Types

CSS3 Introduced Media Queries

Source: https://www.w3schools.com/css/css3_mediaqueries.asp

Now, I am pretty confused. Was Media Query a part of CSS2 or NOT? Was it already there or only improved in CSS3 or otherwise? Did it only came as a new feature in CSS3 or Whatever???

css html
2 Answers

As far as I'm aware, CSS2 introduced simple @media types. For example, one for screen, one for print, etc.

For example:

@media screen {
    /* screen only */
}
@media print {
    /* print only */
}

CSS3 introduced more complex @media queries. For example, the width of the device, or reduced motion, or colour schemes.

@media (max-width: 700px) {
    /* viewports under 700px only */
}
@media (prefers-reduced-motion: reduced) {
    /* for motion-reduced browser settings */
}
@media (prefers-color-scheme: dark) {
    /* for dark preferences on browser settings */
}

You can mix them both together.

@media screen and (min-width: 1000px) {
    /* viewports over 1000px only, on screens */
}
@media print and (orientation: portrait) {
    /* for printing in portrait mode */
}
@media (max-device-width: 700px) and (prefers-color-scheme: light) {
    /* for light preferences on browser settings on devices under 700px wide */
}
@media print and (min-device-width: 900px) and (prefers-reduced-motion: reduced) {
    /* for print, on devices over 900px wide, for reduced motion preferences on the browser settings */
}

TL;DR: CSS2 lets you do things for types of media, but CSS3 lets you do things for different preferences/settings/sizes in those media.

user_132669740

CSS2 introduced only Media Types and the media query was defined later.

The first draft was written in 4 April 2001 and become a W3C recomendation in 19 June 2012. If you check the last link you can navigate to the previous versions to see the evolution of the Specification from 2001 to 2012.

Worth to note that browsers may have started the implementation earlier so the media query feature was available before June 2012.

If we consider caniuse: https://caniuse.com/#feat=mdn-css_at-rules_media_width we can find a support for media query since 2006.

The above is only the Level 3 and actually we are at the Level 4 with this Specification: https://www.w3.org/TR/mediaqueries-4/ which is a Candidate Recommendation and is mostly implemented by major browsers.

You can follow this link to see the changes from the Level 3 to the Level 4: https://www.w3.org/TR/mediaqueries-4/#changes-2012

There is also a Level 5 that is under constrution and still in Draft mode. The date of the last version is 31 July 2020 and the first one was in 3 March 2020. This one is still recent to talk about implementation.

It can be a bit confusing to follow all this but here is a link that explain the process done by the working group: https://www.w3.org/TR/CSS/#w3c-process

user_86203330
Related