5 novos recursos de CSS e como usá-los

Neste artigo, vamos explorar cinco novas propriedades que chegam ao CSS, dê uma olhada no que eles fazem e como colocá-las ao uso prático em seus projetos. Nós vamos criar um layout do site Para uma página que inclui uma revista e uma pequena caixa de bate-papo no canto. Para mais truques CSS, dê uma olhada no nosso artigo explorando diferentes Exemplos de animação CSS. . Se você estiver criando um novo site, tente um Construtor de sites e não deixe de navegar no seu hospedagem na web. opções aqui.

Para este tutorial, você precisará do Chrome 65+ ou Firefox 59+. Dê uma olhada no Acompanhando o repo do GitHub. para o código passo-a-passo. Nós alavancaremos os seguintes recursos para criar uma melhor experiência e trabalhar em torno de alguns problemas. E se você está projetando ao lado de uma equipe, utilize o melhor armazenamento na núvem para manter as coisas coesivas.

Módulo de exibição CSS (Nível 3)

• Exibir: Conteúdo;
• Status W3C. - Rascunho de trabalho
• Suporte ao navegador

Módulo de regras condicionais CSS (Nível 3)

• @Apoio, suporte(...) {...}
• Status W3C. - Recomendação candidata
• Leitura adicional: MDN Web Docs.

CSS Overscroll Module (Nível 1)

• Comportamento excessivo: conter;
• Status W3C. - Não oficial
• Suporte ao navegador
• Leitura adicional: Assuma o controle do seu rolo

Módulo de seletores CSS (Nível 4)

• : foco dentro
• Status W3C. - Rascunho de trabalho
• Suporte ao navegador
• Leitura adicional: MDN Web Docs : foco dentro , : Placeholder-mostrado

O módulo de contenção CSS (nível 1)

• contém: pintar;
• Status W3C. - Recomendação candidata
• Suporte ao navegador
• Leitura adicional: Contenção CSS no Chrome 52

01. Configure o HTML para o Newsfeed

Primeiro, precisamos configurar alguma marcação super simples e repetida para o nosso Newsfeed. Vamos criar um .recipiente div Com uma lista não ordenada dentro. Dê o. & lt; ul & gt; a classe de. .alimentação e, em seguida, crie 10 itens de lista que contém um div com o .cartão Classe e o cartão de texto 1, cartão 2 etc.

Finalmente crie outro item de lista entre 5 e 6 com uma classe de .NESTE - isso será útil depois - e adicionar um & lt; ul & gt; Dentro com três itens de lista usando o cartão de texto A, cartão B Etc.

 & lt; corpo e gt;
 & lt; div classe = "contêiner" & gt;
 & lt; ul class = "feed" & gt;
 & lt; li & gt; & lt; div classe = "cartão" & gt; cartão 1 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div classe = "cartão" & gt; cartão 2 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div classe = "cartão" & gt; cartão 3 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div classe = "cartão" & gt; cartão 4 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div classe = "cartão" & gt; cartão 5 & lt; / div & gt; & lt; / li & gt;
    & lt; li class = "aninhado" & gt;
 & lt; ul & gt;
 & lt; li & gt; & lt; div classe = "cartão" & gt; cartão a & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div classe = "cartão" & gt; cartão b & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div classe = "cartão" & gt; cartão c & lt; / div & gt; & lt; / li & gt;
 & lt; / ul & gt;
 & lt; / li & gt;
 & lt; li & gt; & lt; div classe = "cartão" & gt; cartão 6 & lt; / div & gt; & lt; / lt; / li & gt;
 & lt; li & gt; & lt; div classe = "cartão" & gt; cartão 7 & lt; / div & gt; & lt; / lt; / li & gt;
 & lt; li & gt; & lt; div classe = "cartão" & gt; cartão 8 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "cartão" & gt; cartão 9 & lt; / div & gt; & lt; / lt; / li & gt;
 & lt; li & gt; & lt; div classe = "cartão" & gt; cartão 10 & lt; / div & gt; & lt; / li & gt;
 & lt; / ul & gt;
& lt; / div & gt;
& lt; / corpo e gt; 

02. Estilo o jornal

Agora precisamos adicionar alguns estilos rápidos para que isso comece a parecer mais com um jornal. Primeiro podemos dar & lt; corpo e gt; Uma cor de fundo cinza sutil. Então dê .recipiente uma largura máxima de 800px e uso Margem: 0 Auto; para o centro de alinhar.

Vamos também dar .cartão um fundo branco, 10px de preenchimento e margem e finalmente um min-altura de 300px - Isso deve nos dar o suficiente para tornar a página rolável. Por fim, vamos pular alguma magia do flexbox no .alimentação Para tornar os itens fluir bem, com duas cartas por linha.

 .feed {
Exibir: flex;
Flex-Wrap: Enrole;
}
.feed li {
Flex: 1 0 50%;
} 

03. Corrigir problemas de layout

Se você rolar a lista, notará que nossos cartões na lista aninhada, cartão A - C, estão causando alguns problemas de layout. Idealmente, gostaríamos que eles fluíssem com o resto dos cartões, mas eles estão todos presos em um bloco. A razão para isso é que um recipiente flexível - que é criado usando Exibir: flex. - só faz suas crianças imediatas (isto é, os itens da lista) em itens flexíveis.

Agora, normalmente a única maneira de corrigir isso é mudar a marcação, mas vamos fingir que você não tem esse luxo. Talvez a marcação da Newsfeed seja gerada por um roteiro de terceiros ou seja o código legado que você esteja apenas tentando resultar. Então, como podemos consertar isso?

Conheçer Exibir: Conteúdo. . Este pequeno um-liner essencialmente faz um elemento se comportar como se não estivesse lá. Você ainda vê os descendentes do elemento, mas o próprio elemento não afeta o layout.

Porque estamos fingindo que não podemos mudar a marcação (apenas para esta etapa) podemos ser um pouco inteligentes sobre isso e fazer o .cartão elementos os itens flexíveis e quase ignorar totalmente a marcação da lista.

Primeiro remova o existente .feed Li. classe e, em seguida, usar Exibir: Conteúdo. para ambos & lt; ul & gt; e & lt; li & gt; Elementos:

 .feed ul,
.feed li {
Exibir: Conteúdo;
} 

Agora você deve ver os cartões fluindo em ordem, mas perdemos o dimensionamento. Consertar isso adicionando a propriedade flex ao .cartão em vez de:

 .Card {
Flex: 1 0 40%;
} 

Ta-da! Nossas cartas estão usando as maravilhas da Flexbox como se a marcação de lista não ordenada estrutural não existisse.

Como uma nota lateral, você pode estar se perguntando por que Flex-Base. O valor é definido para 40%. Isso é porque o .cartão classe tem uma margem, que não está incluída no cálculo de largura, como você esperaria ao usar Caixa-dimensionamento: caixa de borda . Para contornar isso, só precisamos definir o Flex-Base. Alto o suficiente para acionar o envolvimento no ponto necessário e o Flexbox preencherá o espaço restante automaticamente.

04. Explorar consultas de recurso

Embora Exibir: Conteúdo. Faz exatamente o que precisamos, ainda é apenas no status de trabalho de trabalho com W3C. E no suporte cromado só chegou na versão 65 lançado em março de 2018. Incrivelmente Firefox teve apoio desde abril de 2015!

Se você desativar o estilo em DevTools, verá que nossas mudanças fizeram uma bagunça com o layout quando Exibir: Conteúdo. não é aplicado. Então, o que nós podemos fazer sobre isso? Hora do nosso próximo novo recurso - consultas de recurso.

Estes funcionam apenas como consultas de mídia, mas permitem que você pergunte ao navegador - usando o CSS sozinho - se uma expressão de propriedade e valor for suportada. Se eles são, os estilos contidos dentro da consulta serão aplicados. Agora, vamos nos mover Exibir: Conteúdo. Estilos em uma consulta de recurso.

 @supports (display: Conteúdo) {
.feed ul,
.feed li {
  Exibir: Conteúdo;
}
.Card {
  Flex: 1 0 40%;
}
} 

05. Use "não" para um resultado mais limpo

Normalmente, nesse tipo de cenário de aprimoramento progressivo, usaríamos a consulta para adicionar os novos estilos, mas também teria que desativar alguns dos estilos originais necessários para o layout de fallback.

No entanto, você pode decidir que, porque o suporte para consultas de recurso é muito bom (se você ignorar o IE), você realmente deseja usar a consulta do recurso não operador. Funciona assim como você esperaria, então podemos reaplicar nosso original flex. propriedade para os itens da lista quando Exibir: Conteúdo. não é suportado:

 @supports não (exibição: conteúdo) {
.feed li {
  Flex: 1 0 50%;
}
} 

Dentro de não Query podemos adicionar alguns estilos para que o .NESTE Itens basicamente reaplicar o que estava sendo herdado usando Exibir: Conteúdo. .

 Feed Li.Nested {
Flex-Base: 100%;
}
.feed li.nested ul {
 Exibir: flex;
 Flex-Wrap: Enrole;
} 

06. levando um passo adiante

Você já pode ver o potencial de consultas de recurso, mas a coisa realmente legal é que você pode combinar expressões usando os três operadores disponíveis: e , ou e não . Talvez possamos também verificar Exibir: flex. suporte e adicione um fallback baseado em flutuação.

Nós não vamos fazer isso aqui, mas se formos, primeiro modificaríamos as duas consultas de recurso assim:

 @Supports (display: Flex) e (display: Conteúdo) {
...
}
@supports (display: flex) e (não (exibição: conteúdo)) {
...
} 

Como um bônus, você também pode testar suporte a propriedades personalizadas como esta:

 @supports (--foo: verde) {
...
} 

07. Adicione uma caixa de bate-papo

Agora temos uma linda newsfeed no lugar, vamos adicionar uma pequena caixa de bate-papo que é fixada no canto inferior direito da tela. Precisamos de uma lista de mensagens e um campo de texto para o usuário entrar em sua mensagem. Adicione este bloco logo após a abertura & lt; corpo e gt; marcação:

 & lt; div classe = "chat" & gt;
 & lt; div classe = "mensagens" & gt;
 & lt; ul & gt;
& lt; li & gt; & lt; div classe = "mensagem" & gt; mensagem 1 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div classe = "mensagem" & gt; mensagem 2 & lt; / div & gt; & lt; / lt; / li & gt;
& lt; li & gt; & lt; div class = "mensagem" & gt; mensagem 3 & lt; / div & gt; & lt; / lt; / li & gt;
& lt; li & gt; & lt; div classe = "mensagem" & gt; mensagem 4 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "mensagem" & gt; mensagem 5 & lt; / div & gt; & lt; / lt; / li & gt;
& lt; li & gt; & lt; div classe = "mensagem" & gt; mensagem 6 & lt; / div & gt; & lt; / lt & gt;
& lt; li & gt; & lt; div classe = "mensagem" & gt; mensagem 7 & lt; / div & gt; & lt; / lt; / li & gt;
& lt; li & gt; & lt; div classe = "mensagem" & gt; mensagem 8 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div classe = "mensagem" & gt; mensagem 9 & lt; / div & gt; & lt; / lt; / li & gt;
& lt; li & gt; & lt; div classe = "mensagem" & gt; mensagem 10 & lt; / div & gt; & lt; / li & gt;
 & lt; / ul & gt;
 & lt; / div & gt;
 & lt; entrada tipo = "texto" classe = "entrada" & gt;
& lt; / div & gt; 

08. Estilo a caixa de bate-papo

Hora de adicionar rapidamente um pouco de estilo, então parece meio decente.

 .Chat {
 Fundo: #fff;
 Fronteira: 10px sólido # 000;
 fundo: 0;
 Tamanho da fonte: 10px;
 Posição: fixo;
 Direita: 0;
 Largura: 300px;
 Z-index: 10;
}
.Messages {
 Beira-fundo: 5px sólido # 000;
 Overflow: Auto;
 preenchimento: 10px;
 Max-Altura: 300px;
}
.mensagem {
 Antecedentes: # 000;
 raio de fronteira: 5px;
 cor: #fff;
 Margem: 0 20% 10px 0;
 preenchimento: 10px;
}
.Messages Li: Última criança .Message {
 margem inferior: 0;
}
.entrada {
 Borda: nenhuma;
 Exibir: bloco;
 preenchimento: 10px;
 Largura: 100%;
} 

09. Corrente de rolagem

Espero que agora você tenha uma pequena caixa de bate-papo com uma lista rolável de mensagens sentadas no topo do seu feed. Excelente. Mas você notou o que acontece quando você rola dentro de uma área aninhada e você chega ao final de sua gama rolável? Tente. Role todo o caminho até o final das mensagens e você verá que a própria página começará a rolar. Isso é chamado de encadeamento de rolagem.

Não é um grande negócio em nosso exemplo, mas em alguns casos, pode ser. Temos que contornar esse recurso antes de criar áreas roláveis ​​dentro dos modais ou menus de contexto.

A correção suja é para definir o & lt; corpo e gt; para estouro: escondido , Mas há uma nova e brilhante propriedade CSS que corrige tudo isso e é um simples um liner. Diga olá para Comportamento demais . Existem três valores possíveis:

• auto - o padrão, que permite o encadeamento de rolagem
• conter - Desativa o encadeamento de rolagem
• Nenhum - Desativa o encadeamento de rolagem e outros efeitos excessivos (por exemplo, Rubberbanding)

Nós podemos usar a taquigrafia Comportamento demais ou nós podemos segmentar uma direção específica com Overscroll-comportamento-x (ou -Y. ). Vamos adicioná-lo ao nosso .Messages. aula:

 .Messages {
...
Overscroll-comportamento-y: contém;
...} 

Agora tente a rolagem novamente e você verá que não afeta mais o rolo da página quando você chegar ao final do conteúdo.

Esta propriedade também é bem útil se você quiser implementar um recurso de atualização em seu PWA, digamos para atualizar o jornal. Alguns navegadores, como o Chrome para Android, adicionam automaticamente e até agora não houve uma maneira fácil de desativá-lo sem usar o JS para cancelar os eventos usando manipuladores não passivos afetando o desempenho.

Agora você só precisa adicionar Comportamento excessivo: contém para o elemento contendo viewport, provavelmente & lt; corpo e gt; ou & lt; html & gt; .

Vale a pena notar que esta propriedade não é um padrão W3C, sim uma proposta do grupo comunitário da Web Incubator (WICG). As propostas populares, estáveis ​​e maduras de WICG são consideradas para migração para um grupo de trabalho W3C em um estágio posterior.

10. Recolher a caixa de bate-papo quando não estiver em uso

No momento, a caixa de bate-papo ocupa um pouco de espaço, que a menos que estamos interagindo com isso é um pouco distrair. Felizmente, podemos fazer algo sobre isso com uma pequena magia de CSS.

Mas antes de tudo, precisamos modificar os estilos existentes ligeiramente. Por padrão, queremos que a caixa de bate-papo seja recolhida, então precisamos reduzir o altura máxima valor no .Messages. aula. Enquanto estamos lá, também podemos adicionar uma transição ao altura máxima propriedade:

 .Messages {
 ...
 Max-Altura: 25px;
Transição: Max-Altura 500ms; } 

Próxima página: Continue a explorar novos recursos do CSS nas etapas 11-20

• 1.
• 2.

Pagina atual: Explore 5 novos recursos CSS: passos 01-10