CSS
Les fonctions

Syntaxe

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

Remarques

fonction calc ()

Accepte une expression mathématique et renvoie une valeur numérique.

Cela est particulièrement utile lorsque vous travaillez avec différents types d'unités (par exemple, en soustrayant une valeur px d'un pourcentage) pour calculer la valeur d'un attribut.

* opérateurs + , - , / et * peuvent tous être utilisés, et des parenthèses peuvent être ajoutées pour spécifier l'ordre des opérations si nécessaire.

Utilisez calc() pour calculer la largeur d'un élément div:

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

Utilisez calc() pour déterminer la position d'une image d'arrière-plan:

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

Utilisez calc() pour déterminer la hauteur d'un élément:

height: calc(100% - 20px);

fonction attr ()

Renvoie la valeur d'un attribut de l'élément sélectionné.

Vous trouverez ci-dessous un élément blockquote qui contient un caractère à l'intérieur d'un attribut data-* que CSS peut utiliser (par exemple, à l'intérieur du pseudo-élément ::before et ::after ) en utilisant cette fonction.

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

Dans le bloc CSS suivant, le caractère est ajouté avant et après le texte à l'intérieur de l'élément:

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

fonction gradient linéaire ()

Crée une image représentant un dégradé linéaire de couleurs.

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

Cela crée un dégradé allant du bas vers le haut, avec des couleurs commençant au rouge, puis au jaune à 50% et se terminant en bleu.

fonction de gradient radial ()

Crée une image représentant un dégradé de couleurs rayonnant depuis le centre du dégradé

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*/

fonction var ()

La fonction var () permet d'accéder aux variables CSS.

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

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

Cette fonctionnalité est en cours de développement. Consultez caniuse.com pour obtenir la dernière prise en charge du navigateur.