Með öllum talum undanfarið, að lokum að geta notað CSS rist, fékk það mig að hugsa: Hvaða aðrar ótrúlega CSS eiginleikar get ég notað núna? CSS Variables var sá sem þegar í stað hljóp í hugann.
Það hefur verið um tíma síðan ég hef heyrt nokkuð um CSS Variables og það bætir nýtt verkfæri og leið til að hugsa um þróun framanenda sem vekur áhuga á mér.
CSS Variables hafa verið að berja í kring fyrir nokkrum árum núna en virðist ekki vera í víðtækri notkun. Með vinsældum pre-örgjörva eins og Sass, kláraði framhaldshönnuðir risastór kláði fyrir löngu síðan.
Ég var fyrst spenntur eftir CSS Variables í kringum 2014 og síðan þá hafa þeir dýft inn og út af áhuga minn. Ég er nú aðeins að íhuga að fá þau inn á vinnusvæðum og ég ætla að sýna þér hversu einföld og auðveld þau eru að nota.
Það er einfalt að lýsa yfir sérsniðnum eignum: Við þurfum aðeins að búa til eignina sem við viljum og bæta við tveimur punktum í upphafi þess. Þessir geta verið lýst hvar sem er en bætir þeim við: Rót virðist vera góð nálgun í augnablikinu.
--my-reusable-value: 20px;Notkun eignarinnar er frekar einfalt eins og heilbrigður. Við nálgast það með var () virka og nota eignina sem við lýstum hér að ofan.
padding: var(--my-reusable-value);Er það ekki einfalt og dýrlegt?
CSS Variables eru einfalt að nota og frekar auðvelt að muna. Stærsta áskorunin með CSS Variables (eins og hjá flestum CSS) er að vita réttan tíma og stað til að nota þau. Að henda þeim í sjálfu sér er öruggur eldur leið til að búa til sóðaskap á stíll og með þessum breytum sem henda í kembiforrit verður líklega erfiðara.
Hafa skal í huga rétta notkunartilvik og aðferðir til að nota þær, og það er þar sem meirihluti viðleitni ykkar ætti að einblína á.
Í eftirfarandi dæmi mun ég sýna þér grundvallar dæmi um hvernig ég byggi nú móttækilegan hluti með Sass breytur. Þá mun ég sýna þér hvernig hægt er að bæta við með CSS Variables á þann hátt sem ekki er hægt með fyrirfram gjörvi. Þetta er sérstakt notkunaratriði sem gildir ekki um alla leið sem breytur eru notaðar en er að sýna hvernig CSS Variables má nota á annan hátt.
Sjá pennann CSS Variables - móttækileg notkun tilfelli án CSS Variables af Adam Hughes ( @lostmybrain ) á CodePen .
Þegar þú notar Sass eru nokkrar mismunandi aðferðir sem ég hef prófað. Núverandi fara í útgáfu er að setja fjölmiðlafyrirspurnir innan CSS blokkanna sem ég vil breyta. Hérna get ég notað breytu, stöðluðu CSS, mixin eða lengja til að breyta þessum þáttum án þess að dreifa stílum fyrir hluti hvar sem er.
Eitt vandamál með þetta er að hafa margar fjölmiðlafyrirspurnir og hellingur af breytum sem eru tengdir en ekki. Ég gæti notað kort fyrir breyturnar sem myndi gefa meiri stofnun en ég held að aðalatriðið sé að við notum margar breytur til að skilgreina eina eign. Þetta líður bara rangt.
Sass breytur eru notaðar fyrirfram, sem þýðir að við verðum að skipuleggja alla leið og við ætlum að nota þær. Þeir gera þróun auðveldara en tæknilega veita okkur ekki nýjum stórveldum.
Sjá pennann CSS Variables - móttækileg notkun tilfelli af Adam Hughes ( @lostmybrain ) á CodePen .
CSS Variables þurfa ekki að vera lýst framan, þau eru dynamic. Þetta er gagnlegt á mjög mismunandi hátt. Við getum nú með skilyrðum breytt breytum hvar sem er og í sérstökum samhengi, svo sem fjölmiðlafyrirspurnum.
Með því að birta fjölmiðlunarfyrirspurnarstílina okkar allt frá, þá getum við dregið úr fjölda fjölmiðlafyrirtækja sem dreifðir eru um fyrir móttækilegan stíl. Það gefur líka mjög góðan og hreina leið til að sjá almennar bilanir og leturfræði stíl yfir mismunandi snið.
Ég held að móttækileg hönnun og þemun séu tvö frábær tilfelli fyrir CSS Variables en það eru svo margir möguleikar.
Sass Variables og CSS Variables eru tvær mismunandi dýr, hvert með eigin pro og con s.
Vegna vinsælda Sass og meira programmatical eðli Sass, hafa ítarlegar skipulagsmyndir þróast með tímanum. Mér líkar sérstaklega við sass kort og sameinar svipaðar tegundarbreytur í kortin. Litir, stærðir og flýtivísar fyrir slóðir virðast vera vinsælar valkostir til að koma með á kortum.
Vegna tiltölulega minni notkun CSS Variables hafa bestu starfsvenjur enn að þróast. Kort og fylki eru ekki mögulegar á sama hátt í CSS svo þessi nýju skipulagsmynstur verða að vera nýjungar og leysa vandamálin á annan hátt við Sass.
CSS Variables eru meðhöndluð á virkan hátt af vafranum við afturkreistinguna en Sass Variables eru notuð þegar CSS er safnað saman.
Þetta er kjarni sölupunktur CSS Variables fyrir mig. Það verður áhugavert að sjá hvernig fólk notar þennan möguleika með tímanum og hvort það muni batna við möguleika sína.
Ég er persónulega þeirrar skoðunar að því fleiri hlutir sem við getum fjarlægt frá Webpack , Gulp og hvað sem er-nýtt-ramma-er-út-nú , því betra. Having áhugaverðar nýjar aðgerðir vafra þýðir að við þurfum ekki að treysta á samantekt og JavaScript ramma til að gera hluti sem verktaki finnst nauðsynleg. Ég myndi hætta að giska á að hátt hlutfall framkvæmdaraðila notenda nota breytur í CSS sínu á einhvern hátt eða annan hátt, þannig að allir sem nota þetta algerlega virðast vera skynsamlegt að gera. Það þýðir eitt minna í byggingu skrefið (sem ég held að við getum öll sammála um að verða nokkuð gríðarlega þessa dagana) og meiri samkvæmni á vefnum.
Stuðningurinn er að sjá ótrúlega góð með einum undarlegt undantekningu: IE 11. Flestir nútíma vafrar styðja CSS Variables með Edge með nokkrum galla.
Á 78,11% þetta er hærra en CSS rist (þegar ritað er) en að stuðningur IE11 gæti verið vandamál.
Ég held að tíminn sé núna. Að stuðningur IE11 er ekki að verða betri og við vitum frá fyrri útgáfum af Windows að það tekur langan tíma fyrir sumt fólk að uppfæra. En stuðningur yfir nútíma vafra er frábær sem þýðir að við ættum að leita að CSS Variables og gera tilraunir með möguleikana.
Það þýðir ekki að við ættum ekki að gleyma ábyrgð okkar á eldri vafra stuðningi þó. Taka skal tillit til undirstöðu fallback kerfi með stuðningi tag, eða jafnvel polypyfill, fyrir eldri vafra, jafnvel meira ef raunverulegur staður notkun þín er miklu meira skeið á eldri vöfrum.
Það er spennandi tími fyrir þróun framanenda og ég get ekki beðið eftir að nota fleiri af þessum tækni á vefsvæðum mínum.