oujood.com


chercher |

Tutoriel sur la propriété CSS tab-size

Définition de la propriété CSS tab-size

La propriété CSS tab-size permet de spécifier la largeur des tabulations dans un élément affichant du texte, comme les éléments <pre> (préformaté) ou <code>.

Syntaxe générale

La syntaxe générale de la propriété tab-size est la suivante :

    selector { tab-size: valeur;}
  
Valeurs par défaut8
Inherited: oui
Animable : non En savoir plus sur l'animable
Version: CSS3
Syntaxe JavaScript: object.style.tabSize="16"

Valeurs possibles de la propriété CSS tab-size

La valeur de la propriété tab-size peut être un nombre positif ou la valeur inherit. Par défaut, la valeur est tab-size: 8. Voici un exemple de différentes valeurs possibles :

    pre {
      tab-size: 4; /* Tabulation de 4 espaces */
    }
    
    pre.example {
      tab-size: 2; /* Tabulation de 2 espaces */
    }
  

Exemples pratiques d'utilisation de la propriété CSS tab-size

Voici quelques exemples pratiques d'utilisation de la propriété tab-size :

    <pre> /* Par défaut : tabulation de 8 espaces */
      Code indenté avec une tabulation de 8 espaces
    </pre>
    
    <pre style="tab-size: 4;">
      Code indenté avec une tabulation de 4 espaces
    </pre>
  

Exemple: Ajuster dynamiquement la propriété tabSize des éléments

Exemple :       Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Tutoriel sur la propriété css tab-size</title> 
<style>
body {
padding: 1rem;
}

pre {
border: 1px solid #999;
padding: 1rem;
background: #eee;
}

pre span {
display: inline-block;
}

#course {
tab-size: 0;
}
</style>

</head>
<body>
<input type="range" min="1" max="20" value="8" id="code-exemple-slider">

<pre id="code" style="tab-size: 5;">a {
	color: red;
	&:hover,
	&:focus {
	color: blue;
	}
}</pre>

<input type="range" min="0" max="20" value="0" id="raceExempleSlider">

<pre id="course">Course!
	<span>🚕</span>
		<span>🚙</span>
			<span>🚗</span>
</pre>

<script>
const codeExempleSlider = document.querySelector("#code-exemple-slider");

codeExempleSlider.addEventListener("input", () => {
  document.querySelector("#code").style.tabSize = codeExempleSlider.value;
});

const raceExempleSlider = document.querySelector("#raceExempleSlider");

raceExempleSlider.addEventListener("input", () => {
  document.querySelector("#course").style.tabSize = raceExempleSlider.value;
});
</script>
</body></html>

dans l'exemple:
Le code HTML et JavaScript fourni implémente des curseurs pour ajuster la valeur de la propriété tabSize des éléments <pre> dans le document.
Le JavaScript du code permet de mettre à jour dynamiquement la propriété tabSize des éléments <pre> en fonction de la valeur des curseurs. Lorsque vous déplacez les curseurs, la taille des tabulations des éléments <pre> correspondants est ajustée en temps réel.

Astuces et conseils d'utilisation de la propriété CSS tab-size

  • Il est recommandé d'utiliser des espaces pour l'indentation du code plutôt que des tabulations pour assurer une meilleure cohérence d'affichage sur différents navigateurs.
  • La valeur inherit permet de spécifier que la taille des tabulations doit être héritée du parent direct.
  • La propriété tab-size n'affecte pas les éléments non-textuels. Pour modifier l'espacement des tabulations dans des zones de texte éditable, vous devez utiliser d'autres techniques, telles que JavaScript ou CSS personnalisé appliqué spécifiquement à ces zones.
  • Si vous souhaitez désactiver complètement l'affichage des tabulations, vous pouvez utiliser la propriété white-space: pre-wrap; en combinaison avec tab-size: 0;.

Prise en charge de la propriété dans les navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

Les numéros suivis de -webkit- ou -o- indiquent la première version qui fonctionne avec un préfixe.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion217953
4.0 -moz-
6.1 15.0
10.6 -o-

La propriété tab-size est prise en charge par la plupart des navigateurs modernes, y compris Chrome, Firefox, Safari et Edge. Cependant, certaines anciennes versions de navigateurs peuvent ne pas la prendre en charge. Dans ce cas, il est préférable de fournir une alternative ou de trouver une solution de contournement.


Voir aussi nos tutoriel :

caption-side

Indique l'emplacement d'une légende du tableau

Détermine si une variable est une ressource">is_resource

 Détermine si une variable est une ressource

fonction convert_uudecode, convert_uudecode

Decode une chaîne au format uuencode