Умови для css-змінних
Я поч-ну з того, що в спе-ци-фі-ка-ци-ях немає ні-чо-го (Хоча і є мо-дуль з на-зва-ні-ем "CSS Con-di-tional Rules" , що не сто-ит очіку-дати, що він про CSS -пе-ре-мен-них - в ньому толь-ко вся-кое про at-rules. І, кста-ти, навіть є пред-ло-же-ня про @ -пра-ві-лах @when / @else. ко-то-які, знову ж таки, ні-ка-ко-го від-но-ше-ня до пе-ре-мен-ним не ма-ють. ) про усло-вия для CSS -пе-ре-мен-них. Я ду-травня, що це огром-ве УПУ-ще-ня, так як, хоча пе-ре-мен-ні вже переді-ставши-ля-ють купу ве-щей, ко-то-які неможливе-ли-во до-стичь іни-ми середовищ-ства-ми, від-сут-ність усло-вий дуже удру-ча-ет, так як їх дуже мно-го для чого мож-но було б ис-поль-зувати.
Але що, якщо б нам за-хо-ті-лось ис-поль-зо-вать ці по-об-ра-жа-е-мі несу-ще-ству-ю-щие умовах а-ні кон-струк-ції для пе-ре-мен-них вже сей-годину. Як і з мно-же-ством дру-гих ве-щей в CSS. в ка- ких-то слу-ча-ях ми мо-жем обой-тись і ха-ками.
Про пределеніе проблеми
Отже, що нам нуж-но: мож-ли-ність при по-мо-щі єдиний-ного-ний CSS -пе-ре-мен-ної вміти за-да-вати раз-ні зна-че-ня для роз- них CSS -Властивості, при цьому без того, що-б ці зна-че-ня були ос-но-ва-ни на цій са-мій пе-ре-мен-ної (або дру-ги-ми сло-ва ми - ці зна-че-продукти не можуть долж-ни ви-чис-лять-ся з на-шей пе-ре-мен-ної).
І спользование обчислень для бінарних умов
Пе-рей-ду сра-зу до справи і при-ве-ду схо-ду ре-ху, до то рої вже поз-же об'єк-яс-ню, мо-же-ті сну-ча-ла по-про-бо-вать самі по-нять що тут як пра-цю-тане:
У цьому при-ме-ре ми за-ставши-ля-му всі наші еле-мен-ти з .block по-лу-чать пад-дин-ги рав-ні 10px і ши-ри-ни гра-ниць рав- ні 1px. до тих пір, поки зна-че-ня пе-ре-мен-ної --is-big на цих еле-мен-тах не станд-ні рав-ним 1. і в цьому слу-чаї зна-че-ня ста -нут 25px і 3px со-від-вет-ного.
Ме-ха-нізм під всім цим до-воль-но про-стій: ми ис-поль-зу-му обидва мож-ли-вих зна-че-ня в оди-ном ви-чис-ле-ванні, ис поль-чаплі calc (). де ми про-ну-ля-му одне зна-че-ня і залишати-ля-му дру-гое в за-ві-сі-мо-сти від на-шей пе-ре-мен-ної, ко-то- раю мо-же при-ні-мати одне з двох зна-че-ний: 1 або 0. Иньї-ми сло-ва-ми, у нас там бу-дет 25px * 1 + 10px * 0 в од-ном слу чаї та 25px * 0 + 10px * 1 в іншому.
Б олее складні умови
Ми мо-жем ис-поль-зо-вать цей ме-тод не тіль-ко для ви-бо-ра з двох мож-ли-вих зна-че-ний, але і для трьох або бо-леї. Прав-да, для кож-до-го но-во-го зна-че-ня складність ність ви-чис-ле-ня збіль-ли-чи-ва-ет-ся. Так, для трьох мож-ли-вих зна-че-ний, ви-чис-ле-ня ста-ні вже таким:
Тут це ви-чис-ле-ня при-ні-ма-ет три мож-ли-вих зна-че-ня для пе-ре-мен-ної --foo - 0. 1 і 2. і ви-чис ля-ет пад-Дінг рав-ний 100px. 20px або 3px со-від-вет-ного.
Об-щий прин-цип той же: нам нуж-но каж-дий мож-ли-ний ре-зуль-тат розумно-жити на ви-ра-же-ня, так-ю-ний 1 для нуж-но-го зна-че-ня пе-ре-мен-ної і 0 для осталь-них. І це ви-ра-же-ня-ставши-ля-ет-ся так само про-сто: нам нуж-но об-ну-лять каж-дое інше мож-ли-ве зна-че-ня пе-ре -мен-ної. Як і сле чого нам нуж-но під-ста-вить то зна-че-ня, ко-то-рої долж-но да-вати 1 в по-лу-чів-ше-е-ся ви-ра-ж- ня і до-ба-вить мно-жи-тель для того, що-б при-ве-сти-таки ре-зуль-тат до цієї са-мій оди-ниці.
У озможності пастка в специфікаціях
З збіль-ли-че-ні-му складність але сті ви-чис-ле-ний по-яв-ля-ет-ся шанс, що вони пе-ре-ста-нут пра-цю-ва-ти. Як і че-му? У спе-ци-фі-ка-ції є та-кая ось за-мет-ка (в моєму пе-ре-во-де):
Бра-у-зе-ри долж-ни під-дер-жи-вать calc () -ви-ра-же-ня, со-сто-я-щие як мі-ні-мум з 20 тер-ми районів, де каж-дое ЧИС -ло, РАЗ -заходи ність або ПРО -ЦЕНТ яв-ля-ет-ся тер-ми-ном. Якщо calc () - ви-ра-же-ня-дер-жит біль-ше тер-ми районів, ніж під-дер-жи-ва-ет-ся, та-де ви-ра-же-ня по вин -но вва-тать-ся нева-Ліднєв.
Ко-неп-но, я немно-го по-ті-сти-ро-вал цю справу і не зміг най-ти по-доб-них огра-ні-чо-ний в су-ще-ству-ю-чих бра -у-зе-рах, але, так чи іна-че, є шанс, що якщо ви на-пі-ше-ті до-ста-точ-но складність ний код, то ви потовк-нё-тесь з цим огра -ні-че-ні-ем, ну або ка- кі-то бра-у-зе-ри цілком мо-гут його в бу-ду-щем до-ба-вить, так що будь-ті осто-рожни.
У словия для квітів
Як мож-но уви-діти, та-кі ви-чис-ле-ня мо-гут ис-поль-зо-вать-ся толь-ко для тих ве-щей, ко-то-які ви мо-же-ті ви-чис-лити. так що не по-лу-чит-ся ис-поль-зо-вать цю справу для пе-ре-лю-че-ня зна-че-ний властивостей типу dis-play і ана-ло-гич-них. Але що на-рахунок коль-тов? На са-мом справі, ми мо-жем ви-чис-лять зна-че-ня від-дель-них ком-по-нент коль-та. До со-жа-ле-нию, сей-годину це бу-дет пра-цю-ва-ти толь-ко в веб-ки-тах і млинець-ках, а ось Fire-fox поки не під-дер-жи-ва ет calc () внут-ри rgba () або дру-гих коль-то-вих функцій.
Але ко-ли та-кая під-держ-ка по-явить-ся (ну або якщо вам за-хо-чет-ся по-екс-пе-ри-мен-ти-ро-вать над цим де-лом там , де воно вже пра-цю-та-ет), ми мо-жем де-лать речі вро-де цієї:
Тут у нас бу-дет стандартно-ча-нию зе-ле-ний колір, і крас-ний, якщо ми за-да-дим --is-red зна-че-ня 1 (сто-ит від-ме тить, що якщо ка- кой-то кому-по-нент дол-дружин бути ну-Льом, то ми, оче-вид-но, мо-жем про-сто все його мно-же-ті-ли опу-стить для бо-леї когось пакт-ної за-пі-сі, але тут я їх осту-вив для промінь-ше-го по-ні-ма-ня ал-го-рит-ма).
І, так як ми мо-жем ви-чис-лять лю-бие когось по-нен-ти коль-та, ми мо-жем со-зда-вати для них наші услов-ні ви-чис-ле-ня ( і, мож-ли-але, смо-жем де-лать їх навіть для гра-ді-ен-тов? Вам сто-ит це по-про-бо-вать!).
Про чередная пастка в специфікаціях
Ко-ли я ті-сти-ро-вал як пра-цю-та-ють улов-ні ви-чис-ле-ня для коль-тов, я на-тицьнув-ся на дуже, дуже країн-ве огра-ні -Че-ня в спе-ци-фі-ки-ци-ях (Таб Ат-Кінсі рас-ска-зал про те, що ця про- бле-ма з когось по-нен-та-ми коль-та була по-прав-ле-на в спе-ци-фі-ка-ци-ях (але ис-прав-ле-ня ще не під-дер-жа-но бра-у-зе-ра-ми). Ура! та-к-же він ска-зал, що є ще ре-ху - ис-поль-зо-вать внут-ри rgba про-цен-ти, а я со-вер-шен-но про той-який віз -мож-но-сті за-був, хаха.). Огра-ні-чо-ня під на-зва-ні-му «про-вер-ка ти-пов». Те-пер я її офі-ци-аль-но нена-ві-жу. Що це огра-ні-чо-ня зна-чит - якщо ваше свій-ство при-ні-ма-ет толь-ко зна-че-ня з ти-пом
Ось та-де ви-ра-ються:
Чи не бу-дет ва-лід-ним внут-ри rgba (). Через на-чат ко-но я навіть ду-малий, що та-де по-ве-де-ня - баг, осо-бен-но вчи-ти-вая, що коль-то-ші функ-ції по-про -ще хо-ро-шо пе-ре-ва-ри-ва-ють вся-кі зна-че-ня, ви-хо-дя-щие за ра-зум-ні гра-ні-ці (ви цілком мо- ж-ті на-пі-описати rgba (9001, +9001, -9001, 42) і це дасть вам ва-лід-ний жёл-тий колір), але ось ця ось ти-пі-за-ція ока-підказуван ва-ет-ся занадто-ком складність але пе-ре-ва-ри-ва-е-мій для бра-у-зеров.
У озможності рішення?
Є одне до-воль-но да-ле-кое від иде-а-ла ре-ху. Так як в на-шем слу-чаї ми зна-му і ж-ла-йо-майо зна-че-ня, і про-блем-ний мо-ді-фі-ка-тор з дро-б'ю, то ми мо -жем пред-ви-чис-лити їх вме-сте і округ-лити пе-ред тим, як ставши-лять в calc (). Так, у мно-гих слу-ча-ях по-лу-ча-йо-майо зна-че-ня бу-дет трохи від-ли-чать-ся через по-ті-ри в точ-но-сті . Але це ж промінь-ше, ніж ні-чо-го, адже правда?
Хоча є ще одне ре-ху, але до то рої бу-дет пра-цю-ва-ти толь-ко з коль-та-ми - ми мо-жем ис-поль-зо-вать hsla вме-сто rgba . так як в та-ко му-чаї внут-ри бу-дуть НЕ це-лі чис-ла, а то, що таки нор-маль-но пе-ре-ж-ви-ва-ет calc (). Але так, для властивостей вро-де z-in-dex це не про-ка-тит. І навіть для коль-тов все рав-но мож-ли-ни невеликі-рілі по-ті-ри в точ-но-сті якщо пе-ре-во-дить для це-го rgb в hsl. Але ці по-ті-ри долж-ни бути мен-ше, ніж в попе-ду-щем ре-шении.
П репроцессінг
Те гда як для бі-нар-них умо-вий цілком ре-аль-но пі-описати ви-чис-ле-ня вруч-ву, для бо-леї складність них ви-ча-їв, або в слу- чаї тих же коль-тов, нам би при-го-ді-лись ін-стру-мен-ти, ко-то-які б поз-по-чи-чи де-лать це все ав-то-ма-ти- че-скі. До сча-стю, у нас є для це-го пре-про-цес-сори.
Ось як я ре-а-лі-зо-вал це шви-рень-ко на Зграй-лу-се (Мож-но по-смот реть на цей же код на Code-Pen in ac-tion.):
Так, коду до-воль-но мно-го, але цей мік-син спо-со-бен ге-ні-ри-ро-вать усло-вия як для чи-сіл, так і для коль-тов, і не толь ко для бі-нар-них умо-вий, але і для лю-бо-го чис-ла мож-ли-вих зна-че-ний в них.
Іс-поль-зо-ва-ня мік-сі-на дуже просте:
Пер-вий ар-гу-мент - наша пе-ре-мен-ва, вто-рим ар-гу-мен-том бу-дет то зна-че-ня, ко-то-рої долж-но при-ме нять-ся ко-ли пе-ре-мен-ва бу-дет рав-на 0. тре-тий ар-гу-мент - 1. і т.д.
Ви-поклик мік-сі-на вище сге-ні-рить ось та-де умовах а-ве ви-ра-ються:
А ось бо-леї складність ний при-заходів з коль-тами:
Він сге-ні-рить те, що ви точ-але не за-хо-ті-ті пі-описати вручну:
Сто-ит від-ме-тить, що у мене в мик-синьо немає під-держ-ки тих місць, де при-ні-ма-ють-ся толь-ко
Ко-неп-но, якщо ви дей-стві-тель-но со-бі-ра-ті-тесь все це справа ис-поль-зо-вать, вам по-на-до-біт-ся мож-ли-ність ис-поль-зо-вать фол-бе-ки. Для бра-у-зе-рів, не під-дер-жи-ва-ю-чих пе-ре-мен-ні, це про-сто - мож-но визна-де-лять де-кла-ра-цію з фол-бе-ком за-раніше:
Але ось ко-ли справу до-хо-дить до коль-тов, то по-яв-ля-ет-ся про-бле-ма: як толь-ко по-яв-ля-ють-ся пе-ре-мен -ні, то по фак-ту (і це оче-ред-ве дуже країн-ве ме-сто в спе-ци-фі-ка-ци-ях), тупо лю-бая де-кла-ра-ція, в ко-то-рій є CSS -пе-ре-мен-ні, ока-зи-ва-ет-ся ва-лід-ної. А це зна-чит, що не по-лу-чит-ся ис-поль-зо-вать фол-бек для чого-небудь, де є CSS -пе-ре-менниє:
Ось це ось - ва-лід-но со-глас-но спе-ци-фі-ка-ци-ям, фон бу-дет при-ні-мати своє ini-tial зна-че-ня, а фол-бек при -ме-нять-ся НЕ бу-дет (навіть якщо ну со-вер-шен-но оче-вид-но, що осталь-ні ча-сти зна-че-ня ну вже точ-но некор-рект-ни) .
Так що, для того, що-б переді-ставши-лять фол-бе-ки в по-доб-них ви-ча-ях, нам треба бу-дет вос-поль-зо-вать-ся обёрт-кою з @ sup-ports. в ко-то-рій ми бу-дем про-ве-рять під-держ-ку все-го кро-ме пе-ре-сних.
В на-шем слу-чаї нам треба до-ба-вить та-кую обёрт-ку для Firefox:
Тут ми ті-сти-ру-му під-держ-ку ви-чис-ле-ний внут-ри коль-то-вих функ-цій, по-сле чого при-ме-ня-ем умовах а-ве ви-чис -ле-ня для коль-та внут-ри цієї про-перевірки.
В прин-ци-пе, цілком мож-ли-во со-зда-вати та-кі фол-бе-ки ав-то-ма-ти-че-скі, але я б не ре-ко-мен-до- вал ис-поль-зо-вать для це-го пре-про-цес-со-ри - складність ність того, що для це-го нуж-но бу-дет де-лать вже пре-ви-ша-ет віз -мож-но-сті пре-про-цес-соров.
З ЦЕНАР використання
Я, прав-да, не люб-лю рас-пі-си-вать сце-на-рії ис-поль-зо-ва-ня для ве-щей, необ-хо-ді-ність в ко-то-яких оче -від-на. Так що я буду кра-ток. І так, я опи-шу сце-на-рії ис-поль-зо-ва-ня усло-вий не тіль-ко для пе-ре-мен-них, а й для ви-чис-ле-ний з по- мо-гою calc ().
Умо-ви для CSS -пе-ре-мен-них мо-гут бути иде-аль-ни для те-ма-ти-за-ції бло-ков. З їх по-мо-гою мож-но мати на-бор про-ну-ме-ро-ван-них тим і по-тому при-ме-нять їх до бло-кам (і навіть до вло-дружин-ним! ) ис-поль-чаплі толь-ко одну CSS -пе-ре-мен-ву типу --block-vari-ant: 1. Це те, що неможливе-ли-во зро-лать чимось кро-ме як пе -ре-мен-ни-ми, а якщо по-явить-ся необ-хо-ді-ність за-да-вати для теми раз-ні зна-че-ня для раз-них властивостей, то без усло-вий при -Ш-лось би за-да-вати це-лий на-бор раз-них пе-ре-мен-них каж-дий раз ко-ли хо-чет-ся при-ме-нить тему.
Ті-по-гра-фі-ка. Якби була мож-ли-ність ис-поль-зо-вать срав-ні-ня з <. <=.> і> =. то мож-но було б спів-здати на-бор «пра-вил» для раз-них раз-ме-рів шріф-та, що-б ав-то-ма-ти-че-скі під-бі-рать ви -з-ту будів-ки, жир-ність і дру-Гії свій-ства шріф-та в за-ві-сі-мо-сти від ис-хід-но-го раз-ме-ра. Це і сей-годину віз-мож-но, ко-неп-но, але не те-гда, ко-ли нуж-но мати «кроки» для раз-ме-рів, а не про-сто зна-че-ня ви-чис-льон-ні з em-ів.
Адап-тив-ний ді-зайн. Ну, якби були пів-но-цін-ні умо-ви для ви-чис-ле-ний, то це було б по-шануй що тими са-ми-ми «el-e-ment queries» - мож-но було б дивилися реть на vw або ши-ри-ну ро-ді-ті-лей і ре-шать ка-кі зна-че-ня при-ме-нять в ка-кому разі.
На-вер-ня-ка є і дру-Гії сце-на-рії ис-поль-зо-ва-ня для усло-вий, рас-ска-жи-ті якщо при-ду-ма-е-ті! Я сам, уве-рен, на-ти-кал-ся на мно-же-ство з них, але, так як у мене дуже пло-Хая па-м'яти, то я не за-за-мі-наю все-все , що я хочу де-лать з CSS. Як і те-му що я хочу де-лать все.
Я б дуже хо-тел уві-діти усло-вия для CSS -пе-ре-мен-них в спе-ци-фі-ки-ци-ях CSS. так що-б нам не при-хо-ді-лось при-бе-гать до ха-кам і ми мог-ли б ис-поль-зо-вать усло-вия і для Неви-чис-ля-е-мих зна -Че-ний. Ну і навіть з ха-ка-ми поки неможливе-ли-во ис-поль-зо-вать усло-вия кро-ме як будів-го-го ра-вен-ства, так що ні-ка-ких нам «якщо пе-ре-мен-ва біль-ше, ніж X »і по-доб-вих ре-щей. Я не бачу при-чин по-че-му в CSS нель-зя до-ба-вить пів-но-цін-ні умо-вія, так що якщо ви зна-ко-ми з кимось. хто раз-ра-ба-ти-ва-ет спе-ци-фі-ка-ції CSS - ви їм на-мек-ні-ті там. Я толь-ко на-де-юсь, що нам не від-ве-тят щось вро-де «про-сто ис-поль-зуй-ті JS» і не ста-нут де-лать перед- по-ло -же-ня про те, як і че-му це в прин-ци-пе неможливе-ли-во. Так ось же, воно вже мож-ли-але, пус-кай і з ха-ка-ми. Чи не мо-же бути ні-ка-ких оправ-Сейчас.
Якщо ви знайшли помилку або хочете чимось доповнити статтю, ви завжди можете написати мені про це. або поправити статтю прямо на Гітхабе.