Teknik Raven: Satu langkah lebih dekat dengan pertanyaan kontena

Petua Crow untuk pertanyaan kontena CSS: lebih dekat dengan pertanyaan kontena

Kami menekankan semula: pertanyaan kontena diperlukan dalam CSS! Nampaknya kita menuju ke arah ini.

Apabila membina komponen laman web, anda tidak selalu tahu bagaimana komponen akan digunakan. Ia mungkin selebar tetingkap penyemak imbas. Mungkin dua komponen diletakkan bersebelahan. Mungkin ia berada dalam lajur sempit. Lebar komponen tidak selalu berkaitan dengan lebar tetingkap penyemak imbas.

Biasanya, anda akan mendapati ia sangat mudah untuk meminta menggunakan komponen CSS berasaskan kontena. Jika anda mencari penyelesaian dalam talian, anda mungkin dapati beberapa penyelesaian berasaskan JavaScript. Tetapi penyelesaian ini datang pada kos: ketergantungan tambahan, gaya yang diperlukan JavaScript, dan logik aplikasi dan logik reka bentuk yang tercemar.

Saya yakin dengan pemisahan kebimbangan, dan susun atur adalah tumpuan CSS. Sebagai contoh, sementara API IntersectionObserver adalah baik, saya ingin mempunyai sesuatu seperti :in-viewport dalam CSS! Oleh itu, saya terus mencari penyelesaian CSS sahaja dan mendapati "Flexbox Holy Albatross" Heydon Pickering. Ini adalah penyelesaian yang baik untuk lajur, tetapi saya mahukan lebih banyak. Albatross yang asal mempunyai beberapa penambahbaikan (seperti "Albatross yang tidak terhingga"), tetapi mereka masih sedikit kekok, dan segala yang berlaku hanyalah suis berturut-turut.

Saya masih mahukan lebih banyak! Saya mahu lebih dekat dengan pertanyaan kontena sebenar! Jadi, apa yang disediakan oleh CSS yang boleh saya gunakan? Saya mempunyai latar belakang matematik, jadi fungsi seperti calc() , min() , max() dan clamp() adalah perkara yang saya suka dan faham.

Seterusnya: Gunakannya untuk membina penyelesaian pertanyaan seperti kontena.

Jadual Kandungan:

1. Mengapa "Crow"?
2. Fungsi matematik dalam CSS
3. Langkah 1: Buat pemboleh ubah konfigurasi
4. Langkah 2: Buat pembolehubah penunjuk
5. Langkah 3: Gunakan pembolehubah penunjuk untuk memilih nilai selang
6. Langkah 4: Gunakan min() dan integer besar untuk memilih nilai panjang apa pun
7. Langkah 5: Letakkan semuanya bersama
8. yang lain?
9. Di mana ketinggiannya?
10. Bagaimana dengan menunjukkan dan menyembunyikan kandungan?
11. Mata utama
12. Kandungan tambahan
13. Pemikiran terakhir

Ingin melihat apa yang boleh dicapai sebelum terus membaca? Ini adalah koleksi codepen yang menunjukkan idea -idea yang dibincangkan dalam artikel ini dapat dicapai.

Mengapa "Crow"?

Kerja ini diilhamkan oleh Heydon's Albatross, tetapi teknik itu boleh melakukan lebih banyak helah, jadi saya memilih seekor burung gagak kerana gagak adalah burung yang sangat pintar.

Ulasan: Fungsi Matematik di CSS

Fungsi calc() membolehkan operasi matematik dalam CSS. Di samping itu, unit boleh digabungkan, jadi operasi seperti calc(100vw - 300px) mungkin.

Fungsi min() dan max() mengambil dua atau lebih parameter dan mengembalikan parameter minimum atau maksimum (masing -masing).

Fungsi clamp() sangat berguna, ia sama dengan gabungan min() dan max() . clamp(a, x, b) akan kembali:

• Sekiranya x kurang daripada a, kembalikan a
• Sekiranya x lebih besar daripada b, kembalikan b
• Sekiranya x adalah antara a dan b, maka x dikembalikan

Jadi ia seperti clamp(最小值, 相对值, 最大值) . Ia boleh dianggap sebagai singkatan min(max(a,x),b) . Jika anda ingin mengetahui lebih lanjut, inilah maklumat lanjut mengenai perkara ini.

Kami juga akan menggunakan alat CSS yang lain secara meluas dalam artikel ini: CSS Custom Properties. Ini seperti --color: red; atau --distance: 20px; Ia pada dasarnya adalah pemboleh ubah. Kami akan menggunakannya untuk menjadikan CSS lebih ringkas, seperti mengelakkan pertindihan yang berlebihan terhadap diri kita sendiri.

Mari mula menggunakan helah gagak ini.

Langkah 1: Buat pemboleh ubah konfigurasi

Mari buat beberapa sifat tersuai CSS untuk ditetapkan.

Apakah saiz asas yang kita mahu pertanyaan berdasarkan? Oleh kerana kita sedang mencari tingkah laku pertanyaan kontena, ini akan menjadi 100% - menggunakan 100VW akan membuatnya berkelakuan seperti pertanyaan media, kerana itulah lebar tetingkap penyemak imbas, bukan bekas!

 <code>--base_size: 100%;</code>

Sekarang mari kita pertimbangkan titik putus. Secara harfiah bermakna lebar kontena, kami mahu memecah di sini untuk menggunakan gaya baru.

 <code>--breakpoint_wide: 1500px; /* 大于1500px 将被视为宽*/ --breakpoint_medium: 800px; /* 从801px 到1500px 将被视为中等*/ /* 小于或等于800px 将被视为小*/</code>

Dalam contoh yang berjalan, kami akan menggunakan tiga selang, tetapi teknik ini tidak mempunyai batasan.

Sekarang mari kita tentukan beberapa nilai (panjang CSS) yang kita mahu kembali untuk selang waktu yang kita tentukan untuk titik putus. Ini adalah nilai literal:

 <code>--length_4_small: calc((100% / 1) - 10px); /* 根据你的需求更改*/ --length_4_medium: calc((100% / 2) - 10px); /* 根据你的需求更改*/ --length_4_wide: calc((100% / 3) - 10px); /* 根据你的需求更改*/</code>

Ini adalah konfigurasi. Mari gunakannya!

Langkah 2: Buat pembolehubah penunjuk

Kami akan membuat beberapa pembolehubah penunjuk untuk selang waktu. Mereka agak seperti boolean, tetapi dengan unit panjang (0px dan 1px). Jika kita mengehadkan panjang ini sebagai nilai minimum dan maksimum, mereka bertindak sebagai penunjuk "benar" dan "palsu".

Jadi, jika dan hanya jika - -base_size lebih besar daripada --breakpoint_wide, kami mahu pembolehubah dengan nilai 1px. Jika tidak, kami mahu 0px. Ini boleh dilakukan dengan menggunakan clamp() :

 <code>--is_wide: clamp(0px, var(--base_size) - var(--breakpoint_wide), 1px );</code>

Jika var(--base_size) - var(--breakpoint_wide) adalah negatif, maka--base_size kurang daripada --breakpoint_wide, jadi clamp() akan mengembalikan 0px dalam kes ini.

Sebaliknya, jika -base_size lebih besar daripada --breakpoint_wide, pengiraan akan memberikan panjang positif yang lebih besar daripada atau sama dengan 1px. Ini bermakna clamp() akan kembali 1px.

Bingo! Kami mendapat pembolehubah penunjuk "lebar".

Mari buat ini untuk selang "sederhana":

 <code>--is_medium: clamp(0px, var(--base_size) - var(--breakpoint_medium), 1px ); /* 不要使用，见下文！ */</code>

Ini akan memberikan 0px untuk selang sel, tetapi 1px untuk selang sederhana dan luas. Walau bagaimanapun, apa yang kita mahukan adalah selang 0px dan selang sederhana hanya 1px.

Kita boleh menyelesaikan masalah ini dengan menolak nilai --is_wide. Dalam selang yang luas, 1px - 1px adalah 0px; Dalam selang sederhana, 1px - 0px adalah 1px; Untuk selang kecil, 0px - 0px memberikan 0px. Sempurna.

Jadi kita dapat:

 <code>--is_medium: calc( clamp(0px, var(--base_size) - var(--breakpoint_medium), 1px) - var(--is_wide) );</code>

Adakah anda faham? Untuk mengira pembolehubah penunjuk, gunakan clamp() dengan 0px dan 1px sebagai sempadan dan perbezaan antara - -base_width dan --breakpoint_whatever sebagai nilai mengehadkan. Kemudian tolak jumlah semua penunjuk selang yang lebih besar. Untuk penunjuk selang minimum, logik ini menghasilkan hasil berikut:

 <code>--is_small: calc( clamp(0px, (var(--base_size) - 0px, 1px) - (var(--is_medium) var(--is_wide)) );</code>

Kita boleh melangkau clamp() di sini kerana titik putus antara sel adalah 0px dan - -base_size adalah positif, jadi -base_size -0px sentiasa lebih besar daripada 1px, clamp() akan sentiasa kembali 1px. Oleh itu, pengiraan --is_small boleh dipermudahkan untuk:

 <code>--is_small: calc(1px - (var(--is_medium) var(--is_wide)));</code>

Langkah 3: Gunakan pembolehubah penunjuk untuk memilih nilai selang

Sekarang kita perlu bergerak dari "pembolehubah penunjuk" ini kepada sesuatu yang berguna. Mari kita anggap kita menggunakan susun atur berasaskan piksel. Jangan risau, kami akan berurusan dengan unit lain kemudian.

Ini adalah masalah. Apa ini pulangan?

 <code>calc(var(--is_small) * 100);</code>

Jika --is_small adalah 1px, ia akan mengembalikan 100px; jika --is_small adalah 0px, ia akan kembali 0px.

Apa gunanya ini? Lihat ini:

 <code>calc( (var(--is_small) * 100) (var(--is_medium) * 200) );</code>

Ini akan mengembalikan 100px 0px = 100px dalam selang sel (di mana --is_small adalah 1px dan --is_medium adalah 0px). Dalam selang sederhana (di mana --is_medium adalah 1px dan --is_small adalah 0px), ia akan mengembalikan 0px 200px = 200px.

Adakah anda faham? Lihat artikel Roman Komarov untuk melihat lebih mendalam tentang apa yang berlaku di sini, kerana ia sukar difahami.

Anda melipatgandakan nilai piksel (unit) oleh pembolehubah penunjuk yang sepadan dan menambah semua item ini bersama -sama. Jadi untuk susun atur berasaskan piksel, sesuatu seperti ini sudah cukup:

 <code>width: calc( (var(--is_small) * 100) (var(--is_medium) * 200) (var(--is_wide) * 500) );</code>

Tetapi kebanyakan masa, kami tidak mahu nilai berasaskan piksel. Kami mahu konsep seperti "lebar penuh" atau "lebar ketiga" atau bahkan unit lain seperti 2REM, 65ch, dan lain -lain. Untuk ini kita perlu meneruskan.

Langkah 4: Gunakan min() dan integer besar untuk memilih nilai panjang apa pun

Dalam langkah pertama, kita menentukan sesuatu seperti ini, bukannya nilai piksel statik:

 <code>--length_4_medium: calc((100% / 2) - 10px);</code>

Jadi bagaimana kita menggunakannya? Fungsi min() adalah untuk menyelamatkan!

Mari kita tentukan pemboleh ubah pembantu:

 <code>--very_big_int: 9999; /* 纯粹的无单位数字。必须大于其他地方出现的任何长度。 */</code>

Mengalikan nilai ini dengan pembolehubah penunjuk akan memberikan 0px atau 9999px. Berapa besar nilai ini bergantung kepada penyemak imbas anda. Chrome akan menerima 999999, tetapi Firefox tidak akan menerima sebilangan besar, jadi 9999 adalah nilai yang berfungsi dalam kedua -duanya. Terdapat hampir tidak ada pandangan yang lebih besar daripada 9999px di sekitar, jadi kita harus baik -baik saja.

Jadi apa yang berlaku apabila kita menggunakannya dengan sebarang nilai yang lebih kecil daripada 9999px tetapi lebih besar daripada 0px min() ?

 <code>min( var(--length_4_small), var(--is_small) * var(--very_big_int) );</code>

Ia mengembalikan 0px jika dan hanya jika --is_small adalah 0px. Jika --is_small adalah 1px, pendaraban akan kembali 9999px (lebih besar daripada -length_4_small), dan min akan kembali: --length_4_small.

Ini adalah bagaimana kita boleh memilih apa -apa panjang (iaitu kurang daripada 9999px tetapi lebih besar daripada 0px) berdasarkan pembolehubah penunjuk.

Jika anda berurusan dengan viewport yang lebih besar daripada 9999px, maka anda perlu menyesuaikan pembolehubah --very_big_int. Ini agak hodoh, tetapi kita boleh membetulkan ini sekali css tulen boleh mengeluarkan unit dalam nilai untuk menyingkirkan unit dalam pembolehubah penunjuk (dan secara langsung membiaknya dengan panjangnya). Pada masa ini, ini berfungsi.

Kami sekarang akan menggabungkan semua kepingan dan membiarkan burung gagak terbang!

Langkah 5: Letakkan semuanya bersama

Sekarang kita boleh mengira nilai berasaskan titik putus kami berdasarkan lebar kontena dinamik seperti ini:

 <code>--dyn_length: calc( min(var(--is_wide) * var(--very_big_int), var(--length_4_wide)) min(var(--is_medium) * var(--very_big_int), var(--length_4_medium)) min(var(--is_small) * var(--very_big_int), var(--length_4_small)) );</code>

Setiap baris adalah min() Dalam langkah 4. Semua baris menambah seperti dalam langkah 3, pembolehubah penunjuk datang dari langkah 2, semuanya berdasarkan konfigurasi yang kami lakukan dalam langkah 1 - mereka bekerja bersama dalam satu formula besar!

Mahu mencubanya? Ini adalah pen yang boleh digunakan (lihat komen di CSS).

Pen ini tidak menggunakan Flexbox, Grid, atau Float. Hanya beberapa div. Ini adalah untuk menunjukkan bahawa program tambahan tidak perlu dalam susun atur ini. Tetapi jangan ragu untuk menggunakan Crow dengan susun atur ini kerana ia akan membantu anda membuat susun atur yang lebih kompleks.

yang lain?

Setakat ini kami telah menggunakan nilai piksel tetap sebagai titik putus, tetapi adakah kami mahu menukar susun atur jika bekas lebih besar atau lebih kecil daripada separuh daripada viewport tolak 10px? Tiada masalah:

 <code>--breakpoint_wide: calc(50vw - 10px);</code>

Ini berfungsi! Formula lain juga dikenakan. Untuk mengelakkan tingkah laku yang pelik, kami mahu menggunakan sesuatu seperti:

 <code>--breakpoint_medium: min(var(--breakpoint_wide), 500px);</code>

... Tetapkan titik putus kedua pada lebar 500px. Pengiraan dalam langkah 2 bergantung kepada fakta bahawa --breakpoint_wide tidak kurang daripada --breakpoint_medium. Hanya simpan titik putus dalam urutan yang betul: min() dan/atau max() sangat berguna di sini!

Di mana ketinggiannya?

Semua penilaian pengiraan dilakukan ditangguhkan. Iaitu, apabila --dyn_length ditugaskan kepada mana -mana atribut, pengiraan akan berdasarkan hasil pengiraan -base_size dalam kedudukan ini. Oleh itu, jika -base_size adalah 100%, ketinggian tetapan akan berdasarkan 100%.

Saya tidak menemui cara untuk menetapkan ketinggian berdasarkan lebar kontena. Oleh itu, anda boleh menggunakan padding-top kerana 100% bersamaan dengan lebar untuk padding.

Bagaimana dengan menunjukkan dan menyembunyikan kandungan?

Cara paling mudah untuk menunjukkan dan menyembunyikan kandungan menggunakan Trick Crow adalah untuk menetapkan lebar ke 100px (atau lebar yang sesuai) pada pembolehubah penunjuk yang sesuai:

 <code>.show_if_small { width: calc(var(--is_small) * 100); } .show_if_medium { width: calc(var(--is_medium) * 100); } .show_if_wide { width: calc(var(--is_wide) * 100); }</code>

Anda perlu menetapkan:

 <code>overflow: hidden; display: inline-block; /* 避免难看的空行*/</code>

... atau cara lain untuk menyembunyikan kandungan dalam kotak dengan lebar 0px. Untuk menyembunyikan sepenuhnya kotak memerlukan menetapkan sifat model kotak lain (termasuk margin, mengisi, dan lebar sempadan) hingga 0px. Crow boleh melakukan ini pada sifat -sifat tertentu, tetapi menetapkannya ke 0px adalah sama berkesan.

Cara lain ialah menggunakan position: absolute; dan lukis elemen luar skrin melalui left: calc(var(--is_???) * 9999);

Mata utama

Kami mungkin tidak memerlukan JavaScript sama sekali, walaupun untuk tingkah laku pertanyaan kontena! Sudah tentu, kami berharap bahawa jika kita benar -benar mendapat pertanyaan kontena dalam sintaks CSS, ia akan lebih mudah digunakan dan difahami - tetapi ia juga sangat sejuk untuk dapat melaksanakan perkara -perkara ini di CSS hari ini.

Semasa berurusan dengan ini, saya mempunyai beberapa pemikiran tentang perkara -perkara lain yang boleh digunakan oleh CSS:

• Unit berasaskan kontena seperti CONW dan CONH digunakan untuk menetapkan ketinggian berdasarkan lebar. Unit -unit ini boleh didasarkan pada elemen akar konteks penyusunan semasa.
• Sesetengah jenis fungsi "penilaian sebagai nilai" untuk mengatasi masalah penilaian yang ditangguhkan. Ini akan berfungsi dengan baik dengan fungsi "Keluarkan Unit" yang berfungsi semasa rendering.

Nota: Dalam versi terdahulu, saya menggunakan CW dan CH sebagai unit, tetapi sesetengah orang menegaskan bahawa ini mudah dikelirukan dengan unit CSS dengan nama yang sama. Terima kasih kepada Mikko Tapionlinna dan Gilson Nunes Filho untuk petua dalam komen! )

Jika kita mempunyai yang kedua, ia akan membolehkan kita menetapkan warna (dengan cara yang bersih), sempadan, bayang-bayang kotak, tumbuh-tumbuhan flex, kedudukan latar belakang, z-indeks, skala () dan perkara lain menggunakan gagak.

Digabungkan dengan unit berasaskan komponen, juga mungkin untuk menetapkan saiz kanak-kanak kepada nisbah aspek yang sama seperti ibu bapa. Tidak boleh dibahagikan dengan nilai dengan unit; Jika tidak --indicator / 1px akan berfungsi sebagai "unit penyingkiran" gagak.

Kandungan Tambahan: Logik Boolean

Pembolehubah penunjuk kelihatan seperti boolean, bukan? Satu -satunya perbezaan ialah mereka mempunyai unit "PX". Jadi bagaimana dengan kombinasi logik ini? Bayangkan sesuatu seperti "bekas lebih besar daripada separuh lebar skrin" dan "susun atur dalam dua mod lajur". Fungsi CSS datang untuk menyelamatkan lagi!

Untuk pengendali atau, kita boleh menggunakan max() untuk semua petunjuk:

 <code>--a_OR_b: max( var(--indicator_a) , var(--indicator_b) );</code>

Untuk pengendali bukan, kita boleh tolak penunjuk dari 1px:

 <code>--NOT_a: calc(1px - var(--indicator_a));</code>

Pemurni logik mungkin berhenti di sini kerana dan (a, b) = tidak (atau (a, b)) adalah algebra boolean lengkap. Tetapi hei, hanya untuk bersenang -senang, inilah lagi:

Dan:

 <code>--a_AND_b: min(var(--indicator_a), var(--indicator_b));</code>

Ini akan menilai kepada 1px jika dan hanya jika kedua -dua penunjuk adalah 1px.

Perhatikan bahawa min() dan max() menerima lebih daripada dua parameter. Mereka masih bekerja sebagai dan dan dan (lebih daripada dua) pembolehubah penunjuk.

XOR:

 <code>--a_XOR_b: max( var(--indicator_a) - var(--indicator_b), var(--indicator_b) - var(--indicator_a) );</code>

Jika (dan hanya jika) kedua -dua penunjuk mempunyai nilai yang sama, kedua -dua perbezaan adalah 0px, max() akan mengembalikan nilai ini. Jika penunjuk mempunyai nilai yang berbeza, satu istilah akan memberi -1px dan yang lain akan memberikan 1px. Dalam kes ini, max() mengembalikan 1px.

Jika sesiapa yang berminat dalam situasi di mana dua petunjuk adalah sama, gunakan kaedah berikut:

 <code>--a_EQ_b: calc(1px - max( var(--indicator_a) - var(--indicator_b), var(--indicator_b) - var(--indicator_a) ) );</code>

Ya, ini bukan (A XOR B) . Saya tidak dapat mencari penyelesaian "lebih baik" untuk ini.

Kesamaan mungkin lebih menarik untuk pembolehubah panjang CSS umum daripada hanya untuk pembolehubah penunjuk. Ini mungkin membantu dengan menggunakan clamp() lagi:

 <code>--a_EQUALS_b_general: calc( 1px - clamp(0px, max( var(--var_a) - var(--var_b), var(--var_b) - var(--var_a) ), 1px) );</code>

Keluarkan unit PX untuk mendapatkan kesamaan umum pembolehubah tanpa unit (integral).

Saya fikir ini cukup logik Boolean untuk kebanyakan susun atur!

Kandungan Tambahan 2: Tetapkan bilangan lajur dalam susun atur grid

Oleh kerana Crow adalah terhad untuk mengembalikan nilai panjang CSS, ia tidak dapat secara langsung memilih bilangan lajur untuk grid (kerana ini adalah nilai tanpa unit). Tetapi ada cara untuk menjadikannya berfungsi (dengan mengandaikan kami mengisytiharkan pembolehubah penunjuk seperti di atas):

 <code>--number_of_cols_4_wide: 4; --number_of_cols_4_medium: 2; --number_of_cols_4_small: 1; --grid_gap: 0px; --grid_columns_width_4_wide: calc( (100% - (var(--number_of_cols_4_wide) - 1) * var(--grid_gap) ) / var(--number_of_cols_4_wide)); --grid_columns_width_4_medium: calc( (100% - (var(--number_of_cols_4_medium) - 1) * var(--grid_gap) ) / var(--number_of_cols_4_medium)); --grid_columns_width_4_small: calc( (100% - (var(--number_of_cols_4_small) - 1) * var(--grid_gap) ) / var(--number_of_cols_4_small)); --raven_grid_columns_width: calc( /* 使用乌鸦组合值*/ min(var(--is_wide) * var(--very_big_int),var(--grid_columns_width_4_wide)) min(var(--is_medium) * var(--very_big_int),var(--grid_columns_width_4_medium)) min(var(--is_small) * var(--very_big_int),var(--grid_columns_width_4_small)) );</code>

Dan sediakan grid anda menggunakan kaedah berikut:

 <code>.grid_container{ display: grid; grid-template-columns: repeat(auto-fit, var(--raven_grid_columns_width)); gap: var(--grid_gap) };</code>

Bagaimana kerja ini?

1. Tentukan bilangan lajur yang kami mahukan untuk setiap selang (baris 1, 2, 3)
2. Kirakan lebar lajur yang sempurna untuk setiap selang (baris 5, 6, 7). Apa yang berlaku di sini?

Pertama, kami mengira ruang yang ada untuk lajur. Ini adalah 100%, tolak ruang yang akan diambil oleh jurang. Untuk lajur N, terdapat (n-1) jurang. Kemudian bahagikan ruang ini dengan bilangan lajur yang kami mahukan. 3. Gunakan gagak untuk mengira lebar lajur yang betul untuk sebenar -base_size.

Dalam bekas grid, garis ini:

 <code>grid-template-columns: repeat(auto-fit, var(--raven_grid_columns_width));</code>

... dan kemudian pilih bilangan lajur agar sesuai dengan nilai yang disediakan oleh Crow (ini akan menghasilkan pembolehubah kami -number_of_cols 4 ??? Di atas).

Crow mungkin tidak dapat memberikan nombor lajur secara langsung, tetapi ia dapat memberikan panjang, membuat repeat dan autofit mengira nombor yang kami inginkan untuk kami.

Tetapi auto-fit melakukan perkara yang sama seperti minmax() , bukan? Tidak! Penyelesaian di atas tidak pernah memberikan tiga lajur (atau lima lajur), dan bilangan lajur tidak perlu meningkat dengan lebar bekas. Cuba tetapkan nilai berikut dalam pen ini untuk melihat burung gagak terbang dengan kelajuan penuh:

 <code>--number_of_cols_4_wide: 1; --number_of_cols_4_medium: 2; --number_of_cols_4_small: 4;</code>

Kandungan Tambahan 3: Gunakan linear-gradient() untuk menukar warna latar belakang

Ini sedikit lebih intensif otak. Crow adalah semua tentang nilai panjang, jadi bagaimana kita mendapat warna dari nilai -nilai ini? Nah, kecerunan linear berurusan dengan kedua -duanya pada masa yang sama. Mereka menentukan warna di kawasan tertentu yang ditakrifkan oleh nilai panjang. Mari kita bincangkan konsep ini dengan lebih terperinci sebelum memasukkan kod.

Untuk menyelesaikan bahagian kecerunan sebenar, teknik yang terkenal adalah untuk menggandakan titik berhenti warna, dengan berkesan menyebabkan bahagian kecerunan berlaku dalam 0px. Lihat kod ini untuk mengetahui cara melakukan ini:

 <code>background-image:linear-gradient( to right, red 0%, red 50%, blue 50%, blue 100% );</code>

Ini akan menjadikan latar belakang anda merah di sebelah kiri dan biru di sebelah kanan. Perhatikan parameter pertama "ke kanan". Ini bermakna nilai peratusan dinilai dari kiri ke tahap kanan.

Mengawal nilai 50% melalui pembolehubah Crow membolehkan anda memindahkan titik berhenti warna pada kehendak. Kami boleh menambah lebih banyak titik berhenti warna. Dalam contoh yang berjalan, kita memerlukan tiga warna, menghasilkan dua titik hentian warna dalaman (dua kali).

Tambahkan beberapa pembolehubah untuk titik dan warna berhenti warna, dan inilah yang kita dapat:

 <code>background-image: linear-gradient( to right, var(--color_small) 0px, var(--color_small) var(--first_lgbreak_value), var(--color_medium) var(--first_lgbreak_value), var(--color_medium) var(--second_lgbreak_value), var(--color_wide) var(--second_lgbreak_value), var(--color_wide) 100% );</code>

Tetapi bagaimana kita mengira nilai - -first_lgbreak_value dan ---field_lgbreak_value? Mari lihat.

Nilai pertama mengawal kedudukan color_small yang kelihatan. Dalam selang sel, ia mestilah 100%, dan dalam selang waktu lain ia harus 0px. Kami telah belajar bagaimana untuk melakukan ini dengan gagak. Pembolehubah kedua mengawal penglihatan color_medium. Untuk selang kecil, ia mestilah 100%; Untuk selang sederhana, ia mestilah 100%; Tetapi untuk selang yang luas, ia mestilah 0px. Jika lebar kontena berada dalam selang kecil atau sederhana, penunjuk yang sepadan mestilah 1px.

Oleh kerana kita boleh melakukan operasi logik Boolean pada penunjuk, ia adalah:

 <code>max(--is_small, --is_medium)</code>

... untuk mendapatkan penunjuk yang betul. Ini memberi:

 <code>--first_lgbreak_value: min(var(--is_small) * var(--very_big_int), 100%); --second_lgbreak_value: min( max(var(--is_small), var(--is_medium)) * var(--very_big_int), 100%);</code>

Meletakkan segala -galanya bersama menghasilkan kod CSS berikut yang mengubah warna latar belakang berdasarkan lebar (penunjuk selang dikira seperti yang ditunjukkan di atas):

 <code>--first_lgbreak_value: min( var(--is_small) * var(--very_big_int), 100%); --second_lgbreak_value: min( max(var(--is_small), var(--is_medium)) * var(--very_big_int), 100%); --color_wide: red;/* 根据你的需求更改*/ --color_medium: green;/* 根据你的需求更改*/ --color_small: lightblue;/* 根据你的需求更改*/ background-image: linear-gradient( to right, var(--color_small) 0px, var(--color_small) var(--first_lgbreak_value), var(--color_medium) var(--first_lgbreak_value), var(--color_medium) var(--second_lgbreak_value), var(--color_wide) var(--second_lgbreak_value), var(--color_wide) 100% );</code>

Ini adalah pen yang dapat melihat bagaimana ia berfungsi.

Kandungan Tambahan 4: Menghilangkan pembolehubah bersarang

Saya menghadapi masalah yang pelik apabila menggunakan Crow: terdapat bilangan pembolehubah bersarang yang boleh digunakan dalam calc() . Ini boleh menyebabkan beberapa masalah apabila menggunakan terlalu banyak titik putus. Setakat yang saya faham, batasan ini adalah untuk mengelakkan menyekat halaman apabila mengira gaya dan membolehkan pemeriksaan rujukan pekeliling yang lebih cepat.

Pada pendapat saya, sesuatu seperti "penilaian sebagai nilai" akan menjadi cara yang baik untuk mengatasi masalah ini. Walau bagaimanapun, had ini boleh menyebabkan anda sakit kepala apabila melanggar had CSS. Semoga masalah ini dapat diselesaikan pada masa akan datang.

Terdapat cara untuk mengira pembolehubah penunjuk untuk gagak tanpa menggunakan (kedalaman) pembolehubah bersarang. Mari lihat pengiraan asal nilai --is_medium:

 <code>--is_medium:calc( clamp(0px, var(--base_size) - var(--breakpoint_medium), 1px) - var(--is_wide) );</code>

Masalahnya berlaku di mana tolak --is_wide. Ini menyebabkan parser CSS menyisipkan definisi formula lengkap --is_wide. Pengiraan --is_small bahkan mempunyai lebih banyak rujukan seperti ini. (Definisi --is_wide akan disisipkan dua kali, kerana ia tersembunyi dalam definisi --is_medium dan digunakan secara langsung.)

Nasib baik, ada cara untuk mengira petunjuk tanpa merujuk petunjuk dengan titik putus yang lebih besar.

Penunjuk adalah benar jika dan hanya jika -base_size lebih besar daripada titik putus had bawah selang dan kurang daripada atau sama dengan titik putus had atas selang. Takrif ini memberikan kita kod berikut:

 <code>--is_medium: min( clamp(0px, var(--base_size) - var(--breakpoint_medium), 1px), clamp(0px, 1px var(--breakpoint_wide) - var(--base_size), 1px) );</code>

• min() digunakan sebagai logik dan pengendali
• clamp() adalah "--base_size lebih besar daripada --breakpoint_medium"
• clamp() bermaksud "-base_size kurang daripada atau sama dengan --breakpoint_wide."
• Menambah 1px akan beralih dari "kurang daripada" kepada "kurang daripada atau sama dengan ". Ini berfungsi kerana kami memproses nombor integer (piksel) (a

Pengiraan lengkap pembolehubah penunjuk boleh dilakukan dengan cara ini:

 <code>--is_wide: clamp(0px, var(--base_size) - var(--breakpoint_wide), 1px); --is_medium: min(clamp(0px, var(--base_size) - var(--breakpoint_medium), 1px), clamp(0px, 1px var(--breakpoint_wide) - var(--base_size), 1px) ); --is_small: clamp(0px,1px var(--breakpoint_medium) - var(--base_size), 1px);</code>

--is_wide dan --is_small lebih mudah untuk dikira, kerana masing-masing hanya memerlukan titik putus yang diberikan untuk diperiksa.

Ini berlaku untuk semua yang telah kita lihat setakat ini. Berikut adalah pen yang menggabungkan contoh.

Pemikiran terakhir

Crow tidak dapat melakukan segala yang dapat dilakukan oleh media. Tetapi kita tidak memerlukannya untuk melakukannya, kerana kita mempunyai pertanyaan media dalam CSS. Untuk perubahan reka bentuk "besar", seperti kedudukan bar sisi atau konfigurasi semula menu, mereka OK. Perkara -perkara ini berlaku dalam konteks keseluruhan viewport (saiz tetingkap penyemak imbas).

Tetapi untuk komponen, pertanyaan media agak salah kerana kita tidak pernah tahu saiz komponen.

Heydon Pickering menunjukkan isu ini menggunakan imej ini:

Saya berharap Raven akan membantu anda mengatasi masalah membuat susun atur responsif untuk komponen dan menolak had "apa yang boleh dilakukan oleh CS" lebih tinggi.

Dengan menunjukkan apa yang mungkin hari ini, mungkin untuk menyelesaikan pertanyaan kontena "sebenar" dengan menambahkan beberapa gula sintaks dan beberapa fungsi baru yang sangat kecil seperti CONW, CONH, "Unit Penyingkiran" atau "Menilai sebagai Pixels". Sekiranya terdapat fungsi dalam CSS yang membolehkan '1px' ditulis semula sebagai ruang dan '0px' menjadi "awal", Crow boleh digunakan bersempena dengan atribut suis suis dan menukar setiap atribut CSS, bukan hanya nilai panjang.

Dengan mengelakkan JavaScript untuk mencapai matlamat ini, susun atur anda menjadikannya lebih cepat kerana ia tidak bergantung kepada muat turun atau dijalankan JavaScript. Walaupun JavaScript dilumpuhkan, tidak mengapa. Pengiraan ini tidak akan menghalang benang utama anda, dan logik aplikasi anda tidak akan merosakkan dengan logik reka bentuk.

Terima kasih kepada Chris, Andrés Galante, Cathy Dutton, Marko Ilic dan David Atanda untuk artikel CSS-Tricks mereka yang indah. Mereka benar -benar membantu saya meneroka apa yang boleh dicapai oleh burung gagak.

Atas ialah kandungan terperinci Teknik Raven: Satu langkah lebih dekat dengan pertanyaan kontena. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!