Novidades no CSS!

Foram adicionadas 7 novos comandos de medidas: rem, vh, vw, vmin, vmax, ex, ch.
 
 

 
rem 
É possível basear um sistema de grids inteiro ou uma biblioteca de estilos tomando por base o tamanho de fonte do elemento raiz <html> usando <em> utilizando em para escalar em locais específicos.
vh e vw
Técnicas de web design responsive dependem fortemente de regras percentuais. No entanto, o percentual de css nem sempre é a melhor solução para todos os problemas. Width css é relativo ao elemento pai mais próximo. E se você quisesse usar a largura ou altura da janela, em vez de a largura do elemento? Isso é exatamente o que as unidades vh e vw proporcionam.
O elemento vh é igual a 1/100 da altura da janela. Por exemplo, se a altura do navegador é 900px, 1vh vale 9px. Da mesma forma, se a largura da janela de exibição é 750px, 1vw vale 7,5px.
Há aparentemente inifinitas utilizações para estas regras. Por exemplo, uma maneira muito simples de fazer altura total ou perto da altura, pode ser alcançado com uma unica linha de CSS:
Imagine que você queira um titulo que foi criado para preencher a largura da tela. Para conseguir isso, você deve definir um tamanho da fonte em vw. Que tamanho será aplicado com a largura do browser.
vmin e vmax
 
Enquanto vh e vm estão sempre relacionados com a altura e largura da viewport, respectivamente vmin e vmax estão relacionados com o valor máximo ou mínimo destas larguras e alturas, dependendo de qual é a menor e a maior. Por exemplo, se o navegador foi ajustado para 1100px de largura e a altura 700px1vmin seria 7px e 1vmax seria 11px. Contudo, se a largura foi ajustada para 800px e a altura definida para 1080px, vminseria igual a 8px e vmax 10.8px.
Mas quando usar estes valores?
Imagine que você precise de um elemento sempre visível na tela. Usar uma altura e largura ajustada para um valor abaixo de 100vmin permitiria isso. Por exemplo, um elemento quadrado que sempre toca pelo menos dois lados da tela pode ser definido assim:
ex e ch
As unidades ex e ch, semelhante a em e rem, contam com a fonte e tamanho da fonte atuais. No entanto, ao contrário de em e rem, essas unidades também contam com font-family como são determinados com base em medidas específicas de cada fonte.
A unidade ch (“character unit” ou “unidade-caractere”) é definida como sendo a “medida avançada” da largura do caractere zero (“0″). Algumas considerações muito interessantes sobre o que isso significa podem ser encontradas no blog de Eric Meyers, mas o conceito básico é de que, dada uma fonte com espaçamento uniforme, uma caixa com uma largura de N unidades-caractere, como width: 40ch; sempre pode conter uma string com 40 caracteres nesta determinada fonte. Enquanto usos convencionais de esta regra são relacionados a braille, as possibilidades de criatividade aqui certamente se estendem para além deste tipo de aplicação.
A unidade ex é definida como “a altura-x da fonte atual ou a metade de 1em”. A altura-x de uma determinada fonte é a altura da minúscula “x” dessa fonte. Muitas vezes, trata-se da marca do meio da fonte.
Há muitos usos para este tipo de unidade, sendo a maioria relacionada a micro-ajustes tipográficos. Por exemplo, o elemento sup pode ser empurrado para cima na linha usando posição relativa e um valor inferior do 1ex. Similarmente, é possível puxar um elemento sub para baixo. Os navegadores já têm seus padrões para estas tags, mas se um controle mais granular é preciso, você pode lidar com a situação de uma maneira mais explícita, como:
Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s