Por Patricia Campuzano

Componer un diseño a base de estilos .css y que éste se vea bien tanto en Internet Explorer como en el Mozilla  se puede convertir en un rompecabezas. 

Estadísticamente, casi el 70% de los usuarios de Internet utilizan el Explorer (principalmente porque es el navegador que viene con Windows) y el segundo explorador más utilizado es el Mozilla Firefox.

Sabiendo estos datos, no nos queda más remedio que tener en cuenta cómo se ve la página en distintos navegadores. Lo ideal es crear una sola hoja de estilos css que sirva para ambos casos, pero si el diseño es “complicado” y no llegamos a un empate en una sola de hoja de estilos, podemos hacer el siguiente truco del almendruco…

- Creamos la hoja de estilos principal. Mozilla la interpretará correctamente porque cumple con los estándares redactados por la W3C.

- Para salvar las diferencias con el Explorer, crearemos una hoja de estilos que contenga las especificaciones para una óptima visualización de la página en Internet Explorer.

          estilo.css: declaración de todos los estilos de la web.
          cssIE.css: estilos para Explorer

- Añadimos en el HEAD el siguiente código:

          <link rel=”stylesheet” type=”text/css” href=”estilo.css”>
          <!–[if IE]>
          <link rel=”stylesheet” type=”text/css” href=”cssIE.css”>
          <![endif]–>

Sólo se cargará la hoja de estilos cssIE.css si el usuario está usando el Microsoft Internet Explorer como navegador.

Por Patricia Campuzano 

¿Por qué dar estilo a los enlaces de forma tradicional -texto destacado de diferente color al resto- pudiendo variar el estilo de más elementos? Los siguientes estilos nos permiten definir dos formatos para el un evento :hover

El código de una lista de enlaces para el ejemplo podría ser el siguiente:

<div id=”links”>
   <ul>
        <li><a href=”">Este es el enlace uno</a></li>
        <li><a href=”">Este es el enlace dos</a></li>
        <li><a href=”">Y este, obviamente, es el enlace tres</a></li>
   </ul>
</div>

Definamos ahora los estilos CSS

1.- Creamos el estilo para el div general que contiene la lista de enlaces, estableciendo propiedades como ancho, color de fondo, borde,…

div#links {
   color: #333333;
   border: 3 px solid #e5e5e5;
   padding: 15 px;
   width: 150 px;
}

2.- Establecemos el formato para la lista <ul> <li> de enlaces.

div#links ul {
   padding: 0 px;
   margin: 5 px;
}

 div#links ul li {
   list-style-image: url (’img/icon-gif’)
   margin-left: 5 px;
}

3.- Por último, los estilos para los diferentes estados de un enlace

 div#links ul li a {
    color: #000000;
    text-decoration: none;  
}

4.- Llegamos a la parte interesante de la cuestión.. Establecer dos formatos diferentes para el mismo evento (a priori) de :hover.

Primer estilo :hover que se activa cuando el usuario desplaza el cursor sobre el div que contiene el enlace

 div#links: hover ul li a {
    color: #FFFFFF;
    text-decoration: underline;  
}

Segundo estilo :hover que se activa cuando el usuario desplaza el cursor sobre el texto que contiene el enlace.

 div#links ul li a:hover {
    background-color: #cccccc;
    color: #333333;
    text-decoration: none;  
}

El siguiente estilo nos permite cambiar la opacidad de una imagen tras un evento (onMouseDown, onMouseOver,…).

style=”filter:alpha(opacity=100)” onMouseDown=”this.filters.alpha.opacity=50″

Un caso práctico de aplicación podría ser una galería de fotografías compuesta por imágenes thumb en miniatura. Al hacer clic sobre una imagen thumb se abre en un pop-up la imagen a gran tamaño. Si aplicamos este estilo dentro de la etiqueta <img> de la imagen, al pulsar sobre ella bajará la opacidad indicando que ya se ha pulsado.

Por Patricia Campuzano

El siguiente estilo nos permite cambiar la opacidad de un texto, una tabla, div o imagen. Puedes aplicarlo directamente dentro de la etiqueta del elemento correspondiente o crear una regla de estilo en la hoja css.

filter:alpha(opacity=100);

Un caso práctico de aplicación podría ser una galería de fotografías compuesta por imágenes thumb en miniatura. Al hacer clic sobre una imagen thumb se abre en pop-up la imagen a gran tamaño. Si aplicamos este estilo dentro de la etiqueta <img> de la imagen, al pulsar sobre ella bajará la opacidad indicando que ya se ha pulsado.

style="filter:alpha(opacity=100)" onMouseDown="this.filters.alpha.opacity=50"

por Patricia Campuzano 

Las hojas de estilo nos permiten cambiar la apariencia de un sitio web sin tener que programarlo y/o maquetarlo de nuevo. La web http://www.csszengarden.com/ es el mejor ejemplo para comprenderlo. Vemos que dependiendo del estilo que se seleccione en la columna derecha, la web tiene una apariencia u otra. El contenido es siempre el mismo, sólo cambiamos la hoja de estilos.

En el siguiente ejemplo veremos cómo cambiar la hoja de estilos CSS de un sitio web con sólo pulsar un enlace (como en la web de ejemplo). El proceso es bastante sencillo para lo que utilizaremos javascript.

1.- Declaramos la hoja de estilos principal,
añadiendole un id (identificador) para poder cambiar el valor href por medio de un javascript.

2.- Añadimos la función que intercambiará una hoja de estilo por otra, utilizando la propiedad getElementById() para identificar el objeto:

function estilo(cambio) {
document.getElementById('estilo').href=cambio;
}

3.- Añadimos la siguiente linea al enlace que cambiará la hoja de estilo principal.css por la secundaria.css

onClick="estilo('secundaria.css');

Y listo! Aplicaciones varias… Dar al usuario la opción de elegir el diseño que más le guste para presentar los contenidos de nuestro sitio web o hacer varios diseños para un mismo weblog, por ejemplo.