Safari 17 traz Customizable Select: controle total do select nativo, mas com uma regra de ouro

O Safari 27 (não Safari 17, como consta no título da notícia atual, um erro de digitação que já circula em fóruns brasileiros) traz o Customizable Select, uma mudança estrutural no controle de formulários: agora é possível aplicar appearance: base-select e estilizar <select> e <option> com HTML rico (ícones, swatches, layout flexível), sem sair do padrão nativo. Isso não é só 'mais CSS': é a primeira vez que o WebKit permite conteúdo semântico dentro de <option>, como <img> ou <span>, mantendo navegação por teclado, suporte a leitores de tela e fallback limpo para navegadores antigos.

O recurso já está no Chrome 135 (abril/2025) e tem implementação confirmada no roadmap do Firefox. A diferença real do Safari 27 é a maturidade do suporte, incluindo 30 correções em SVG e alinhamento com a especificação CSS Selectors Level 4. Isso reforça uma tendência clara desde 2026: componentes nativos estão virando prioridade real, não só discurso. Veja: a cobertura anterior sobre Animações Controladas por Scroll e Sintaxe Range para Media Queries mostra o mesmo padrão, APIs nativas substituindo workarounds em JavaScript ou CSS frágeis.

A cobertura CEVIU anterior sobre Desenvolvimento Web: Evite Reinventar a Roda com Componentes Nativos (25/05/2026) já alertava que soluções customizadas de <select> prejudicam acessibilidade e manutenção. Agora, com o Safari 27, há uma alternativa viável, não apenas teórica, mas implementada, testada e multi-vendor. Antes, o conselho era 'use o nativo porque não há opção melhor'. Hoje, é 'use o nativo porque ele finalmente faz o que você precisa, sem trade-offs'.

Isso muda a economia de desenvolvimento: projetos que hoje gastam 8, 12 horas por componente para replicar um select com ícones e cores agora podem fazer isso em 20 minutos com CSS puro e sem risco de quebrar em iOS ou leitores de tela. Mais importante: elimina um dos maiores vetores de falha em acessibilidade em formulários, elementos vazios com aria-hidden ou display: none em opções. O texto não é 'um detalhe', é o núcleo funcional. Se sumir, o fallback do navegador mostra vazio. E o fallback *acontece*: em 12% dos acessos web no Brasil (dados StatCounter, maio/2026), o CSS não carrega por bloqueio de proxy ou conexão lenta.