CSS possède des fonctionnalités moins connues mais utiles. Nous en examinerons quelques-uns.

1. Propriété CSS scroll-snap-type et propriété scroll-snap-stop

défilement-instantané-arrêt

Lorsque cette propriété est définie pour chaque élément enfant sous l'élément parent, lorsque vous faites défiler rapidement l'écran, l'élément suivant ne peut pas passer lors d'un défilement rapide avec un trackpad ou un écran tactile.

Gif :

Exemple :

Valeur :

• Normal : C'est la valeur par défaut. Le défilement est le comportement par défaut

• Toujours : après un balayage rapide avec le pavé tactile ou l'écran tactile, le défilement s'arrête et l'élément suivant devient net.

propriété de type scroll-snap

Faites glisser le curseur horizontalement, relâchez-le et vous verrez l'effet.
L'effet se produit lorsque vous cliquez sur une case, puis naviguez à l'aide des touches fléchées gauche et droite

Gif :

Exemple :

Valeur :

• Aucun : Il s'agit de la valeur par défaut

• X : L'effet est défini sur l'axe des x

• Y : L'effet est défini sur l'axe y

• Les deux : L'effet est défini sur l'axe des x et l'axe des y

• Obligatoire : Une fois le défilement terminé, le parchemin se déplace automatiquement vers le point de capture

2. Propriété CSS place-items

La valeur définie pour la propriété place-items sera appliquée aux propriétés align-items et justifier-items.

Exemple :

Valeur :

• Début : Aligner les éléments au début de la cellule de la grille

• Fin : Aligner les éléments à la fin de la cellule de la grille

• Centre : Aligner les éléments au centre de la cellule de la grille

3. CSS toutes les propriétés

Modifie toutes les propriétés appliquées à l'élément ou à son parent à leurs valeurs initiales

Exemple :

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Valeur :

• Unset : modifie toutes les propriétés appliquées à l'élément ou au parent de l'élément à leur valeur parent si elles sont héritables ou à leur valeur initiale sinon

4. Propriété CSS sélectionnée par l'utilisateur

Empêche les utilisateurs de sélectionner des textes

Exemple:

The text of this div element cannot be selected.

5. Propriété CSS caret-color

Modifie la couleur du curseur (caret) dans les champs de saisie de texte.

6. Propriété CSS text-decoration-skip-ink

La propriété CSS text-decoration-skip-ink spécifie comment le surlignement et le soulignement sont dessinés lors du passage du glyphe sur les lignes et les soulignements.

Valeur :

• Aucun:

Exemple :

text-decoration-skip-ink: none;

• Auto :

Exemple :

text-decoration-skip-ink: auto;

7. Propriété CSS pointeur-événements

La propriété pointer-events définit si un élément réagit ou non aux événements de pointeur.

Exemple :

Google


 Google

Valeur:

• Aucun : Par défaut

• Auto : L'élément ne réagit pas aux événements de pointeur

Conclusion

Nous avons examiné les fonctionnalités peu connues du CSS. Nous avons appris les fonctionnalités qui seront utiles dans vos applications.