Tutoriel sur la propriété CSS text-decoration-thickness

La propriété CSS text-decoration-thickness est utilisée pour contrôler l'épaisseur de la ligne de décoration d'un texte. Elle offre un moyen de personnaliser la largeur de la ligne utilisée pour souligner, barrer ou décorer du texte.

Syntaxe générale

La syntaxe générale de la propriété text-decoration-thickness est la suivante :

text-decoration-thickness: valeur;

La valeur peut être spécifiée en pixels, en em, en pourcentage ou avec des valeurs prédéfinies.

Valeurs par défaut	auto
Inherited:	non
Animable :	non En savoir plus sur l'animable
Version:	CSS4
Syntaxe JavaScript:	object.style.textDecorationThickness="5px"

Valeurs possibles de la propriété CSS text-decoration-thickness

Les valeurs possibles pour la propriété text-decoration-thickness sont :

auto: utilise l'épaisseur par défaut du navigateur.
from-font: utilise l'épaisseur de la police du texte.
thin: une ligne fine.
medium: une ligne de taille moyenne.
thick: une ligne épaisse.
nombre: spécifie une valeur numérique pour l'épaisseur de la ligne en pixels, em ou pourcentage.

Exemples pratiques d'utilisation de la propriété CSS text-decoration-thickness

Voici quelques exemples d'utilisation de la propriété text-decoration-thickness :

.souligne {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.barrer {
  text-decoration: line-through;
  text-decoration-thickness: from-font;
}

Dans cet exemple, la classe souligne applique une ligne de soulignement de 2 pixels d'épaisseur, tandis que la classe barrer applique une ligne de barré dont l'épaisseur est basée sur la police du texte.

Exemple: Modifier l’épaisseur du soulignement à l’aide du curseur

Modifiez la valeur de l'épaisseur de la décoration du texte dans l'exemple suivant pour voir comment la propriété text-decoration-thickness affecte la décoration du texte de l'élément :

Exemple : Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Tutoriel text-decoration-thickness</title> 
    <style>
body {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

h1 {
  display: block;
  font-size: 2em;
  color: hsl(207, 90%, 54%);
  text-decoration: underline;
}

@supports not (text-decoration-thickness: 1px) {
  h1::after {    
    content: "Your browser doesn't support this property";
    display: block;
    color: #e43;
    margin-top: 15px;
    font-weight: bold;
    text-decoration: unset;
    font-size: 12px;
  }
}

input {
  width: 200px;
  margin: 4rem auto 2rem;
}

output {
  display: block;
}

.code-container {
  width: 375px;
  max-width: 100%;
  overflow-x: auto;
  text-align: center;
  background-color: #272822;
  padding: 1.5em 0;
  border-radius: 3px;
  color: #F8F8F2;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  font-family: Consolas, Monaco, 'Andale Mono', monospace;
}

.token-property {
  color: #F92672;
}

.token-function {
  color: #E6DB74;
  display: inline-block;  
  width: 40px;
 
}

.token-selector {
  color: #a6e22e;
}
    </style>
</head>
<body>
<h1>Modifier l’épaisseur du soulignement à l’aide du curseur</h1>
<input type="range" min="1" max="20" step="1" value="3">

<output class="code-container"><span class="token-selector">h1</span> { <span class="token-property">text-decoration-thickness</span>: <span class="token-function">3px</span> }</output>
<script>var text = document.querySelector('h1'),
    slider = document.querySelector('input');

slider.addEventListener('input', function () {
  text.style.textDecorationThickness = this.value + 'px';
  document.querySelector('.token-function').textContent = this.value + 'px';
}, false);</script>
</body>
</html>

Dans cet exemple, lorsque vous déplacez le curseur, la valeur sélectionnée est utilisée pour mettre à jour l'épaisseur du soulignement du titre en temps réel. De plus, la valeur sélectionnée est affichée dans l'élément pour montrer le code CSS généré.

Astuces et conseils d'utilisation de la propriété CSS text-decoration-thickness

Voici quelques astuces et conseils pour utiliser la propriété text-decoration-thickness :

Utilisez des valeurs numériques pour spécifier précisément l'épaisseur de la ligne de décoration. Par exemple, vous pouvez expérimenter avec différentes valeurs en pixels pour obtenir l'épaisseur souhaitée.
Utilisez les valeurs prédéfinies telles que "thin", "medium" et "thick" si vous souhaitez une épaisseur standardisée sans spécifier de valeur numérique précise.
La valeur "from-font" est utile lorsque vous voulez que l'épaisseur de la ligne soit basée sur la police utilisée pour le texte. Cela peut donner un aspect cohérent avec la taille et le style de la police.
N'oubliez pas que la propriété text-decoration-thickness fonctionne en conjonction avec d'autres propriétés de décoration de texte telles que text-decoration-line et text-decoration-color. Vous pouvez les combiner pour créer des styles de décoration de texte complexes.
Assurez-vous de tester votre style de décoration de texte sur différents navigateurs pour vous assurer d'une apparence cohérente, car la prise en charge de la propriété text-decoration-thickness peut varier.

Avec la propriété text-decoration-thickness, vous pouvez ajouter une touche d'originalité et de personnalisation à la décoration de votre texte. Expérimentez avec les différentes valeurs et combinaisons pour obtenir l'effet souhaité.