Tamanho da guia - CSS-Tricks

A tab-sizepropriedade em CSS é usada para ajustar a quantidade de espaços exibidos para o caractere de tabulação.

pre ( tab-size: 8; /* default. Pretty big! */ tab-size: 2; tab-size: 13px; /* you can set a width-per-tab also */ )

Experimente esses controles deslizantes de intervalo para ver como os diferentes valores afetam a renderização das guias (quando você pode realmente ver as guias):

Veja a caneta
rNBLYaP de Chris Coyier (@chriscoyier)
no CodePen.

O caractere de tabulação (unicode U + 0009) é normalmente convertido em espaços (unicode U + 0020) pelas regras de processamento de espaço em branco e, em seguida, reduzido para que apenas um espaço em uma linha seja exibido no navegador. Portanto, a tab-sizepropriedade só é útil quando as regras de processamento de espaço em branco não se aplicam, ou seja, dentro de um

tag e quando a white-spacepropriedade de um elemento é definida como pre-wrap.
O valor padrão da tab-sizepropriedade é de 8 caracteres de espaço e pode aceitar qualquer valor inteiro positivo.
Ele são alguns exemplos das várias maneiras que tab-sizepodem ser usadas:


Veja a Pen
rNBLYjg de Chris Coyier (@chriscoyier)
no CodePen.
Como você pode ver nos exemplos acima, a tab-sizepropriedade ajusta a quantidade de espaço alocado para o caractere de tabulação. No segundo exemplo, o
tag deve ter sua white-spacepropriedade ajustada pre-wrappara que os caracteres da tabulação não sejam convertidos em espaços regulares e recolhidos.
Você também notará no CSS que os prefixos -moz-e -o-são necessários para Firefox e Opera, mas o Chrome aceita a versão sem prefixo.
Polyfill
O padrão de oito espaços é terrivelmente grande. Se você precisar oferecer suporte a um navegador não compatível, poderá usar este polyfill (o JavaScript nesta caneta):
Veja o
polyfill Pen tab-size por CSS-Tricks (@ css-tricks)
em CodePen.
Suporte para navegador
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.


Área de Trabalho
 

 
 
cromada
 
Raposa de fogo
 
IE
 
Beira
 
Safári
 

 

 

 
 
42
 
53 *
 
Não
 
79
 
13,1
 

 

 

Celular / Tablet
 

 
 
Android Chrome
 
Android Firefox
 
Android
 
iOS Safari
 

 

 

 
 
88
 
85 *
 
81
 
13,4-13,7
 

 

 

Esta propriedade se degrada muito graciosamente. Cada navegador oferece suporte a caracteres de tabulação. A falta de suporte para esta propriedade não altera nada, o navegador apenas exibe abas de oito caracteres.