CSS condicionado por navegador en distintos lenguajes

Una amiga me hizo esta pregunta en un mail ayer, así que esto fue lo que le conteste

HTML

Es una buena opción si estás trabajando sólo con documentos HTML. Aunque se dice que se pueden ocupar condiciones para todos los navegadores, la verdad es que nunca he conseguido aplicarla para otros agentes que no sean IE6 o IE7

<!--[if IE 7]>
<link href="css/ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 6]>
<link href="css/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

JAVASCRIPT

Trabajando con la variable navigator se pueden obtener datos como el agente del usuario (userAgent) o el nombre de la aplicación (appName) que estemos usando. Sin embargo, no es 100% accesible, ya que no funciona si se tiene el javascript del navegador desactivado.

<script type="text/javascritp>
if(navigator.userAgent.match("MSIE 6")) {
     document.write('<link href="css/ie6.css" rel="stylesheet" type="text/css" />');
}
if(navigator.userAgent.match("Firefox")) {
     document.write('<link href="css/firefox.css" rel="stylesheet" type="text/css" />');
}
</script>

PHP

Perfecta si se esta trabajando en este lenguaje porque es más segura y accesible que la opción en JS. Además de obtener similares datos que la opción en JS

<?php
if(stristr($_SERVER["HTTP_USER_AGENT"],"firefox")) {
     echo '<link href="css/firefox.css" rel="stylesheet" type="text/css" />';
}

if(stristr($_SERVER["HTTP_USER_AGENT"],"firefox")) {
     echo '<link href="css/firefox.css" rel="stylesheet" type="text/css" />';
}
?>

Imágenes en porcentaje

Una buena opción a la hora de diseñar para blogs o sitios con un contenido dinámico, es utilizar imágenes con tamaños fluidos, en porcentaje, para que se comporten en relación a su contenedor padre.

Por ejemplo, el típico problema para los editores de blog es utilizar imágenes de un máximo de ancho, para que así no desestructuren las cajas de contenido. A través de este método, es posible dar una solución a esta complicación, ajustando el width de la imagen con porcentajes, en relación a su contenedor padre.

HTML
<body>
	<div id="contenedor">
		<h1>Contenedor de la imagen</h1>
		<img src="ejemplo.jpg" alt="Flor. Ejemplo de imagen en porcentaje" title="Flor. Ejemplo de imagen en porcentaje" />
	</div>
<body>
CSS
#contenedor{
	width: 100%;
	height: 50%;
}
img{
	width: 94%;
	margin: 2% 3% 3% 3%;
}

Ver ejemplo

a:hover con background position

Cuando queremos construir anclas para botones o menús, que utilizan imágenes de fondo para sus distintos estados (link, hover, active), una buena idea para desarrollarlas es utilizar una sola imagen, trabajando con el background-position.

Primero, tenemos nuestra imagen, compuesta por los tres estados del botón o menú que construiremos. La idea es que todos los estados tengan la misma medida, para que no se produzcan descalces a la hora de moverlas con el background-position.

imagena.jpg

Luego, construimos el area activa de nuestro botón, la zona del ancla donde es visible sólo la parte que necesitamos, dependiendo del estado en que se encuentra.

HTML
<a href="#" class="miboton" title="ejemplo">ejemplo</a>
CSS
a.miboton{
	display:block;
	width: 100px;
	height: 40px;
	background: url(http://www.midominio.com/miboton.jpg) no-repeat top left;
	}
a.miboton:hover{
	background-position: -100px 0;
}
a.miboton:active{
	background-position: -200px;
}

Así, tenemos nuestro botón con distintos estados, sin la necesidad de llamar a otras imágenes.
Ver ejemplo