Memotong mustard dengan pertanyaan media CSS-tutorial css-php.cn

Cutting the Mustard with CSS Media Queries

mata teras

untuk memuat atau hanya dalam penyemak imbas yang disokong atau menjalankan skrip. getComputedStyle

"Memotong mustard" adalah istilah yang dicipta oleh Tom Maslen dari BBC. Kaedah ini menggunakan JavaScript untuk memeriksa ciri -ciri penyemak imbas dan kemudian memuat lebih banyak CSS dan JavaScript untuk menyediakan pengalaman "dipertingkatkan";

Baru-baru ini, minat dalam "memotong mustard" telah melonjak, seperti "berhijrah ke Flexbox melalui" memotong mustard "dan" pemotongan mustard sisi pelayan ", dan peningkatan progresif yang lebih luas.

kaedah penambahbaikan

Walau bagaimanapun, dalam pengalaman saya, walaupun pengalaman "teras" yang sangat asas dapat menyebabkan masalah pada beberapa pelayar yang sangat lama, jadi saya ingin memperbaiki ini untuk melihat apakah mungkin untuk menolaknya sama sekali pelayar yang sangat lama menggunakan CSS, Hanya meninggalkan HTML di belakang.

tentu saja, penyelesaian yang jelas adalah menggunakan JavaScript untuk memuatkan semua CSS (jika penyemak imbas melewati ujian "memotong mustard"), tetapi ini terasa terlalu kasar bagi saya; Peranti akan dihukum kerana tidak mempunyai gaya sama sekali. Jadi saya mencari cara untuk menyelesaikan masalah ini menggunakan CSS sahaja dan saya dapati artikel lama oleh Craig Buckler. Selepas banyak eksperimen dan pelarasan, saya datang dengan kaedah berikut:

<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm)">
<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)">

Salin selepas log masuk

mari kita menganalisis apa yang berlaku di sini.

Prinsip kerja

pertanyaan media untuk elemen

pertama hanya membolehkan lembaran styles dimuatkan dalam penyemak imbas berikut: <link>

pertanyaan media untuk elemen kedua

hanya membolehkan lembaran styles dimuatkan dalam penyemak imbas berikut: <link>

Apabila digunakan bersama, teknik ini tidak memuatkan helaian gaya kecuali penyemak imbas adalah yang berikut:

iaitu 9
ff 8
opera 12, 16
Chrome 29
Safari 6.1
iOS 7
Android 4.4

NOTA: Lembaran gaya dimuat hanya sekali tanpa mengira bilangan unsur <link>.

pertanyaan media boleh digabungkan ke dalam elemen <link> oleh deklarasi pemisahan koma, seperti yang ditunjukkan di bawah:

<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm)">
<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)">

Salin selepas log masuk

Walau bagaimanapun, saya lebih suka memisahkannya kerana saya mendapati lebih mudah untuk melihat apa yang sedang berlaku.

Jadi, jika anda membina tag dengan cara semantik dan boleh diakses, pelayar warisan masih dapat melihat kandungan yang anda tidak gaya dalam HTML biasa.

Ini sudah tentu sangat subjektif, tetapi maksud saya ialah sesiapa yang masih menggunakan pelayar ini sepatutnya dapat mendapatkan apa yang mereka perlukan. Ia sangat mungkin dengan menyediakan pelayar ini dengan CSS untuk pelayar baru, sesetengah kandungan akan terganggu, yang mungkin bermakna bahawa halaman itu tidak dapat digunakan sepenuhnya. Dengan menggunakan kaedah ini, mereka boleh mendapatkan sekurang -kurangnya satu halaman yang bersih. Lebih penting lagi,

anda tidak perlu menguji dalam pelayar ini lagi. Anda sudah selesai! Sekurang -kurangnya, dalam teori. Sudah tentu, keperluan sokongan anda mungkin berbeza -beza, tetapi kelebihan teknologi ini ialah anda boleh membina ini. Sebagai contoh, jika anda perlu menambah sokongan untuk IE8, anda boleh menggunakan anotasi bersyarat untuk memuatkan lembaran gaya yang sama hanya untuk penyemak imbas itu:

Susun jika anda perlu menyokong peranti WebKit yang lebih tua dengan nisbah piksel lebih besar daripada 1, anda boleh menambah elemen

<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm), only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)">

Salin selepas log masuk

yang lain dengan pertanyaan media sasaran seperti berikut:

<link>

dengan sendirinya, ini hanya akan memuatkan stylesheet untuk Android 2.2 (saya tidak dapat menguji versi terdahulu), tetapi kerana ia dimasukkan ke dalam unsur -unsur

<!--[if IE 8]>
  <link rel="stylesheet" href="css/your-stylesheet.css">
<![endif]-->

Salin selepas log masuk

yang lain, ia sebenarnya hanya menambah sokongan untuk set ini yang lain penyemak imbas.

anda juga boleh menukar pertanyaan media utama untuk elemen yang saya berikan di sini untuk mendapatkan sokongan tersuai yang anda perlukan. Walau bagaimanapun, ia memerlukan banyak ujian untuk melakukan ini, jadi berhati -hati! <link>

"tetapi mereka adalah hacks!" <link>

Ya, saya rasa mereka, tetapi ia bergantung kepada definisi anda. Pertanyaan media direka untuk menguji fungsi penyemak imbas sebelum menggunakan CSS, dan itulah yang kita mahu lakukan dalam kes ini, walaupun secara tidak langsung.

Walau bagaimanapun, saya gembira dengan teknologi sama ada hack atau tidak, dan ia berfungsi dengan baik dalam semua ujian saya, dan saya merancang untuk menggunakannya untuk tapak pengeluaran tidak lama lagi.

ketidakcekapan

Dalam semua ujian yang saya lakukan setakat ini, saya hanya dapati satu situasi di mana perkara tidak berfungsi seperti yang diharapkan. Pada Android 4.4, penyemak imbas UC tidak menjawab pertanyaan media. Setakat yang saya tahu, pelayar UC menggunakan versi lama WebKit, yang menerangkan ini.

Jika anda ingin menyokong penyemak imbas ini, anda boleh memaksa beban CSS dengan sebilangan kecil ejen pengguna menghidu:

<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm)">
<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)">

Salin selepas log masuk

Sebagai bonus, sejauh yang saya tahu, JavaScript tidak boleh dilumpuhkan dalam pelayar Android UC, jadi stylesheet harus selalu dimuatkan kecuali kegagalan rangkaian, dll.

Sudah tentu, jika anda mendapati bahawa anda perlu menyokong penyemak imbas khusus yang lain, anda boleh menambah keadaan ejen pengguna, tetapi saya cadangkan menggunakannya dengan berhati -hati kerana ia melanggar jenis ini CSS sahaja Tujuan teknologi.

Saya membuat halaman ujian untuk menguji kaedah asas pada penyemak imbas yang berbeza. Jika anda mendapati mana -mana pelayar tidak berfungsi seperti yang diharapkan, atau jika anda menemui sebarang pertanyaan media lain yang boleh menambah sokongan untuk penyemak imbas tertentu atau skop penyemak imbas, beritahu saya dalam komen atau bertanya soalan dalam repositori GitHub.

Muat skrip?

OK, jika anda menggunakan CSS untuk mengesan sokongan penyemak imbas, anda kemungkinan besar ingin memuat atau menjalankan beberapa atau semua skrip dalam penyemak imbas yang anda sokong. Jadi bagaimana kita boleh melakukan ini?

Baiklah, ada beberapa cara untuk melakukan ini, tetapi saya dapati yang paling mudah adalah seperti berikut:

Dalam lembaran styleshe, masukkan harta CSS bukan lalai yang tidak berbahaya pada elemen badan.
Gunakan JavaScript dan getComputedStyle untuk menentukan sama ada atribut anda ditetapkan pada elemen badan.
Jika menetapkan, jalankan atau muatkan JavaScript lain.

Sebagai contoh, nilai lalai atribut clear adalah none. Menetapkannya ke Badan mempunyai sedikit kesan pada paparan halaman (jika ia berlaku, anda mesti menggunakan sifat lain). Jadi kod dalam lembaran styles anda akan kelihatan seperti ini: both

<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm), only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)">

Salin selepas log masuk

di halaman anda (atau fail skrip):

<!--[if IE 8]>
  <link rel="stylesheet" href="css/your-stylesheet.css">
<![endif]-->

Salin selepas log masuk

Kod akhir

Sama ada hack atau tidak, apa yang saya cuba tunjukkan di sini adalah kaedah yang boleh diguna semula untuk mengesan penyemak imbas yang agak baru dan menghalang pelayar yang lebih tua daripada menggunakan gaya atau skrip berjalan, mengakibatkan mereka hanya menunjukkan HTML halaman. Terdapat sedikit kod yang diperlukan dan ia sepatutnya membolehkan anda memberi tumpuan kepada membina ciri -ciri yang indah untuk pelayar yang lebih moden menggunakan teknologi yang lebih moden tanpa perlu risau.

sementara anda mungkin tidak memerlukan semua yang saya berikan di sini, meletakkan semua bahagian bersama akan memberikan hasil berikut:

<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (-webkit-min-device-pixel-ratio:1.1)">

Salin selepas log masuk

Saya telah membuat satu lagi halaman ujian dengan semua kandungan tambahan (

SitePoint kadang-kadang memadamkan demo tahun yang dihoskan pada halaman HTML yang berasingan. Kami melakukan ini untuk mengurangkan risiko yang ketinggalan zaman (dengan kelemahan awam) risiko yang menimbulkan risiko Pengguna.

Penghargaan

Saya tidak dapat melakukan ini tanpa kerja BrowserStack, bolehkah saya menggunakan dan kakitangan di Browserhacks dan Jeff Clayton, jadi terima kasih kepada semua orang yang terlibat, beritahu saya jika anda mempunyai idea atau maklum balas.

Soalan Lazim Mengenai Pertanyaan Media CSS dan "Memotong Mustard" (FAQ)

Apa maksud "memotong mustard" dalam pertanyaan media CSS?

Dalam konteks pertanyaan media CSS, "memotong mustard" digunakan untuk menggambarkan teknologi di mana laman web atau aplikasi web memeriksa sama ada pelayar pengguna menyokong ciri -ciri tertentu sebelum memberikan pengalaman lengkap. Jika penyemak imbas tidak boleh "memotong mustard", laman web atau versi aplikasi yang lebih mudah, lebih asas akan tersedia. Pendekatan ini memastikan semua pengguna dapat mengakses kandungan laman web, tanpa mengira fungsi penyemak imbas mereka.

Bagaimana untuk menentukan sama ada penyemak imbas itu "memotong mustard"?

Untuk menentukan sama ada penyemak imbas itu "memotong mustard", anda boleh menggunakan ujian JavaScript mudah. Ujian ini memeriksa sama ada penyemak imbas menyokong ciri -ciri tertentu seperti querySelector dan localStorage. Jika penyemak imbas melepasi ujian, ia dianggap "memotong mustard" dan boleh mengendalikan pengalaman penuh laman web atau aplikasi.

Mengapa teknologi "memotong mustard" penting?

Teknologi "Memotong Mustard" adalah penting kerana ia memastikan bahawa laman web atau aplikasi web anda boleh diakses oleh semua pengguna tanpa mengira fungsi penyemak imbas mereka. Dengan menyediakan versi laman web yang lebih mudah kepada penyemak imbas yang tidak dapat "memotong mustard", anda dapat memastikan semua pengguna mempunyai akses kepada kandungan anda.

Bolehkah saya menggunakan pertanyaan media CSS tanpa JavaScript?

Ya, anda boleh menggunakan pertanyaan media CSS tanpa JavaScript. Walau bagaimanapun, menggunakan JavaScript dengan pertanyaan media CSS membolehkan anda memberikan pengguna pengalaman yang lebih disesuaikan berdasarkan keupayaan penyemak imbas mereka.

Apakah beberapa contoh ciri yang boleh diperiksa dalam ujian "memotong mustard"?
Ujian "memotong mustard" boleh menyemak ciri -ciri seperti
, querySelector dan localStorage. Ini semua ciri -ciri yang disokong oleh pelayar moden, tetapi mungkin tidak tersedia dalam pelayar yang lebih tua. addEventListener
Bagaimana untuk melaksanakan ujian "memotong mustard" di laman web atau aplikasi web saya?

Untuk melaksanakan ujian "memotong mustard", anda boleh menggunakan ujian JavaScript mudah untuk memeriksa ciri -ciri tertentu. Jika penyemak imbas melepasi ujian, anda boleh menggunakan pertanyaan media CSS untuk memberikan pengalaman lengkap laman web atau aplikasi.

Apa yang berlaku jika penyemak imbas tidak boleh "memotong mustard"?

Jika penyemak imbas tidak boleh "memotong mustard", ia akan mendapat laman web atau versi yang lebih mudah, lebih asas. Ini memastikan semua pengguna dapat mengakses kandungan anda tanpa mengira fungsi penyemak imbas mereka.

Bolehkah saya menyesuaikan pengalaman yang saya berikan untuk penyemak imbas yang tidak dapat "memotong mustard"?

Ya, anda boleh menyesuaikan pengalaman yang anda berikan untuk penyemak imbas yang tidak dapat "memotong mustard". Anda boleh menggunakan pertanyaan media CSS untuk menyesuaikan reka bentuk dan fungsi laman web atau aplikasi untuk penyemak imbas ini.

Adakah terdapat kelemahan menggunakan teknologi "memotong mustard"?

Kelemahan yang berpotensi menggunakan teknologi "memotong mustard" adalah bahawa ia memerlukan masa pembangunan tambahan untuk membuat dan menguji versi laman web atau aplikasi yang dipermudahkan. Walau bagaimanapun, manfaat memastikan semua pengguna mempunyai akses kepada kandungan yang sering melebihi kelemahan ini.

Adakah teknologi "memotong mustard" masih relevan hari ini?

Ya, teknologi "memotong mustard" masih relevan hari ini. Walaupun pelayar moden menyokong pelbagai ciri, masih terdapat banyak pengguna yang menggunakan pelayar yang lebih tua yang mungkin tidak menyokongnya. Dengan menggunakan teknologi "memotong mustard", anda boleh memastikan bahawa laman web atau aplikasi anda boleh diakses oleh semua pengguna.

Atas ialah kandungan terperinci Memotong mustard dengan pertanyaan media CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!