Walaupun anda tidak kelihatan, kecerunan CSS menjadi lebih baik

Penambahbaikan kepada kecerunan CSS: Sintaks kedudukan berganda memudahkan jalur kecerunan

Terdapat satu dalam senarai fungsi polyfill-gradient () Polyfill Lea Verou yang menarik perhatian saya:

Menyokong sintaks kedudukan dua (titik berhenti warna yang sama menggunakan dua kedudukan sebagai pintasan untuk dua titik berhenti warna berturut -turut dengan warna yang sama)

Yang menghairankan, saya baru-baru ini mendapati bahawa kebanyakan orang tidak tahu bahawa sintaks dua kedudukan titik kecerunan sebenarnya wujud dalam spesifikasi, jadi saya memutuskan untuk menulis artikel mengenainya.

Menurut spesifikasi:

Menentukan dua kedudukan menjadikannya lebih mudah untuk mencipta "jalur" warna pepejal dalam kecerunan tanpa perlu mengulangi warna dua kali.

Saya benar -benar bersetuju bahawa ini adalah perkara pertama yang datang ke fikiran apabila saya memahami ciri ini.

Katakan kami ingin mendapatkan hasil berikut: kecerunan dengan banyak jalur menegak lebar yang sama (saya mendapatnya dari jawatan sebelumnya Chris):

Nilai hexadecimal adalah: #5461C8, #C724B1, #E4002B, #FF6900, #F6BE00, #97D700, #00AB84, dan #00A3E0.

Mari kita lihat bagaimana untuk mencapai ini menggunakan CSS tanpa menggunakan kedudukan titik dua hentian!

Kami mempunyai lapan jalur, masing-masing menyumbang satu kelapan daripada lebar kecerunan. Satu kelapan daripada 100% adalah 12.5%, jadi kami beralih dari satu jalur ke seterusnya pada gandaan nilai itu.

Ini bermakna bahawa gradien linear kami () kelihatan seperti ini:

 <code>linear-gradient(90deg, #5461c8 12.5% /* 1*12.5% */, #c724b1 0, #c724b1 25% /* 2*12.5% */, #e4002b 0, #e4002b 37.5% /* 3*12.5% */, #ff6900 0, #ff6900 50% /* 4*12.5% */, #f6be00 0, #f6be00 62.5% /* 5*12.5% */, #97d700 0, #97d700 75% /* 6*12.5% */, #00ab84 0, #00ab84 87.5% /* 7*12.5% */, #00a3e0 0)</code>

Perhatikan bahawa kita tidak perlu mengulangi nilai peratusan kedudukan berhenti, kerana kita secara automatik membuat peralihan tajam apabila kedudukan berhenti lebih kecil daripada kedudukan sebelumnya. Inilah sebabnya mengapa ia sentiasa boleh menggunakan 0 (ia sentiasa kurang daripada nilai positif) dan menggunakan #C724B1 25%, #E4002B 0 bukannya #C724B1 25%, #E4002B 25%, sebagai contoh. Jika kita memutuskan untuk menambah dua jalur dan menetapkan kedudukan berhenti kepada pelbagai 10%, ini dapat menjadikan kehidupan kita lebih mudah di masa depan.

Tidak buruk, terutamanya berbanding dengan kod yang penjana kecerunan biasanya menjana. Walau bagaimanapun, jika kita memutuskan bahawa salah satu jalur di tengah tidak sepadan dengan jalur lain, mengubahnya menjadi sesuatu yang lain bermakna ia perlu dikemas kini di dua tempat.

Sekali lagi, ini bukan masalah besar, kita dapat menyelesaikannya tanpa bantuan preprocessor:

 <code>$c: #5461c8 #c724b1 #e4002b #ff6900 #f6be00 #97d700 #00ab84 #00a3e0; @function get-stops($c-list) { $s-list: (); $n: length($c-list); $u: 100%/$n; @for $i from 1 to $n { $s-list: $s-list, nth($c-list, $i) $i*$u, nth($c-list, $i 1) 0 } @return $s-list } .strip { background: linear-gradient(90deg, get-stops($c))) }</code>

Ini akan menghasilkan kecerunan CSS yang tepat yang kita lihat sebelum ini, dan sekarang kita tidak perlu mengubahnya di dua tempat lagi.

Demo Codepen

Tetapi walaupun preprocessor menghalang kita daripada menaip perkara yang sama dua kali, ia tidak akan menghapuskan pertindihan dalam kod yang dihasilkan.

Dan kita mungkin tidak selalu mahu menggunakan preprocessors. Mengetepikan hakikat bahawa sesetengah orang degil atau mempunyai ketakutan atau kebencian yang tidak rasional terhadap preprocessors, kadang -kadang menggunakan gelung terasa sedikit bodoh.

Sebagai contoh, apabila kita hampir tidak mempunyai gelung! Katakan kita ingin mendapatkan corak latar belakang yang lebih mudah, seperti corak hash pepenjuru, yang saya fikir lebih biasa daripada corak pelangi yang lebih tinggi, yang mungkin tidak sesuai untuk kebanyakan laman web sama sekali.

Ini memerlukan penggunaan berulang-linear-gradien (), yang bermaksud bahawa walaupun kita tidak mempunyai senarai nilai heksadesimal yang sangat panjang seperti yang kita lakukan sebelum ini, ia memerlukan beberapa pertindihan:

 <code>repeating-linear-gradient(-45deg, #ccc /* can't skip this, repeating gradient won't work */, #ccc 2px, transparent 0, transparent 9px /* can't skip this either, tells where gradient repetition starts */)</code>

Di sini kita tidak dapat membuang titik berhenti pertama dan terakhir, kerana ini adalah apa yang menunjukkan bagaimana kecerunan berulang dalam segi empat tepat yang ditakrifkan oleh saiz latar belakang.

Jika anda ingin memahami mengapa lebih baik menggunakan gradien berulang-linier () bukannya gradien linear biasa () yang digabungkan dengan saiz latar belakang yang sesuai untuk membuat hash tersebut, lihat satu lagi jawatan yang saya tulis sebelum ini.

Di sinilah ciri ini dimainkan - ia membolehkan kita mengelakkan pertindihan dalam kod CSS akhir.

Untuk kes jalur pelangi, CSS kami menjadi:

 <code>linear-gradient(90deg, #5461c8 12.5%, #c724b1 0 25%, #e4002b 0 37.5%, #ff6900 0 50%, #f6be00 0 62.5%, #97d700 0 75%, #00ab84 0 87.5%, #00a3e0 0)</code>

Untuk mencipta hash, kita hanya perlu:

 <code>repeating-linear-gradient(-45deg, #ccc 0 2px, transparent 0 9px)</code>

Demo Codepen

Bagaimana keadaan sokongan? Sangat baik, anda bertanya dengan betul! Ia sebenarnya sangat bagus! Ia berfungsi dengan Safari, pelayar Chromium (Edge kini disertakan!) Dan Firefox. Kelebihan pra-Kromium dan beberapa pelayar mudah alih mungkin masih dalam cara yang anda boleh, tetapi jika anda tidak perlu bimbang tentang menyediakan sokongan untuk semua pelayar, atau menyediakan penyelesaian sandaran adalah OK, maka anda boleh mula menggunakannya!

Atas ialah kandungan terperinci Walaupun anda tidak kelihatan, kecerunan CSS menjadi lebih baik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!