Fonctionnalités moins connues mais utiles de CSS-js tutoriel-php.cn

Fonctionnalités moins connues mais utiles de CSS

Susan Sarandon

Libérer： 2024-10-04 06:17:29

original

462 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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;

Copier après la connexion

Auto :

Exemple :

Less known but useful features of CSS


text-decoration-skip-ink: auto;

Copier après la connexion

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>

Copier après la connexion

Valeur :