Se puede navegar por Internet con un mouse, un teclado y todo tipo de dispositivos de tecnolog\u00eda de asistencia. Independientemente del m\u00e9todo de entrada que utilice, una indicaci\u00f3n clara del elemento interactivo actual es crucial para una buena experiencia de usuario y accesibilidad. Las hojas de estilo predeterminadas de los navegadores hacen un gran trabajo, pero a veces queremos ser un poco m\u00e1s sofisticados.<\/p>\n\n\n\n
Las pseudoclases CSS :focus<\/span> y :focus-visible<\/span> nos permiten personalizar el aspecto de un indicador de foco. El soporte para :focus-visible<\/span> arrib\u00f3 recientemente en Safari, podemos esperar que se agregue en una pr\u00f3xima versi\u00f3n estable y que esta caracter\u00edstica est\u00e9 disponible en todos los navegadores modernos.<\/p>\n\n\n\n Como se mencion\u00f3 anteriormente, los navegadores, de forma predeterminada, hacen un gran trabajo para determinar si un elemento debe indicar el enfoque en funci\u00f3n del tipo de elemento, la interacci\u00f3n del usuario, los a\u00f1os de comentarios, las pruebas y el estudio de la interacci\u00f3n del usuario. Este estado generalmente se indica mediante el contorno.<\/p>\n\n\n\n Agregar la pseudoclase :focus<\/span> a un elemento har\u00e1 que muestre estilos espec\u00edficos de foco e ignorar\u00e1 la heur\u00edstica de los navegadores. El :focus-visible<\/span>, por el contrario, aplica un estilo personalizado solo si se muestra de forma nativa. Es una situaci\u00f3n en la que todos ganan, una bonita apariencia personalizada y a\u00f1os de investigaci\u00f3n en una propiedad de CSS.<\/p>\n\n\n\n Un ejemplo cl\u00e1sico es un elemento de bot\u00f3n. \u00bfCon qu\u00e9 frecuencia desea ver un anillo de enfoque despu\u00e9s de hacer clic en un bot\u00f3n? Casi nunca. \u00bfCon qu\u00e9 frecuencia desea ver un indicador de enfoque en un bot\u00f3n cuando navega por un sitio web con un teclado? Casi siempre.<\/p>\n\n\n\n Art\u00edculo original: The difference between CSS focus and focus-visible pseudo-class<\/a><\/p>\nCSS focus vs. focus-visible<\/h2>\n\n\n\n
Ejemplo<\/h2>\n\n\n\n
.element:focus-visible {\n background-color: yellow;\n}<\/code><\/pre><\/div>\n\n\n
\n