Membolehkan Ciri CSS yang akan datang dengan PostCSS

yang diwarisi dalam artikel sebelumnya "Panduan Postcss: Pemilih dan pertanyaan media yang lebih baik", artikel ini akan meneroka lebih banyak plug-in PostCSS yang memanjangkan fungsi CSS. Artikel sebelumnya memberi tumpuan kepada peningkatan struktur helaian gaya dengan memperluaskan pemilih dan pertanyaan media, sementara artikel ini akan memberi tumpuan kepada cara melaksanakan sifat dan nilai baru dalam spesifikasi yang akan datang. Plugin yang diterangkan dalam artikel ini melaksanakan fungsi yang berbeza yang boleh digunakan dengan berkesan atau secara individu mengikut keperluan anda.

mari kita mulakan dengan plugin kegemaran saya.

mata utama

Plug-in PostCSS boleh digunakan untuk melaksanakan sifat dan nilai baru dalam spesifikasi CSS yang akan datang, dengan berkesan memperluaskan fungsi CSS. Plugin ini boleh digunakan bersama atau secara individu mengikut keperluan pemaju.
PostCSS membolehkan pemaju menggunakan ciri CSS masa depan sebelum pelayar dilaksanakan secara rasmi. Plugin
• menambah sokongan untuk nilai postcss-initial dan initial gabungan, dan plugin all: initial secara automatik menetapkan semula gaya unsur-unsur tahap blok dan komponen. postcss-autoreset Plugin
• melaksanakan fungsi postcss-color-function baru yang membolehkan pemaju menggunakan satu atau lebih "pelaras warna" berfungsi untuk mengubahsuai warna yang mendasari. Plugin color() melaksanakan fungsi postcss-color-hwb baru untuk menentukan warna HWB; hwb() postcss-color-gray PostCSS menyediakan peluang yang menjanjikan untuk mengadopsi dan menilai ciri -ciri CSS baru awal. Pemaju dinasihatkan untuk menulis helaian gaya dari perspektif yang sama sekali baru dan menyenaraikan ciri -ciri yang boleh meningkatkan produktiviti. gray()
• Pilih tetapan semula ke peringkat seterusnya

CSS3 memperkenalkan dua ciri yang bagus:

nilai dan

atribut. Nilai

digunakan dengan nilai initial dan all, yang membolehkan anda menetapkan semula harta kepada nilai asalnya. Atribut initial digunakan sebagai atribut singkat, yang menetapkan semula semua atribut ke salah satu daripada tiga negeri ini. Walaupun kedua -duanya menarik dalam diri mereka, apabila digunakan bersama, mereka membolehkan anda dengan cepat menetapkan semula semua gaya elemen tertentu dan menghalangnya daripada mewarisi gaya elemen ibu bapa halaman. Ini adalah satu lagi langkah dalam menulis CSS modular! inherit unset Malangnya, iaitu masih tidak menyokong kedua -dua fungsi ini. Walau bagaimanapun, seperti yang anda fikirkan, terdapat plugin yang menyelesaikan masalah ini. all

Menambah sokongan untuk

nilai dan

kombinasi. Inilah cara ia berfungsi: postcss-initial initial all: initial dikumpulkan kepada:

.article {
  font-size: initial;
  color: initial;
  padding: initial;
  margin: initial;
}

Secara lalai, ia mengekalkan sifat asal serta

untuk digunakan oleh pelayar asli yang menyokong ciri ini.

.article {
  font-size: medium;
  font-size: initial;
  color: #000;
  color: initial;
  padding: 0;
  padding: initial;
  margin: 0;
  margin: initial;
}

Pada gilirannya, atribut

akan ditukar kepada senarai panjang atribut semula. initial

akan ditukar kepada: all

.container {
  all: initial;
}

(demi ruang, kod lanjutan selepas

telah ditinggalkan)

Jika anda menggunakan bem atau saman, plugin ini berfungsi dengan baik dengan postcss-autoreset, yang secara automatik akan menetapkan semula gaya blok dan unsur tahap komponen.

Atribut Custom

Apabila bekerja dengan susun atur, kita sering perlu berkongsi beberapa nilai dalam lembaran styleshe. Sebagai contoh, warna jenama anda boleh digunakan sebagai latar belakang untuk butang, warna teks untuk pautan, atau sempadan untuk blok teks. Pada masa ini, untuk mencapai matlamat ini, kita perlu mengulanginya beberapa kali setiap tempat di mana warna digunakan. Pengulangan ini menjadikannya rumit untuk memastikan palet konsisten apabila menukar warna dalam aplikasi.

preprocessors CSS seperti Less dan Sass telah menyelesaikan masalah ini dengan pembolehubah. Nasib baik, W3C sedang mengusahakan konsep serupa yang disebut Custom Properties. Walaupun masalah yang sama diselesaikan, mereka bekerja secara berbeza daripada pembolehubah dalam preprocessor. Pembolehubah kurang dan sass dihuraikan pada masa penyusunan. Apabila anda menyusun kurang atau sass ke CSS, pengkompil mencari pengisytiharan berubah -ubah yang sepadan dengan julat kompilasi semasa dan menggantikan setiap contoh dengan nilai yang sepadan. Ini bermakna bahawa nilai parsed pembolehubah bergantung sepenuhnya di mana ia digunakan dalam kod. Sifat tersuai, pada gilirannya, ditakrifkan untuk unsur -unsur di DOM dan hanya boleh diakses oleh elemen anak mereka. Ini bermakna bahawa nilai pembolehubah bergantung kepada kedudukan elemen dalam DOM dan hanya boleh dihuraikan pada masa runtime.

Anda harus mengerutkan dahi atau menaikkan kening anda setakat ini. Jika nilai pembolehubah hanya diketahui pada masa runtime, bagaimanakah plugin PostCSS menghuraikannya? Sebenarnya, ia tidak boleh. Walau bagaimanapun, ia menyediakan cara untuk menggunakan subset fungsi itu. Jika kita menentukan semua sifat tersuai dalam elemen :root, sifat -sifat ini akan tersedia untuk semua elemen pada halaman. Ini bermakna kita boleh menghuraikannya pada masa penyusunan.

Berikut adalah contoh mudah dari apa yang mungkin kelihatan seperti:

.article {
  font-size: initial;
  color: initial;
  padding: initial;
  margin: initial;
}

akan disusun kepada:

.article {
  font-size: medium;
  font-size: initial;
  color: #000;
  color: initial;
  padding: 0;
  padding: initial;
  margin: 0;
  margin: initial;
}

Perhatikan bahawa pembolehubah --font-size tidak ditentukan, jadi ia digantikan dengan nilai sandaran 20px. Adalah penting di sini untuk memastikan semua sifat tersuai dalam :root. Ciri -ciri yang ditakrifkan di tempat lain akan diabaikan kerana plugin tidak dapat mengendalikannya secukupnya. Anda boleh bermula di sini dan anda boleh melanjutkan penggunaannya apabila lebih banyak pelayar mula menyokongnya. Chrome telah menyokong mereka sejak versi 49.

sifat logik

Jika anda pernah membangunkan laman web antarabangsa yang merangkumi budaya arah penulisan yang berbeza, anda akan tahu apa yang diperlukan untuk mengekalkan pelbagai versi antara muka (seperti kiri ke kanan atau kanan ke kiri). Untuk memenuhi keperluan ini, W3C memperkenalkan konsep baru atribut logik. Cara untuk memikirkan arah fizikal (seperti kanan atau kiri), melainkan arah logik -mulakan dan akhir. Spesifikasi masih sedang berjalan, tetapi anda sudah boleh mencuba beberapa dengan plugin postcss-logical-props.

Ia menyokong penjanaan versi laman web kiri-ke-kanan dan kanan-ke-kiri menggunakan sifat-sifat logik tertentu seperti border-block-start dan border-block-end, offset-block-start dan offset-block-end. Ciri -ciri ini disusun ke dalam alternatif kiri atau kanan mereka. Anda boleh mengarahkan plugin untuk menyusun versi LTR dan RTL dari lembaran styleshe dan kemudian menukarnya dalam aplikasi apabila pengguna mengubah bahasa.

Contohnya, jika anda mempunyai CSS berikut:

.article {
  font-size: initial;
  color: initial;
  padding: initial;
  margin: initial;
}

memanggil plugin dengan pilihan

akan menghasilkan hasil berikut: { dir: 'LTR' }

.article {
  font-size: medium;
  font-size: initial;
  color: #000;
  color: initial;
  padding: 0;
  padding: initial;
  margin: 0;
  margin: initial;
}

semasa menggunakan

akan memberikan anda imej cermin: { dir: 'RTL' }

.container {
  all: initial;
}

Fungsi Warna Baru

PostCSS menyediakan set lengkap plugin yang menyediakan ciri -ciri baru untuk mengendalikan warna.

Pelarasan Warna

Plugin

melaksanakan fungsi postcss-color-function baru. Fungsi ini membolehkan anda menggunakan satu atau lebih fungsi "pelaras warna" untuk mengubahsuai warna yang mendasari. Setiap pelaras warna boleh memanipulasi warna dengan cara tertentu. color()

Berikut adalah beberapa contoh cara menggunakannya:

.container {
  /*  此处省略大量重置属性  */
  all: initial;
}

akan disusun dengan warna berikut:

Senarai lengkap penyesuaian warna boleh didapati dalam spesifikasi

:root {
  --text-color: red;
  --background: blue;
}

h1 {
  color: var(--text-color);
  font-size: var(--font-size, 20px);
}
button {
  background-color: var(--background);
}

. Plugin ini boleh digunakan dengan sangat cekap dengan sifat tersuai. Anda boleh menentukan satu set warna asas dan mengira warna lain berdasarkannya. Dengan cara ini, jika anda memutuskan untuk menukar warna asas, selebihnya palet akan dikemas kini dengan sewajarnya.

notasi warna HWB

HWB bermaksud warna hitam-putih, yang merupakan cara alternatif untuk menentukan warna. Ia menggunakan nilai warna dari 0 hingga 360 untuk menggambarkan warna, dan kemudian menambah 0% hingga 100% keputihan dan kegelapan. Notasi ini serupa dengan HSL dan lebih mudah difahami daripada RGB. Plugin

melaksanakan fungsi postcss-color-hwb baru untuk menentukan warna HWB. Beberapa contoh: hwb()

warna berikut akan dihasilkan:

h1 {
  color: red;
  font-size: 20px;
}
button {
  background-color: blue;
}

kelabu () fungsi

.text {
  border-block-start: 1px solid blue;
  text-align: start;
  padding-block-end: 10px;
  margin-block-start: 20px;
}

Modul warna CSS

juga memperkenalkan fungsi

yang mudah. Ia boleh digunakan untuk menjana kelabu tanpa menentukan apa -apa maklumat yang berlebihan, seperti ketiga -tiga saluran dalam warna RGB.

Plugin melaksanakan polyfill fungsi ini dan sangat mudah digunakan: gray() postcss-color-gray

Kod di atas akan menjana kelabu warna yang berbeza:

.text {
  border-left: 1px solid blue;
  text-align: left;
  padding-right: 10px;
  margin-left: 20px;
}

Ringkasan

.text {
  border-right: 1px solid blue;
  text-align: right;
  padding-left: 10px;
  margin-right: 20px;
}

Ini bukan senarai lengkap semua plugin CSS yang tersedia, tetapi hanya pilihan beberapa plugin yang lebih menarik. Anda boleh meneroka lebih banyak plugin pada postcss.parts.

CSS sedang berkembang pesat, dan postcss berkembang pesat. Ya, kita semua sabar menunggu sokongan asli untuk ciri -ciri baru ini oleh pelayar, tetapi PostCSS memberikan kita peluang yang menjanjikan untuk mengadopsi dan menilai ciri -ciri ini lebih awal. Nasihat keseluruhan di sini adalah untuk cuba melangkah mundur dari penggunaan preprocessors yang biasa dan melihat penulisan stylesheets dari perspektif baru. Cuba untuk menyenaraikan ciri -ciri yang ada yang boleh meningkatkan produktiviti anda dan gunakannya dalam aliran kerja anda. Anda tidak lama lagi akan menyedari bahawa ini adalah ciri -ciri yang anda hilang.

soalan yang sering ditanya mengenai membolehkan ciri CSS yang akan datang dengan PostCSS

(bahagian FAQ ditinggalkan di sini kerana artikel itu terlalu panjang dan tidak sepadan dengan matlamat asal pseudo. Bahagian FAQ boleh disusun semula dan ditulis semula seperti yang diperlukan, tetapi niat asal tetap tidak berubah.)

Atas ialah kandungan terperinci Membolehkan Ciri CSS yang akan datang dengan PostCSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!