3 novidades do CSS para aprender em 2017
Ano novo, coisas novas! Várias novidades estão aparecendo para esse ano, e teremos que prestar atenção em várias delas, vou listar aqui, as 3 propriedades que estou mais animado, falando de CSS, para 2017!
1. Feature Queries
A um tempo atrás, eu escrevi sobre Feature Queries, que era uma das propriedades do CSS que eu realmente queria. E agora ele está aqui! 🎉
Já é suportado pela maioria do navegadores (incluíndo Opera Mini), infelizmente, IE11 não suporta, mas o Edge sim!
Feature Queries usa a regra @supports para criar uma condicional dentro do CSS que só será aplicada caso o navegador suporte aquela propriedade e valor. Um exemplo básico abaixo, Flexbox só será aplicado, caso o navegador suporte display: flex.
@supports ( display: flex ) {
.foo { display: flex; }
}Você também pode usar os operadores and e not, para criar Feature Queries mais complexas. Por exemplo, podemos detectar se o navegador suporta a versão antiga das propriedades de Flexbox:
@supports ( display: flexbox )
and
( not ( display: flex ) ) {
.foo { display: flexbox; }
}Suporte atual
2. Grid Layout
O CSS Grid Layout Module define um sistema para criar layouts baseados em grid. Existe algumas similaridades com o Flexbible Box Layout Module, mas é mais específico para layouts de página e contém um numero diferente de propriedades para ser usadas.
Posicionamento explícito de itens
Um grid é criado a partir de um container grid (usando a propriedade display: grid), e um itens do grid (seus elementos filhos). No nosso CSS, nós podemos explícitamente organizar e ordenar as posições desses itens do grid, independentemente da posição do item na marcação HTML.
Por exemplo, no meu artigo sobre como criar um layout com grid css, eu mostrei que podemos usar esse módulo para criar o famoso layout do Santo Graal.
O CSS para criá-lo, tem apenas 31 linhas:
.hg__header { grid-area: header; }
.hg__footer { grid-area: footer; }
.hg__main { grid-area: main; }
.hg__left { grid-area: navigation; }
.hg__right { grid-area: ads; }.hg {
display: grid;
grid-template-areas: "header header header"
"navigation main ads"
"footer footer footer";
grid-template-columns: 150px 1fr 150px;
grid-template-rows: 100px
1fr
30px;
min-height: 100vh;
}@media screen and (max-width: 600px) {
.hg {
grid-template-areas: "header"
"navigation"
"main"
"ads"
"footer";
grid-template-columns: 100%;
grid-template-rows: 100px
50px
1fr
50px
30px;
}
}
Tamanhos flexíveis
O CSS Grid Module introduz uma nova unidade, chamada de fr, que representa uma fração do espaço que sobrou dentro do container.
Isso nos permite dividir o height e width dos itens do grid, baseado no espaço disponível no container grid. Um exemplo, ainda sobre o layout Santo Graal, eu quero que a parte main, preencha todo o espaço disponível entre os dois sidebars. Posso simplesmente escrever:
.hg {
grid-template-columns: 150px 1fr 150px;
}Espaços (Gutters)
Nós podemos definir espaços para o nosso grid usando as propriedades grid-row-gap, grid-column-gap e grid-gap. Essas propriedades aceitam um valor de porcentagem, essa porcentagem é baseada no tamanho da área de conteúdo.
.hg {
display: grid;
grid-column-gap: 5%;
}Suporte atual
O CSS Grid Module estará disponível em Março desse ano na maioria dos navegadores.
Edição, 2 Março 2017 — Uma referência na área é a britânica Rachel Andrew, eu recomendo você investir no curso Advanced CSS Layout que ela tem!
3. Variáveis nativas
Último, mas não menos importante, CSS Variables (ou como a especificação chama, CSS Custom Properties for Cascading Variables Module Level 1. Esse módulo introduz a possibilidade de criar variáveis que podem ser usadas como valores para as propriedades CSS.
Por exemplo, podemos usar uma variável de cor para armazenar o valor da cor do nosso tema, e reutiliza-lá em várias partes do nosso CSS.
:root {
--theme-colour: cornflowerblue;
}h1 { color: var(--theme-colour); }
a { color: var(--theme-colour); }
strong { color: var(--theme-colour); }
Isso é algo que já conseguia-mos com a ajuda de pré-processadores como SASS, mas agora, CSS Variables tem a vantagem de rodar direto no navegador. Isso significa que podemos atualizar seu valor em tempo de execução.
Para mudar o valor da variável --theme-colour do exemplo acima, tudo que precisamos fazer é usar JS:
const rootEl = document.documentElement;
rootEl.style.setProperty('--theme-colour', 'plum');Suporte atual
Mas não temos suporte pelos navegadores, como faço?
Como você viu nas tabelas acima do Can I use. O suporte para maioria dessas propriedades será disponibilizada ainda esse ano, até lá, podemos contar com Progressive Enhancement nas nossas aplicações.
Você pode conferir a palestra da Ire Aderinokun sobre esse tema na Fronteers Conference do ano passado.
E você?
Quais as novidades que você está mais animado para 2017?
