Panduan Postcss untuk Meningkatkan Pemilih dan Pertanyaan Media

<p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174010351218537.jpg" class="lazy" alt="The PostCSS Guide to Improving Selectors and Media Queries "> <s> </s></p> <p> mata teras <strong> </strong> </p> <ul> PostCSS menyediakan pelbagai plugin yang menyediakan polyfills untuk ciri CSS terkini, yang membolehkan pemaju mencuba ciri -ciri baru walaupun mereka tidak mempunyai sokongan penyemak imbas yang luas. <li> </li> <li> Peraturan gaya plug-in yang bersarang mengikut cadangan modul bersarang W3C, memperkenalkan pemilih bersarang <code>postcss-nesting</code> baru, merujuk kepada pemilih induk. <code>&amp;amp;</code> Plugin </li> <li> membolehkan pemilih duplikasi mendefinisikan dalam pembolehubah, mengurangkan duplikasi kod dan meningkatkan penyelenggaraan kod. <code>postcss-custom-selectors</code> Plugin </li> <li> dan <code>postcss-custom-media</code> meningkatkan pertanyaan media untuk menjadikannya lebih mudah untuk digunakan dan mengurangkan duplikasi dalam helaian gaya. <code>postcss-media-minmax</code> </li> </ul> Perubahan terkini kepada spesifikasi CSS memperkenalkan beberapa ciri menarik. Malangnya, beberapa ciri ini masih dalam peringkat draf, sementara yang lain tidak mempunyai sokongan penyemak imbas yang luas. Sering kali, cadangan baru mengambil sedikit masa sebelum mereka dikaji semula, diterima dan dilaksanakan oleh penyemak imbas. Walau bagaimanapun, kami dapat menjimatkan masa menunggu dan mencuba beberapa ciri ini menggunakan postcss. <p> </p> PostCSS mempunyai pelbagai pemalam yang direka untuk melaksanakan polyfills untuk ciri CSS terkini. Kerana plugin ini sangat luas, sukar untuk menampung semua plugin dalam satu artikel. Sebaliknya, kami akan memberi tumpuan kepada plugin yang memberi tumpuan kepada menambah ciri baru kepada pemilih dan pertanyaan media. Banyak plugin akan membolehkan kami meningkatkan struktur stylesheet dengan ketara, sementara yang lain hanya boleh menambah beberapa gula sintaksis bersih ke bahagian atas. <p> </p> Artikel ini tidak akan memperkenalkan konfigurasi dan pemasangan postcss secara terperinci. Ini telah diterangkan dalam "BEGIN dengan POSTCSS" dan "Meningkatkan Kualiti CSS dengan PostCSS". Sebagai rujukan cepat, anda juga boleh menyemak halaman PostCSS di GitHub. <p> </p> Peraturan bersarang <h2> </h2> Mari kita mulakan dengan fungsi yang paling asas -pastinya biasa untuk setiap pengguna preprocessor -bersarang. <p> Plug-in melaksanakan peraturan gaya bersarang mengikut cadangan modul bersarang W3C. <code>postcss-nesting</code> </p> Cadangan memperkenalkan pemilih bersarang <p> baru yang merujuk pemilih induk. Bertentangan dengan kurang atau sass, pemilih ini diperlukan oleh spesifikasi dan mestilah pemilih asas pertama dalam rantaian pemilih untuk membolehkan bersarang. Mana -mana pemilih yang tidak mengandungi pemilih bersarang akan diabaikan. Contohnya: <st> <code>&amp;amp;</code> </st></p> akan ditukar kepada: <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.article { color: #333; &amp;amp;amp;.popular { background: #DDD; } &amp;amp;amp; .title { font-weight: bold; } }</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <p> </p> Sila ambil perhatian bahawa kod berikut tidak sah kerana ia tidak menggunakan pemilih <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.article { color: #333 } .article.popular { background: #DDD } .article .title { font-weight: bold }</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> seperti yang ditentukan. <p> <code>&amp;amp;</code> </p> Untuk membenarkan pemilih induk dimasukkan ke mana-mana sahaja di pemilih (bukan hanya pada permulaan), cadangan itu mentakrifkan sintaks alternatif untuk menggunakan aturan AT bersarang <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.article { color: #333; /* no nested-selector */ .popular { background: #DDD; } /* the nested selector is not the fist selector in the chain */ .latest &amp;amp;amp;amp; { border: 1px solid red; } }</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div>. Kita boleh menetapkan pemilih <p> dalam contoh sebelumnya dengan: <code>@nest</code> <code>.latest &amp;amp;amp;</code> </p> ini akan disusun kepada: <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.article { color: #333; @nest .latest &amp;amp;amp;amp; { border: 1px solid red; } }</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <p> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.article { color: #333 } .latest .article { border: 1px solid red }</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> Tatabahasa juga lebih ekspresif daripada <p>. <code>@nest</code><h2 id="pemilih-tersuai"> pemilih tersuai </h2> <p> Apabila menulis CSS, kami cenderung menulis banyak pemilih pendua. Ini boleh menjadi kod boilerplate mudah yang memilih semua pautan atau sebarang butang, atau pemilih yang lebih kompleks yang memerlukan pengulangan berulang. Ini mungkin memperkenalkan banyak duplikasi kod dan semua isu penyelenggaraan kod yang berkaitan. Spesifikasi sambungan CSS baru memperkenalkan cara untuk menyimpan pemilih dalam pembolehubah dan merujuknya dari bahagian lain dari lembaran styleshe. Oleh itu, pemilih berulang perlu ditakrifkan hanya sekali dan kemudian ia boleh digunakan semula dengan selamat di tempat lain. </p> <p> POSTCSS mempunyai plugin <🎜 🎜> yang melaksanakan ciri ini. Berikut adalah contoh mudah yang mentakrifkan semua pemilih elemen tajuk: <code>postcss-custom-selectors</code> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.article { color: #333; &amp;amp;amp;.popular { background: #DDD; } &amp;amp;amp; .title { font-weight: bold; } }</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> ia akan dikumpulkan kepada: <p> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.article { color: #333 } .article.popular { background: #DDD } .article .title { font-weight: bold }</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> pemilih tersuai dilaksanakan sebagai kelas pseudo, jadi sintaks kelihatan pelik <p>. <code>:--</code> </p> pemilih tersuai boleh digunakan dengan berkesan dengan pemilih asas. Contohnya: <st> <p> </p> dikumpulkan kepada: <st> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.article { color: #333; /* no nested-selector */ .popular { background: #DDD; } /* the nested selector is not the fist selector in the chain */ .latest &amp;amp;amp;amp; { border: 1px solid red; } }</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <p> Anda juga boleh menggabungkan pemilih tersuai ke dalam pemilih tunggal untuk pengaturan yang lebih kompleks. </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.article { color: #333; @nest .latest &amp;amp;amp;amp; { border: 1px solid red; } }</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <p> akan menjana: </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.article { color: #333 } .latest .article { border: 1px solid red }</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <p> Contoh ini mungkin sedikit berlebihan, tetapi ia menunjukkan kuasa ciri ini dengan sangat baik. </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>@custom-selector :--heading h1, h2, h3, h4, h5, h6; :--heading { font-weight: bold; }</pre><div class="contentsignin">Salin selepas log masuk</div></div> kelas pseudo baru <p> Spesifikasi tahap 4 pemilih memperkenalkan sekumpulan kelas pseudo baru, tetapi disebabkan sifat dinamik kebanyakan kelas pseudo, hanya beberapa yang boleh didapati sebagai plug-in PostCSS. </p> <h2> </h2> Pseudoclass <p> Plugin </p> <h3 id="melaksanakan-kelas-pseudo-code-matches-code-baru-Ia-adalah-kelas-fungsi-yang-menapis-unsur-unsur-yang-sepadan-dengan-pemilih-dalam-parameter-Jika-anda-lulus-beberapa-pemilih-unsur-unsur-mesti-sepadan-dengan-sekurang-kurangnya-satu-daripada-mereka-Pendek-kata"> melaksanakan kelas pseudo <code>:matches()</code> baru. Ia adalah kelas fungsi yang menapis unsur -unsur yang sepadan dengan pemilih dalam parameter. Jika anda lulus beberapa pemilih, unsur -unsur mesti sepadan dengan sekurang -kurangnya satu daripada mereka. Pendek kata: </h3> <p> <code>postcss-selector-matches</code> dikumpulkan kepada: <st> <code>:matches()</code> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>h1, h2, h3, h4, h5, h6 { font-weight: bold; }</pre><div class="contentsignin">Salin selepas log masuk</div></div> Pseudoclass <p> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.article :--heading .author { color: blue; }</pre><div class="contentsignin">Salin selepas log masuk</div></div> elemen penapisan kelas pseudo yang tidak sepadan dengan mana-mana parameter yang diberikan. Ia dilaksanakan dalam plugin <h3>. <code>:not()</code> </h3> <p> Hasilnya ialah: <code>:not()</code> <code>postcss-selector-not</code> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.article h1 .author, .article h2 .author, .article h3 .author, .article h4 .author, .article h5 .author, .article h6 .author { color: blue; }</pre><div class="contentsignin">Salin selepas log masuk</div></div> Pseudoclass <p> Plugin </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>@custom-selector :--links a, a:focus, a:visited, a:hover, a:active; article :--heading :--links { color: #333; }</pre><div class="contentsignin">Salin selepas log masuk</div></div> melaksanakan kelas pseudo <h3>. Ia diperkenalkan untuk membantu menyelesaikan kekeliruan di sekitar kelas pseudo. Tidak seperti yang terakhir, ia sepadan dengan semua pautan - termasuk yang dikunjungi. <code>:any-link</code> </h3> <p> dikumpulkan kepada: <st> <code>postcss-pseudo-class-any-link</code> <code>:any-link</code> Penambahbaikan pertanyaan media <code>:link</code> </p> Terdapat plugin di perpustakaan untuk PostCSS untuk membuat pertanyaan media lebih mudah digunakan. Mereka adalah <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>article h1 a, article h2 a, article h3 a, article h4 a, article h5 a, article h6 a, article h1 a:focus, article h2 a:focus, article h3 a:focus, article h4 a:focus, article h5 a:focus, article h6 a:focus, article h1 a:visited, article h2 a:visited, article h3 a:visited, article h4 a:visited, article h5 a:visited, article h6 a:visited, article h1 a:hover, article h2 a:hover, article h3 a:hover, article h4 a:hover, article h5 a:hover, article h6 a:hover, article h1 a:active, article h2 a:active, article h3 a:active, article h4 a:active, article h5 a:active, article h6 a:active { color: #333; }</pre><div class="contentsignin">Salin selepas log masuk</div></div> dan <p>. </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>button:matches(:hover, :focus) { color: red; }</pre><div class="contentsignin">Salin selepas log masuk</div></div> media tersuai <h2> </h2> Menulis pertanyaan media mewujudkan masalah yang sama seperti pemilih biasa - mereka sering diulang dalam helaian gaya. Mungkin lebih kerap daripada pemilih biasa. Nasib baik, terdapat penyelesaian yang serupa dengan pemilih tersuai. <p> Plug-in melaksanakan spesifikasi pertanyaan media tersuai yang meningkatkan keupayaan untuk menyimpan pertanyaan media ke dalam pembolehubah. <code>postcss-custom-media</code> <code>postcss-media-minmax</code> Sintaks sangat mirip dengan pemilih tersuai. Berikut adalah contoh mudah: </p> <h3> </h3> dikumpulkan kepada: <st><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.article { color: #333; &amp;amp;amp;.popular { background: #DDD; } &amp;amp;amp; .title { font-weight: bold; } }</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <p> Sudah tentu, anda boleh menggunakan pelbagai pertanyaan media tersuai sekaligus: </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.article { color: #333 } .article.popular { background: #DDD } .article .title { font-weight: bold }</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <p> akan menjana: </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.article { color: #333; /* no nested-selector */ .popular { background: #DDD; } /* the nested selector is not the fist selector in the chain */ .latest &amp;amp;amp;amp; { border: 1px solid red; } }</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <p> seperti yang anda lihat, kini lebih mudah untuk menukar definisi "medium viewport" dan cari kod CSS yang relevan. </p> <h3 id="sintaks-minimum-dan-maksimum"> sintaks minimum dan maksimum </h3> <p> Walaupun pertanyaan media adalah perkara yang hebat, tatabahasa minimum dan maksimum telah menerima banyak kritikan dari masyarakat. W3C bertindak balas dengan memperkenalkan sintaks yang lebih intuitif menggunakan pengendali perbandingan. <code>postcss-media-minmax</code> Plugin Menambah sokongan untuk <code>></code>, <code>>=</code>, <code><</code>, <code><=</code>, </p>. <p> </p> (selebihnya artikel telah ditinggalkan kerana panjang artikel, tetapi pautan imej tetap tidak berubah)

Atas ialah kandungan terperinci Panduan Postcss untuk Meningkatkan Pemilih dan Pertanyaan Media. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!