<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Sentido Web &#187; enlaces idiomas</title>
	<atom:link href="http://sentidoweb.com/tag/enlaces-idiomas/feed" rel="self" type="application/rss+xml" />
	<link>http://sentidoweb.com</link>
	<description>Desarrollo web, HTML, CSS, Javascript, PHP, MySQL</description>
	<lastBuildDate>Mon, 16 Jan 2012 10:16:20 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Laboratorio: indicativo de idioma y target en los enlaces mediante CSS</title>
		<link>http://sentidoweb.com/2006/09/13/laboratorio-indicativo-de-idioma-y-target-en-los-enlaces-mediante-css.php</link>
		<comments>http://sentidoweb.com/2006/09/13/laboratorio-indicativo-de-idioma-y-target-en-los-enlaces-mediante-css.php#comments</comments>
		<pubDate>Wed, 13 Sep 2006 21:17:55 +0000</pubDate>
		<dc:creator>displaynone</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[Laboratorio]]></category>
		<category><![CDATA[enlaces externos]]></category>
		<category><![CDATA[enlaces idiomas]]></category>

		<guid isPermaLink="false">http://sentidoweb.com/2006/09/13/laboratorio-indicativo-de-idioma-y-target-en-los-enlaces-mediante-css.php</guid>
		<description><![CDATA[En muchas páginas he visto como se indica que un enlace va a abrirse en una ventana nueva con un icono que suele ser una flecha. También se suele indicar que el enlace es a una página en otro idioma mostrando la bandera del país o con un texto. La verdad es que si tenemos [...]]]></description>
			<content:encoded><![CDATA[<p>En muchas páginas he visto como se indica que un enlace va a abrirse en una ventana nueva con un icono que suele ser una flecha. También se suele indicar que el enlace es a una página en otro idioma mostrando la bandera del país o con un texto.</p>
<p>La verdad es que si tenemos que incluir la imagen en cada enlace que creamos, nos podemos volver locos, a parte de aburrirnos bastante. Una solución sencilla es mediante estilos, para ello <strong>usaremos los selectores de atributos y los pseudo-elementos</strong>.</p>
<p>Contaremos con dos imágenes: una para indicar un enlace externo (<img alt="abrir.gif" src="http://sentidoweb.com/lab/css/target-enlace/abrir.gif" width="9" height="9" />) y otra para indicar el país (inglés en este caso <img alt="gb.png" src="http://sentidoweb.com/lab/css/target-enlace/gb.png" width="12" height="8" />). También tendremos en cuenta que es posible que el enlace se abra en otra ventana y que sea en inglés.</p>
<p>Para poder realizarlo mediante estilos necesitamos el pseudo-elemento <a href="http://www.w3.org/TR/REC-CSS2/selector.html#before-and-after"><em>:after</em></a>, el cual nos permite incluir contenido después del propio contenido del elemento, usando para ello también la propiedad <a href="http://www.w3.org/TR/REC-CSS2/generate.html#content"><em>content</em></a>. También será necesario asignar el estilo de los elementos según sus atributos usando para ello <a href="http://www.w3.org/TR/REC-CSS2/selector.html#attribute-selectors">selectores de atributos</a>. Usaremos el atributo <em>hreflang</em> para indicar el idioma y si contiene el atributo <em>target</em> supondremos que es un enlace externo.</p>
<pre><code>a[target]:after {
padding-left: 4px;
content: url(abrir.gif);
}
a[hreflang="en"]:after {
padding-left: 4px;
content: url(gb.png);
}
a[target][hreflang="en"]:after {
padding-left: 4px;
content: url(gb.png) "  " url(abrir.gif);
}</code></pre>
<p>Funciona en Firefox y en Opera, en Safari supongo que también. En nuestro amigo IE no funciona, al menos en la versión 6, si alguien me puede confirmar en Safari y en IE7, se lo agradeceré en el alma.</p>
<p><a href="http://sentidoweb.com/lab/css/target-enlace/target-enlace.html">Ejemplo</a></p>
]]></content:encoded>
			<wfw:commentRss>http://sentidoweb.com/2006/09/13/laboratorio-indicativo-de-idioma-y-target-en-los-enlaces-mediante-css.php/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

