Fonctionnalités CSS que vous devriez connaître

Aujourd'hui, je veux vous parler de cinq fonctionnalités CSS intéressantes qui changeront probablement la façon dont vous écrivez des styles. Si vous apprenez CSS, ces fonctionnalités vont vous faciliter la vie. Regardons-les un par un, avec des exemples qui montrent comment on ferait les choses « à la main » et comment on peut les simplifier avec ces outils.

1. calc() : Effectuer des calculs directement dans votre CSS ?

Vous êtes-vous retrouvé à ajouter ou à soustraire manuellement des valeurs pour ajuster la taille d'un élément ? Avec calc(), vous pouvez le faire directement dans votre feuille de style, sans avoir besoin de calculs préalables.

Exemple sans calc() :

.container {
  width: 70%;
  margin: 20px;
}

Exemple avec calc() :

.container {
  width: calc(70% - 20px);
  margin: 20px;
}

Avec calc(), vous pouvez combiner différentes unités de mesure, telles que des pourcentages et des pixels, pour obtenir des conceptions plus flexibles et adaptables.

---

2. repeat() : Simplifie la création de grilles ?

Si vous utilisez la disposition en grille, vous vous êtes probablement retrouvé à écrire des colonnes ou des lignes répétitives. Avec Repeat(), vous pouvez éviter le code redondant et améliorer la lisibilité.

Exemple sans répétition() :

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Tres columnas iguales */
}

Exemple avec repeat() :

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Lo mismo, pero más limpio */
}

repeat() est idéal pour les grilles complexes ou les grilles avec un motif défini

---

3. min() : contrôle la taille dynamique maximale ?

min() vous permet de spécifier la plus petite taille parmi plusieurs valeurs, parfait pour les conceptions réactives.

Exemple sans min() :

.box {
  width: 50vw; /* Podría ser demasiado grande en pantallas grandes */
}

@media (min-width: 600px) {
  .box {
    width: 300px; /* Tamaño fijo en pantallas más grandes */
  }
}

Exemple avec min() :

.box {
  width: min(50vw, 300px); /* Escoge automáticamente el valor más pequeño */
}

Avec min(), vous réduisez les règles de requête multimédia et obtenez une conception plus fluide.

---

4. clamp() : contrôle complet de la taille dans les mises en page réactives

clamp() vous permet de définir une plage de tailles minimales et maximales, idéale pour les polices et les éléments qui doivent être mis à l'échelle en fonction de la taille de l'écran.

Exemple sans clamp() :

.text {
  font-size: 16px; /* Tamaño fijo */
}

@media (min-width: 600px) {
  .text {
    font-size: 20px;
  }
}

@media (min-width: 1200px) {
  .text {
    font-size: 24px;
  }
}

Exemple avec clamp() :

.text {
  font-size: clamp(16px, 2vw, 24px); /* Escala entre 16px y 24px */
}

Avec clamp(), vous éliminez plusieurs règles de requête multimédia et obtenez une mise en page beaucoup plus flexible.

---

5. fit-content() : Ajuster la largeur au contenu

fit-content() vous permet d'adapter la largeur d'un élément à la taille de son contenu, mais sans qu'il ne s'étende au-delà d'une valeur maximale que vous définissez. Ceci est très utile pour créer des boutons ou des éléments qui s'ajustent dynamiquement au texte qu'ils contiennent, mais ne deviennent pas excessivement grands sur les écrans larges.

Exemple sans fit-content() :

.button {
  width: auto; /* Se expande según el contenido */
  padding: 10px 20px;
  border: 1px solid black;
}

(Dans ce cas, si le texte du bouton est très long, le bouton sera trop étiré.)

Exemple avec fit-content() :

.container {
  width: 70%;
  margin: 20px;
}

Avec fit-content(), le bouton s'adaptera à la taille du texte, mais ne dépassera jamais 200px en largeur. Si le texte est plus court, le bouton sera plus petit.

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!