Isotipo » xhtml

CSS condicionado por navegador en distintos lenguajes

Basilio — Thu, 28 Feb 2008 03:58:36 +0000

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

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.

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

';
}

if(stristr($_SERVER["HTTP_USER_AGENT"],"firefox")) {
     echo '';
}
?>

Imágenes en porcentaje

Basilio — Wed, 18 Jul 2007 19:05:13 +0000

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

	
		Contenedor de la imagen

CSS
#contenedor{
	width: 100%;
	height: 50%;
}
img{
	width: 94%;
	margin: 2% 3% 3% 3%;
}

Ver ejemplo

a:hover con background position

Basilio — Tue, 19 Jun 2007 04:59:14 +0000

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.

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
ejemplo

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