Haciendo Web » CSS

Dile adiós a los prefijos en CSS3 con Prefix Free

Jorge Enrique Dominguez — Mon, 31 Dec 2012 15:59:13 +0000

Hoy les traigo una excelente utilidad que todo desarrollador o diseñador web debería conocer, esta herramienta es muy útil a la hora de escribir menos código CSS3, en muchas ocasiones tenemos que escribir el mismo código CSS3 para que funcione en los distintos navegadores la propiedad que estamos aplicando, como es el caso de las sombras por citar un ejemplo, esto incrementa en gran medida el tamaño de nuestro archivo CSS3 y vuelve mas engorroso nuestro código, asi es que les dejo con este script y sus gran utilidad.

Muchas Felicidades por el nuevo año 2013 les deseamos desde HaciendoWeb.

¿Qué son los prefijos en CSS3?

Los insoportables prefijos son usados con el fin de disponer ciertas funcionalidades en CSS3 para distintos navegadores, anteponiéndolos de esta manera en nuestros atributos CSS3:

#elemento {
width: 500px;
height: 500px;

border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;

box-shadow: 0 0 10px #000000;
-webkit-box-shadow: 0 0 10px #000000;
-o-box-shadow: 0 0 10px #000000;
-moz-box-shadow: 0 0 10px #000000;
-ms-box-shadow: 0 0 10px #000000;
}

Los prefijos utilizados representan a distintos navegadores.

-webkit- representa a navegadores basados en webkit como Chrome y Safari.
-o- representa al navegador Opera.
-moz- representa a navegadores basados en Gecko, como Firefox.
-ms- representa al navegador poco usado “Internet Explorer”.

Con solo agregar un prefijo a tal condición se aplicara al navegador deseado. Aunque se puede ocupar de una forma ingeniosa para lograr algo selectivo en aplicar el CSS3 en distintos navegadores. También evitaras malgastar tiempo, y ocuparlo en otra cosa más importante.

Pero por suerte tenemos una muy buena herramienta llamada Prefix Free para agregar todo los prefijos automáticamente, convirtiendo nuestro código CSS en algo mas cálido, e incluso mas fácil de entender, así evitando errores y también la pérdida de tiempo en nuestros proyectos, quedando nuestro código CSS de esta manera:

#elemento {
width: 500px;
height: 500px;

border-radius: 50%;

box-shadow: 0 0 10px #000000;

}

¿Cómo usar Prefix Free?

Utilizar Prefix Free es bastante sencillo simplemente debemos descargar desde su pagina el script oficial agregándolo antes de de esta manera:

Usamos vista previa y si todo esta bien, presionamos guardar. Ya de esta manera el script hará su trabajo y podrán ocupar todo sus atributos CSS3 sin prefijos, el script también lo pueden subir a sus propios repositorios si lo desean.

¡Compatibilidad!

Prefix Free es compatible con navegadores de escritorio como IE9+, Opera 10, Firefox 3.5+, Safari 4+ y Chrome. Para navegadores mobiles: Mobile Safari, Android Browser, Chrome y Opera Mobile.

¡Algunos inconvenientes!

No funciona con estilos importados (@import).
No funciona con archivos locales en Chrome y Opera.
No funciona con estilos inline.
No funciona con hojas de estilos de otros dominios.

2.46 kB Prefixfree 1.0.7 (101)

Espero que les sea de gran utilidad queridos lectores de Haciendo Web. Un gran abrazo

fuente:ayuda-bloggers

Crear menú desplegable con CSS3

Jorge Enrique Dominguez — Thu, 08 Nov 2012 21:37:03 +0000

En este tutorial vamos a crear un elegante menú desplegable utilizando css3, crearemos un efecto muy agradable utilizando transition para darle movimiento a nuestro menú, además utilizaremos otras propiedades como border-radius y los pseudo clases after y before para aplicar algunos efectos. Es algo sencillo será una lista desordenada con items anidados los cuales acomodaremos con css y lo dejaremos a nuestro gusto, empecemos.

El menú se visualizara correcta mente en todos los navegadores, solo que los navegadores antiguos que no soporten animaciones de css3 y algunas otras propiedades que utilizaremos no tendrán ese elegante menú que crearemos, pero de todos modos les funcionara.

1. Estructura HTML

Para empezar crearemos un archivo HTML con la estructura básica, lo nombramos domo.html o como quieras.


	
	
	   
	   Menú desplegable con Css3

Dentro de las etiquetapega el siguiente código de la lista desordenada para la estructura del menú.


    Inicio
    Servicios
    Servicios
    
        Portfolio
        
            Diseño Web
            Logo tipos
            Impresión
            Diseño 3D
            Videos
        
    
    Blog
    Artículos
        
            Diseño Web
            Logo tipos
            Impresión
            Diseño 3D
            Videos
        
    
    Contacto

Como puede notar es un menú desplegable de solo un nivel, la lista hija les agregamos un class=children para referirnos directamente a ella, no es obligatorio pero lo hago así para evitar conflicto, solo agrego el código necesario para el menú, cada uno que lo adapte a su necesidad

2. Estilos para el menú principal

Ahora aplicaremos los estilos necesarios para la lista

/*Estilos para la Lista desordenada UL*/
ul {
    text-align: left;
    width: 100%;
    background: #252525;
    margin: 0px;
    padding: 0px 0px 0px 20px;
    border: 3px solid #1d1d1d;
    list-style: none;
    position: relative;
    float:left;
    box-sizing: border-box;/*propiedad css3*/
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
}

/*Estilos para los elementos li primer nivel*/
#contenedor ul li {
    display: block;
    float:left;
    position: relative;
}

/*Listas primer nivel*/
#contenedor ul li a {
     font: bold 14px Tahoma, Geneva, sans-serif;
     color: #fefefe;
     text-decoration: none;
     display: block;
     float:left;
     padding: 13px;
}

/*Estado Hover/Activo de los enlaces*/
#contenedor ul li a:hover, #contenedor ul li a.active {
     background: #1d1d1d;
     color: #b11e15;
     font-weight: bold;
}

3. Sombra inferior del menú

Crearemos una sombra a la ul de primer nivel utilizando las pseudo-clases (:after – :before) para crear las sombras de cada lado del menú, pero antes de crear las sombras ocultaremos momentáneamente la lista secundaria para que no estorbe agregando display:none a la ul.children

/*Estilos de la lista secundaria*/
#contenedor ul li ul {
    display:none;
}

Ahora crearemos la sombra utilizando los pseudo-clases antes mencionadas, agregando el siguiente código css

/*Genera la sombra derecha del menú (after = después)*/
#contenedor ul#menu:after {
    z-index: -1;
    position: absolute;

    /* no aplico ningún contenidos HTML */
    content: "";

    /* posiciona la sombra con respecto al derecho y superior */
    right: 10px;
    top: 45%;

    /* configura el tamaño de la caja generada*/
    width: 48%;
    height: 20px;

    /* color de fondo */
    background: #000000;

    /* definición de la sombra */
    box-shadow: 0 0 8px 7px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0 0 8px 7px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0 0 8px 7px rgba(0, 0, 0, 0.7);

    /* rotación de la sombra para que solo salga una parte de ella*/
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    transform: rotate(2deg);
}

/*Genera la sombra izquierda del menú (before = antes)*/
#contenedor ul#menu:before{
    z-index: -1;
    position: absolute;

    /* no aplico ningún contenidos HTML */
    content: "";

    /* posiciona la sombra con respecto al izquierdo y superior */
    left: 10px;
    top: 45%;

    /* configura el ancho */
    width: 50%;
    height: 20px;

    /* color de fondo */
    background: #000000;

    /* definición de la sombra */
    box-shadow: 0 0 8px 7px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0 0 8px 7px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0 0 8px 7px rgba(0, 0, 0, 0.7);

    /* rotacion de la sombra */
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    transform: rotate(-2deg);
}

Hasta este punto tenemos terminado el primer nivel del menú, en los siguientes pasos trabajaremos con el segundo nivel y aplicaremos algún efecto con transition de css3.

Estilos para el menú segundo nivel

Lo normal en un menú desplegable con css es aplicarle al sub-menú un display:none y en su estado :hover le aplicamos display:block para mostrarlo, de esta forma aparece sin ningún tipo de efecto, con css3 podemos animar varias propiedades para que al apareces tenga algún efecto agradable a la vista, en nuestro caso no utilizaremos la propiedad display:block, si no que animaremos el alto(height) y su opacidad, miremos el código necesario para esto.

/*Estilos de la lista secundaria*/
#contenedor ul li ul {
    margin: 0px;
    padding: 0px;
    width: 150px;
    height: 0;
    float: left;
    position: absolute;
    left: 0px;
    top: 43px;
    border: 0;
    overflow: hidden;
    background: #1D1D1D;
    z-index: -1;

    /*Aplicamos opacidad cero, animaremos a 1 en el estado hover*/
    opacity: 0;
    filter: alpha(opacity=0); /* Internet Explorer*/

    /*Aplicamos bordes redondeados a las esquinas inferiores.*/
    border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;
    -webkit-border-radius: 0px 0px 5px 5px;

    /*definimos desde donde inicia el ancho de la caja*/
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

    /*Aplicamos la animación */
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

#contenedor ul li ul.children li a{
    color: #fefefe !important;
    padding: 13px 0 13px 20px;
    width: 130px;
    border-bottom: 1px solid #2f2f2f;
    background: url(img/arrow-normal.png) no-repeat 7px center !important;
    font-size: 12px;

    /*Aplicamos efecto de transation a los enlaces*/
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

/*Eliminamos el border-bottom al último enlace de la lista*/
#contenedor ul li ul.children li:last-child a{border-bottom:none !important;}

/*Aplicamos los cambios para los enlaces en el estado :hover*/
#contenedor ul li ul.children li a:hover{
    color: #b11e15 !important;
    font-weight: bold;
    padding-left:28px;
    background: url(img/arrow.png) no-repeat 15px center !important;
}

Hasta este punto el menu de segundo nivel se encuentra oculto ya que aplicamos una altura de 0 (height:0px) y una opacidad:0.

Mostrar con efecto el segundo nivel

Para mostrar la lista de segundo nivel aplicaremos una altura y una opacidad distinta cuando se pase el ratón por encima de una de las listas de primer nivel del menú, el código css necesario para esto es el siguiente.

#contenedor ul li:hover ul.children{
    height:250px;
    opacity:1;
}

La altura es el único inconveniente a este sistema que he utilizado para animar esas propiedades, lo mas normal seria aplicar una altura en auto para que se adapte al contenido, pero la altura en auto no se anima con transition, con este mismo método se pueden animar las propiedades css y conseguir efectos muy interesantes

Conclusión

Como pueden notar es el mismo sistema que utilizamos desde antes que aparecieran las nuevas propiedades css3, solo que ahora podemos agregar una pequeña animación y efecto de transparencia que hacen que el menú tome un plus a la hora de ser mostrado. espero que el tutorial le sirva de algo, es un tutorial bastante sencillo pero seguro que a alguno le servirá.

descargar el ejemplo Menu Desplegable CSS3 (240)

fuente:web-desings

Texto en columnas con CSS3

Juan Pablo Pérez Manes — Wed, 19 Sep 2012 03:10:41 +0000

En este tutorial les voy a enseñar a trabajar con columnas de texto en CSS3(algo así como las de un periódico) , que les podrá ahorrar varios problemas y dolores de cabeza que podrían tener a futuro. Es bastante simple, y no necesitan saber mucho para poder trabajar con esta función. Ahora, sin más preámbulos, vamos con el tutorial.

Antes que nada, les voy a dejar un par de ejemplos de sitios web donde usan o deberían usar las funciones que les voy a mostrar, para que se vayan armando una idea de cómo se usa, cuándo se usa y para qué sirve.

Ejemplos de columnas en CSS3

Este ejemplo es de un sitio web cualquiera, donde en su portada tienen una sección de noticias. Entonces para ahorrar espacio tienen 2 columnas con noticias. Es importante notar que no sólo sirve para texto, si no también para elementos (como

, ,

, etc).

En este ejemplo se muestra claramente el uso de varias columnas con el texto genérico Lorem Ipsum. Este es un ejemplo claro de cómo quedaría una web con un sistema de multicolumnas vía CSS3.

Cómo hacer columnas de texto en CSS3

Luego de que hayan visto cómo se usa el sistema de columnas en disitintas webs y las distintas formas en las que pueden trabajar esta función, ahora vamos al código en bruto.

Primero que nada, estamos en CSS3, y nuestros navegadores todavía no aceptan varias propiedades de este lenguaje, así que para que las reconozca, tenemos que agregar los prefijos -moz- (en caso de Firefox) y -webkit- (en caso de Google Chrome y todos los navegadores que usen webkit). Por un tema de responsabilidad al diseño, debes poner los dos prefijos por respeto al usuario, ya que no todos usan Google Chorme, o no todos usan Firefox.

Luego de haber aclarado el tema de poner los prefijos de compatibilidad, ahora vamos a ver las propiedades que se usan para el uso de columnas en CSS3.

Las propiedades para generar columnas de texto son:

Código :

column-count: número de columnas ;
column-gap: espacio entre columnas ;
column-rule: decoración de las columnas ;

En donde:

column-count: es la cantidad de columnas que vas a usar.
column-gap: es la cantidad de espacio que dejas entre las columnas.
column-rule: es la decoración que vas a usar para las columnas (se usa la misma semántica que para la decoración de un border {} ).

Un ejemplo de uso sería:

Código :

#columna {
column-count: 3;
column-gap: 20px;
column-rule: 1px solid #fff ;
}

¡Recuerden poner los prefijos!

Y claro, el HTML (no se si es necesario ponerlo, pero si a alguno le sirve se lo dejo):

Código :


       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed orci enim, at vulputate nulla. Quisque vehicula tincidunt eros sed rutrum. Aenean molestie feugiat dolor, ut aliquet tortor mollis sit amet. Morbi volutpat, odio sit amet scelerisque venenatis, eros turpis tristique nisi, sed feugiat massa ligula sed magna. Praesent sed sem odio. In vitae mi risus, a cursus justo. Quisque in lectus massa, eget porttitor velit. Sed feugiat libero at mi rutrum feugiat. Nulla felis justo, accumsan ut accumsan nec, consequat nec est.

      Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Praesent quis nisi leo, vel accumsan turpis. Pellentesque a orci a purus tincidunt scelerisque. Ut mattis leo quis mauris lobortis lobortis. Mauris dolor purus, placerat et cursus ut, molestie ac diam. In eleifend porttitor libero eget fringilla. Cras velit metus, feugiat sit amet tempus eu, venenatis in lacus. Nunc vitae nunc sem. Sed non leo nunc. Nam metus velit, posuere nec tristique vel, viverra in lacus. Aliquam erat volutpat.

Recuerden que ahí falta toda la estructura base del HTML, ese solo sería el div y pueden poner imágenes vía y quedan auto posicionadas, no les debería dar problemas.

Bueno comunidad, eso ha sido todo lo que les traigo por hoy, es un tutorial simple, pero espero seguir aportando a la comunidad, a medida que pueda. Si les interesa lo que escribo, me pueden seguir en Twitter, que siempre trato de aportar cosas respecto al mundo web, informática, tecnología y todos esos temas que a muchos nos apasiona: @semasad. También en Taringa si tienes cuenta: @Shai.

Eso sería todo, y gracias por llegar hasta abajo.

Cualquier duda o consulta me la pueden preguntar de cualquier modo que se les ocurra (mensaje, comentario, redes sociales, etc) siempre estoy abierto a responder todo.

Fuente: Cristalab

Cómo hacer animaciones en CSS3

Juan Pablo Pérez Manes — Mon, 17 Sep 2012 04:10:36 +0000

En este tutorial veremos el uso y los parámetros de animation en CSS3. Las animaciones de CSS3 son la herramienta perfecta para animar cualquier elemento, para crear un efecto puntual o para crear un movimiento continuó de algún elemento (es decir, se pueden mover varios elementos de forma continuada pudiendo crear animaciones que antes sólo se veían en Flash o Javascript).

Las animaciones usan el parámetro animation en CSS para su uso estándar, por lo que es más correcto (por cuestiones de compatibilidad) también incluir el prefijo de cada navegador. La mayoría de los navegadores son compatibles, pero Internet Explorer no (en su versión 9).

Código :

/* Parámetro estándar */
animation:

/* Parámetros según navegador */
-webkit-animation:/* Chrome y Safari */
-moz-animation:/* Mozilla */

Cómo funcionan las animaciones en CSS3

Las animaciones de CSS3 funcionan distinto a otros parámetros de CSS. Debemos de establecer en el parámetro animation, además de la duración de la animación y el número de repeticiones que hace, un keyframe, que es el fragmento de código donde se escribe la secuencia que hará el elemento con esta animación (es decir, se especifica qué propiedades tendrá en cada momento, pudiendo modificar por ejemplo: el color, la altura, la posición…).

Keyframes en CSS3

Keyframes es una propiedad de CSS3 que va independiente de los selectores (que son el conjunto de palabras que usamos para seleccionar elemento de una página, como: “#CONTENEDOR div.cuerpo”), esta propiedad también usa los prefijos de ciertos navegadores por motivos de compatibilidad y también precede a un contenedor que se abre y cierra con {}, es decir, pondremos la propiedad keyframes, y dentro de las llaves su contenido.

Código :

/* Parámetro estándar */
@keyframes [Nombre del keyfremes] {}

/* Parámetros según navegador */
@-webkit-keyframes [Nombre del keyfremes] {}/* Chrome y Safari */
@-moz-keyframes [Nombre del keyfremes] {}/* Mozilla */

Código :

/* Ejemplo de un keyframes */
@keyframes Ejemplo {
0%{width:100px}
100%{width:200px}
}

Contenido del keyframe

Dentro del keyframes debemos de especificar los keyframes de forma individual, donde se especifica el porcentaje del tiempo de la animación en el que cierta propiedad cambia y posteriormente se especifican las propiedades que cambian escribiéndolas dentro de llaves. Si queremos que empiece la animación de determinada forma debemos añadir un keyframe con el porcentaje del tiempo de la animación en el que empieza (en el caso del inicio es el 0%), de esta forma podemos especificar que en cualquier momento de la animación cambien los parámetros (en el 30% de la animación o en el 50% por ejemplo), hasta máximo del 100%.

El punto 0% y el 100% son necesarios.

Código :

@keyframes Ejemplo {
0%{width:10%}
33%{width:20%}
66%{width:60%}
100%{width:10%}
}

Parámetros de animation

La propiedad animation puede contener distintos parámetros, como el nombre del keyframe que especifica su animación, su duración, el número de repeticiones y la función de tiempo.

Código :

animation: [Nombre del keyfremes] [Tiempo] [Número de repeticiones] [Función de Tiempo];

La propiedad animation tiene los siguientes parámetros:

Nombre del keyframe: En este parámetro es donde establecemos el nombre del keyfreme, teniendo que ser igual al keyfreme que usemos para especificar la animación.
Tiempo: Este parámetro establece el tiempo que tarda en hacerse la animación en segundos (su unidad es s), es decir si queremos que dure un segundo tenemos que poner “1s”.
Repeticiones: Con este parámetro podemos especificar con un número entero las veces que se repite la animación o hacer que se repita infinitamente estableciéndolo como “infinite”.
Función de tiempo: Este parámetro establece la curva de aceleración de la transición, es decir, si empieza más rápido y o más despacio o es un avance lineal, sin variar la aceleración.
Este parámetro tiene varias funciones de tiempo preestablecida: lineal, ease, ease-in… Por defecto usa el ease, y es el más recomendado, consiste en un comienzo lento y una terminación lenta, acelerándose en la parte media.

Fuente: Cristalab

Aprender CSS – Cambiar tipos de letra y estilos

Juan Pablo Pérez Manes — Wed, 12 Sep 2012 03:21:03 +0000

OK, ya sé que he tardado un poco, pero a veces me disperso, y me olvido que hay que recuperar temas básicos, que sé que gustan. Y como lo prometido es deuda aquí tienes otra entrega de básicos de CSS, para ir perdiendo el miedo a tocar código y, de paso, mejorar el aspecto de tu tema WordPress, o ponerlo al menos a tu gusto.

De hecho, si has instalado la última actualización de JetPack seguro que estás deseando empezar a usar el ÇSS personalizado, así que no hay ya excusas para aprender el arte del CSS.

Si en el primer artículo vimos cómo modificar enlaces con CSS y, posteriormente, ya hicimos lista de las clases CSS por defecto, en esta ocasión vamos a ver como se cambian estilos y tipos de letra en los principales elementos del contenido, o sea, los títulos y el mismo contenido de las entradas.

… Cambiar la tipografía principal …

Lo más fácil es atacar directamente a la tag body. Para ello abres la hoja de estilos del tema (normalmente style.css) o la pantalla de “Persoanalizar CSS” de JetPack, y localizas la susodicha etiqueta, que será algo así:

body {
  font-family:Helvetica,Futura,Arial,Verdana,sans-serif;
}

Lo que ves detrás de “font-family” es la secuencia en la que se cargarán los tipos de letra, de izquierda a derecha, y hay varias posibilidades, por si el sistema desde el que se visualiza no dispone de alguna de las tipografías instaladas, al final se indica la tipografía básica por defecto, en este caso eligiendo la “sans serif” que haya instalada en el ordenador.

Cambiarlo es tan sencillo como elegir otra serie de familia de fuentes, por ejemplo:

body {
  font-family:Monaco,Georgia,Times,serif;
}

… Cambiar el estilo de los títulos …

En este caso buscamos la clase correspondiente, la tag h1, y sino podemos crearla. Es la que suelen usar los temas para el título visible de nuestra web, si me apuras el texto más importante de la misma:

#content h1 {
  font-style:italic;
  font-weight:bold;
  font-size:2em;
  font-color:#ffffff;
  font-family:'Helvetica','Verdana','Monaco',sans-serif;
}

Igual que antes, podemos cambiar el tipo de letra y familias, pero además tenemos unos cuantos estilos más que definir:

font-style: en el ejemplo cursiva (italic)
font-weight: en el ejemplo en negrita (bold)
font-size: podemos indicarlo en “ems” o tamaño de pixels (ej: 14px)
font-color: para cambiarlo hazte con un editor de colores hexadecimal, o usa el que viene en el selector de color de cabecera de temas como Twenty ten, por ejemplo, y lo pones a tu gusto.

… Cambiar otros estilos de títulos …

Ya puestos, si quieres cambiar el estilo del resto de etiquetas de título (h2, h3, etc), lo habitual (pero no obligatorio) es elegir unos estilos iguales para todos, algo así:

body h2, body h3, body h4, body h5, body h6 {
  font-family:'Helvetica','Verdana','Monaco',sans-serif;
}

Por supuesto, puedes definir un estilo diferenciado para cada tag.

Bueno, por hoy ya está bien, ¡a practicar que paso lista!

Fuente: AyudaWordpress

Thimble: el editor web de Mozilla

Darkwin — Wed, 20 Jun 2012 16:31:19 +0000

Thimble es un sencillo editor online con el que escribir código HTML y CSS que ha sido desarrollado recientemente por Mozilla.

Esta utilidad se enmarca dentro del programa Webmaker con el que la Fundación Mozilla reafirma su compromiso de ofrecer todo tipo de herramientas, consejos, y eventos dirigidos a mejorar las posibilidades de desarrolladores y diseñadores web y hacer más grande la World Wide Web.

Este editor en la nube de HTML y CSS dispone de una sencilla interfaz acompañada de varias ayudas sobre las etiquetas usadas y su función, con las que mejorar su usabilidad y que se convierte en especialmente interesante para aquellos con menos experiencia en este tipo de herramientas.

Entre las características de esta utilidad para desarrolladores destacamos la división del area de trabajo en dos espacios, la columna izquierda es la zona donde iremos escribiendo el código, mientras que la de la derecha permite previsualizar los resultados de forma instantanea.

Usuarios interesados tienen a su disposición Thimble sin necesidad de registro previo ni descargas y de forma completamente gratuita desde thimble.webmaker.org.

Fuente: DesarrolloWeb

Nuevos cursores con CSS3

Juan Pablo Pérez Manes — Mon, 23 Jan 2012 05:00:16 +0000

El cursor del mouse es un elemento muy poco considerado en el momento del diseño ó al aplicar estilos CSS. Pero la verdad es que es un complemento importantísimo de la accesibilidad y usabilidad, y por esa razón fue considerado en el momento de crearse tantos valores para esta propiedad.

Su uso es muy fácil y es aplicable no sólo a la pseudo-class :hover, sino que a cualquier etiqueta HTML:

¡Ayuda!

Ejemplo ¡Ayuda!

Lamentablemente la visualización de cada tipo de cursor depende del sistema operativo del usuario, y la capacidad de visualizarlo depende del browser que esté utilizando.

A continuación nombro todas las variedades y al final una página de ejemplo con todos ellos aplicados para que tengan al cursor considerado en su próximo proyecto:

CSS2:

cursor: auto;
cursor: inherit;
cursor: crosshair;
cursor: default;
cursor: help;
cursor: move;
cursor: pointer;
cursor: progress;
cursor: text;
cursor: wait;
cursor: e-resize;
cursor: ne-resize;
cursor: nw-resize;
cursor: n-resize;
cursor: se-resize;
cursor: sw-resize;
cursor: s-resize;
cursor: w-resize;

CSS3 (funcionan en los browsers modernos (IE9+, FF 3.5+, Chrome, Safari, Opera 9+):

cursor: none;
cursor: context-menu;
cursor: cell;
cursor: vertical-text;
cursor: alias;
cursor: copy;
cursor: no-drop;
cursor: not-allowed;
cursor: ew-resize;
cursor: ns-resize;
cursor: nesw-resize;
cursor: nwse-resize;
cursor: col-resize;
cursor: row-resize;
cursor: all-scroll;

Propietarios (Firefox y Chrome/Safari):

cursor: -webkit-grab;
cursor: -moz-grab;
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: -webkit-zoom-out;
cursor: -moz-zoom-out;

Tu propio cursor:

cursor: url(images/cursor.cur);
cursor: url(images/cursor.png), default;

Para mejor fallback después del url() utiliza algunos de los cursores CSS2.
Para Firefox y Chrome/Safari utiliza un PNG transparente.
IE require que sea un archive .cur
Opera no lo soporta.

Fuente: CSSLab

Estilo y estructura de enlaces con XHTML y CSS

Juan Pablo Pérez Manes — Sun, 25 Dec 2011 04:30:08 +0000

Hasta el momento hemos logrado analizar el diseño y estructura de los textos en nuestro documento XHTML, ahora iremos un poco más adelante y nos adentraremos en el estudio del hipertexto y sus máximos representantes, los enlaces o links.

El uso del hipertexto representa un método enfocado a proporcionar al usuario la capacidad de moverse de un sitio a otro al seleccionar elementos de enlace. El potencial de estos elementos le da al internet la capacidad de estar entrelazado, lo que le proporciona un alto grado de relevancia e importancia a esta clase de etiquetas dentro del lenguaje de marcado.

Elementos de anclaje

A diferencia de lo que la lógica pueda dar a entender, la etiqueta “link” no es la encargada de crear los enlaces en HTML. Como ya se mencionó en otras ocasiones, la etiqueta “a” que esta relacionada con anclajes, es quien establecerá los vínculos.

El simple hecho de crear un link no representa mayor reto, basta con envolver una cadena de texto con una etiqueta “a” de apertura y su contraparte de clausura, especificando la dirección de destino dentro del atributo “href” de la etiqueta, como se muestra en el ejemplo:

La Webera

El enlace se logra mediante una referencia de hipertexto, la cual es establecida gracias al atributo “href”, cuya función es contener el valor que se encargará de indicar al navegador la ruta hacia donde tiene que apuntar.

Esto no significa que los anclajes únicamente puedan redireccionar a otra página o a un sitio externo, por el contrario su función original consiste en establecer enlaces con partes internas de un documento, es decir, existe la posibilidad de utilizarlos como guía o puente entre partes de un texto o elementos que componen la misma página.

Para poder lograr esto basta con agregar el signo “#” antes de un fragmento de referencia, el cual puede ser un nombre o identificador del elemento al que queremos dirigirnos, y todo esto irá dentro del atributo “href”. En la actualidad los ID son los indicados para ser utilizados como referencia al momento de indicar una dirección interna, pero vale mencionar que en el pasado el nombre definido con el atributo “name” era lo más utilizado.

En base esto, podemos definir que para establecer un enlace interno hacia un elemento de capa cuyo identificador es “capaPrincipal”, podemos escribir un código como el siguiente:

Principal
Descripción principal de la página

Con estos links internos se nos permitirá recorrer el documento de una parte a otra sin necesidad de usar las barras desplazadoras, siendo utilizados principalmente para crear una clase de índice.

También podemos aplicar esta funcionalidad para dirigir a partes específicas en sitios externos, por ejemplo si el sitio que vamos a visitar tiene una sección que lleva por ID “capaPrincipalExterna”, podemos estructurar nuestro enlace de la siguiente manera:

La Webera

Estados de los enlaces

Existen cinco estados por los que un enlace puede pasar, nos estamos refiriendo al estado inicial, visitado, con el puntero encima, enfocado y activo. Con frecuencia dichos estados son utilizados para definir estilos únicos y distintos mediante CSS, y de esa manera asegurar que el usuario pueda identificar los links que han sido utilizados.

El primer estado es aquel en el que se encuentra el link que no ha sido visitado, el segundo es identificado por la palabra “visited” y se presenta cuando el enlace fue visitado, el tercero es “hover” y es cuando el puntero del mouse se encuentra sobre el link, después viene “focus” que es cuando el documento se enfoca sobre el link como cuando utilizamos la tecla tab para recorrerlo, y finalmente tenemos “active” que es cuando el link se encuentra seleccionado.

Por defecto los navegadores sólo toman en cuenta tres estados, los enlaces no visitados son colocados en color azul, los visitados en morado y los activos en rojo. Esto no añade estética al sitio, por lo que es común rediseñar su aspecto recurriendo a CSS.

Si utilizamos la etiqueta “a” como selector dentro de nuestro código CSS, entonces definiremos un estilo único para todos los cinco estados, lo cual es una práctica común si no queremos complicarnos la vida o simplemente así lo amerita el diseño. Pero si lo que queremos es manejar de manera independiente cada estado, debemos hacer uso de pseudo-clases, las cuales se llaman poniendo el signo de dos puntos “:” entre la etiqueta “a” y alguna de los estados mencionados, los cuales llevarán por nombre las palabras que se mencionaron en el párrafo anterior.

Supongamos que queremos definir que los links visitados sean de color naranja, en vez del morado por defecto, entonces simplemente haríamos algo como esto:

a:visited { color: orange; }

Y si quisiéramos definir los cinco estados por separado, basta con incluir el siguiente código:

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: orange; }
a:focus { color: yellow; }
a:active { color: red; }

Para el estado normal del link, es común utilizar un color que vaya acorde al resto del sitio, un color que combine pero que permita identificar rápidamente los enlaces. Es necesario respetar el subrayado del texto, ya que aunque puede lucir estético el removerla, esto puede confundir a los usuarios e incluso resultar un impedimento para aquellos que no puedan distinguir una diferencia de color.

Por su parte el estado “visited” es cada vez menos recurrido para ser diferenciado, muchas veces se opta por utilizar el mismo color de letra que en el estado normal, todo para no estropear el diseño general del sitio. Si deseas apegarte a lo clásico puedes optar por un color un poco más claro que el color normal para que así el usuario pueda identificar los links ya visitados, y al mismo tiempo no estropear el diseño.

El estado “hover” entra en acción cuando ponemos el cursor sobre el enlace, esto lo ha convertido en uno de los más populares al momento de diseñar. Esta transición puede resultar muy útil para resaltar, por lo que los diseñadores generalmente hacen el cambio más radical de color en este estado, o incluso hacen algunos cambios como la omisión de decoración en las letras, por lo que común ver que en un código CSS se haga lo siguiente:

a:hover{ text-decoration: none; }

Mientras que “hover” resulta muy popular, “focus” no lo es tanto, este estado ha sido relegado por la falta de uso de la tecla tab, por lo que muchos le consideran la menos útil de todas las pseudo clases de links, la cual incluso no es compatible con Internet Explorer.

Finalmente el estado activo es ideal para dar un estilo que deseamos se muestre al momento de dar click en un enlace, también puede ser utilizado para dar una pequeña retroalimentación o respuesta al usuario.

Accesibilidad de los enlaces

Además de los estados, una cosa que debemos tener muy en cuenta al momento de estructurar enlaces, es la accesibilidad a ellos. Es importante prestar especial atención a la accesibilidad de los enlaces para asegurarse de que todos puedan utilizar las páginas web de manera eficaz, incluso si no usan dispositivos de señalización o si utilizan navegadores no visuales.

La tabulación es uno de estos aspectos a considerar, la medida en que lo tomes dependerá del mercado al que tu sitio vaya dirigido. Muchos usuarios no utilizan dispositivos de señalización, ya sea por decisión propia o por necesidad, si utilizamos un teclado para desplazarnos a través del sitio debemos garantizar que este nos guiará de manera adecuada.

Para establecer de forma explícita el orden de tabulación de los enlaces en una página, podemos utilizar el atributo “tabindex”, el cual tendrá como valor números que indicarán el orden de los vínculos, siendo 1 el primero.

Inicio

Es posible que también desees hacer esto si crees que existen algunos enlaces que son de mayor importancia o interés para el usuario que otros, por lo tanto querrás hacer el proceso más centrado en ello.

Otro aspecto a considerar con las teclas de acceso, las cuales nos permiten llegar a links simplemente con introducirlas con el teclado. Estos atajos del teclado, remueven la necesidad de tabular hasta llegar al vínculo que deseamos, y para aplicarlos basta con realizar lo siguiente:

Inicio

El atributo “accesskey” indicará la letra o combinación de letras que debemos utilizar para accesar al link, en el caso del ejemplo bastará con escribir Ctrl o Alt (dependiendo del navegador) seguido de i para que nos lleve a la posición del link de inicio.

Muchas veces es imposible tener una clave de acceso para todos los links, por lo que sugerimos añadir esto únicamente a los más importantes, o que más demanden su uso.

Fuente: lawebera

Manejo de imágenes con XHTML y CSS

Juan Pablo Pérez Manes — Sat, 24 Dec 2011 04:30:58 +0000

El uso de imágenes dentro de documento XHTML será, por obvias razones, la mejor forma de presentar contenido visual en nuestra página web. Ya sea una foto. un botón o algún elemento de un layout, las imágenes están presentes en casi todos los sitios que se encuentran en la Web, excluyéndose únicamente en aquellos sitios extra minimalistas que sólo optan por utilizar texto y CSS para presentar información.

Hubo un período de tiempo donde la dependencia al uso de imágenes era aún más marcado, no podías dar paso sin utilizarlas, ya que su función fue malinterpretada y los nuevos layouts las aplicaban para dar forma a la estructura del sitio. Por ello, al momento de entrar a una página se nos cargaban imágenes transparentes, gifs espaciadores, incluso letras y menús hechos únicamente con imágenes, esto representaba hacer varias peticiones al servidor para descargar muchas imágenes que solo eran utilizadas en una ocasión y alentaban el tiempo de descarga del sitio.

En la actualidad gracias a CSS podemos omitir gran parte de esas locuras y suprimir el uso excesivo de imágenes, pero esto no demerita su importancia dentro del documento. Las imágenes siguen siendo una parte muy relevante al momento de planear un sitio, por lo que debemos clasificarlas en dos grandes tipos, aquellas que utilizaremos para mostrar o ejemplificar contenido, y las que utilizamos para mejorar la presentación.

Etiqueta img de HTML

La etiqueta “img” es la encargada de crear el elemento de imagen, es decir nos permitirá incrustar una imagen dentro de nuestro código y así mostrarla en la página.

Cuenta con varios atributos que se encargan de especificar aspectos relevantes sobre la incrustación de la imagen, el principal de ellos lleva por nombre “src” y se encarga de apuntar hacia la locación actual del archivo de la imagen, sin él la etiqueta pierde sentido de uso. Entre los atributos también encontramos “alt”, que por reglas XHTML es totalmente requerido, y se encarga de especificar un texto que describa o explique la imagen.

El hecho de que el atributo “alt” sea un elemento requerido por XHTML, se debe a que representa una alternativa para aquellos usuarios que por alguna razón no pueden observar la imagen, además aumenta el SEO del sitio permitiendo que los buscadores puedan obtener contenido legible sobre las imágenes que se están mostrando. Su contenido dará una idea de lo que la imagen representa y ayudará en caso de que esta sea retirada o el servidor no ofrezca una respuesta a la petición.

Por otro lado, también tenemos atributos, que en su tiempo se encargaron de dar forma al elemento de imagen pero ya no soy soportados por los navegadores. Tal es el caso del atributo “longdesc” que se encargaba de proveer la locación o dirección hacia un archivo que contenía una larga descripción de lo que se esta mostrando con la imagen.

Mapas de imágenes

Cuando utilizamos una sola imagen para establecer varios puntos o dividirla en partes mediante coordenadas, estamos estableciendo un mapa de imagen. Hablando en términos generales, podemos encontrar que existen dos tipos de mapas, aquellos que se encuentran del lado servidor y los que son realizados desde el lado cliente, estos últimos son los que vamos a realizar mediante las etiquetas “map” y “area”.

Supongamos que tenemos una imagen con un mapa mundial, y queremos señalar a dos o más países dentro de este mapa para redireccionar a otras páginas, entonces tendríamos que hacer algo como esto:

En este ejemplo estamos definiendo una imagen que se relaciona a un mapa mediante el atributo “usemap”, el cual lleva el mismo valor que el atributo “id” del elemento “map”. En este caso nos estamos refiriendo a “id” y no a “name” ya que en eso radica la diferencia entre XHTML y HTML para este caso, XHTML considera deprecado el atributo “name” para la etiqueta “map”, por ello “id” se convierte en el atributo de uso común, aunque en este ejemplo utilizamos ambos para evitar problemas de compatibilidad.

Cada elemento de área del mapa es definido mediante la etiqueta del mismo nombre, el cual cuenta con atributos de forma y coordenadas. Para la primer área utilizamos una forma rectangular por lo que el atributo “shape” recibe el valor de “rect” y las coordenadas tienen que indicar los cuatro puntos de la figura por lo que el atributo “coords” indica los cuatro valores separados por coma; por su parte la segunda área utiliza una forma poligonal por lo que son necesarios más valores para indicar la forma.

La razón por la que estos mapas no son tan utilizados, es que su uso se limita únicamente a ciertas enseñanzas como el caso de temas geográficos como el que vimos, además del hecho de que no son de un uso amigable en la interfaz, en muchas ocasiones no podemos inferir que la imagen cuenta con divisiones o links internos.

Imágenes de fondo con CSS

Debido a que las imágenes son más utilizadas como elemento de presentación, que como un auténtico contenido, es común ver que su manejo se lleve a cabo por CSS en la mayoría de las ocasiones. El elemento “img” solía ser llevado al extremo para realizar toda clase de funciones relacionadas a las imágenes, en la actualidad esto se ve disminuido por el hecho de que CSS permite manejar imágenes mediante su propiedad “background-image”, apegándonos más a los estándares que predominan.

La propiedad background-image se pueden utilizar para especificar una imagen que se utilizará como fondo en cualquier elemento de tipo capa, desde el cuerpo de la página hasta un párrafo sencillo. Al utilizarlo estaremos llenando el elemento con una imagen que ira desde la esquina superior izquierda hasta el final, cubriendo todo el espacio y con la oportunidad de agregar otros elementos sobre la imagen.

body { background-image: url(imagenes/webera.jpg); }

Podemos controlar aspectos de la imagen de fondo mediante otras propiedades CSS, como background-attachment, background-repeat y background-position.

La propiedad background-attachment determina si la imagen de fondo se desplazará con el contenido de una caja. Puede ser utilizado para especificar si la imagen se desplazará con el resto de la página o si debe ser fijado a la vista, es decir el área de visualización de la ventana del navegador, en lugar de la página.

body {
background-image: url(imagenes/webera.jpg);
background-attachment: fixed;
}

En este ejemplo estamos estableciendo la imagen “webera.jpg” como fondo de página, y en vez de seguir el patrón común de desplazamiento, la imagen lucirá exactamente igual conforme nos desplacemos, lo único que se ira recorriendo es el resto del contenido de la página.

En caso de que la imagen que estas utilizando sea muy pequeña o simplemente no deseas que se repita, creando un efecto de mosaico, entonces la propiedad a la que debes recurrir es “background-repeat”. Al establecer esta propiedad con un valor de “no-repeat” nos ahorraremos el tener que desplegar la imagen varias veces y simplemente se mostrará en una ocasión.

body {
background-image: url(imagenes/webera.jpg);
background-repeat: no-repeat;
}

Esta propiedad también puede tener los valores de “repeat-x” para repetir la imagen únicamente de manera horizontal y “repeat-y” para hacer lo mismo pero de manera vertical. El resto del área que no sea cubierto por la imagen de fondo optará por un fondo transparente, que por lo general luce de color blanco por ser el patrón elegido para el navegador, al menos que elijamos un color de fondo mediante la propiedad “background-color” lo que cual combinaría los dos valores, mostrando la imagen y en el área restante el color elegido.

Las imágenes de fondos siempre inician en la esquina superior izquierda por default, en caso de que esto no cumpla con lo que requerimos, podemos cambiar esa posición mediane la propiedad “background-position”, que es generalmente utilizada en combinación con la propiedad de repetición. Los valores que recibe esta propiedad son los clásicos para definir una posición, nos referimos a “top”, “right”, “bottom”, “left”, “center”, alguna medida o un porcentaje, o incluso la combinación de alguno de estos valores.

body {
background-image: url(imagenes/webera.jpg);
background-repeat: no-repeat;
background-position: center;
}

Finalmente tenemos los ya famosos shorthands o también conocidos como atajos, es decir la propiedad que nos va a ayudar a representar todas estás propiedades en una sola línea, en este caso lleva por nombre “background” y nos ayudará a definir los valores de background-color, background-image, background-repeat, background-attachment y background-position.

body { background: #CCCCCC url(imagenes/webera.jpg) center fixed no-repeat; }

Aunque en los ejemplos de este artículo estuvimos utilizando el elemento “body”, ten en mente que estas propiedades puedes ser aplicadas para cualquier elemento visible en la página que tenga el tipo caja o capa, un párrafo, una tabla, un div, incluso algún elemento de imagen que luzca transparente.

Fuente: lawebera

Fondos para Páginas web – Patterns

Juan Pablo Pérez Manes — Fri, 07 Oct 2011 06:00:52 +0000

Una de estas pequeñas imágenes con textura (Patterns), aplicada al fondo (background) de una página web, repetida la cantidad de veces necesarias para llenarla; se convierte en un fondo para tu web muy atractivo.

Estuve buscando en Google y no encontré muchas variedades que me llamaran la atención, hasta que de blog en blog llegue a la web más útil con respecto a este tema:
Ava7 Patterns, aquí encontrarás la mayor variedad de fondos para tu pagina web. Una web muy bien hecha, puedes filtrar los patterns por colores, texturas y popularidad, además de un excelente sistema de vista previa (Preview), que al hacer clic te mostrará en la misma web como se vería en el fondo repetidas veces.

Luego de encontrar el que creas que se verá mejor en tu web, la descargas (download) a tu pc, y la subes a tu hosting o algun sistema de alojamientos como Imageshack.
Cuando ya tengas el link directo a la imágen, tienes 2 formas de agregarlo en el código html de tu sitio:

1.- Buscas el tag <body> y le agregas la etiqueta “background”, quedaria:

2.- Agregas el siguiente codigo antes de , modificando la dirección de la imágen:

Sin duda una web para guardar en los Favoritos.
Espero les sea útil, saludos

Fuente: creaweb

Comentarios en CSS

Juan Pablo Pérez Manes — Sun, 02 Oct 2011 02:57:51 +0000

Un comentario es un texto que añadimos a nuestro código para hacerlo mas entendible a la hora de revisarlo o de que otra persona continúe nuestro trabajo, de esta manera podemos indicar para que se crea casa selector, que es cada atributo… pero que a la hora de la verdad no influyen en el funcionamiento de un código.

Los comentarios en CSS són como los comentarios multilínea en C, es decir, una barra inclinada hacia la derecha seguida de un asterisco (/*) para abrir y lo mismo en orden inverso para cerrar (*/), de esta manera, podemos escribir una o varias líneas de comentario como veremos en el siguiente ejemplo:

input { /* Este es el nuevo estilo input */
   border: 5px solid black;
}
/* Este es el viejo estilo que hemos comentado
    para que no funcione.
input {
   border: 0;
}
*/

Hay que tener cuidado al abrir un comentario dentro de otro comentario, porque generalmente el navegador detectará la apertura del primer comentario y lo finalizará cuando acaba el segundo, mirar este ejemplo:

Asi tendria que ser

/* comentario 1
/* comentario 2 */
   input {
     border: 5px solid black;
   }
*/

Que el navegador interpretará cómo:

Así es como será:

/* comentario 1
/* comentario 2 */
   input {
     border: 5px solid black;
   }
*/

Autor Eloi de San Martín.
www.programacionweb.net

Fuente: Webtaller

Como detectar el uso de Internet Explorer 6, 7 y 8

Juan Pablo Pérez Manes — Wed, 14 Sep 2011 05:00:01 +0000

Es de casi asegurar el hecho de que todo aquel programador que ha tenido experiencia en el ámbito del desarrollo web se ha visto envuelto en alguna clase de problema con Internet Explorer. Ya sea de forma directa o indirecta este navegador, identificado por el famoso icono de la “e” azul, ha representado un reto y horas extra de codificación para todos los proyectos que se emprenden.

Su inestabilidad y falta de estándares han hecho que de él no se tengan buenos conceptos, y razones no faltan para hablar mal. Desde hechos tan sencillos como el despliegue incorrecto de una imagen hasta casos extremos donde el estilo completo de una página se ve afectado, transparencias, capas flotantes, efectos de sombreado, estilizaciones, todo esto puede verse alterado en alguna de sus versiones.

Si bien es cierto que este en su última versión ha presentado grandes mejoras y el soporte a nuevas tecnologías se ha puesto como prioridad, el uso de sus versiones anteriores y la poca estandarización de estas producen dolores de cabeza a por mayor, pues tenemos que afrontar la verdad y darnos cuenta de que aún existen millones de personas utilizando alguna versión vieja de este navegador por lo que tenemos que seguir brindado soporte.

Algunas de estas versiones, como es el caso de Internet Explorer 6, han sido oficialmente declaradas como muertas, pero en países como China este explorador sigue siendo el más utilizado y el simple hecho de dar formato a un disco duro e instalar de nueva cuenta el sistema operativo Windows XP hace que Internet Explorer 6 tome la riendas de la navegación web de nuevo, por lo que no lo podemos pasar por alto.

Que la innovación es importante lo sabemos, que la estandarización y las nuevas tecnologías es lo que se debe practicar sin duda, pero hay que recordar que no vivimos en un mundo de desarrolladores, allá afuera existen personas que saben poco o nada de estándares o de navegadores actualizados, ellos solo quieren entrar a Internet buscar algún producto o información y obtenerlo.

Esta clase de personas también serán nuestros clientes o los clientes potenciales de los sitios para los que trabajamos, no podemos llegar con la persona que nos contrató y decirle algo como “El sitio quedó muy bien, pero sólo se verá bien en Firefox y Google Chrome, en IE fallará pero no importa el 40% de los visitantes la verán bien”.

Por esta razón principalmente tenemos que buscar “hacks” y manera de adaptar nuestro sitio para que Internet Explorer pueda por lo menos simular lo que queremos lograr. En esta ocasión tratamos el tema de como detectar el uso de alguno de estos navegadores mediante caracteres en nuestro código CSS, son 3 simples expresiones que nos ayudan a determinar que un estilo para cada versión del navegador ya sea Internet Explorer 8 o inferior.

Antes de empezar con el desarrollo debemos aclarar que esta no es la mejor práctica y se debe utilizar sólo en casos donde sabemos que existirán pocos cambios en el estilo, la mayor parte del tiempo debemos utilizar el condicionamiento en comentarios como este:

Si deseamos un comportamiento especial en cada versión, pero estos caracteres se pueden tomar como un atajo o algo sencillo a realizar cuando no exista mucha diferencia de un estilo a otro, y al final del día es un conocimiento extra que nos puede ayudar en el futuro.

IE8 y anteriores

La clave para rastrear Internet Explorer 8 y versiones anteriores esta conformada por dos caracteres, una diagonal invertida y el número nueve al final de la sentencia de estilo. Por ejemplo:

body {
 color : blue; /* Todos los navegadores */
 color : red\9; /* IE8 y anteriores */
}

Desafortunadamente este hack únicamente puede ser utilizado para rastrear la versión 8 y anteriores, no podemos implementar algo como “\IE” para saber si el navegador es Internet Explorer en general.

IE 7 y anteriores

Para identificar al navegador IE 7 o alguna versión anterior utilizamos el caracter asterisco “*”. En este caso el caracter lo usaremos al principio de la sentencia y no al final como en el ejemplo anterior, es entonces que el código nos quedaría de la siguiente manera:

body {
     color : blue; /* Todos los navegadores */
     color : red\9; /* IE8 */
     *color: green; /* IE7 y anteriores */
    }

IE6

Por su parte Internet Explorer 6 es representado por un guión bajo “_”, o underscore, el cual también se coloca al inicio de la declaración de estilo y en este caso únicamente servirá para rastrear la versión 6.

body {
     color : blue; /* Todos los navegadores */
     color : red\9; /* IE8 */
     *color: green; /* IE7 */
     _color: purple: /* IE6 */
    }

Conclusión

De esta manera podemos incluso personalizar el sitio en base a la versión del cliente, mostrar alguna capa o ocultar algunas otras, incluso desplegarle algún mensaje que le recomiende bajar otro navegador. Como ya explique el uso de estos caracteres selectores debe hacerse con cuidado y no exagerar en su implementación, puesto que no sabemos si en un futuro estos hacks seguirán siendo utilizados o representarán lo mismo.

Fuente: Lawebera