Laboratório de consultas de contêiner do iShadeed

Ahmad Shadeed deu um salto inicial nas consultas de contêineres e tem um coleção crescente de exemplos baseado em padrões cotidianos.

E, se você perdeu, o dele última postagem sobre consultas de contêineres faz um trabalho maravilhoso cobrindo como eles funcionam desde o lançamento no Chrome 105 este mês (veremos eles no Safari 16 em breve). Alguns destaques e conclusões escolhidas:

• Os contêineres são definidos com o container-type propriedade. Demonstrações e propostas anteriores usavam contain ao invés.
• As consultas de contêiner são muito parecidas com as consultas de mídia que escrevemos o tempo todo para atingir o tamanho da janela de visualização. Então, em vez de algo como @media (min-width: 600px) {}, temos @container (min-width: 600px) {}. Isso deve tornar a conversão de muitas dessas consultas de mídia em consultas de contêiner bastante simples, sem o trabalho de descobrir os novos valores de ponto de interrupção.
• Podemos nomear contêineres para ajudar a distingui-los em nosso código (por exemplo container-name: blockquote).

Ótimo trabalho, Ahmad! E obrigado por compartilhar!

Link Direto →