Do Nested CSS @media Rules Work Consistently Across All Browsers?

Nesting @media Rules in CSS, Revisited

The original question explored the inconsistent rendering of a CSS code snippet involving nested @media rules in various browsers. Here's an updated analysis based on the current state of browser support:

Nested @media Rules in CSS3

As per the CSS Conditional Rules module in CSS3, nesting @media rules is now fully supported. The following syntax is valid:

@media print {
  #navigation { display: none }
  @media (max-width: 12cm) {
    .note { float: none }
  }
}

Browser Support

Modern browsers, including Firefox, Safari, Chrome, Microsoft Edge, and Opera, now support nested @media rules as defined in CSS Conditional 3. Internet Explorer does not support this feature.

The Original Issue

The code in the original question demonstrated nested @media rules that were not working consistently across browsers. This was due to the lack of support for nesting in CSS2.1, the specification supported by older versions of browsers at the time.

Resolution

For browsers that do not support nested @media rules, a workaround is to remove the nesting and write multiple @media rules separately:

@media screen and (min-width: 480px) {
    body {
        background-color: #6aa6cc;
        color: #000;
    }
}

@media screen and (min-width: 768px) {
    body {
        background-color: #000;
        color: #fff;
    }
}

@import with Media Conditions

The reason why the @import statement with a media condition worked consistently was because it applies a stylesheet conditionally, not because it enables nesting inside @media rules.

Conclusion

Nested @media rules are now widely supported in modern browsers, as per the CSS Conditional 3 specification. For legacy browsers that do not support this feature, a simple workaround is to use separate @media rules.

The above is the detailed content of Do Nested CSS @media Rules Work Consistently Across All Browsers?. For more information, please follow other related articles on the PHP Chinese website!