CSS
Funktionen

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

Bemerkungen

calc () - Funktion

Akzeptiert einen mathematischen Ausdruck und gibt einen numerischen Wert zurück.

Dies ist besonders nützlich, wenn Sie mit verschiedenen Einheitentypen arbeiten (z. B. einen px-Wert von einem Prozentwert abziehen), um den Wert eines Attributs zu berechnen.

Alle Operatoren + , - , / und * können verwendet werden. Klammern können hinzugefügt werden, um bei Bedarf die Reihenfolge der Operationen festzulegen.

Verwenden Sie calc() , um die Breite eines div-Elements zu berechnen:

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

Verwenden Sie calc() , um die Position eines Hintergrundbildes zu bestimmen:

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

Verwenden Sie calc() , um die Höhe eines Elements zu bestimmen:

height: calc(100% - 20px);

Funktion attr ()

Gibt den Wert eines Attributs des ausgewählten Elements zurück.

Nachfolgend finden Sie ein blockquote-Element, das ein Zeichen innerhalb eines data-* -Attributs enthält, das CSS (z. B. innerhalb von ::before und ::after pseudo-element ) mithilfe dieser Funktion verwenden kann.

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

Im folgenden CSS-Block wird das Zeichen vor und nach dem Text im Element angehängt:

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

linearer Farbverlauf ()

Erzeugt ein Bild, das einen linearen Farbverlauf darstellt.

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

Dadurch entsteht ein Farbverlauf von unten nach oben, wobei die Farben bei Rot beginnen, dann bei 50% und dann in Blau.

Radialgradient () Funktion

Erzeugt ein Bild, das einen Farbverlauf aus der Mitte des Farbverlaufs darstellt

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

Mit der Funktion var () kann auf CSS-Variablen zugegriffen werden.

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

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

Diese Funktion befindet sich derzeit in der Entwicklung. Überprüfen Sie caniuse.com auf die neueste Browserunterstützung.