La capa de presentación debe realizarse integramente en CSS, no se deben utilizar ni el atributo style
ni el elemento STYLE
.
Hay que asegurar que cuando no están disponibles los estilos el contenido siga siendo legible y el orden del mismo sea el adecuado.
El soporte que los dispositivos móviles ofrecen para CSS no siempre es el mismo:
- Dispositivos con compatibilidad completa, incluyendo almacenamiento en cache del archivo CSS.
- Dispositivos con compatibilidad completa sin almacenamiento en cache: en este caso se pueden incluir los estilos en el elemento STYLE, para disminuir las peticiones al servidor.
- Dispositivos que no soportan el elemento STYLE.
- Dispositivos que solo soportan que se enlace una sola hoja de estilo.
- Dispositivos que no soportan CSS.
Distintas CSS para distintos dispositivos
Los dispositivos móviles suelen interpretar las CSS definidas para handheld
(dispositivo móvil):
<link rel="stylesheet" href="estilo_movil.css" type="text/css" media="handheld" />
Hay navegadores (Safari, Opera Mobile, Android, Nokia S60) que interpretan las CSS definidas para screen
(pantalla) en lugar de las definidas para handheld
:
<link rel="stylesheet" href="estilo_normal.css" type="text/css" media="screen" />
Estos navegadores interpretan una etiqueta META que define el ancho del área visible de pantalla. Se define así para que coja el ancho de la pantalla del dispositivo:
<meta name="viewport" content="width=device-width" />
O con un ancho fijo:
<meta name="viewport" content="width=480" />
Opera Mobile 10 en dispositivos de alta resolución aplica un 200% de zoom de modo predeterminado (enlace externo, en inglés), lo que puede ocasionar que la configuración de esta etiqueta META parezca incorrecta, a pesar de no serlo.
Mediante CSS 3 se pueden restringir un grupo de reglas a unas dimensiones específicas de pantalla (debe insertarse a final de la CSS para evitar conflictos):
@media all and (max-device-width: 480px) {
[Reglas CSS para móviles]
}
También puede hacerse la restricción por ancho de ventana:
@media all and (max-width: 480px)
WCAG 1
- El uso de hojas de estilo para controlar la presentación se cumple con el punto 3.3: Utilice hojas de estilo para controlar la maquetación y la presentación (enlace externo, en inglés).
- Organizar los documentos para que puedan ser leídos sin hojas de estilo se cumple con el punto 6.1: Organice el documento de forma que pueda ser leído sin hoja de estilo (enlace externo, en inglés). Por ejemplo, cuando un documento HTML es interpretado sin asociarlo a una hoja de estilo, tiene que ser posible leerlo.
WCAG 2
El uso de hojas de estilo para controlar la presentación y organizar los documentos para que puedan ser leídos sin hojas de estilo se cumplen con el punto 1.3.1: Información y relaciones (enlace externo, en inglés): La información, estructura y relaciones transmitidas mediante presentación pueden ser determinado mediante aplicación de usuario o estar disponible en el texto.