Categoría xhtml
27/2 - 2008 ajax - programación - xhtml
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 navegaor 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" />';
}
?>
18/7 - 2007 ayerviernes - css - xhtml
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%;
}
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.
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
