La tab-sizepropiedad en CSS se utiliza para ajustar la cantidad de espacios que se muestran para el carácter de tabulación.
pre ( tab-size: 8; /* default. Pretty big! */ tab-size: 2; tab-size: 13px; /* you can set a width-per-tab also */ )Juegue con estos controles deslizantes de rango para ver cómo los diferentes valores afectan cómo se representan las pestañas (cuando en realidad puede ver las pestañas):
Vea el Pen
rNBLYaP de Chris Coyier (@chriscoyier)
en CodePen.
El carácter de tabulación (unicode U + 0009) normalmente se convierte en espacios (unicode U + 0020) mediante las reglas de procesamiento de espacios en blanco y luego se contrae para que solo se muestre un espacio en una fila en el navegador. Por lo tanto, la tab-sizepropiedad solo es útil cuando las reglas de procesamiento de espacios en blanco no se aplican, es decir, dentro de un
etiqueta y cuando lawhite-spacepropiedad de un elemento se establece enpre-wrap.El valor predeterminado de la
tab-sizepropiedad es de 8 caracteres de espacio y puede aceptar cualquier valor entero positivo.A continuación se muestran algunos ejemplos de las diversas formas que
tab-sizese pueden utilizar:Vea el Pen
rNBLYjg de Chris Coyier (@chriscoyier)
en CodePen.Como puede ver en los ejemplos anteriores, la
tab-sizepropiedad ajusta la cantidad de espacio asignado para el carácter de tabulación. En el segundo ejemplo, ella etiqueta debe tener su
white-spacepropiedad ajustadapre-wrappara que los caracteres de tabulación no se conviertan a espacios regulares y se contraigan.También notará en el CSS que los prefijos
-moz-y-o-son necesarios para Firefox y Opera, pero Chrome acepta la versión sin prefijo.Polyfill
El valor predeterminado de ocho espacios es tremendamente grande. Si necesita admitir un navegador no compatible, puede usar este polyfill (el JavaScript en este Pen):
Vea el
polyfill del tamaño de pestaña de la pluma de CSS-Tricks (@ css-tricks)
en CodePen.Soporte del navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 42 | 53 * | No | 79 | 13,1 |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 * | 81 | 13,4-13,7 |
Esta propiedad se degrada con mucha gracia. Todos los navegadores admiten caracteres de pestaña. La falta de soporte para esta propiedad no rompe nada, el navegador simplemente muestra pestañas de ocho caracteres de ancho.