Unidades de dimensionamento

Podcast do CSS - 008: Dimensionamento de unidades

A Web é uma mídia responsiva, mas às vezes você quer controlar suas dimensões para melhorar a qualidade geral da interface. Um bom exemplo disso é limitar os comprimentos de linha para melhorar a legibilidade. Como você faria isso em um meio flexível como a Web?

Para este caso, é possível usar uma unidade ch, que é igual à largura de um "0" na fonte renderizada no tamanho calculado. Esse bloco permite limitar a largura do texto com uma unidade projetada para dimensionar o texto, o que, por sua vez, permite um controle previsível, independentemente do tamanho do texto. A unidade ch é uma das poucas unidades úteis para contextos específicos, como este exemplo.

Numbers

Os números são usados para definir opacity, line-height e até mesmo para valores de canais de cores em rgb. Os números são números inteiros sem unidade (1, 2, 3, 100) e decimais (0,1, 0,2, 0,3).

Os números têm significado dependendo do contexto. Por exemplo, ao definir line-height, um número representa uma proporção se você o definir sem uma unidade de suporte:

p {
  font-size: 24px;
  line-height: 1.5;
}

Neste exemplo, 1.5 é igual a 150% do tamanho computado da fonte em pixels do elemento p. Isso significa que, se o p tiver um font-size de 24px, a altura da linha será calculada como 36px.

Também é possível usar números nos seguintes locais:

• Ao definir valores para filtros: filter: sepia(0.5) aplica um filtro de sépia 50% ao elemento.
• Ao definir a opacidade: opacity: 0.5 aplica uma opacidade 50%.
• Em canais de cor: rgb(50, 50, 50), em que os valores de 0 a 255 são aceitáveis para definir um valor de cor. Consulte a lição sobre cores.
• Para transformar um elemento: transform: scale(1.2) dimensiona o elemento em 120% do tamanho inicial.

Porcentagens

Ao usar uma porcentagem no CSS, você precisa saber como ela é calculada. Por exemplo,width é calculado como uma porcentagem da largura disponível no elemento pai.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; 
}

No exemplo acima, a largura da div p é 150px, supondo que o layout use o box-sizing: content-box padrão.

Se você definir margin ou padding como porcentagem, elas serão uma parte da largura do elemento pai, independentemente da direção.

div {
  width: 300px;
  height: 100px;
}

div p {
  margin-top: 50%; /* calculated: 150px */
  padding-left: 50%; /* calculated: 150px */
}

No snippet acima, margin-top e padding-left serão calculados como 150px.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; /* calculated: 150px */
  transform: translateX(10%); /* calculated: 15px */
}

Se você definir um valor de transform como porcentagem, ela é baseada no elemento com o conjunto de transformação. Neste exemplo, a p tem um valor translateX de 10% e um width de 50%. Primeiro, calcule qual será a largura: 150px, porque ela é 50% da largura do elemento pai. Depois, pegue 10% de 150px, que é 15px.

Dimensões e comprimentos

Se você anexar uma unidade a um número, ele se tornará uma dimensão. Por exemplo, 1rem é uma dimensão. Nesse contexto, a unidade anexada a um número é chamada nas especificações como um token de dimensão. Os comprimentos são dimensões que se referem à distância e podem ser absolutos ou relativos.

Comprimentos absolutos

Todos os comprimentos absolutos têm a mesma base, o que os torna previsíveis onde quer que sejam usados em seu CSS. Por exemplo, se você usar cm para dimensionar o elemento e depois exibir, ela deverá ser precisa se você a comparar com uma régua.

div {
  width: 10cm;
  height: 5cm;
  background: black;
}

Ao imprimir esta página, a div seria exibida como um retângulo preto de 10 x 5 cm. Lembre-se de que o CSS não é apenas usado para conteúdo digital, mas também para estilizar conteúdo impresso. comprimentos absolutos podem ser realmente úteis ao projetar para impressão.

Comprimentos relativos

O comprimento relativo é calculado em relação a um valor base, assim como uma porcentagem. A diferença entre eles e as porcentagens é que é possível dimensionar os elementos contextualmente. Isso significa que o CSS tem unidades como ch, que usam o tamanho do texto como base, e vw, que se baseia na largura da janela de visualização (a janela do seu navegador). Os comprimentos relativos são particularmente úteis na Web devido à sua natureza responsiva.

Unidades relativas ao tamanho da fonte

O CSS fornece unidades úteis relativas ao tamanho dos elementos de tipografia renderizada, como o tamanho do próprio texto (unidades de em) ou a largura dos caracteres de famílias tipográficas (unidades de ch).

Unidades relativas à janela de visualização

Você pode usar as dimensões da janela de visualização (janela do navegador) como uma base relativa. Essas unidades ocupam o espaço disponível da janela de visualização.

div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

Neste exemplo, div será 10% da largura da janela de visualização, porque 1vw é 1% da largura da janela de visualização. O elemento p tem um max-width de 60ch. o que significa que não pode exceder a largura de 60 "0" na fonte e no tamanho calculados.

Unidades diversas

Existem algumas outras unidades que foram especificadas para lidar com determinados tipos de valores.

Unidades de ângulo

No módulo de cores (link em inglês), analisamos unidades de ângulo, que são úteis para definir valores de grau, como o matiz em hsl. Elas também são úteis para girar elementos dentro de funções de transformação.

div {
  width: 150px;
  height: 150px;
  transform: rotate(60deg);
}

Usando a unidade de ângulo deg, é possível girar uma div em 90° no eixo central.

div {
  background-image: url('a-low-resolution-image.jpg');
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  div {
    background-image: url('a-high-resolution-image.jpg');
  }
}

Unidades de resolução

No exemplo anterior, o valor de min-resolution é 192dpi. A unidade dpi significa pontos por polegada. Um contexto útil para isso é detectar telas de resolução muito alta, como a tela Retina em uma consulta de mídia e a exibição de uma imagem de resolução mais alta.

Teste seu conhecimento

Teste seus conhecimentos sobre dimensionamento

Recursos

• Valores e unidades das especificações de CSS: nível 4
• Dimensionamento e unidades no MDN
• Tudo sobre o Ems
• Uma explicação sobre porcentagens