Juntar identificador y clase en IE6

post - - 2 replies - share

En un proyecto sobre el que estoy trabajando observo que en el maravilloso mundo de IE6 no aparece bien el estilo para el menú de secciones… Intentare ilustrarlo con un ejemplo resumido.

CSS del menú

#nav li a.home { }
#nav li a#current.home { }

Internet Explorer 6 e inferiores recelan de los selectores combinados, aquellos donde se une un identificador con una clase. Y esto puede se necesario en el caso de tener varios elementos con estilos diferentes.

XHTML del menú

<ul id="nav">
	<li id="active"><a id="current" class="home" href="#">Item one</a></li>
	<li><a class="projects" href="#">Item two</a></li>
	<li><a class="contact" href="#">Item three</a></li>
</ul>

La solución en la descendencia

Tenemos por un lado el elemento lista (padre) con el identificador #active que haría la misma función identificativa que #current y anidado el elemento del enlace (hijo) con su correspondiente clase.

Ejemplo

#nav li#active a.home { }

El caso es que vuelvo a tropezar con este problema habiendo escrito un post sobre lo mismo (Problema combinando selector de ID y clase en IE6) hace relativamente poco tiempo.

¿Por qué el ser humano es el único animal que tropieza dos veces en la misma piedra?

Pues no lo sé, pero lo mio es tropezar y volver a tropezar 🙁

_blank, rel=”external” y una solución jQuery para abrir enlace en nueva ventana

post - - 12 replies - share

Como ya sabemos XHTML Strict no permite el atributo target, así que por descontado no podemos usar target="_blank" como antaño. Sin embargo existen situaciones en las que puede ser conveniente abrir una nueva ventana.

En muchos sitios web se usa rel="external" para identificar aquellos enlaces que deben abrirse en nuevas ventanas a través de una solución en Javascript. El problema es que algunos de esos enlaces no son recursos externos sino páginas dentro del mismo dominio, lo cual resulta contradictorio.
En estos casos _blank y rel="external" son parecidos pero sustancialmente diferentes.

Independientemente de si el recurso es externo podemos añadir una clase “tblank” y mediante jQuery abrir el enlace en la nueva ventana. Este método no interfiere en la semántica del sitio web y la funcionalidad es similar.

Código en jQuery:

<script type="text/javascript">
	$(function() {
		$('a[class="tblank"]').click( function() {
			window.open( $(this).attr('href') );
			return false;
		});
	});
</script>

Con estas pocas líneas, jQuery se encarga de recopilar todos los enlaces que tengan una clase “tblank”, les adjunta un evento “click”, que al dispararse abre una nueva ventana con el enlace contenido del atributo “href.” Desde luego es más fácil verlo que explicarlo 😛

Enlace interno en nueva ventana:

<a href="/legal" class="tblank" title="Ver en nueva ventana la nota legal">nota legal</a>

Enlace externo en nueva ventana:

<a href="http://aurea.es" class="tblank" rel="external" title="Abrir en nueva ventana aurea.es">http://aurea.es</a>

CERMI, sus denuncias y su web

link - - 1 reply - share

Hace poco tiempo muchos medios se hicieron eco sobre la denuncia del CERMI por falta de accesibilidad en la web de la Universidad Autónoma de Madrid.

Es curioso pero no había visitado el sitio web del CERMI del cual se podrian decir muchísimas cosas, pero llama poderosamente la atención el sello de WAI-AA (en la portada) teniendo en cuenta que una vez dentro del portal nos podemos encontrar:

  • Layout a base de tablas. 🙁
  • No hay ningún encabezado!.
  • Uso reiterado de atributos y elementos obsoletos (font, u, etc).
  • Elementos para controlar la presentación como atributos: color, bgcolor, size, width, height, align, border.
  • Incluso podemos ver cosas como FONT size="+0".
  • Empleo reiterado de unidades absolutas.
  • No se indica el idioma principal del sitio web.
  • La hoja de estilos contiene errores.
  • Y un largo etc. Merece la pena dar un vistazo al código.

Una pena…

@charset al inicio del CSS

post - - 3 replies - share

Hoy por la mañana tuve un reporte acerca de un problema de estilo en Safari. Estuve mirando el CSS del blog en cuestión hasta que vi el @charset en mitad del documento.

Charset tiene por misión indicar la codificación de caracteres dentro de una hoja de estilo CSS.

@charset "utf-8";

Este fallo es algo que he visto alguna vez, pero en este caso no estaba hecho a mano sino que se trataba de un proceso automático mediante el cual se incrustaba el CSS de un fichero dentro de otro.

Sólo puede aparecer una regla de @charset en una hoja de estilo externa y deberá aparecer al principio del documento. No debe haber ningún carácter antes de la regla, ni siquiera como comentario.

De no seguir estas consideraciones algunos navegadores (especialmente Safari) procesan de forma incorrecta los selectores, tag y propiedades que van a continuación, o incluso la propia codificación del fichero CSS.

Inconsistencia en el diseño web

post - - leave a reply - share

Los sitios web deberían de ser coherentes con su diseño e identidad. Es bueno que el diseño siga una guía de estilo y no varié esos patrones de una página a otra. Probablemente la home sea la única página “con licencia” para variar un poco la navegación y organización de los contenidos, pero nunca debería romper con la guía de estilo adoptada.

Read more

Páginas splash, una crítica

post - - 1 reply - share

Acabo de caer en una “página splash” y… me pregunto:

  • ¿Es necesario otorgar tanta importancia a la identidad corporativa como para que una “home” sea exclusivamente el logo de una compañía?.
  • ¿Es necesario dedicar la página de inicio al completo para seleccionar un idioma?.
  • ¿Es necesario que esa animación tan bonita y currada ocupe la página principal?.

Hace un tiempo las páginas splash eran otra moda más que seguían millones de sitios. Actualmente parece que están en extinción pero sigue habiendo un buen puñado 😀

Read more

Enlaces redundantes sin valor semántico

post - - 1 reply - share

Basta ya de los “haz clic aquí”, los “más información” y aún peor “[+]”.

Si el titular esta bien destacado como enlace, o el área de contenido ya cumple esta función ¿por qué caer en la redundancia de añadir al final del resumen un “más información” cuando hay una secuencia de entradas?.

Atendiendo a la accesibilidad podemos comprobar como lo más usual es que una persona con un lector de pantalla vaya saltando de enlace a enlace, desgranando así todo el contenido del sitio web y profundizando en aquellos enlaces que le interesan.

La web ha evolucionado mucho desde sus inicios, sin embargo los enlaces siguen siendo el pilar fundamental, por ello es crucial usarlos de forma acertada.

Imaginemos la navegación con un lector de pantalla en la que saltamos de enlace a enlace y solo obtenemos de forma repetitiva un “haz clic aquí” (sin más valor semántico).

Lo dicho, analicemos los casos y desterremos esa vieja moda.

Mejorando las páginas de error

post - - 5 replies - share

Recuerdan las páginas de error que ponían los navegadores con su mítico (404 – Not found).

Este tipo de páginas presentaban “problemas” para la usabilidad.

  1. Supongamos que hay un enlace roto en el sitio web.
  2. El usuario acude a dicho enlace.
  3. De repente el navegador nos muestra “sin ninguna piedad”: 404 – Not found.

Read more