Sejauh manakah Konsisten Sokongan Penyemak Imbas untuk Peraturan @media Bersarang dalam CSS?

Peraturan @media bersarang dalam CSS: Sokongan dan Keserasian Penyemak Imbas

Soalan:

Bagaimana konsisten adakah sokongan untuk peraturan @media bersarang merentas penyemak imbas yang berbeza? Mengapakah kod yang disediakan memaparkan secara berbeza dalam pelbagai penyemak imbas, dan apakah sebab di sebalik ketidakkonsistenan ini? Bolehkah ini diselesaikan untuk mencapai penggayaan yang konsisten?

Jawapan:

Sokongan Penyemak Imbas

Peraturan @media bersarang bukanlah satu amalan yang sah dalam CSS2.1, itulah sebabnya sokongan untuk ciri ini berbeza dengan ketara di kalangan pelayar. Walau bagaimanapun, dengan pengenalan CSS Conditional 3, peraturan @media bersarang menjadi ciri yang disokong dalam semua penyemak imbas moden, termasuk Firefox, Safari, Chrome dan Microsoft Edge.

Keserasian Nesting

Kod yang disediakan dalam soalan melibatkan peraturan @media bersarang. Walaupun peraturan @media boleh bersarang dalam peraturan @media lain dalam CSS3, bersarang ini tidak dibenarkan dalam CSS2.1. Akibatnya, penyemak imbas yang masih mematuhi CSS2.1, seperti versi Internet Explorer yang lebih lama, tidak mengendalikan peraturan @media bersarang dengan betul.

Sebab Ketidakkonsistenan

Firefox telah melaksanakan spesifikasi CSS Conditional 3 yang lebih baharu, membolehkannya mentafsir dan menggunakan peraturan @media bersarang seperti yang dimaksudkan. Sebaliknya, penyemak imbas lain, seperti Opera, Chrome dan IE9, mengikut spesifikasi CSS2.1 yang lebih lama, yang tidak menyokong peraturan @media bersarang. Akibatnya, mereka kembali menggunakan gaya yang ditakrifkan dalam peraturan @media yang paling dalam, yang membawa kepada percanggahan dalam penggayaan.

Mencapai Ketekalan

Untuk memastikan penggayaan yang konsisten merentas semua penyemak imbas, adalah disyorkan untuk mengalih keluar peraturan @media bersarang. Ini boleh dilakukan dengan mengalih keluar peraturan @media kedua dalam peraturan @media pertama:

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

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

Selepas mengalih keluar peraturan bersarang, penggayaan harus digunakan secara konsisten merentas semua penyemak imbas moden yang menyokong CSS Conditional 3 dan CSS2. 1.

Atas ialah kandungan terperinci Sejauh manakah Konsisten Sokongan Penyemak Imbas untuk Peraturan @media Bersarang dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!