2012-02-14 18 views
5

En los últimos tiempos, ha habido algunos grandes artículos (y alboroto) sobre la práctica de la siguiente manera:CSS Esquema mejores prácticas

a, input, textarea, button { 
    outline: none; 
} 

mayoría éstos parecen relacionarse con problemas de accesibilidad.

No es mi intención eliminar esta característica por completo (como hace el código anterior) ... Sin embargo, esta característica arruina mi diseño original, agregando bordes no deseados (¿erm, contornos?) En áreas no deseadas.

El problema principal con esto es el hecho de que estos contornos, siendo mal nombrados como son, realmente delinean el área rectangular alrededor del elemento, no su contorno (por ejemplo, ignora el radio del borde, etc.).

Veamos un ejemplo, ¿o sí?

http://jsfiddle.net/x5Mex/

La única solución para esto es tener el código anterior en ejecución y emplear mi propio sistema. Como siempre lo hicimos con los navegadores web de todos modos ...

Respuesta

8

Indeed. Un contorno está alrededor del área rectangular en el exterior del borde. No toma en cuenta las esquinas redondeadas.

No hay nada malo con la desactivación del esquema, sólo asegúrese de agregar alguna otra característica de accesibilidad para las personas que utilizan el teclado, por ejemplo, cambiar el color de su fondo en el enfoque

Example

+0

¡Hmm debería haberlo pensado yo! Gracias. – Christian

+2

+1 - pero una advertencia; asegúrese de que su reemplazo sea lo suficientemente visible. Reemplazar un borde gris claro con un borde ligeramente más oscuro será bastante difícil de distinguir para algunas personas. Si bien puede ver el cambio de color, una vez que el control tiene foco (en este ejemplo) no se "ve enfocado". Por lo tanto, debe tener en cuenta el diseño general de la página, de modo que proporcione un estilo consistente de resaltado de enfoque en la página/sitio y que el elemento enfocado actualmente sea visualmente evidente y destaque lo suficiente de los elementos no enfocados. – BrendanMcK

+1

De hecho, fue solo un ejemplo, pero sí, debe hacer que el cambio sea obvio @ChristianSciberras. –

0

Como muchos elementos de formulario, el elemento de botón tiene diferentes representaciones en los navegadores, y se necesitan tantas correcciones ...

http://fvsch.com/code/button-css/ de F. Verschelde debería dejarlo usted delinea los botones alrededor de todo el elemento y no alrededor de su contenido.