Unidades de dimensionamento

Podcast do CSS - 008: unidades de dimensionamento

A Web é uma mídia responsiva, mas às vezes você quer controlar as dimensões dela para melhorar a qualidade geral da interface. Um bom exemplo disso é limitar o comprimento das linhas para melhorar a legibilidade. Como você faria isso em uma mídia flexível como a Web?

Nesse caso, você pode usar uma unidade ch, que é igual à largura de um caractere "0" na fonte renderizada no tamanho calculado. Essa unidade 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 desse texto. A unidade ch é uma entre muitas unidades úteis para contextos específicos, como este exemplo.

Números

Os números são usados para definir opacity, line-height e até mesmo para valores de canal de cores em rgb. Os números são inteiros sem unidade (1, 2, 3, 100) e decimais (.1, .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;
}

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

Observação : é recomendável usar um valor sem unidade para line-height, em vez de especificar uma unidade. Como você aprendeu no módulo de herança, o font-size pode ser herdado. A definição de um line-height sem unidade mantém a altura da linha em relação ao tamanho da fonte. Isso oferece uma experiência melhor do que, por exemplo, line-height: 15px, que não muda e pode parecer estranha com determinados tamanhos de fonte.

Os números também podem ser usados 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 cores: 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 uma porcentagem, eles vão fazer parte da largura do elemento pai, independente 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 transform como porcentagem, ele será baseado no elemento com o conjunto de transformações. Nesse exemplo, p tem um valor translateX de 10% e um width de 50%. Primeiro, calcule qual será a largura: 150px, porque ela representa 50% da largura do contêiner pai. Em seguida, pegue a 10% de 150px, que é 15px.

Termo-chave : a propriedade "transform" permite alterar a aparência e a posição de um elemento girando, distorcendo, dimensionando e traduzindo-o. Isso pode ser feito em um espaço 2D e 3D.

Dimensões e comprimentos

Se você anexar uma unidade a um número, ela se tornará uma dimensão. Por exemplo, 1rem é uma dimensão. Nesse contexto, a unidade anexada a um número é chamada de 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

Todas as durações absolutas são resolvidas na mesma base, o que as torna previsíveis sempre que são usadas no CSS. Por exemplo, se você usar cm para dimensionar o elemento e, em seguida, imprimi-lo, ele vai ficar preciso se for comparado a uma régua.

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

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

Unidade	Nome	É equivalente a
cm	Centímetros	1 cm = 96 px/2,54
mm	Milímetros	1 mm = 1/10 de 1 cm
P	Quarto de milímetros	1Q = 1/40 de 1 cm
in	Polegadas	1 pol = 2,54 cm = 96 px
pc	Picas	1pc = 1/6 de 1 pol.
pt	Pontos	1 pt = 1/72 de 1 pol.
px	Pixels	1 px = 1/96 de 1 pol.

Comprimentos relativos

Um comprimento relativo é calculado com base em um valor base, como uma porcentagem. A diferença entre elas e as porcentagens é que é possível dimensionar elementos de acordo com o contexto. Isso significa que o CSS tem unidades como ch, que usam o tamanho do texto como base, e vw, que tem como base a largura da janela de visualização (a janela do navegador). Comprimentos relativos são especialmente úteis na Web devido à natureza responsiva.

Unidades relativas ao tamanho da fonte

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

unidade	relativas a:
em	Relativa ao tamanho da fonte, ou seja, 1,5 em é 50% maior do que o tamanho da fonte calculada base do pai. (Historicamente, a altura da letra maiúscula "M").
exemplo	Heurística para determinar se é preciso usar a altura x, uma letra "x" ou "0,5em" no tamanho de fonte computado atual do elemento.
capa	Altura das letras maiúsculas no tamanho da fonte computada atual do elemento.
ch	O avanço médio do caractere de um glifo estreito na fonte do elemento (representado pelo glifo "0").
ic	O avanço médio de caracteres de um glifo de largura total na fonte do elemento, representado pelo glifo "水" (CJK, ideograma de água CJK, U+6C34).
rem	Tamanho da fonte do elemento raiz (o padrão é 16px).
lh	Altura da linha do elemento.
rlh (link em inglês)	Altura da linha do elemento raiz.

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 fazem parte do espaço disponível da janela de visualização.

unidade	em relação a
vw	1% da largura da janela de visualização. As pessoas usam essa unidade para fazer truques interessantes com fontes, como redimensionar a fonte de um cabeçalho com base na largura da página. Assim, quando o usuário redimensionar a fonte, ela também será redimensionada.
Vh	1% da altura da janela de visualização. Esse recurso pode ser usado para organizar itens em uma interface, caso você tenha uma barra de ferramentas de rodapé, por exemplo.
vi	1% do tamanho da janela de visualização no eixo inline da raiz do elemento. O eixo refere-se aos modos de gravação. Nos modos de escrita horizontal, como o inglês, o eixo em linha é horizontal. Nos modos de escrita vertical, como algumas famílias tipográficas japonesas, o eixo em linha é executado de cima para baixo.
vb	1% do tamanho da janela de visualização no eixo de bloco do elemento raiz. No eixo do bloco, essa seria a direção do idioma. Idiomas LTR, como o inglês, têm um eixo de bloco vertical, já que os leitores de inglês analisam a página de cima para baixo. Um modo de escrita vertical tem um eixo de bloco horizontal.
vmin (link em inglês)	1% da dimensão menor da janela de visualização.
vmax (em inglês)	1% da dimensão maior da janela de visualização.

div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

Nesse 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 ele não pode exceder a largura de 60 caracteres "0" na fonte e no tamanho calculados.

Objetivo : ao dimensionar o texto com unidades relativas como em ou rem, em vez de uma unidade absoluta, como px, o tamanho do texto pode atender às preferências do usuário. Isso pode incluir o tamanho da fonte do sistema ou do elemento pai, como <body>. O tamanho base da em é o pai do elemento, e o tamanho da base da rem é o tamanho da fonte básica do documento. Se você não definir um font-size no elemento html, o tamanho da fonte do sistema recomendado pelo usuário será respeitado se você usar comprimentos relativos, como em e rem. Se você usar unidades px para dimensionar texto, essa preferência será ignorada.

Unidades diversas

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

Unidades de ângulo

No módulo de cores, vimos as 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 um 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');
  }
}

Observação : outras unidades angulares incluem rad (radianos), grad (gradianos) e turn, que representam uma parte de um ângulo, em que 1turn = 360deg e 0.5turn = 180deg.

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 é a detecção de telas de resolução muito alta, como telas 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

Quais das opções a seguir são dimensões válidas?

cm

Centímetros, uma dimensão absoluta válida.

ui

A interface do usuário não é uma dimensão no CSS.

em

Polegadas, uma dimensão absoluta válida.

Dia 8

Não é uma dimensão de CSS

px

Pixels, uma dimensão absoluta válida.

ch

Unidades de caracteres, uma dimensão relativa válida.

ux

A experiência do usuário não é uma dimensão no CSS.

em

Unidades da letra "M", uma dimensão relativa válida.

ex

Unidades da letra "x", uma dimensão relativa válida.

Qual a diferença entre unidades absolutas e relativas?

Os valores absolutos não podem mudar, mas as unidades relativas podem

Os valores absolutos podem mudar, mas a base calculada não.

O comprimento absoluto é calculado com base em um único valor base compartilhado, em que uma unidade relativa é comparada com um valor base que pode mudar.

As unidades relativas são mais adaptáveis e fluidas por causa da consciência contextual, mas há um poder e uma previsibilidade nas unidades absolutas que podem ser fundamentais para certos designs.

As unidades da janela de visualização são absolutas.

Verdadeiro

Eles podem parecer absolutos, mas estão relacionados a uma janela de visualização, que pode ser um iframe ou uma visualização da Web, e nem sempre representa o tamanho da tela de um dispositivo.

Falso

Eles são relativos à janela do documento em que foram criados, que pode ou não ser igual à tela de um dispositivo.

Recursos

• Nível 4 de unidades e valores de especificação de CSS
• Dimensionamento e unidades no MDN
• Tudo sobre Ems
• Explicação sobre porcentagens