Fungsi warna tanpa komando di CSS

CSS ushers dalam penambahbaikan sintaks: tiada fungsi warna koma. Tweet Adam Argyle dan Mathias Bynes mencetuskan perbincangan yang dipanaskan, dan kemas kini ini meningkatkan kebolehbacaan kod CSS. Pada masa lalu, setiap fungsi warna memerlukan dua bentuk (dengan ketelusan dan tanpa ketelusan), dan sintaks baru menghapuskan redundansi ini dan menjadikannya lebih selaras dengan spesifikasi sintaks CSS keseluruhan.

Mari lihat perbandingan blok kod dalam tweet Mathias:

 <code>/* 旧语法*/ rgb(0, 128, 255) rgba(0, 128, 255, 0.5) hsl(198, 38% 50%) hsla(198, 28%, 50%, 0.5)</code>

 <code>/* 新语法*/ rgb(0 128 255) rgb(0 128 255 / 50%) hsl(198deg 28% 50%) hsl(198deg 28% 50% / 50%) lab(56.29% -10.93 16.58 / 50%) lch(56.29% 19.86 236.62 / 50%) color(sRGB 0 0.50 1 / 50%)</code>

Beberapa pemikiran:

• Sokongan penyemak imbas adalah baik, dan IE 11 hanya tidak menyokongnya.
• Jika anda perlu bersesuaian dengan IE 11, anda boleh menggunakan preprocessor (atau tidak menggunakan sintaks baru). Kedua-dua preset-env dan plugin postcss-color-rgb PostCSS boleh melaksanakan penukaran (anehnya, postcss-color-rgb tidak menyokong HSL).
• Walaupun anda tidak menyukainya, anda boleh memilih untuk tidak menggunakan sintaks baru. Tidak mungkin pengeluar penyemak imbas tidak akan menyokong ciri penting ini.
• Alasan penghijrahan ialah memori otot baru, gaya kod yang konsisten, dan fungsi warna baru (seperti makmal, LCH, dan warna) hanya menyokong sintaks baru.
• Terdapat penggunaan sintaks baru dan lama. Sebagai contoh, rgb(255, 0, 0, 0.5) masih sah.
• Sokongan SASS adalah rumit dan memerlukan beberapa penyelesaian. SASS harus menyokong sintaks baru secepat mungkin. Jika ia tidak dapat disokong, ini akan menjadi faktor yang menghalang pemaju menggunakan SASS.
• Prettier (alat pemformatan kod) boleh melakukan penukaran sintaks, tetapi ia tidak akan dilakukan pada masa ini (strategi Prettier bukan untuk mengubahsuai AST).
• Alat pemaju dijangka mula memaparkan warna dalam format ini, yang akan memacu penggunaan sintaks baru.
• Ingat, kod warna heksadesimal juga mempunyai format baru.

Atas ialah kandungan terperinci Fungsi warna tanpa komando di CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!