Guide des fonctions CSS

Guide de la fonction CSS: outils puissants pour contrôler les styles

Comme d'autres langages de programmation, CSS a également des fonctions. Ces fonctions peuvent être insérées dans la position d'une valeur, ou dans certains cas utilisées avec une autre déclaration de valeur. Certaines fonctions CSS vous permettent même de nid d'autres fonctions!

Plus

En programmation, une fonction est un morceau de code nommé qui effectue une tâche spécifique. Par exemple, une fonction dans JavaScript appelé sayWoof() :

 fonction sayswoof () {
 console.log ("Woof!");
}

Nous pouvons utiliser cette fonction après la définition du comportement souhaité. Dans cet exemple, chaque fois que vous tapez sayWoof() dans le JavaScript de votre site Web ou de votre application Web, il imprimera "woof!" à la console du navigateur.

Les fonctions peuvent également utiliser des paramètres, qui sont des emplacements pour les fragments numériques ou de texte, que vous pouvez saisir dans la logique de la fonction pour les modifier. En JavaScript, cela fonctionne comme ceci:

 fonction countdogs (montant) {
 Console.log ("Il y a" montant "des chiens!");
}

Ici, nous avons une fonction appelée countDogs() qui a un paramètre appelé amount . Lorsqu'un nombre est fourni pour amount , il prend ce nombre et l'ajoute à la phrase prédéfinie. Cela nous permet de créer des phrases qui nous disent combien de chiens nous avons comptés.

 countdogs (3); // Il y a 3 chiens!
countdogs (276); // Il y a 276 chiens!
countdogs ("beaucoup"); // Il y a beaucoup de chiens!

Certains langages de programmation sont livrés avec des fonctions intégrées pour vous aider à éviter de réinventer la roue pour chaque nouveau projet. En général, ces fonctions sont conçues pour faciliter l'utilisation des principaux avantages et fonctionnalités de la langue.

Par exemple, bibliothèque. Une bibliothèque est une collection de code composé de collections de fonctions soigneusement sélectionnées conçues pour aider à accélérer et à simplifier le développement, telles que fitvids.js, pour créer des éléments vidéo flexibles.

### bases des fonctions CSS

Contrairement à d'autres langages de programmation, nous ne pouvons pas créer nos propres fonctions dans CSS. Cette logique est réservée au sélecteur CSS, qui vous permet de créer des règles de style conditionnel puissantes.

Contrairement à d'autres langages de programmation - la sortie des fonctions dans d'autres langages de programmation affecte généralement implicitement la logique ultérieure - la sortie des fonctions CSS est de nature visuelle. Cette sortie est utilisée pour contrôler la disposition et la présentation du contenu. Par exemple:

 .has-orange-glow {
  Filtre: Drop-Shadow (0,25REM 0 0.75REM # EF9035);
}

La fonction filter CSS drop-shadow() utilise les paramètres que nous fournissons pour créer un effet de lueur externe orange sur tout ce qu'il applique.

Dans la démonstration suivante, j'ai une fonction JavaScript appelée toggleOrangeGlow qui bascule l'application de la classe .has-orange-glow sur le logo CSS-Tricks. En utilisant cela avec la transition CSS, nous pouvons créer un effet brillant cool:

Vous connaissez peut-être certaines fonctions CSS, mais la langue a une liste incroyablement étendue!

Comme pour toute autre technologie sur le Web, différentes fonctions CSS ont différents niveaux de support de navigateur. Assurez-vous de faire des recherches et de tester pour vous assurer que votre expérience fonctionne pour tout le monde et utiliser quelque chose comme @supports pour offrir une expérience alternative de haute qualité.

Fonctions CSS couramment utilisées

url()

 .el {
  Contexte: URL (/images/image.jpg);
}

Utiliser url()

url() vous permet de créer un lien vers d'autres ressources pour les charger. Cela peut inclure des images, des polices et même d'autres feuilles de style. Pour des raisons de performances, il est préférable de limiter ce que vous chargez via url() , car chaque déclaration est une demande HTTP supplémentaire.

#### attr()

 / *<div data-example="foo"> * /
div {
  Contenu: att (data-example);
}<p><details><summary> Utiliser <code>attr()</code></summary><p> Cette fonction nous permet d'entrer HTML, d'obtenir le contenu de la propriété et de le fournir à la propriété CSS <code>content</code> . Vous verrez généralement <code>attr()</code> utilisé dans une feuille de style, qui est utilisée pour afficher l'URL du lien après le texte du lien. Une autre bonne application de cette fonction consiste à l'utiliser pour afficher une description alternative de l'image si elle ne charge pas.</p></details></p>
<p> #### <code>calc()</code></p>
<pre class="brush:php;toolbar:false"> .el {
  Largeur: calc (100vw - 80px);
}

Utiliser calc()

Si vous avez une fonction qui devrait prendre un certain temps pour expérimenter, c'est-à-dire calc() . Nous avons un guide complet sur calc() .

Cette fonction prend deux paramètres et calcule le résultat en fonction des opérateurs que vous fournissez (, -, *, /), à condition que ces paramètres soient des nombres avec ou sans unités d'accompagnement.

Contrairement aux préprocesseurs CSS comme SASS, calc() peut mélanger des unités, ce qui signifie que vous pouvez faire des choses comme la soustraction de 6rem à 100%. calc() est également mis à jour dynamiquement, donc si 100% représente la largeur, cela fonctionnera toujours si cette largeur change. calc() peut également accepter les propriétés personnalisées CSS comme paramètres, ce qui vous donne une flexibilité incroyable.

#### lang()

 p: lang (en) {
  Citations: "\ 201c" "\ 201d" "\ 2018" "\ 2019" "\ 201c" "\ 201d" "\ 2018" "\ 2019";
}

Utilisez lang()

L'inclusion des attributs lang dans votre HTML est une chose très importante. Lorsqu'il apparaît dans votre HTML, vous pouvez utiliser la fonction lang() pour localiser l'apparence de la valeur de la propriété et appliquer le style conditionnellement en fonction.

Une utilisation courante de ce sélecteur consiste à définir des citations spécifiques à la langue, qui est très utile pour l'internationalisation, etc.

Les concepteurs et les développeurs intelligents peuvent également l'utiliser comme un crochet pour un site Web avec des versions traditionnelles de style, où les considérations culturelles et / ou linguistiques signifient différentes perceptions de choses comme l'espace négatif.

#### :not()

 h3: pas (: premier-enfant) {
  marge: 0;
}

Utiliser not()

Ce sélecteur de pseudo-classe sélectionnera tout ce qui n'est pas spécifié par vous. Par exemple, vous pouvez utiliser body:not(img) pour localiser tout ce qui n'est pas une image. Bien que cet exemple soit très puissant, limiter la portée de :not() à un sélecteur plus centralisé (comme la classe de blocs de Bem) peut vous donner beaucoup de polyvalence.

Actuellement :not() ne prend en charge qu'un seul sélecteur comme paramètre, mais la prise en charge de plusieurs paramètres séparées par des virgules est en cours de développement (par exemple div:not(.this, .that) )!

Pour plus d'informations sur les fonctions, veuillez vous référer au texte d'origine. En raison des limites de l'espace, le grand nombre restant de fonctions CSS dans le texte d'origine est omis ici. Veuillez vous référer au texte d'origine pour des informations complètes.