5 fonctions CSS utiles (partager)

CSS contient de nombreuses fonctions et peut faire beaucoup de choses qui nécessitaient auparavant JavaScript. De nouvelles fonctionnalités sont ajoutées chaque année, facilitant notre développement et réduisant notre dépendance à JavaScript. Les fonctions CSS sont l’une des fonctionnalités les plus puissantes dont il dispose, et dans cet article, je vais en aborder quelques-unes que je trouve utiles.

(Partage vidéo d'apprentissage : tutoriel vidéo CSS)

attr()

attr La fonction est utilisée pour obtenir la valeur d'attribut du élément sélectionné. Il accepte trois paramètres, 属性名称, 类型 et 默认值.

Syntaxe :

attr( attribute-name <type-or-unit>? [, <fallback> ]? )

Exemple :

<p data-text="the attr function"
  data-tooltip="Hi from attr!" class="attr">This text is combined with</p>

css

p::after {
  content: ' ' attr(data-text);
}

p.attr:hover::after {
  content: ' ' attr(data-tooltip);
  background-color: orange;
  color: white
}

Effet :

Code source : https://codepen.io/protic_milos/pen/GRpYJKd

calc()

Cette fonction nous permet de calculer les valeurs CSS au lieu de spécifier exactes valeurs. Généralement utilisé pour calculer la taille ou la position d'un élément. Il prend en charge l'addition, la soustraction, la multiplication et la division.

Un point important à noter est que les opérateurs + et - doivent être séparés par des espaces, sinon ils ne fonctionneront pas correctement. Les opérateurs * et / n'ont pas cette restriction, mais pour des raisons de cohérence il est recommandé d'ajouter des espaces.

En plus, ce qui est génial, c'est qu'on peut mélanger des unités CSS, par exemple, on peut soustraire des pourcentages et des pixels.

On peut construire un exemple avec un élément centré en utilisant calc :

<p class="calc">Centered with calc</p>

css

p.calc {
  padding: 10px;
  background-color: orange;
  color: white;
  width: 200px;
  text-align:center;
  margin-left: calc(50% - 100px)
}

Effet :

Code source : https://codepen.io/protic_milos/pen/GRpYJKd

var()

Grâce à cette fonction, nous pouvons utiliser un attribut personnalisé comme la valeur d'une autre propriété CSS. En termes simples, on peut définir une couleur, par exemple, la mettre dans une propriété personnalisée (variable CSS) puis réutiliser la valeur de la propriété en appelant la fonction var.

Associée aux variables CSS, cette fonction améliore la maintenabilité et réduit la duplication. Un cas d'utilisation consiste à créer des thèmes pour les sites Web.

Cette fonction accepte deux paramètres, la propriété personnalisée et une valeur par défaut qui sera utilisée en cas de problème.

:root {
  --bg-color: green;
  --color: white
}

p.var {
  background-color: var(--bg-color);
  color: var(--color)
}

Effet :

Code source : https://codepen.io/protic_milos/pen/GRpYJKd

counter()

Personnellement, je n'ai jamais utilisé cette méthode, mais elle a l'air intéressante. Cette fonction renvoie la valeur actuelle du compteur spécifié et doit être utilisée avec counter-reset et counter-increment.

Nous pouvons l'utiliser pour calculer d'autres éléments, comme des listes ordonnées.

<div>
  <span>Mars</span>
  <span>Bounty</span>
  <span>Snickers</span>
</div>

Code source : https://codepen.io/protic_milos/pen/GRpYJKd

circle()

Cette fonction crée une zone circulaire qui masque l'élément auquel elle est appliquée. Vous pouvez spécifier son rayon et sa position. Souvent utilisé avec des images pour créer des formes arrondies. Cette fonction est la valeur de l'attribut clip-path.

En outre, il convient de mentionner qu’en plus des cercles, vous pouvez également créer des ellipses et des formes polygonales.

<img  alt="5 fonctions CSS utiles (partager)" >

css

img.circle {
  clip-path: circle(30%);
}

Code source : https://codepen.io/protic_milos/pen/GRpYJKd

Résumé

Comme je l'ai mentionné à plusieurs reprises auparavant, dans de nombreux cas, les développeurs ignorent les possibilités du CSS et perdent donc la simplicité du site Web. Chaque année, nous pouvons compter sur CSS pour nous offrir les capacités de conception dont nous avons besoin, et c'est formidable, JavaScript devrait se concentrer sur autre chose que sur la conception.

Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!