Adakah Peraturan CSS @media Bersarang Berfungsi Secara Konsisten Merentas Semua Penyemak Imbas?

Peraturan @media bersarang dalam CSS, Dilawati Semula

Soalan asal meneroka pemaparan yang tidak konsisten coretan kod CSS yang melibatkan peraturan @media bersarang dalam pelbagai pelayar. Berikut ialah analisis yang dikemas kini berdasarkan keadaan semasa sokongan penyemak imbas:

Peraturan @media bersarang dalam CSS3

Mengikut modul Peraturan Bersyarat CSS dalam CSS3, bersarang @media peraturan kini disokong sepenuhnya. Sintaks berikut adalah sah:

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

Sokongan Penyemak Imbas

Pelayar moden, termasuk Firefox, Safari, Chrome, Microsoft Edge dan Opera, kini menyokong @media bersarang peraturan seperti yang ditakrifkan dalam CSS Bersyarat 3. Internet Explorer tidak menyokong ciri ini.

Yang Asal Isu

Kod dalam soalan asal menunjukkan peraturan @media bersarang yang tidak berfungsi secara konsisten merentas penyemak imbas. Ini disebabkan oleh kekurangan sokongan untuk bersarang dalam CSS2.1, spesifikasi yang disokong oleh versi lama penyemak imbas pada masa itu.

Resolusi

Untuk penyemak imbas yang melakukannya tidak menyokong peraturan @media bersarang, penyelesaiannya ialah mengalih keluar sarang dan menulis berbilang peraturan @media secara berasingan:

@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 dengan Syarat Media

Sebab kenyataan @import dengan keadaan media berfungsi secara konsisten adalah kerana ia menggunakan lembaran gaya secara bersyarat, bukan kerana ia membolehkan bersarang di dalam @media peraturan.

Kesimpulan

Peraturan @media bersarang kini disokong secara meluas dalam penyemak imbas moden, mengikut spesifikasi CSS Conditional 3. Untuk penyemak imbas lama yang tidak menyokong ciri ini, penyelesaian mudah ialah menggunakan peraturan @media yang berasingan.

Atas ialah kandungan terperinci Adakah Peraturan CSS @media Bersarang Berfungsi Secara Konsisten Merentas Semua Penyemak Imbas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!