Qual é o valor da unidade css 'ex'?

(Não deve ser confundido com Xunit , uma popular biblioteca de teste de unidade .Net.)

Hoje, em um ataque de tédio, comecei a inspecionar o DOM do Gmail (sim, eu estava muito entediado).

Tudo parecia muito simples até que notei uma especificação interessante sobre as larguras de certos elementos. O ilustre Googlites havia especificado uma série de colunas de mesa usando a rara unidade 'ex'.

width: 22ex;

No começo fiquei perplexo ("o que é um 'ex'?"), Então me lembrei: pareço me lembrar de algo de anos atrás, quando estava aprendendo CSS. Das especificações CSS3 :

[A unidade ex é] igual à altura x usada da primeira fonte disponível . A altura x é assim chamada porque geralmente é igual à altura do "x" minúsculo. No entanto, um 'ex' é definido mesmo para fontes que não contêm um "x".

Bem e bom. Mas eu nunca vi isso ser usado antes (muito menos usei eu mesmo). Eu uso ems com bastante frequência e aprecio seu valor, mas por que o "ex"? Parece uma medida muito menos padrão do que o em, e muito menos útil.

Uma das poucas páginas que encontrei discutindo esse tópico é o http://www.xs4all.nl/~sbpoley/webmatters/emex.html de Stephen Poley . Stephen faz bons pontos, no entanto, sua discussão parece inconclusiva para mim.

Portanto, minha pergunta é: qual o valor que a unidade 'ex' empresta ao web design?

(Esta pergunta pode ser considerada subjetiva, mas deixarei essa decisão para pessoas mais experientes do que eu.)

É útil quando você deseja dimensionar algo em relação à altura das letras minúsculas do seu texto. Por exemplo, imagine trabalhar em um design assim:

Na dimensão tipográfica do design, a altura das letras tem relações espaciais importantes com o resto dos elementos. As linhas na imagem de origem acima têm o objetivo de ajudar a apontar a altura x do texto, mas também mostram onde estariam as diretrizes se o projeto fosse feito em torno desse texto.

Como Jonathan apontou nos comentários, ex é simplesmente a versão em altura de em (largura).

Para responder à pergunta, um uso é sobrescrito e subscrito. Exemplo:

sup {
    font-size: 75%;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    bottom: 1ex;
}

Outra coisa a considerar aqui é como sua página é dimensionada quando um usuário aumenta ou diminui o tamanho da fonte (talvez usando ctrl + roda do mouse (janelas)).

Eu os usei com .. padding-left: 2 em; padding-right: 2 em;

e ex com fundo acolchoado: 2 ex; tampo de enchimento: 2 ex;

Assim, usando uma unidade de medida vertical para uma propriedade de dimensionamento vertical e uma unidade de medida horizontal para uma propriedade de dimensionamento horizontal.

O valor de tê-lo na especificação CSS, se é isso que você está realmente perguntando, é exatamente o mesmo que o valor de ter a unidade em.

Ele permite que você defina as fontes para tamanhos relativos .

Você não sabe qual é o tamanho da minha fonte básica. Portanto, uma boa estratégia para web design é definir tamanhos de fonte que sejam relativos, em vez de absolutos; o equivalente a "o dobro do tamanho normal" ou "um pouco menor que o tamanho normal", em vez de um tamanho fixo como "dez pixels".

Observe que termos como "espaçamento de linha simples / dupla" na verdade significam o deslocamento entre duas linhas adjacentes, medido por em . Portanto, "espaçamento de linha duplo" significa que cada linha tem uma altura de 2 em .

Portanto, se você quiser especificar uma distância vertical que seja proporcional às "linhas", use em. Só use ex se quiser a altura real da letra minúscula, o que é, ouso dizer, um exemplo muito mais raro.

ATUALIZAÇÃO: O padrão da web permite que o navegador use 0.5em como ex ou derivar da fonte.

No entanto, não há como incorporar de forma confiável qualquer informação de "altura x" em uma fonte (OpenType ou webfont).

Conseqüentemente, a primeira possibilidade torna a ex-unidade redundante, e a última carece de qualquer meio confiável para acontecer. E o fato de ser possível torna-o ainda menos confiável.

Assim, defendo a falta de valor da ex-unidade.