CSS-variabelen zijn constanten. Native variabelen in CSS. Het is tijd…. Werken met aangepaste eigenschappen in JavaScript

Bij het werken met CSS-argumenten kan het vaak handig zijn om ze als twee verschillende typen te zien:

Primaire gebruikerseigenschappen

Dit is een eigenschap die u kunt wijzigen in verschillende selectors, in mediaquery's, of met bijvoorbeeld de :hover of :focus pseudo-selectors, of met JavaScript. Het bevat meestal één waarde:

: root ( --wrapper: 900px; --guter: 10px; )

Secundaire aangepaste eigenschappen

Dit zijn argumenten die door anderen zijn berekend. In de onderstaande code wordt bijvoorbeeld de celgrootte van het raster (grid) --rowHeight - berekend op basis van verschillende primaire. Het resultaat van de berekening wordt toegepast op de eigenschap, maar wordt nooit handmatig bijgewerkt - alleen herberekend als resultaat van het wijzigen van de primaire CSS-variabelen.

Het kan handig zijn om secundaire argumenten voor te voegen, zoals in dit voorbeeld, zodat u en andere mensen die aan uw code werken weten dat ze niet handmatig kunnen worden gewijzigd:

:root ( --wrapper: 900px; --guter: 10px; / * s-prefix geeft secundaire aangepaste eigenschap aan * / --s-rh:calc((var(--wrapper)-(3*var(--guter) )))/4); )

De enige uitzondering zou zijn als u de manier waarop de waarde wordt berekend moet wijzigen, maar theoretisch gezien zou deze permanent moeten zijn. Dit kan ontwikkelaars die niet bekend zijn met uw code ontmoedigen om onnodig wijzigingen aan te brengen.

Zichtgebied

In mijn voorbeelden declareer ik CSS-variabelen in :root , wat een element is :

:root ( ---bgColor: rood; )

Dit is echter niet strikt noodzakelijk en bovendien dit is geen goede gewoonte.

De meeste redenen waarom het niet wordt aanbevolen om CSS-variabelen in het globale bereik in Javascript in te stellen, zijn ook van toepassing op CSS. Als u ook een aangepaste eigenschap -bgColor background-color in verschillende componenten zou willen gebruiken, zou u tegen alle scopingproblemen aanlopen. Het is het beste om ze in een selector te declareren, bijvoorbeeld als je in componenten werkt:

Mijn-component ( ---bgColor: rood; ) .een-andere-component ( ---bgColor: blauw; )

In het bovenstaande codefragment is -bgColor aan elk onderdeel gebonden, dus je kunt een variabele met dezelfde naam gebruiken zonder bang te hoeven zijn dat het iets buiten dat onderdeel beïnvloedt.

Standaardwaarden instellen

Met CSS-variabelen kun je een standaardwaarde (of meerdere waarden) instellen. Dit betekent dat u in sommige situaties uw variabelen alleen hoeft te declareren op het moment dat ze moeten veranderen. In de onderstaande CSS-code wordt de -bgColor-variabele voor het veld alleen gedeclareerd als de breedte 40em bereikt - daarvoor neemt het de standaardwaarde aan (rood):

In dit tweede voorbeeld kun je zien dat de h1- en p-selectors verschillende standaardwaarden hebben voor hun kleureigenschap, maar beide accepteren een variabele bij zweven:

Aangepaste eigenschappen gebruiken met preprocessors

Een nadeel van CSS-argumenten is dat ze niet werken in mediaquery's of pseudo-klassen, bijvoorbeeld: nth-child(var(-n)) werkt niet. Dus hoogstwaarschijnlijk wil je nog steeds gebruiken preprocessor argumenten.

Ik zou waarschuwen voor het mengen van deze twee soorten aangepaste eigenschappen, tenzij u hun verschillen volledig begrijpt. Sass-argumenten worden gecompileerd voordat uw code de browser bereikt, terwijl ze in CSS geen berekende waarde krijgen totdat ze de browser bereiken. Dit betekent dat in de onderstaande code de breedtewaarde voor .box1 zal werken, maar .box2 geeft een fout omdat de waarde voor -halfWidth als een string aan de browser wordt doorgegeven:

$breedte: 600px; $halfWidth: $width/2; :root ( --halfWidth: $width/2; ) .box1 ( width: $halfWidth; ) .box2 ( width: var(--halfWidth); // dit is niet correct)

U kunt echter calc() gebruiken zoals in de vorige voorbeelden. Zie hieronder het resultaat:

Als u het element in de Chrome-console inspecteert en naar het tabblad Berekende stijlen gaat, ziet u dat de breedtewaarde voor .box2 niet wordt berekend. Bij ons bedrijf gebruiken we veel Sass-functies, bijvoorbeeld om te berekenen rem van pixels bij het dimensioneren. Ik ontdekte dat dit een probleem bleek te zijn toen ik probeerde een Sass-functie door te geven aan een CSS-argument zoals --width: rem (600px) . Er is een plug-in PostCSS, die pixels naar rem kan converteren om het gewenste resultaat te bereiken, maar ik zal er een beetje mee moeten experimenteren voordat ik vol vertrouwen kan aanbevelen om ze met CSS-variabelen te gebruiken.

Er zijn echter scenario's waarin het zinvol is om preprocessor- en CSS-variabelen in hetzelfde codeblok samen te gebruiken, zoals in mediaquery's, zoals eerder vermeld.

Laatste update: 18-11-2018

Net als in programmeertalen kunnen variabelen worden gedefinieerd in CSS. Variabelen in CSS kunnen standaardwaarden opslaan die kunnen worden toegewezen aan algemene CSS-eigenschappen, zoals achtergrondkleur, letterkleur, letterhoogte, elementbreedte en -hoogte, enzovoort. Ze kunnen dan opnieuw worden gebruikt in verschillende delen van de stijldefinitie.

Het is vermeldenswaard dat hoewel de term "variabelen" (css-variabelen) vaak wordt gebruikt, ze officieel aangepaste eigenschappen (aangepaste of aangepaste eigenschappen) worden genoemd.

Definities van CSS-variabelen moeten beginnen met een ---voorvoegsel, zoals --my-color . Ze kunnen voor elk element worden gedefinieerd. Bijvoorbeeld:

Hier in de CSS-code zijn twee variabelen gedefinieerd voor het div-element: --text-color en --text-size

Tekstkleur: #ff4757; --tekstgrootte: 20px;

Met de var()-expressie kunnen we overal in onze CSS-code naar deze variabelen verwijzen:

#p1 ( kleur: var(--tekst-kleur); lettergrootte: var(--tekst-grootte); )

Als resultaat krijgt het eerste blok de letterhoogte van --text-size, het tweede blok de letterkleur van --text-color en het derde blok krijgt beide componenten.

Als we de kleur van de tekst moeten wijzigen, volstaat het om de waarde van de variabele te wijzigen.

Soortgelijke variabelen kunnen voor elk element worden gedefinieerd. Ze worden echter overgenomen door onderliggende elementen. Dus in het bovenstaande voorbeeld kunnen we zien dat het geneste alinea-element stijlen krijgt van de bovenliggende div.

Maar als de alinea zich buiten het div-blok bevond:

Derde blok.

Dan zouden de waarden uit de variabelen er niet op worden toegepast:

Als het nodig is dat variabelen globaal kunnen worden gebruikt voor alle elementen, dan worden ze gedefinieerd voor het :root element

:root( --text-color: #ff4757; --text-size: 20px; )

Reserve waarden

Bij het definiëren van variabelen kunnen ze enkele fouten bevatten, de variabele is bijvoorbeeld niet gedefinieerd (helemaal niet gedefinieerd of er staat een typfout in de naam). In dit geval kunnen we fallback-waarden opgeven bij het toepassen van de variabele, die worden toegepast als de waarde van de variabele onjuist is.

Met de tweede parameter in de functie var() kunt u een terugvalwaarde instellen. Dit kan de exacte waarde zijn of, nogmaals, de waarde van een andere variabele:

Kleur: var(--tekst-kleur, var(--gereserveerd-kleur));

U kunt ook een terugvalwaarde definiëren voor de tweede variabele als deze ongeldig is:

Kleur: var(--tekst-kleur, var(--gereserveerd-kleur, rood));

De enige kwaliteit die een taal moet hebben om als programmeertaal te kwalificeren, zijn variabelen. Ze worden als ongelooflijk nuttig beschouwd, wat ontwikkelaars veel uren en moeite bespaart. Bovendien kunnen variabelen het proces van het schrijven van code op een alomvattende manier verbeteren.

Dit is precies wat er in zit css niet genoeg. Dinosaurussen zoals Sass en Less gebruikten variabelen, maar standaard CSS had nooit variabelen. Tot op de dag van vandaag.

Ze zijn al lang aan de horizon, maar het is pas recent dat variabelen in CSS zijn geïntroduceerd. Dus hoe werken ze?

Browserondersteuning

Momenteel worden alleen CSS-variabelen ondersteund Firefox Nachtelijk. En we kunnen ze niet echt gebruiken. Ondanks het feit dat ze nog steeds erg, erg rauw zijn (in bètatests), kijken we er allemaal naar uit om ze in de nabije toekomst in ons leven te hebben.

Voor browsers op de engine Webkit er is al een manier om variabelen te krijgen. Daarnaast zijn ze ook beschikbaar voor sommige versies. chroom, die zijn ingeschakeld via de vlag in chrome://flags en het voorvoegsel -webkit-.

Wat betreft IE, helaas moeten we wachten. Laten we eens kijken wat de aankomende release voor ons in petto heeft.

CSS-variabelen gebruiken

We weten allemaal heel goed hoe variabelen werken, dus alleen de syntaxis heeft enkele wijzigingen ondergaan. Hier is hoe we variabelen in CSS declareren:

var-variabele-naam: waarde;

Globale variabelen

Net als bij andere programmeertalen, kunt u variabelen ook instellen als globals. Bijvoorbeeld als volgt:

:root ( var-blauw-kleur: #2980A6; var-tekst-kleur: #E0E0E0; )

Ik gebruik het root-pseudo-element vanwege het feit dat de interface op het hoogste niveau in de DOM degene is die deze variabelen bevat. En zij zullen op hun beurt de DOM-tagstructuur voor al onze elementen afwerken.

Als het gaat om het gebruik van variabelen, gebruiken we de functie var() om een ​​variabele aan te roepen. Dit kan als volgt:

Test ( achtergrondkleur: var (blauwe kleur); ) p ( kleur: var (tekstkleur); )

Nadat we de variabele in de hoofdmap van het document hebben gedeclareerd, kunnen we hem nu overal gebruiken.

Contextvariabelen

Naast globale variabelen is het mogelijk om een ​​variabele op een specifiek element in te stellen. In dit geval verandert de waarde:

Een ( var-blauw-kleur: #004F70; ) .een a ( kleur: var (blauw-kleur); )

In dit specifieke voorbeeld nemen de ankertags de nieuwe waarden over die we in hun bovenliggende element hebben ingesteld. Niets buiten deze div zal echter de waarden gebruiken die zijn ingesteld op het root-element.

Uitgang:

Variabelen css zullen van grote hulp zijn wanneer ze niet langer aan de horizon van de toekomst opdoemen en werkelijkheid worden. Ze kunnen zelfs de eerste tekenen zijn van het verlaten van preprocessors en een terugkeer naar de standaard CSS-taal.

• Les voorbereid: website team

aangepaste eigenschappen(soms aangeduid als CSS-variabelen of trapsgewijze variabelen) zijn entiteiten gedefinieerd door CSS-auteurs die specifieke waarden bevatten die in een document opnieuw kunnen worden gebruikt. Ze worden ingesteld met behulp van aangepaste eigenschapsnotatie (bijv. --hoofdkleur: zwart;) en zijn toegankelijk via de functie var() (bijvoorbeeld kleur: var(--hoofdkleur);).

Complexe websites hebben zeer grote hoeveelheden CSS, vaak met veel herhaalde waarden. Dezelfde kleur kan bijvoorbeeld op honderden verschillende plaatsen worden gebruikt, waardoor globaal zoeken en vervangen nodig is als die kleur moet worden gewijzigd. Met aangepaste eigenschappen kan een waarde op één plaats worden opgeslagen en vervolgens op meerdere andere plaatsen worden verwezen. Een bijkomend voordeel zijn semantische identifiers. --main-text-color is bijvoorbeeld gemakkelijker te begrijpen dan #00ff00 , vooral als dezelfde kleur ook in andere contexten wordt gebruikt.

Aangepaste eigenschappen zijn onderhevig aan de cascade en erven hun waarde van hun bovenliggende.

basisgebruik

Een aangepaste eigenschap declareren:

Element ( --main-bg-kleur: bruin; )

De aangepaste eigenschap gebruiken:

Element ( achtergrondkleur: var(--main-bg-color); )

Eerste stappen met aangepaste eigenschappen

Laten we beginnen met deze eenvoudige CSS die dezelfde kleur toepast op elementen van verschillende klassen:

Eén (kleur: wit; achtergrondkleur: bruin; marge: 10px; breedte: 50px; hoogte: 50px; weergave: inline-blok; ) .two ( kleur: wit; achtergrondkleur: zwart; marge: 10px; breedte: 150px; hoogte: 70px; weergave: inline-blok; ) .three ( kleur: wit; achtergrondkleur: bruin; marge: 10px; breedte: 75px; ) .vier ( kleur: wit; achtergrondkleur: bruin; marge: 10px; breedte: 100px; ) .five ( achtergrondkleur: bruin; )

We passen het toe op deze HTML:

Wat ons tot dit leidt:

Let op de herhaling in de CSS. De achtergrondkleur is op verschillende plaatsen op bruin gezet. Voor sommige CSS-declaraties is het mogelijk om dit hoger in de cascade te declareren en CSS-overerving dit probleem op natuurlijke wijze te laten oplossen. Voor niet-triviale projecten is dit niet altijd mogelijk. Door een aangepaste eigenschap voor het element te declareren en deze is identiek aan de selector html, behalve dat de specificiteit hoger is."> :root pseudo-class en deze waar nodig in het hele document te gebruiken, kan een CSS-auteur de noodzaak voor herhaling verminderen:

:root ( --main-bg-color: bruin; ) .one ( kleur: wit; achtergrondkleur: var(--main-bg-color); marge: 10px; breedte: 50px; hoogte: 50px; weergave: inline-block; ) .two ( kleur: wit; achtergrondkleur: zwart; marge: 10px; breedte: 150px; hoogte: 70px; weergave: inline-blok;) .three ( kleur: wit; achtergrondkleur: var( --main-bg-color); marge: 10px; breedte: 75px; ) .four ( kleur: wit; achtergrondkleur: var(--main-bg-kleur); marge: 10px; breedte: 100px; ). vijf (achtergrondkleur: var(--main-bg-color); )

Dit leidt tot hetzelfde resultaat als het vorige voorbeeld, maar maakt één canonieke verklaring van de gewenste eigenschapswaarde mogelijk.

Overerving van aangepaste eigenschappen

Aangepaste eigenschappen nemen over. Dit betekent dat als er geen waarde is ingesteld voor een aangepaste eigenschap op een bepaald element, de waarde van het bovenliggende element wordt gebruikt. Neem deze HTML:

Met de volgende CSS:

Twee ( --test: 10px; ) .drie ( --test: 2em; )

In dit geval zijn de resultaten van var(--test):

• Voor het class="two"-element: 10px
• Voor het class="three" element: 2em
• Voor het class="four" element: 10px (overgenomen van de ouder)
• Voor het class="one"-element: ongeldige waarde, wat de standaardwaarde is van elke aangepaste eigenschap

Houd er rekening mee dat dit aangepaste eigenschappen zijn, geen echte variabelen zoals je die in andere programmeertalen zou kunnen vinden. De waarde wordt berekend waar het nodig is, niet opgeslagen voor gebruik in andere regels. U kunt bijvoorbeeld geen eigenschap voor een element instellen en verwachten dat u deze ophaalt in de regel van een afstammeling van een broer of zus. De eigenschap is alleen ingesteld voor de overeenkomende selector en zijn afstammelingen, zoals elke normale CSS.

Terugvalwaarden voor aangepaste eigenschappen

Terugvalwaarden worden niet gebruikt om de browsercompatibiliteit op te lossen. Als de browser geen aangepaste CSS-eigenschappen ondersteunt, helpt de fallback-waarde niet. Het is slechts een back-up voor de browser die CSS Custom Properties ondersteunt om een ​​andere waarde te kiezen als de gegeven variabele niet is gedefinieerd of een ongeldige waarde heeft.

Het eerste argument voor de functie is de naam van de aangepaste eigenschap die moet worden vervangen. Het tweede argument voor de functie, indien opgegeven, is een terugvalwaarde, die wordt gebruikt als vervangingswaarde wanneer de aangepaste eigenschap waarnaar wordt verwezen ongeldig is. De functie accepteert slechts twee parameters en wijst alles na de eerste komma toe als de tweede parameter. Als die tweede parameter ongeldig is, bijvoorbeeld als er een door komma's gescheiden lijst wordt opgegeven, mislukt de fallback. Bijvoorbeeld:

Twee ( kleur: var(--mijn-var, rood); /* Rood als --mijn-var niet is gedefinieerd */ ) .drie ( achtergrondkleur: var(--mijn-var, var(--mijn -achtergrond, roze)); /* roze als mijn-var en --mijn-achtergrond niet zijn gedefinieerd */) .three ( achtergrondkleur: var(--mijn-var, --mijn-achtergrond, roze); /* Ongeldig: "--mijn-achtergrond, roze" */ )

Het opnemen van een aangepaste eigenschap als fallback, zoals te zien is in het tweede voorbeeld hierboven, is de juiste manier om meer dan één fallback te bieden. Het is gebleken dat de techniek prestatieproblemen veroorzaakt, omdat het meer tijd kost om de variabelen te ontleden.

Opmerking: De syntaxis van de fallback, zoals die van aangepaste eigenschappen, staat komma's toe. Bijvoorbeeld, var(--foo, rood, blauw) definieert een terugval van rood, blauw - alles tussen de eerste komma en het einde van de functie wordt als een terugvalwaarde beschouwd.

Geldigheid en waarden

Het klassieke CSS-concept van validiteit, gekoppeld aan elke eigenschap, is niet erg nuttig met betrekking tot aangepaste eigenschappen. Wanneer de waarden van de aangepaste eigenschappen worden geparseerd, weet de browser niet waar ze zullen worden gebruikt, dus moet daarom bijna alle waarden als Geldig.

Helaas kunnen deze geldige waarden worden gebruikt, via de functionele notatie var() in een context waar ze misschien niet logisch zijn. Eigenschappen en vrije variabelen kunnen leiden tot ongeldige CSS-statements, wat leidt tot het nieuwe concept van: geldig op berekende tijd.

Wat gebeurt er met ongeldige variabelen?

Wanneer de browser een ongeldige var()-vervanging tegenkomt, wordt de initiële of overgenomen waarde van de eigenschap gebruikt.

Bekijk het onderstaande codefragment.

HTML

Deze alinea is aanvankelijk zwart.

css

Zoals verwacht vervangt de browser de waarde van --text-color in plaats van var(--text-color) , maar 16px is geen geldige eigenschapswaarde voor color . Na vervanging heeft de eigenschap geen enkele zin. De browser handelt deze situatie in twee stappen af:

1. Controleer of de eigenschapskleur overerfbaar is. Ja maar

   Heeft geen ouder met kleureigenschap. Ga dus verder met de volgende stap.

2. Stel de waarde in op zijn standaard beginwaarde, d.w.z. zwart.

resultaat

De alineakleur is niet blauw omdat ongeldige vervanging wordt vervangen door de initiële waarde, niet door de fallback. Als je kleur had geschreven: 16px zonder enige variabele substituten, dan was het een syntaxisfout. De vorige aangifte wordt dan gebruikt.

Opmerking: Hoewel een syntaxisfout in een CSS-eigenschap / waarde-paar ertoe leidt dat de regel wordt genegeerd, wordt bij gebruik van een trapsgewijze waarde een ongeldige vervanging -- met een aangepaste eigenschapswaarde die ongeldig is -- niet genegeerd, waardoor de waarde wordt overgenomen .

Waarden in JavaScript

Om de waarden van aangepaste eigenschappen in JavaScript te gebruiken, is het net als standaard eigenschappen.

// haal variabele op uit inline stijl element.style.getPropertyValue("--my-var"); // haal een variabele op van waar dan ook getComputedStyle(element).getPropertyValue("--my-var"); // stel variabele in op inline stijl element.style.setProperty ("--my-var", jsVar + 4);

Met de functie var() kunt u aangepaste variabelewaarden invoegen in stijleigenschapswaarden. var() kan niet worden gebruikt in selectornamen of -eigenschappen.

Gebruikersvariabelen zelf en hun waarden worden beschreven in een willekeurige selector en moeten beginnen met twee koppeltekens. Na een dubbele punt krijgt de variabele een geldige waarde voor CSS toegewezen.

Terzijde ( --my-font: Helvetica, Arial, schreefloos; )

De --my-font variabele is toegankelijk met de notatie var(--my-font) , die kan worden ingevoegd als een eigenschapswaarde. In dit geval is het bereik van de variabele beperkt tot de gespecificeerde selector (in dit geval uitgezonderd) en zal het gebruik van var(--my-font) in een andere selector niet werken. Om globale variabelen te creëren, moeten ze gedeclareerd worden in de :root selector.

notatie

Waarden

<переменная>Variabelenaam, aangegeven met twee koppeltekens ervoor (--my-font).<значение>Een terugvalwaarde die de gegeven waarde vervangt als de variabele niet is gedefinieerd. Meerdere waarden kunnen worden opgegeven, gescheiden door komma's.

Voorbeeld

Toetsen

In dit voorbeeld worden twee variabelen geïntroduceerd: --primary-color en --info-color . De variabele --white is niet gedefinieerd, dus de opgegeven standaardwaarde wordt vervangen. Voor de p.info-selector wordt de variabele --primary-color overschreven.

Specificatie

Elke specificatie doorloopt verschillende stadia van goedkeuring.

• Aanbeveling (aanbeveling) - de specificatie is goedgekeurd door de W3C en aanbevolen als standaard.
• Kandidaat-aanbeveling ( Mogelijke aanbeveling) - de groep die verantwoordelijk is voor de standaard is ervan overtuigd dat het zijn doelen bereikt, maar de steun van de ontwikkelingsgemeenschap is vereist om de standaard te implementeren.
• Voorgestelde aanbeveling ( Voorgestelde aanbeveling) - in dit stadium wordt het document ter definitieve goedkeuring voorgelegd aan de W3C Advisory Board.
• Working Draft - Een meer volwassen concept na discussie en wijzigingen voor beoordeling door de community.
• Ontwerp van de redactie ( Redactioneel ontwerp) is een conceptversie van de standaard nadat er wijzigingen zijn aangebracht door de projecteditors.
• droogte ( Specificatie ontwerp:) is de eerste conceptversie van de standaard.