CSS
funktioner

Syntax

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

Anmärkningar

calc () -funktion

Accepterar ett matematiskt uttryck och returnerar ett numeriskt värde.

Det är särskilt användbart när man arbetar med olika typer av enheter (t.ex. att dra ett px-värde från en procentsats) för att beräkna värdet på ett attribut.

Operatörerna + , - , / och * kan alla användas, och parenteser kan läggas till för att ange arbetsordningens ordning vid behov.

Använd calc() att beräkna bredden på ett div-element:

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

Använd calc() att bestämma en bakgrundsbilds position:

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

Använd calc() att bestämma höjden på ett element:

height: calc(100% - 20px);

attr () -funktion

Returnerar värdet på ett attribut för det valda elementet.

Nedan är ett blockquote-element som innehåller ett tecken i ett data-* som CSS kan använda (t.ex. inne i ::before och ::after pseudo-element ) med denna funktion.

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

I följande CSS-block läggs tecknet till före och efter texten i elementet:

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

linjär-gradient () -funktion

Skapar en bild som representerar en linjär färggradient.

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

Detta skapar en lutning som går från botten till topp, med färger som börjar på rött, sedan gult med 50% och slutar i blått.

radial-gradient () -funktion

Skapar en bild som representerar en lutning av färger som strålar ut från mitten av lutningen

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 () funktion

Funktionen var () tillåter åtkomst till CSS-variabler.

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

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

Denna funktion är för närvarande under utveckling. Kontrollera caniuse.com för den senaste webbläsarsupporten.