Search code examples
csscode-folding

Any side-effect problems may arise when using @media to group/create code-folding for css entries?

In CSS 3 syntax we have @media to define responsive screen to apply.

I intend to use it as custom code-folding for CSS entries.

E.g.

@media {
    div { color: green; }
}

So I wonder if there are any side-effect problems may arise when doing so?

Solution

  • First off, the @media CSS at-rule is not new to CSS3. It was introduced in CSS2, and has been supported by every browser including IE5+. What is new to CSS3 are media queries. The difference between media queries and @media are detailed in this answer.

    An @media rule without an accompanying media query is equivalent to @media all, which, again, is understood correctly by every browser including IE5 and up. In other words, in terms of browser behavior there are no side-effects other than hiding CSS from IE4 and any other browsers from the late 90s (which don't support @media in any way, shape or form).

    Note that this construct does not validate as either CSS2 or CSS3 in the Jigsaw CSS validator; this is a bug with the validator which may be due to the fact that CSS2 did not explicitly allow empty media types with @media. Having said that, what is stated in CSS3 is consistent with browser behavior up to 17 years back, so this is something you can totally rely on.