Conteúdo deste artigo
- Testando no Safari quando você não tem o Safari
- Uma primeira olhada em ::checkmark
- Estilos de formas diferentes com border-shape + shape()
- Um guia conciso para sibling-index() e sibling-count()
- Gerenciando associações de âncora com atributos de dados e recursos avançados attr()
- Participe da pesquisa State of CSS 2026
- Novos recursos da plataforma web
What’s !important #12 fala sobre o antigo (testando no Safari quando você não tem o Safari), o novo (::checkmark), o intermediário (posicionamento de âncora, mas com HTML), e muito mais.
Apertem os cintos!
Testando no Safari quando você não tem o Safari
Safari é o segundo navegador mais popular, mas está disponível apenas para usuários da Apple. Justo. Quero dizer, a Apple investe pesadamente em tornar o Safari um navegador proprietário profundamente integrado ao software e hardware da Apple. No entanto, isso torna o teste de sites no Safari um pouco trabalhoso. Declan Chidlow explicou quais são nossas opções em relação ao teste no Safari quando você não tem o Safari .
Uma primeira olhada em ::checkmark
Sunkanmi Fafowora nos deu nosso primeira olhada no ::checkmark pseudoelemento , que resolve o antigo problema de não ser (realmente) capaz de definir marcas de seleção. Observe que isso também tem como alvo o indicador de estado verificado de rádios e seleções, não apenas caixas de seleção!
Estilos de formas diferentes com border-shape + shape()
Temani Afif apontou que podemos criar mais estilos de forma ao combinar border-shape com o shape() função (em comparação com clip-path) e alternar facilmente entre eles.
Um guia conciso para sibling-index() e sibling-count()
Durgesh Pawar fez um mergulho profundo em sibling-index() e sibling-count() , mostrando-nos todas as coisas legais que podemos fazer com essas funções CSS quase básicas.
Além disso, não perca a série de duas partes de Durgesh sobre dicas de transição de visualização aqui mesmo em CSS-Tricks.
Gerenciando associações de âncora com atributos de dados e recursos avançados attr()
Este é realmente meu! Decepcionado ao saber que o atributo anchor foi eliminado, o que forneceria uma maneira de gerenciar associações de âncoras usando HTML, demonstrei minha técnica alternativa que envolve gerenciar associações de âncoras com atributos de dados e recursos avançados attr() .
Não vou dar spoilers do CSS, mas aqui estão as diferentes sintaxes HTML que explorei:
<!-- anchor attribute -->
<div anchor="anchorA">Boat A</div>
<div id="anchorA">Anchor A</div>
<!-- Data attributes with custom ident (requires attr()) -->
<div data-boat="--anchorA">Boat A</div>
<div data-anchor="--anchorA">Anchor A</div>
<!-- Data attributes (requires attr() and ident()) -->
<div data-boat="anchorA">Boat A</div>
<div data-anchor="anchorA">Anchor A</div>Participe da pesquisa State of CSS 2026
Chegou aquela época do ano novamente!
Adoro essas pesquisas de “estado de” (especialmente a pesquisa State of CSS 2026 , mas tenho certeza que você já sabe disso). Este ano parece diferente, e não sou o único que notou.
Do rastreamento de abertura:
Respire fundo. Acalmar. Tudo bem se você não conhece todas as novas propriedades CSS. A verdade é que muito poucos de nós o fazemos.
Olha, um dos objetivos desta pesquisa sempre foi ajudar a manter os desenvolvedores atualizados sobre as melhores e mais recentes melhorias de CSS. Mas a desvantagem é que todo esse progresso às vezes pode parecer esmagador.
É por isso que este ano fizemos um esforço consciente para reduzir o número de recursos abordados na pesquisa, concentrando-nos naqueles que mais importam.
Entendi totalmente. Está se tornando cada vez mais difícil acompanhar o CSS. Minha lista de “coisas para verificar” está cada vez mais longa! Dito isto, nunca houve um momento mais emocionante para ser um fã de CSS. Essa sensação quando você aprende um novo recurso e depois mais dois são enviados é avassaladora, mas da melhor maneira possível.
Mesmo assim, o tempo não cresce nas árvores, então temos que descobrir em quais recursos investir, e é disso que se trata essas pesquisas de “estado de”. E eles estão se esforçando muito este ano, realmente se concentrando nos mais importantes.
Mas, se você tem apetite por todas as coisas CSS, ouvi dizer que há um ótimo blog para isso!
Novos recursos da plataforma web
- Firefox 151
- Consultas de estilo de contêiner (agora linha de base)
- Documento API Picture-in-Picture (apenas desktop, sem suporte para Safari)
Qualidade em vez de quantidade, eu acho!
Até a próxima.
O que é !importante #12: testes de Safari, ::marca de seleção, posicionamento de âncora HTML e muito mais originalmente escrito à mão e publicado com amor em CSS-Tricks . Você realmente deveria receber o boletim informativo também.
