_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>

Detectar CSS con jQuery

post - - 2 replies - share

Hay mucho escrito acerca de como detectar si un navegador soporta JavaScript, sin embargo conocer el soporte de CSS ya es algo más raro.

Un viejo amigo me ha mandado hoy esa duda por e-mail, así que aprovecho este post para compartir la forma que he usado para detectar si un navegador esta soportando nuestra hoja de estilo.

Cuando diseñamos un layout uno de los elementos comunes es el envoltorio (wrapper, el contenedor que recoge toda la web). Este puede servirnos como elementos clave para detectar si el navegador esta procesando la hoja de estilo.

En un fichero .js incluimos el siguiente código:

function detectCSS() {
	var result = ($('#wrapper').css('width') == '1000px')? true : false;
	return result;
}

Esta función se encarga de responder verdadero o falso tras analizar el elemento wrapper. Dicho elemento tiene en la hoja de estilos la propiedad width con valor 1000px.

Si el CSS no es procesado el selector de jQuery $('#wrapper').css('width') devolverá un width con un tamaño por defecto indicado por el navegador, pero que no debería coincidir con la medida que hemos especificado (1000px).

La idea es que el operador ternario determine a partir de la condición si hay o no CSS, almacenándolo en una variable. Luego esta es retornada con la respuesta.

Por último y en cualquier lugar podemos hacer la llamada a la función:

$(document).ready(function(){
	if(detectCSS()) {
		//lo que quieras hacer si el CSS es procesado...
	}
})

El ejemplo se encuentra en jQuery, de todas formas la conversión a mootools, otro framework o “javascript base” no presentaría ningún problema, únicamente cambiar la notación.

Scripts y enlaces

post - - leave a reply - share

El titulo de este post hace referencia a una premisa bastante antigua y conocida en el mundo de la accesibilidad web. Desafortunadamente y a día de hoy los scripts siguen vivitos y coleando incrustados en los atributos href de cientos de enlaces.

Siguiendo la tónica anterior voy a seguir incorporando ejemplos reales donde mi intención no es más que la ilustración y crítica constructiva, que por cierto, siempre será bienvenida…

Read more