Validar hoja de estilo en osCommerce

Validar tu hoja de estilos stylesheet.css osCommerce

Como ya sabemos, esta cada vez más de moda tener una web accesible para todos y,

por qué no?

Por que no van a poder acceder todas aquellas personas a nuestro sitio web sin trabas y sin problemas.

Y si esto no es posible, pues no podemos abarcar todo, por lo menos cuantos más accedan a nuestra web, MEJOR.

Que bien todos pueden acceder a nuestra web, jejeje, parece fácil, pero y cuando el stylesheet esta desactivado, que ocurre?

Que la página queda completamente descuadrada, pero este es un tema del cual hablaremos en otro momento.

Aquí nos interesa que la W3C nos validé nuestra hoja de estilos para ser más accesible y que HERA y TAW, 2 sitios web que valoran y te dan recomendaciones para poder tener una web lo más accesible posible y según las normas A, AA, AAA.

Qué es esto de A, AA, AAA?

Es la accesibilidad de las páginas web de acuerdo con las recomendaciones de las Directrices de Accesibilidad para el Contenido Web 1.0 (WCAG 1.0).

Son normas para la navegabilidad del sitio, viene a ser:

• Uso obsoleto de etiquetas HTML, XHTML
• Uso del color: color de fondo y color de texto
• Uso de script: JavaScript, Applet, Java….
• Uso de etiquetas de formulario: etiqueta label, controles vacíos…
• y así un sínfin de datos necesarios para que en todos los casos y, sino es así, en la mayoría de los casos podamos permitir el acceso a la mayoría de los navegantes

Después de dar una idea generalizada de las necesidades para la accesibilidad, vamos con nuestra hoja de estilos:

Validar Errores CSS en osCommerce

1-Ir a W3C y validar nuestra hoja de estilos.

en este caso la W3C nos facilita el poder validar nuestra hoja tanto en local como desde nuestro dominio.

2-Una vez obtenidos los resultados, empezamos con el trabajo de validación, siempre y cuando nos de ERRORES que no ADVERTENCIAS, algo completamente distinto pero que se deben tener en cuenta.

3-Supongamos que nos han dado varios errores, uno muy típico es el del puntero del ratón:

306 .moduleRowOver Propiedad no válida : cursor hand no es un valor de cursor : hand

Que debemos hacer, personalmente suelo borrarlo. Dónde se encuentra?

Como podeis ver en la linea de error os da directamente el nº de linea donde se encuentra el error, en mi caso y siendo una hoja de estilos original sin haber añadido nuevos estilos personalizados, es la línea 306

vamos a ella y borramos donde pone

«cursor: hand;»

, esto no afecta a nuestra hoja de estilos, ni al puntero del ratón, simplemente elimina un estilo no válido que es la mano cuando colocas el puntero sobre un enlace.

Debemos hacer caso de las ADVERTENCIAS y corregirlas, normalmente se refieren a aspectos basados en el color de texto y de fondo, es conveniente modificar dichos colores utilizando colores similares pero no iguales o si utilizamos y conocemos los valores hexadecimales variarlos minimamente.

Tamaño de Texto

El tamaño de fuente viene predefinido en pixeles(px) y, esto le da un tamaño absoluto que en cualquier resolución de pantalla u ordenador que tenga se verá en ese tamaño.

Para que en función de cada resolución de pantalla y de ordenador que tenga el navegante y que el tamaño de fuente se adapte, sería conveniente utilizar valores «em». Recordar que al utilizar valores «em» no debe separarse del valor númerico, es decir, 1.2em y no 1.2 em, este último sería incorrecto.

Seguiremos con más trucos