Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

7 Unidades CSS Que Você Provavelmente Não Conhece

by
Length:MediumLanguages:

Portuguese (Português) translation by thierry rene matos (you can also view the original English article)

É fácil lidar com as técnicas CSS que conhecemos bem, mas isso pode criar uma certa desvantagem ao se deparar com novos desafios.

Com o crescimento exponencial da web, a demanda por soluções na área também é grande. Por outro lado, como webdesigners ou desenvolvedores, não temos escolha a não ser conhecer, e muito bem, nossas ferramentas de trabalho.

Isso inclui até mesmo ferramentas especializadas - aquelas que não são utilizadas com tanta frequência, mas quando são, definitivamente resolvem o problema.

Hoje, vou apresentar algumas ferramentas para CSS que você provavelmente nunca ouviu falar. Essas ferramentas são todas unidades de medida, como pixels e ems, mas é bem possível que você nunca tenha ouvido falar delas.

rem

Vamos começar com um exemplo similar a algo que você já conhece. A unidade em é definida como a font-size padrão. Então, por exemplo, se definirmos o tamanho da fonta no body, o valor do em para qualquer elemento derivado do body vai ser igual ao tamanho da fonte definida.

Aqui definimos que a div vai ter o font-size(tamanho da fonte) de 1.2em. Isso siginifica 1.2 vezes qualquer que seja o tamanho definido para a fonte no momento, neste caso, 14px. O resultado é 16.8px.

Agora o que acontece quando definirmos diversos valores para o em, um derivado do outro? No exemplo abaixo aplicamos o mesmo CSS do primeiro exemplo. Cada div herda o tamanho da fonte do elemento pai, criando um gradual aumento no tamanho da fonte.

Enquanto esse pode ser o caminho a percorrer em certos projeto, na maoria das vezes tudo que você deseja é uma estrutura simples com medidas unicas. Neste caso você deve utilizar o rem. o "r" no rem significa "root"; é igual ao tamanho da fonte para o elemento root; na maioria dos casos o elemento root é o elemento html.

Nas três div agrupadas no exemplo anterior, a fonte evolui para 16.8px.

Boas práticas para Grids

Rems não são úteis apenas para tamanho de fonte. Você basear por exemplo toda a grid e os elementos UI dentro do HTML com a unidade rem, e escalar o em quando necessário em elementos especificos. Essa técnica vai te dar mais noção do tamanho da fonte caso voce precise altera-la em algum ponto.

Conceitualmente, a ideia por trás de uma estratégia dessas é permitir que a interface altere seu tamanho de acordo com o conteúdo. Da pra notar que essa solução não faz o menor sentido na maioria dos casos.

Posso utilizar?

Feature: unidade rem (root em) no caniuse.com

vh e vw

O web design responsivo utiliza muito regras de porcentagem. Mas porcentagem no CSS nem sempre é a melhor solução. A largura do CSS é relativa ao elemento pai mais proxímo. E se quisermos utilizar a largura ou altura do viewport ao invés da largura do elemento pai? É exatamente esse o papel das unidades vh e vw.

O elemento vh é igual a 1/100 da altura do viewport. Por exemplo, se a altura do navegador é 900px, 1vh seria algo em torno de 9px. Da mesma forma, um viewport de 750px em relação a 1vh, é igual a 7.5px.

Existem casos bem especificos para a utilização dessas regras. Por exemplo, um simples slide em tela cheia, ou quase tela cheia, pode ser criado com apenas uma linha de CSS:

Imagine que você deseja que um parágrafo assuma a largura da tela. Para fazer isso, você pode definir o tamanho da fonta com vw. O tamanho da fonte vai assumir a largura do navegador.

Posso utilizar?

Feature: Unidades Viewport: vw, vh em caniuse.com

vmin e vmax

Enquanto as unidades vh e vm estão sempre relacionadas a altura e largura do viewport, respectivamente, vmin e vmax estão relacionados ao maxímo ou minímo da largura ou altura, depenendo de quem é menor ou maior. Por exemplo, se o navegador está definido para 1100px de largura e 700px de altura, 1vmin seria cerca de 7px e 1vmax em torno de 11px. Outro exemplo, se a largura estiver definida em 800px e a altura em 1080px, vmin seria igual a 8px enquanto o vmax ficaria em torno de 10.8px.

E quando devemos utilizar esses valores?

Imagine que você precisa de um elemento que está sempre visível na tela. Utilizar uma altura e largura configurada através do valor de vmin, abaixo de 100, permitiria isso. Por exemplo, um quadrado que sempre toca pelo menos dois lados da tela pode ser configurado assim:

Se você precisa de um quadrado sempre cobrindo o viewport visível (tocando os quatro cantos da tela todas as vezes), utilize as mesmas regras exceto com vmax.

.

A combinação dessas regras fornece uma maneira super flexivel de trabalhar as medidadas do viewport, o que pode abrir caminho para novas soluções mais simples e práticas.

Posso utilizar?

Feature: Unidades Viewport: vmin, vmax em caniuse.com

ex e ch

As unidade ex e ch, similares a em e rem, também herdam a fonte e o tamanho da fonte. Mas, diferente do em e do rem, essas unidades também herdam a propriedade font-family, já que essa também é uma das propriedades CSS para fonts.

A unidade ch, ou unidade caracter é definida como sendo uma maneira avançada para mensurar a largura de zero caracter, 0. Você pode encontrar algumas discussões interessantes sobre isso neste post do blog do Eric Meyers, mas basicamente, definir uma fonte monospace, uma box com largura de N caracter, algo em torno de width: 40ch;, pode conter uma string com 40 caracteres nesta mesma fonte. Enquanto o uso convencional desse recurso está ralacionado as técnicas braile, várias soluções interessantes podem ser criadas utilizando lógica e criatividade.

A unidade ex é definida como o "x-height da fonte padrão OU metade de um em”. O x-height de uma fonte é a altura da caixa baixa daquela fonte. Algumas vezes, isso está entre a marca central da fonte.

x-height; a altura do lower case x (leia mais sobre   A anatomia da tipografia web )

Existem diversos usos para este tipo de unidade, a maioria é voltada para ajustes detalhados de tipografia. Por exemplo, o elemento sup que representa o superscript, pode ser definido utilizando posição relativa e um rodapé com valor de 1ex. Da mesma forma, você pode colocar um elemento subscript abaixo. Por padrão os navegadores utilizam regras superscript- e subscript-specific com vertical-align, mas se você deseja ter mais controle, você pode seguir o exemplo abaixo:

Posso utilizar?

A unidade ex está presente desde o CSS1, mas você não vai encontrar um suporte digno para a unidade ch. Para mais especificações e suporte, acesse o post Unidades e valores CSS no blog do Eric Meyer.

Conclusão

Se manter atualizado em relação a evolução do CSS é muito bom para saber utilizar da melhor maneira possível a linguagem. Além disso, você pode no futuro se deparar com problemas que podem ser solucionados com essas unidades menos conhecidas. Tire um tempo para ler as novas especificações das unidades. Se inscreva na newslleter do CSS Weekly para receber por email as principais novidades sobre desenvolvimento web e não se esqueça de se inscrever na newsletter do Tuts+ para receber semanalmente atualizações sobre cursos e tutoriais.

Leitura complementar

Mais alguns artigos sobre unidades CSS.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.