Pergunta

O que é mínimo permitido valor negativo para o text-indent propriedade?

Eu estava usando um valor bizarramente grande em meu site (algo como text-indent: -99999999px) e parou de funcionar com a última atualização do Google Chrome.O IE ainda funciona bem, mas talvez seja necessário remover alguns 9 para fazê-lo funcionar novamente com o Chrome.

Isenção de responsabilidade:sim, esse valor é um pouco paranóico, usei-o para me divertir e esqueci completamente até que o texto apareceu na tela hoje.Mas o geralmente sugerido text-indent: -9999px pode facilmente falhar em algum momento em um futuro (não tão) distante?

Foi útil?

Solução

Um valor seguro é provavelmente -32768px, no entanto, isso não faz parte das especificações, mas sim uma observação de uma restrição legada específica da implementação (possivelmente desatualizada).

Antes que os valores das propriedades CSS possam ser aplicados aos elementos no momento da renderização, essas declarações precisam ser analisadas em algo mais operável e abstrato do que, efetivamente, uma string.Quero dizer, você pode tipo quase tudo como valor de propriedade:

.a {text-indent: -999px;}
.b {text-indent: -99999999px;}
.c {text-indent: medium potato;}

O primeiro exemplo seria, com os dedos cruzados, analisado corretamente;o último é inválido e seria ignorado (já que uma batata média atualmente não faz parte das especificações CSS do w3c);mas o do meio seria peculiar se fosse transbordar (não "cabe" na memória alocada pelo navegador).Eu montei um violino e estes são os text-indent valores em que os navegadores "engasgaram" e padronizaram para zero:

#On OSX 10.8 Lion 64bit:
Safari 6       -2^31
Chrome 22      -2^26  #your original -99999999px would have failed here
Firefox 14     -2^70
Opera 12       -2^70

#On Win Server 2008 64bit:
Firefox 13     -2^70
Chrome 21      -2^70
IE 9           -2^70

Isso me deixou curioso, amanhã farei mais testes em outra caixa. Resultados acima atualizados, nada muito animado. Você também pode executar seu próprio teste usando este violino - o primeiro item que permanecer visível mostraria o valor aplicado que foi ignorado. Presumo que os valores variam dependendo do navegador/sistema operacional usado, bem como possivelmente hardware.

Lembro-me de ter visto pela primeira vez um prático referência de tal limitação em um artigo sobre como estilizar colunas falsas^ que sugeriu que uma restrição conservadora seria a de um número inteiro com sinal de 16 bits (de -32768 a +32767) - que se aplicaria a não somente recuos de texto, mas outros valores de comprimento.Não sei quão consistente é esse valor em diferentes navegadores e suas versões, nem quão aplicável seria a frações ou valores expressos em unidades diferentes.

Outras dicas

Não há travessão mínima de texto - eu usei apenas um par de pixels antes, mas isso é uma má prática para usar para layout / design, certifique-se de rolar para fora da tela ao visualizar layouts de tamanho de plasma 99999PX - é mais que suficiente- Use paixões e posições de margens se você ainda quiser ver o texto e estiver usando para o estilo.

Eu tenho problemas no Safari do iPad usando um número de 99999, fixado para mim configurá-lo para 9999EM. Então talvez não haja limite, mas deve ser um para evitar esses erros.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top