recherche

Maison  >  Article  >  interface Web  >  Fonctionnalités moins connues mais utiles de CSS

Fonctionnalités moins connues mais utiles de CSS

Susan Sarandon
Susan Sarandonoriginal
2024-10-04 06:17:29467parcourir

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 :

Less known but useful features of CSS

Exemple : 


<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 80%;
  aspect-ratio: 2/1;
  margin: auto;
  border: solid black 2px;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.blue {
  background-color: lightblue;
  width: 90%;
}

.green {
  background-color: lightgreen;
  width: 80%;
}

.pink {
  background-color: lightpink;
  width: 70%;
}

#container > div{
  margin: 5px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  aspect-ratio: 4/1;
}
</style>
</head>
<body>


  <div class="container">
    <div class="blue"></div>
    <div class="green"></div>
    <div class="pink"></div>
    <div class="green"></div>
    <div class="blue"></div>
    <div class="green"></div>
    <div class="blue"></div>
    <div class="pink"></div>
    <div class="blue"></div>
    <div class="green"></div>
    <div class="pink"></div>

</div>

</body>
</html>

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 :

Less known but useful features of CSS

Exemple : 


<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 80%;
  aspect-ratio: 2/1;
  overflow-x: scroll;
  overflow-y: hidden;
  margin: auto;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
    border: solid black 2px;
}

.blue {
  background-color: lightblue;
  aspect-ratio: 1/2;
  height: 95%;

}

.green {
  background-color: lightgreen;
  height: 50%;
  aspect-ratio: 2/1;
}

.blue, .green {
  display: inline-block;
  scroll-snap-align: center;
   margin: 5px;
}
</style>
</head>
<body>


<div class="container">
  <div class="blue"></div>
  <div class="green"></div>
  <div class="blue"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

</body>
</html>

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 parchemin 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 à la fois aux propriétés align-items et justifier-items.

Exemple :

Less known but useful features of CSS


<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 60%;
  aspect-ratio: 3/2;
  border: solid black 1px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  place-items: center;
}

.container > div {
  width: 50%;
  aspect-ratio: 2;
  background-color: red;
}
</style>
</head>
<body>
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

</body>
</html>

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 :

Less known but useful features of CSS


<!DOCTYPE html>
<html>
<head>
<style> 
html {
  font-size: small;
  color : red
}
}

.a{
  background-color: yellow;
  color: red;
  all: unset;
}
</style>
</head>
<body>


<div class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

</body>
</html>

Valeur :

  • Unset : change 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 : 


<!DOCTYPE html>
<html>
<head>
<style> 
div {
  -webkit-user-select: none;
  -ms-user-select: none; 
  user-select: none;
}
</style>
</head>
<body>

<div>The text of this div element cannot be selected.</div>

</body>
</html>

5. Propriété CSS caret-color

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


<!DOCTYPE html>
<html>
<head>
<style>
.a {
  caret-color: blue;
}

</style>
</head>
<body>

<input class="a" value="bulue">

</body>
</html>

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 :

Less known but useful features of CSS


text-decoration-skip-ink: none;
  • Auto :

Exemple :

Less known but useful features of CSS


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 : 


<!DOCTYPE html>
<html>
<head>
<style> 
.a {
  pointer-events: none;
}

.b {
  pointer-events: auto;
}
</style>
</head>
<body>


<div class="a"><a href="https://www.gogle.com">Google</a></div>


<div class="b"> <a href="https://www.google.com">Google</a></div>

</body>
</html>

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.

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!

css less if for while select auto using Property pointer default this
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Un guide complet des fonctions ESnd ArrowArticle suivant：Un guide complet des fonctions ESnd Arrow

Articles Liés

Voir plus