Pengenalan kepada CSS ' s @Supports Rule (pertanyaan ciri)

Takeaways Key

Peraturan @Supports dalam CSS membolehkan pemaju melaksanakan pengesanan ciri, memeriksa jika penyemak imbas menyokong pasangan harta/nilai CSS tertentu dan menggunakan gaya dengan sewajarnya. Ini adalah sebahagian daripada pendekatan peningkatan progresif untuk mengendalikan sokongan penyemak imbas yang tidak sekata untuk teknologi canggih.
@Supports Rule Syntax termasuk pengendali logik seperti 'dan', 'atau', dan 'tidak' yang membolehkan pengujian pelbagai syarat sekaligus. Penggunaan kurungan yang betul adalah penting apabila mengumpulkan keadaan bersama.
JavaScript boleh digunakan bersempena dengan pertanyaan ciri CSS menggunakan antara muka CSS dan fungsi sokongan (). Fungsi ini mengembalikan nilai boolean yang menunjukkan sama ada penyemak imbas menyokong harta CSS tertentu.
Walaupun kebanyakan pelayar moden menyokong peraturan @Supports, Internet Explorer 11 dan Opera Mini tidak. Oleh itu, pemaju harus menentukan gaya asas yang semua penyemak imbas yang disasarkan dapat mengendalikan, dan menggunakan @sokongan untuk mengatasi dan menambah gaya ini dalam pelayar yang dapat mengendalikan ciri -ciri yang lebih baru.
Dua pendekatan umum untuk menangani sokongan tidak sekata pelayar untuk teknologi terkini adalah kemerosotan anggun dan peningkatan progresif.

Degradasi anggun memanfaatkan teknologi canggih untuk mereka bentuk untuk pengalaman dan fungsi pengguna yang canggih. Pengguna penyemak imbas yang kurang berkebolehan masih dapat mengakses laman web, tetapi akan menikmati tahap penurunan fungsi dan pengalaman melayari.

Dengan peningkatan progresif, pemaju menubuhkan garis dasar dengan merancang untuk tahap pengalaman pengguna yang kebanyakan pelayar dapat menyokong. Aplikasi mereka menyediakan pengesanan keupayaan penyemak imbas terbina dalam, yang mereka gunakan untuk menyediakan fungsi yang lebih maju dan pengalaman melayari yang lebih kaya dengan sewajarnya.

Alat yang paling banyak diterima pakai dalam pendekatan peningkatan progresif ialah Perpustakaan Modernizr JavaScript.

ModernIZR Memeriksa secara programatik jika penyemak imbas menyokong teknologi web generasi akan datang dan dengan itu mengembalikan benar atau palsu. Bersenjata dengan pengetahuan ini, anda boleh mengeksploitasi ciri -ciri baru dalam menyokong penyemak imbas, dan masih mempunyai cara yang boleh dipercayai untuk memenuhi penyemak imbas yang lebih tua atau tidak bersesuaian.

Sebaik sahaja bunyi ini, sesuatu yang lebih baik telah dibuat untuk beberapa waktu. Anda boleh melakukan pengesanan ciri menggunakan pertanyaan ciri CSS asli dengan peraturan @Supports.

Dalam jawatan ini saya akan menyelidiki lebih mendalam ke dalam @Supports dan API JavaScript yang berkaitan.

mengesan ciri penyemak imbas dengan peraturan @Supports

Peraturan @Supports adalah sebahagian daripada spesifikasi peraturan bersyarat CSS3, yang juga termasuk peraturan @media yang lebih meluas yang kita semua gunakan dalam kerja reka bentuk responsif kami.

Semasa dengan pertanyaan media, anda dapat mengesan ciri paparan seperti lebar dan ketinggian viewport, @Supports membolehkan anda menyemak sokongan penyemak imbas untuk pasangan harta/nilai CSS.

Untuk mempertimbangkan contoh asas, katakan laman web anda memaparkan sekeping karya seni yang ingin anda tingkatkan menggunakan pengadunan CSS. Memang benar, mod campuran CSS merendahkan dengan anggun dalam penyemak imbas yang tidak menyokong. Walau bagaimanapun, bukannya penyemak imbas secara lalai dalam kes sedemikian, anda mungkin ingin menggembirakan pengguna penyemak imbas yang tidak menyokong dengan memaparkan sesuatu yang sama istimewa, jika tidak sama hebatnya. Ini adalah bagaimana anda akan melakukan cek untuk CSS campuran di lembaran styleshe anda dengan @Supports:

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}</span>

Untuk memohon gaya yang berbeza untuk penyemak imbas yang tidak mempunyai sokongan mod campuran, anda akan menggunakan sintaks ini:

<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>/* alternative styles here */
</span>  <span>}
</span>
<span>}</span>

Beberapa perkara yang perlu diperhatikan:

• Keadaan yang anda uji mesti berada di dalam kurungan. Dalam erti kata lain, @Supports Mix-Blend-Mode: Overlay {...} tidak sah. Walau bagaimanapun, jika anda menambah lebih banyak tanda kurung daripada yang diperlukan, kod itu akan baik -baik saja. Sebagai contoh, @Supports ((campuran-blend-mod: overlay)) adalah sah.
• Keadaan ini mesti memasukkan kedua -dua harta dan nilai. Dalam contoh di atas, anda menyemak harta benda campuran-mod dan nilai overlay untuk harta itu.
• Menambah trailing! Penting pada perisytiharan yang anda uji tidak akan menjejaskan kesahihan kod anda.

mari kita dapatkan contoh -contoh di atas dengan demo kecil. Pelayar dengan sokongan campuran-mod akan menggunakan gaya di dalam @Supports () {...} blok; Pelayar lain akan menggunakan gaya di dalam @supports tidak () {...} blok.

html:

<span><span><span><article> class<span>="artwork"</span>></article></span>
</span>  <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174027307262599.png?x-oss-process=image/resize,p_40" class="lazy" alt="Pengenalan kepada CSS &#x27; s @Supports Rule (pertanyaan ciri)" > src<span>="myimg.jpg"</span> alt<span>="cityscape"</span>></span>
</span><span><span><span></span>></span></span></span></span>

CSS:

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}
</span>
<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>opacity: 0.5;
</span>  <span>}
</span>
<span>}</span>

lihat demo di Codepen:

Lihat Demo Peraturan Pen @Supports oleh SitePoint (@SitePoint) pada codepen.

ujian untuk pelbagai syarat sekaligus

Apabila melakukan ujian ciri dengan @Supports, anda tidak terhad kepada satu keadaan ujian pada satu -satu masa. Menggabungkan pengendali logik seperti dan, atau, dan yang sudah disebutkan tidak pengendali membolehkan anda menguji pelbagai ciri sekaligus.

dan konjungsi ujian pengendali untuk kehadiran pelbagai yang diperlukan syarat:

<span><span>@supports (property1: value1) and (property2: value2)</span> {
</span>  <span>element {
</span>    <span>property1: value1;
</span>    <span>property2: value2;
</span>  <span>}
</span><span>}</span>

Dengan menggunakan kata kunci atau kata kunci, anda boleh menguji kehadiran pelbagai ciri alternatif untuk satu set gaya. Ini amat berguna jika beberapa alternatif tersebut memerlukan awalan vendor untuk sifat atau nilai mereka:

<span><span>@supports (property1: value1) or (-webkit-property1: value1)</span> {
</span>  <span>element {
</span>    <span>-webkit-property1: value1;
</span>    <span>property1: value1;
</span>  <span>}
</span><span>}</span>

anda juga boleh menggabungkan dan dengan atau, menguji keadaan dalam peraturan @supports yang sama:

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}</span>

Apabila anda mengumpulkan beberapa syarat bersama -sama, penggunaan kurungan yang betul adalah penting. Mempunyai dan, atau, dan bukan kata kunci bercampur bersama tidak akan berfungsi. Juga, cara anda mengumpulkan syarat -syarat di dalam kurungan menetapkan perintah di mana mereka dapat dinilai. Dalam coretan di atas, keadaan yang tidak disengajakan atau keadaan dinilai terlebih dahulu, maka jawapan yang dihasilkan dinilai terhadap keadaan yang diperlukan selanjutnya yang diperkenalkan oleh kata kunci dan.

Kata kunci bukan membolehkan anda menguji satu keadaan pada satu masa. Sebagai contoh, kod di bawah tidak sah:

Sebaliknya, anda perlu mengumpulkan

<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>/* alternative styles here */
</span>  <span>}
</span>
<span>}</span>

semua

syarat -syarat yang anda menafikan dengan kata kunci bukan di dalam kurungan. Inilah versi yang diperbetulkan dari coretan di atas:

Akhirnya, pastikan anda meninggalkan ruang putih selepas tidak dan di kedua -dua belah dan atau atau.

<span><span><span><article> class<span>="artwork"</span>></article></span>
</span>  <span><span><span><img  alt="Pengenalan kepada CSS &#x27; s @Supports Rule (pertanyaan ciri)" > src<span>="myimg.jpg"</span> alt<span>="cityscape"</span>></span>
</span><span><span><span></span>></span></span></span></span>

pengendali dalam tindakan

Anda boleh memohon satu set gaya jika penyemak imbas menyokong kedua -dua kecerunan dan mod campuran menggunakan sintaks berikut (saya telah memecahkan kod di bawah ke dalam pelbagai baris untuk tujuan paparan):

Kerana beberapa pelayar Android yang lebih tua memerlukan awalan -webkit- untuk kecerunan linear, mari kita periksa sokongan penyemak imbas dengan memasukkan keadaan selanjutnya ke dalam blok @Supports:

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}
</span>
<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>opacity: 0.5;
</span>  <span>}
</span>
<span>}</span>

Katakan laman web anda menggunakan mod campuran kilauan dan ketepuan yang, pada masa penulisan, tidak disokong di Safari. Anda masih ingin menyediakan gaya alternatif untuk penyemak imbas tersebut, jadi inilah caranya anda boleh menetapkan keadaan konjungtif yang sesuai dengan menggunakan @Supports tidak dengan dan:

<span><span>@supports (property1: value1) and (property2: value2)</span> {
</span>  <span>element {
</span>    <span>property1: value1;
</span>    <span>property2: value2;
</span>  <span>}
</span><span>}</span>

Semua demo untuk bahagian ini boleh didapati di Codepen:

<span><span>@supports (property1: value1) or (-webkit-property1: value1)</span> {
</span>  <span>element {
</span>    <span>-webkit-property1: value1;
</span>    <span>property1: value1;
</span>  <span>}
</span><span>}</span>

Lihat demo pen pada ujian pelbagai ciri dengan @Supports oleh SitePoint (@SitePoint) pada Codepen.

javascript dengan pertanyaan ciri CSS

Anda boleh mengambil kesempatan daripada pertanyaan ciri CSS menggunakan antara muka CSS JavaScript dan fungsi sokongan (). Anda boleh menulis fungsi CSS.Ss.supports () dalam salah satu daripada dua cara.

Sintaks yang terdahulu dan paling banyak disokong mengambil dua argumen, iaitu,

harta dan

nilai , dan mengembalikan nilai Boolean yang benar atau palsu: Pastikan anda meletakkan harta dan nilai yang sama di dalam sebut harga. Spesifikasi menjelaskan bahawa fungsi di atas kembali benar jika ia memenuhi dua syarat berikut:

• harta itu adalah "perlawanan literal untuk nama harta CSS" yang disokong oleh penyemak imbas;
• Nilai akan "berjaya dihuraikan sebagai nilai yang disokong untuk harta itu".

oleh perlawanan literal Spesifikasi bermakna bahawa CSS melarikan diri tidak diproses dan ruang putih tidak dipangkas. Oleh itu, jangan melarikan diri dari watak atau meninggalkan ruang putih, jika tidak, ujian akan kembali palsu.

alternatif, sintaks yang lebih baru hanya mengambil satu hujah di dalam kurungan:

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}</span>

menggunakan sintaks ini menjadikannya mudah untuk menguji pelbagai syarat dengan dan dan atau kata kunci.

Berikut adalah contoh yang cepat. Katakan anda ingin menguji jika penyemak imbas menyokong mod campuran kilauan. Sekiranya ia berlaku, JavaScript anda secara dinamik akan menambah kelas pencahayaan-blend ke elemen sasaran, jika tidak, ia akan menambah kelas noluminositi. CSS anda kemudian akan gaya elemen dengan sewajarnya.

Berikut adalah CSS:

<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>/* alternative styles here */
</span>  <span>}
</span>
<span>}</span>

Jika anda mengikuti sintaks dua argumen, coretan JavaScript boleh seperti berikut:

<span><span><span><article> class<span>="artwork"</span>></article></span>
</span>  <span><span><span><img  alt="Pengenalan kepada CSS &#x27; s @Supports Rule (pertanyaan ciri)" > src<span>="myimg.jpg"</span> alt<span>="cityscape"</span>></span>
</span><span><span><span></span>></span></span></span></span>

Jika anda lebih suka sintaks yang terbaru, satu-argumen, hanya ganti baris kod yang sepadan di atas dengan yang di bawah:

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}
</span>
<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>opacity: 0.5;
</span>  <span>}
</span>
<span>}</span>

Jangan ragu untuk menyemak demo:

Lihat API Pen JavaScript untuk pertanyaan ciri CSS oleh SitePoint (@SitePoint) pada codepen.

Sokongan penyemak imbas

Semua versi terkini pelayar utama mempunyai sokongan untuk peraturan @Supports kecuali Internet Explorer 11 dan Opera Mini. Adakah @Supports bersedia untuk dunia nyata? Saya telah menemui jawapan terbaik untuk soalan ini dalam kata -kata Tiffany Brown:

... berhati-hati untuk menentukan gaya misi-kritikal dalam @Supports ...
Tentukan Gaya Pangkalan Anda - Gaya yang setiap satu daripada Sasaran Anda
Pelayar boleh mengendalikan. Kemudian gunakan @Supports ... untuk mengatasi dan menambah
Gaya tersebut dalam penyemak imbas yang boleh mengendalikan ciri -ciri yang lebih baru.

CSS Master, p.303

Kesimpulan

Dalam artikel ini, saya meneroka pengesanan ciri pelayar CSS asli dengan peraturan @Supports (a.k.a pertanyaan ciri). Saya juga melalui API JavaScript yang sepadan, yang membolehkan anda menyemak keadaan penyemak imbas semasa untuk sifat CSS terkini menggunakan kaedah CSS.Ss.supports fleksibel ().

Sokongan penyemak imbas untuk pertanyaan ciri CSS adalah baik tetapi tidak meliputi semua pangkalan anda. Walau bagaimanapun, jika anda ingin menggunakan @Supports dalam projek anda, penempatan strategik gaya dalam dokumen CSS anda, seperti yang dicadangkan oleh Tiffany Brown, dan CSS-Supports.JS Polyfill oleh Han Lin Yap dapat membantu.

Jika anda mencuba demo dalam artikel ini atau mempunyai pengalaman dunia nyata menggunakan @supports, saya suka mendengar daripada anda.

soalan yang sering ditanya mengenai CSS @Supports Rule

Apakah peraturan CSS @Supports dan bagaimanakah ia berfungsi? Jika ciri ini disokong, penyemak imbas akan menggunakan gaya dalam peraturan @supports. Jika tidak, ia akan mengabaikannya. Ini membolehkan pemaju menggunakan ciri CSS baru sambil mengekalkan keserasian dengan pelayar yang lebih tua. Sintaks adalah @Supports diikuti dengan ciri dan nilainya dalam kurungan, seperti ini: @supports (paparan: grid) { / * styles untuk memohon jika grid disokong * /}. Dalam peraturan CSS @Supports?

Ya, anda boleh menggunakan pelbagai syarat dalam peraturan CSS @Supports dengan menggunakan logik pengendali. Pengendali 'dan' membolehkan anda menyemak sama ada pelbagai ciri disokong, manakala pengendali 'atau' memeriksa jika sekurang -kurangnya satu ciri disokong. Pemeriksaan pengendali 'tidak' jika ciri tidak disokong. Sebagai contoh, @Supports (paparan: grid) dan (paparan: flex) { / * styles untuk memohon jika kedua -dua grid dan flex disokong * /}. Ciri CSS?

Anda boleh menyemak sama ada penyemak imbas tidak menyokong ciri CSS dengan menggunakan pengendali 'tidak' dalam peraturan @Supports. Sebagai contoh, @Supports tidak (paparan: grid) { / * gaya untuk memohon jika grid tidak disokong * /}. Ini akan menggunakan gaya jika penyemak imbas tidak menyokong grid CSS.

Apa yang berlaku jika penyemak imbas tidak menyokong peraturan @Supports? menyokong peraturan, ia akan mengabaikan keseluruhan peraturan, termasuk gaya di dalamnya. Ini bermakna anda boleh menggunakan @supports dengan selamat tanpa bimbang tentang memecahkan laman web anda pada pelayar yang lebih lama. Walau bagaimanapun, masih penting untuk menyediakan gaya sandaran untuk penyemak imbas yang tidak menyokong ciri -ciri yang anda uji dengan @Supports. @Supports peraturan, sama seperti anda boleh sarang peraturan CSS yang lain. Ini membolehkan anda menguji sokongan pelbagai ciri dengan cara yang lebih kompleks. Sebagai contoh, anda boleh menggunakan peraturan @supports bersarang untuk memohon gaya hanya jika penyemak imbas menyokong kedua -dua grid CSS dan flexbox. Menyokong Peraturan adalah kaedah yang boleh dipercayai untuk pengesanan ciri dalam CSS, tetapi ia tidak sempurna. Sesetengah pelayar yang lebih tua tidak menyokong @sokongan, dan beberapa pelayar boleh melaporkan positif atau negatif palsu. Adalah idea yang baik untuk menguji laman web anda dalam pelbagai pelayar untuk memastikan ia berfungsi seperti yang diharapkan. Sokongan ciri CSS dengan kaedah CSS.S.Supports (). Kaedah ini berfungsi sama dengan peraturan @Supports, tetapi membolehkan anda menguji sokongan ciri secara dinamik dalam kod JavaScript anda.

Adakah terdapat alat untuk memeriksa sokongan penyemak imbas untuk ciri -ciri CSS? Salah satu yang paling popular ialah saya boleh gunakan, yang menyediakan maklumat terkini mengenai sokongan penyemak imbas untuk pelbagai ciri CSS. Ya, anda boleh menggunakan @Supports dalam kombinasi dengan pertanyaan media untuk memohon gaya berdasarkan kedua -dua sokongan ciri dan saiz paparan. Ini boleh sangat berguna untuk membuat reka bentuk responsif yang juga memanfaatkan ciri -ciri CSS baru. Progresif meningkatkan laman web dengan menggunakan ciri -ciri CSS maju hanya jika ia disokong oleh penyemak imbas. Ini termasuk perkara seperti grid CSS, Flexbox, sifat tersuai, dan banyak lagi. Ia juga digunakan untuk menyediakan gaya sandaran untuk penyemak imbas yang tidak menyokong ciri -ciri ini.

Atas ialah kandungan terperinci Pengenalan kepada CSS ' s @Supports Rule (pertanyaan ciri). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!