Cansado de aplicar estilos de foco em cliques do mouse? :focus-visible é o truque.

[ad_1]

Ter estilos de foco para qualquer elemento interativo é crucial em um site. Oculto de Vries:

Indicadores de focofazem a diferença entre o dia e a noite para as pessoas que dependem deles. […]

Os contornos de foco ajudam os usuários a descobrir onde estão em uma página. Eles mostram qual campo do formulário está preenchido no momento ou qual botão está prestes a ser pressionado. As pessoas que usam um mouse podem usar o cursor para isso, mas nem todo mundo usa um mouse. Por exemplo, existem muitos usuários de teclado: uma pessoa com um bebê em um braço, pessoas com doenças crônicas que impedem o uso de um mouse e, claro… desenvolvedores e outros usuários avançados.

Você não tenho para criar o seu próprio :focus estilos em CSS, embora você possa. Por padrão, os navegadores aplicam seus próprios estilos aos elementos interativos. Mas se você não gosta desse visual, a tentação é criar o seu próprio estilo. Então, se você fizer algo assim, boom, temos estilos de foco sob nosso controle:

button:focus {
  outline: 5px solid red;
}

(A propósito, outline é um grande amigo para focar estilos por razões em que Manuel Matuzovic entra.)

Mas ao fazer isso, também fizemos outra coisa: fizemos isso quando você clica (como com um mouse em um computador desktop, também conhecido como multar ponteiro) aqueles :focus estilos se aplicam ao elemento. Isso pode ser altamente indesejável, levando o CEO a ser como por que o botão muda de aparência quando clico nele??? Justo, CEO, vamos consertar isso.

O truque é usar :focus-visible que é relativamente novo, mas tem um suporte de navegador bastante sólido. O objetivo disso é aplicar estilos de foco que se aplicam sempre que um elemento recebe o foco, exceto quando um ponteiro fino clica nele. O que é meio perfeito mesmo. Mas se você está nervoso em ir all-in só usando :focus-visibleuma forma de continuar a usar :focus estilos também é envolvê-los em um @supports bloquear como:

@supports not selector(:focus-visible) {
    button:focus {
        
    }
}

Felizmente, o suporte do navegador para @supports e a selector() função é um pouco melhor do que :focus-visibleentão isso compra algum suporte adicional ao navegador .