Unidades de medida linear das CSS3
Publicado em: 09/09/2013Introdução
O Módulo das Recomendações do W3C para as CSS3 denominado: Valores e Unidades (CSS Values and Units Module Level 3) foi elevado ao status de Candidato à Recomendação em 28 de agosto de 2012 e nesse status permanece (no dia que escrevi este artigo) há exatos 1 ano.
Neste tutorial vou apresentar e comentar para vocês o item 5 daquela Recomendação. Esse item cujo título é "Distance Units: the '<length>' type" trata das unidades de medida de distância — '<length>' — previstas nas CSS3.
Unidade de medida '<length>' é uma dimensão e a Recomendação prevê que a unidade identificadora de uma dimensão igual a zero é opcional. Por exemplo:
Em CSS, sintaticamente é válido escrever 0px ou 0, 0mm ou 0. A vantagem de se omitir a unidade identificadora nestes casos é a economia de alguns bites no peso total de uma folha de estilos.
Em 2013, portanto 8 anos depois de lançada, os arquivos CSS da biblioteca jQuery abandonaram a sintaxe com unidade identificadora para valores zero adotadas desde sua criação em 2006.
Existem dois tipos de unidade de medida CSS: relativa e absoluta
Unidade de medida relativa
As unidades de medida relativa são mostradas e sumariamente descritas na tabela a seguir:
| unidade | relativa... |
|---|---|
em |
...ao tamanho de fonte do elemento |
ex |
...à x-height (altura da letra x) da fonte do elemento |
ch |
...à largura do glifo "0" (ZERO, U+0030) da fonte do elemento |
rem |
...ao tamanho da fonte do elemento raiz do documento |
vw |
...à largura da viewport (expresso em porcentagem) |
vh |
...à altura da viewport (expresso em porcentagem) |
vmin |
...à menor dimensão da viewport (expresso em porcentagem) |
vmax |
...à maior dimensão da viewport (expresso em porcentagem) |
Unidades em, ex e ch
Estas unidades de medida são relativas a uma característica métrica da fonte definida para o elemento onde elas, medidas, são usadas. A exceção ocorre quando uma destas três unidades de medida define o valor para o tamanho da fonte, ou seja, o valor para a propriedade CSS font-size, pois nesse caso o tamanho da fonte é relativo às características métricas da fonte do elemento-pai. Caso não haja um elemento-pai o valor de referência será o valor inicial do respectivo valor métrico da fonte.
Notar que para cada uma das três unidades tratadas nesse item, aquilo que estamos chamando de característica métrica e que serve de base para cálculo do valor relativo é diferente, ou seja:
em: característica métrica →font-size(tamanho da fonte;)ex: característica métrica → altura da letra x minúscula da fonte. Existe uma série de considerações e critérios tipográficos para que os Agentes de Usuário determinem esse valor. Não é do escopo deste tutorial aprofundar esse assunto. Para mais detalhes consulte um artigo na Wikipedia;ch: característica métrica → largura do glifo "0" (ZERO, U+0030) da fonte.
Unidades vw, vh, vmin e vmax
Estas unidades de medida relativa são conhecidas como "Medidas em porcentagem da Viewport" e são relativas ao "Bloco de Conteúdo Inicial" (a seguir veremos o que é esse bloco) e uma unidade dessa medida equivale a 1% da respectiva medida daquele bloco conforme mostrado na tabela anterior.
O W3C define "Bloco de Conteúdo Inicial" como sendo a área retangular que contém o elemento raiz do documento. Para mídias do tipo contínuo, como a tela de renderização, as dimensões daquele bloco são as dimensões, altura e largura, da tela ou viewport e para mídia impressa ou paginada são as dimensões da página.
Estas unidades de medida são bem suportadas pelos navegadores modernos. Consulte https://caniuse.com/#feat=viewport-units para tabela detalhada de suporte nos navegadores.
A sintaxe para definir essa unidade de medida é conforme exemplificado na regra CSS a seguir:
p {
width: 50vw;
height: 80vh;
margin: 4vw 0 0 0;
padding: 1.8vw 3.7vw;
outline: 1px solid blue;
border: 0.5vw solid red;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Trata-se de uma regra CSS a ser aplicada ao box criado por um parágrafo. Definiu-se uma largura total do box igual a 50% da largura da viewport. Definiu-se ainda margin, padding e border usando-se a unidade de medida vw. A definição destas três propriedades com uso dessa unidade de medida é discutível, contudo assim fizemos para que o leitor constate em um exemplo prático o comportamento das dimensões quando definidas com uso dessa unidade.
Definimos ainda uma altura igual a 80% da altura da viewport. A definição de outline visa a facilitar a visualização da página exemplo em navegadores que não suportam a propriedade border definida com essa unidade de medida como explicado a seguir.
É interessante notar que testei a página de exemplo nos navegadores Firefox 23, Chrome 29, Opera 16, Internet Explorer 10, Opera 16 e Safari 5.1 e a propriedade border foi honrada (suportada) apenas no navegador Firefox 23. Não testei no Safari 6.
Consulte a página de exemplo e redimensione a janela do navegador observando o ajuste das dimensões de acordo com a largura da janela.