Parlons de quelques noms de propriétés CSS moins connus

CSS est un langage de feuille de style puissant et flexible, spécialement utilisé pour la présentation visuelle de langages de balisage tels que HTML et XML dans la conception Web, rendant la présentation de pages Web plus belle, soignée et interactive. Cependant, bien que le module de propriétés CSS comporte des centaines de noms de propriétés standardisés, de nombreux noms de propriétés restent inconnus.

Ainsi, cet article présentera certains noms de propriétés CSS moins connus, et les caractéristiques et scénarios d'application de ces noms de propriétés seront révélés un par un.

1. overscroll-behavior
   Cet attribut définit le comportement de défilement de l'élément lorsque le périphérique tactile défile. L'attribut comprend quatre valeurs d'attribut : auto, contain, none et unset.

Tout d'abord, auto est le comportement par défaut. Lorsque l'utilisateur atteint la limite de défilement, l'appareil tactile effectuera l'opération de défilement par défaut. Contain interdit le débordement de la zone de défilement et conserve le comportement de défilement pénétrant, ce qui signifie que lorsque l'utilisateur touche l'appareil pour atteindre la limite de défilement, les éléments d'arrière-plan de la page peuvent défiler. L'attribut none désactive le comportement de défilement de la page entière et unset utilise la valeur d'attribut de l'élément parent de l'élément.

2. clip-path
   L'attribut clip-path permet aux développeurs de définir une forme irrégulière sur un élément en définissant un chemin. C’est une façon de réaliser quelque chose qui brise les contraintes des limites rectangulaires traditionnelles.

L'attribut clip-path définit la fonction clip-path, qui peut être définie comme une URL (pointant vers un fichier SVG) ou spécifier une forme géométrique. Si vous devez spécifier une forme spécifique, vous pouvez choisir parmi certaines formes prédéfinies, telles que ellipse(), polygon() et inset().

3. object-position
   Si vous utilisez une image comme arrière-plan, vous devez généralement utiliser background-position pour définir la position de l'image. Pour les images en ligne, vous pouvez utiliser l'attribut object-position pour obtenir le même effet.

object-position permet d'ajuster la position de l'image mappée dans l'élément. Utilisez cet attribut pour spécifier la position où l'objet doit apparaître par défaut. Généralement, cet attribut est utilisé conjointement avec l'attribut width ou height de l'élément afin d'ajuster la position de l'image mappée (c'est-à-dire la découper).

4. mix-blend-mode
   mix-blend-mode peut être utilisé pour contrôler la méthode de mélange des couleurs de deux éléments.

Par exemple, lorsque vous placez un masque de texte entre deux éléments, vous pouvez utiliser le mode mix-blend pour mélanger certaines couleurs et les rendre uniques grâce à l'opération de superposition à certains endroits. Cet attribut comprend diverses valeurs d'attribut (telles que multiplier, filtrer, superposer, assombrir, éclaircir, etc.). La propriété

5. text-align-last
   text-align-last détermine l'alignement du texte de la dernière ligne.

Normalement, le texte est aligné sur les limites d'un élément à l'aide de l'alignement du texte. Toutefois, si le texte déborde sur une autre ligne, l'alignement du texte de la dernière ligne peut différer de l'alignement de l'ensemble du bloc de texte. Cette propriété permet aux développeurs de spécifier l'alignement du texte de la dernière ligne.

6. shape-outside
   Utilisez cette propriété CSS pour définir une forme adaptative pour le texte. Cette propriété est utile, par exemple, si vous souhaitez organiser le texte autour d'une image ou d'une forme plutôt que d'utiliser la disposition traditionnelle du texte.

shape-outside prend en charge quatre fonctions de forme qui spécifient des formes adaptatives via leur syntaxe de type chemin SVG. Ces formes incluent le cercle, l’ellipse, le polygone et l’encart.

7. font-variant-ligatures
   Lors du rendu des scripts pass-through sur le Web, le rendu ne rend toujours pas correctement les caractères avec plusieurs composants de caractères.

L'utilisation de l'attribut font-variant-ligatures permet au navigateur d'utiliser le remplacement de glyphes qui ignore les formes de police spécifiques pour obtenir de meilleurs effets de rendu. Cet attribut inclut tous les remplacements de glyphes demi-largeur, les remplacements de ligatures (ligatures), les remplacements de glyphes numériques, les remplacements de glyphes de signes de ponctuation et les remplacements de lettres phonétiques.

Résumé
Les sept noms de propriétés CSS répertoriés ici ne sont pas largement connus, mais cela ne veut pas dire qu'ils ne sont pas utiles. En fait, connaître ces noms d’attributs peut vous rendre plus efficace lors du développement de pages Web, tout en rendant vos pages plus remarquables et plus complètes.

À l'avenir, avec le développement et les changements de la technologie Internet, de nouveaux noms d'attributs continueront d'apparaître. Par conséquent, nous devons suivre l’évolution des temps, continuer à apprendre et à essayer, afin de devenir un excellent ingénieur front-end.

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!