CSS
functies

Syntaxis

• <calc()> = calc( <calc-sum> )
• <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
• <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*
• <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

Opmerkingen

calc () functie

Accepteert een wiskundige uitdrukking en retourneert een numerieke waarde.

Het is vooral handig wanneer u met verschillende soorten eenheden werkt (bijvoorbeeld een px-waarde van een percentage aftrekken) om de waarde van een kenmerk te berekenen.

+ , - , / en * operatoren kunnen allemaal worden gebruikt, en haakjes kunnen worden toegevoegd om de volgorde van bewerkingen indien nodig te specificeren.

Gebruik calc() om de breedte van een div-element te berekenen:

#div1 {
    position: absolute; 
    left: 50px;
    width: calc(100% - 100px); 
    border: 1px solid black; 
    background-color: yellow; 
    padding: 5px; 
    text-align: center; 
}

Gebruik calc() om de positie van een achtergrondafbeelding te bepalen:

background-position: calc(50% + 17px) calc(50% + 10px), 50% 50%;

Gebruik calc() om de hoogte van een element te bepalen:

height: calc(100% - 20px);

attr () functie

Retourneert de waarde van een kenmerk van het geselecteerde element.

Hieronder staat een blockquote-element dat een karakter bevat in een data-* attribuut dat CSS kan gebruiken (bijv. In het ::before en ::after pseudo-element ) met behulp van deze functie.

<blockquote data-mark='"'></blockquote>

In het volgende CSS-blok wordt het teken toegevoegd voor en na de tekst in het element:

blockquote[data-mark]::before,
blockquote[data-mark]::after {
    content: attr(data-mark);
}

functie lineair verloop ()

Hiermee maakt u een afbeelding die een lineair kleurverloop vertegenwoordigt.

linear-gradient( 0deg, red, yellow 50%, blue);

Dit creëert een verloop van onder naar boven, met kleuren die beginnen bij rood, vervolgens geel bij 50% en eindigen in blauw.

functie radiaal verloop ()

Hiermee maakt u een afbeelding die een kleurverloop representeert dat vanuit het midden van het verloop straalt

radial-gradient(red, orange, yellow) /*A gradient coming out from the middle of the
gradient, red at the center, then orange, until it is finally yellow at the edges*/

var () functie

Met de var () -functie is toegang tot CSS-variabelen mogelijk.

/* set a variable */
:root {
    --primary-color: blue;
}

/* access variable */
selector {
    color: var(--primary-color);
}

Deze functie is momenteel in ontwikkeling. Kijk op caniuse.com voor de nieuwste browserondersteuning.