Bagaimana Peraturan @media Bersarang Berfungsi dalam CSS dan Apakah Sokongan Penyemak Imbas Wujud?

Peraturan @media bersarang dalam CSS

Apabila bekerja dengan pertanyaan media CSS, pembangun mungkin menghadapi ketidakkonsistenan merentas pelayar apabila cuba menyusun peraturan @media dalam @import bersyarat. Artikel ini akan menyelidiki nuansa peraturan @media bersarang, meneroka sokongan penyemak imbas dan sebab asas untuk kelakuan yang berbeza-beza.

Sokongan Penyemak Imbas

Secara sejarah, sokongan untuk bersarang @ peraturan media adalah terhad kerana kekurangan ciri sedemikian dalam CSS2.1. Walau bagaimanapun, kemunculan modul Peraturan Bersyarat CSS3 memperkenalkan keupayaan untuk menyusun peraturan @media, membenarkan kawalan yang lebih terperinci ke atas gaya berdasarkan keadaan media.

Pada masa ini, semua penyemak imbas moden, termasuk Firefox, Safari, Chrome (dan derivatifnya), dan Microsoft Edge, menyokong peraturan @media seperti yang diterangkan dalam CSS Conditional 3. Ini bermakna kod yang dipersoalkan dengan @media at-rules bersarang seharusnya sekarang berfungsi dengan betul di mana-mana sahaja, kecuali Internet Explorer (yang tidak lagi dalam pembangunan).

Penjelasan Terminologi

Adalah penting untuk ambil perhatian bahawa istilah "@media peraturan " merujuk kepada keseluruhan blok kod yang terdiri daripada @media, pertanyaan media dan peraturan yang bersarang dalam pendakap kerintingnya. "@media query" secara khusus merujuk kepada bahagian syarat media peraturan.

Nesting vs. Conditional @import

Secara mengelirukan, pertanyaan media juga boleh digunakan dalam @ peraturan import, yang menimbulkan persoalan tentang cara mereka berinteraksi. Perbezaan utama yang perlu diingat ialah @import dengan pertanyaan media mengehadkan penggunaan helaian gaya yang diimport, manakala peraturan @media mengehadkan penggunaan gaya dalam helaian gaya.

Dalam contoh yang disediakan, @media peraturan dalam lembaran gaya yang diimport berfungsi dengan betul dalam Firefox, walaupun menggunakan pertanyaan media dalam pernyataan @import. Ini kerana ini adalah dua mekanisme berasingan untuk menggunakan gaya secara bersyarat.

Menguatkuasakan Ketekalan

Untuk memastikan tingkah laku yang konsisten merentas penyemak imbas, pembangun boleh sama ada menggunakan pernyataan @import bersyarat atau alih keluar sarang peraturan @media. Pilihan terakhir disyorkan kerana kedua-dua peraturan dalam contoh menggunakan syarat media lebar min.

Atas ialah kandungan terperinci Bagaimana Peraturan @media Bersarang Berfungsi dalam CSS dan Apakah Sokongan Penyemak Imbas Wujud?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!