Avenida de Castilla,1 - Edificio Best Point - Oficina 21B28830 San Fernando de Henares (Madrid)

tel./fax: +34 91 675 33 06info@autentia.com - www.autentia.com

Somos su empresa de Soporte a Desarrollo Informático.Ese apoyo que siempre quiso tener...

1. Desarrollo de componentes y proyectos a medida

TecnologíaDesarrolloSistemas

Gran Empresa

Producción

autentia

Certificacióno Pruebas

Verificación previa

RFP Concurso

Consultora 1

Consultora 2

Consultora 3

Equipo propio desarrolloPiloto

3a

3b

1. Definición de frameworks corporativos.2. Transferencia de conocimiento de nuevas arquitecturas.3. Soporte al arranque de proyectos.4. Auditoría preventiva periódica de calidad.5. Revisión previa a la certificación de proyectos.6. Extensión de capacidad de equipos de calidad.7. Identificación de problemas en producción.

3. Arranque de proyectos basados en nuevas tecnologías

¿Qué ofrece Autentia Real Business Solutions S.L?

Para más información visítenos en: www.autentia.com

Compartimos nuestro conociemiento en: www.adictosaltrabajo.com

Gestor portales (Liferay)Gestor de contenidos (Alfresco)Aplicaciones híbridas

Tareas programadas (Quartz)Gestor documental (Alfresco)Inversión de control (Spring)

BPM (jBPM o Bonita)Generación de informes (JasperReport)ESB (Open ESB)

Control de autenticación y acceso (Spring Security)UDDIWeb ServicesRest ServicesSocial SSOSSO (Cas)

Spring MVC, JSF-PrimeFaces /RichFaces, HTML5, CSS3, JavaScript-jQuery

JPA-Hibernate, MyBatisMotor de búsqueda empresarial (Solr)ETL (Talend)

Dirección de Proyectos Informáticos.Metodologías ágilesPatrones de diseñoTDD

2. Auditoría de código y recomendaciones de mejora

4. Cursos de formación (impartidos por desarrolladores en activo)

02/11/11 CSS Browser Selector o cómo olvidarnos de los hacks en CSS

1/3www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=CSSBrowserSelector

E-mail:

Contraseña:

Inicio Quiénes somos Tutoriales Formación Comparador de salarios Nuestro libro Charlas Más

Deseo registrarmeHe olvidado mis datos deacceso

Entrar

Estás en:Inicio Tutoriales CSS Browser Selector o cómo olvidarnos de los hacks en CSS

Catálogo de serviciosAutentia

Últimas Noticias

Crónica del eventode Liferay en

Madrid

El primer capítulode Terrakas ya

está online

Ya ha terminadola CAS 2011,

ahora toca pensarcómo me gustaría que

fuera la CAS 2012

Share | 0

DESARROLLADO POR:Rubén Aguilera Díaz-Heredero

Consultor tecnológico de desarrollo de proyectosinformáticos.

Ingeniero en Informática, especialidad enIngeniería del Software

Puedes encontrarme en Autentia: Ofrecemosservicios de soporte a desarrollo, factoría yformación

Somos expertos en Java/J2EE

Ver tutoriales de Rubén Aguilera Díaz-Heredero

Regístrate para votar

CSS Browser Selector o cómo olvidarnosde los hacks en CSS

0. Índice de contenidos.

1. Entorno2. Introducción y solución al problema

1. Entorno

Este tutorial está escrito usando el siguiente entorno:

Hardware: Portátil Mac Book Pro 17" (2,6 Ghz Intel Core i7, 8 GB DDR3)Sistema Operativo: Mac OS X Snow Leopard 10.6.4Smultron (Bloc de notas)

2. Introducción y solución al problema

Como desarrollador uno de los aspectos que más me levanta dolor de cabeza es la malditaguerra para que tu página web se vea igual en todos los navegadores. No hace faltamencionar cual de ellos es el que nos presenta mayor batalla; y que es el mayor responsablede las aberraciones en las CSS llamadas hacks, como la que se muestra en el siguiente

5Fecha de publicación del tutorial: 2011-11-02

02/11/11 CSS Browser Selector o cómo olvidarnos de los hacks en CSS

2/3www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=CSSBrowserSelector

fuera la CAS 2012

Restrospectiva,Carrera de las

empresas 2011

¿Qué ganan losdemás con que tu

vayas a unaconferencia?

Histórico deNOTICIAS

Últimos Tutoriales

Generar hojas decálculo con

fórmulas medianteApache POI

GeoposicionamientoWeb con HTML5 yGoogle Maps

Primeros pasoscon Spring Web

Flow 2

Karmacracy,diviertete

compartiendo.

Cómo centrar unapágina web en el

navegador.

Últimos Tutorialesdel Autor

CAS REST: Cómologarnos en CAS

sin ir a la pantalla delogin por defecto

ImplementandoSSO con CAS:

ejemplo práctico

Creación de unportlet con

Primefaces

Cómo usar el DNIelectrónico

Mybatis con Maveny Spring

de las aberraciones en las CSS llamadas hacks, como la que se muestra en el siguienteejemplo:

view plain print ?

!"#$ %&'($)$$!*#$ $$$$%+,-./&01'2,&3&/4$5666666$$$$$$$$$$$78$69/:;&<$($3&=$':>?=$87$$!@#$ $$$$8%+,-./&01'2,&3&/4$5!!!!!!$$$$$$$$$$78$ABC$:$91;:/9&/:=$87$$!D#$ $$$$E%+,-./&01'2,&3&/4$5FFFFFFG$$$$$$$$$78$HI3&$ABJ$87$$!K#$ L$$

Para evitar hacer esto pero conseguir la misma funcionalidad tenemos que agradecerle a D.Rafael Lima la ocurrencia de su CSS Browser Selector. Es un fichero Javascript que se puededescargar de la siguiente url: Descargar CSS Browser Selector

Este pequeño script lee la propiedad "navigator.userAgent" y en función de la información queincorporé va a añadir una serie de clases al elemento <html> de la página, como son el motorde renderizado del navegador, la versión del navegador, el sistema operativo y si tiene o nohabilitado Javascript. Por ejemplo, si accedemos desde el Mac, con Chrome y tenemos elJavascript habilitado el resultado será <html class="webkit chrome mac js">. Para el mismocaso pero accediendo con Firefox 3.0 el resultado es el siguiente: <html class=" gecko ff3 macjs">

De esta forma podemos especificar reglas CSS específicas para cada uno de los navegadores ysustituir los poco mantenibles hacks por código más legible. El ejemplo anterior quedaría de lasiguiente forma:

view plain print ?

!"#$ %&'()$78M+/+$:3$/:=N&$':$1+O:.+'&/:=87$$!*#$ $$$$%+,-./&01'2,&3&/4$5666666G$$!@#$ L$$!D#$ #.:,-&$%&'()$78$M+/+$N&'+=$3+=$O:/=9&1:=$':$69/:;&<87$$!K#$ $$$$%+,-./&01'2,&3&/4$5666666G$$!J#$ L$$!C#$ #9:C$%&'()$78M+/+$3+$O:/=9I1$A1N:/1:N$B<P3&/:/$C87$$!Q#$ $$$$%+,-./&01'2,&3&/4$5!!!!!!!G$$!R#$ L$$$"!#$ #9:J$%&'()$$""#$ $$$$%+,-./&01'2,&3&/4$5FFFFFFG$$$$"*#$ L$$

Ahora podemos incluir cualquier regla CSS a un navegador y versión en concreto, con lo queya no tiene sentido que sigamos utilizando los hacks. Para probarlo simplemente hay quedescargar el script, crear un fichero HTML e incluir la referencia al script y al fichero CSS quequeramos utilizar, un ejemplo podría ser el siguiente:

view plain print ?

!"#$ STUVFWXMB$YN>3!$$!*#$ "#$%&!$$!@#$ $$$$"#'()!$$!D#$ $$$$$$$$"$*$&'!M/0:%+$':$Z/&[=:/$H19;;:/$$!K#$ $$$$$$$$"+,-*.$$N(P:\]N:<N7^+O+=,/9PN]$=/,\],==E%/&[=:/E=:3:,N&/#^=]!$$!J#$ $$$$$$$$$$!C#$ $$$$$$$$"+$/&'!$$!Q#$ $$$$$$$$$$$$#;;@$%&'()$$!R#$ $$$$$$$$$$$$$$$$$$$$%+,-./&01'2,&3&/4$/:'G$$"!#$ $$$$$$$$$$$$$$$$L$$""#$ $$$$$$$$$$$$$$$$$$"*#$ $$$$$$$$$$$$#^=$P)$$"@#$ $$$$$$$$$$$$$$$$,&3&/4$%30:G$$"D#$ $$$$$$$$$$$$$$$$L$$"K#$ $$$$$$$$"0+$/&'!$$"J#$ $$$$$$$$$$"C#$ $$$$"0#'()!$$"Q#$ $$$$$$"R#$ $$$$"12)/!$$*!#$ $$$$$$$$".!B=N&$:=$01+$P/0:%+$':$Z/&[=:/$H19;;:/".!"0.!$$*"#$ $$$$"012)/!$$**#$ "0#$%&!$$

Al visualizar esta página con Firefox versión 3 veremos que el body lo pone en rojo, y si tienehabilitado javascript el color del texto saldrá en azul.

Recomiendo echar un vistazo al script para ver cuales son los elementos que soporta, añadirmás versiones de navegadores es tan sencillo como editar el script e incluirlo para que coincida

02/11/11 CSS Browser Selector o cómo olvidarnos de los hacks en CSS

3/3www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=CSSBrowserSelector

Esta obra está licenciada bajo licencia Creative Commons de Reconocimiento-No comercial-Sin obrasderivadas 2.5

PUSH THIS Page Pushers Community Help?

----no clicks + + + + + + + +

0 people brought clicks to this page

powered by karmacracy

Síguenos através de:

Últimas ofertas deempleo

2011-09-08Comercial -Ventas - MADRID.

2011-09-03Comercial -Ventas -

VALENCIA.

2011-08-19Comercial -Compras -

ALICANTE.

2011-07-12Otras Sincatalogar -

MADRID.

2011-07-06Otras Sincatalogar - LUGO.

Puedes opinar o comentar cualquier sugerencia que quieras comunicarnos sobre estetutorial; con tu ayuda, podemos ofrecerte un mejor servicio.

Enviar comentario (Sólo para usuarios registrados)

» Registrate y accede a esta y otras ventajas «

Anímate y coméntanos lo que pienses sobre este TUTORIAL:

más versiones de navegadores es tan sencillo como editar el script e incluirlo para que coincidacon la información que nos devuelve la propiedad navigator.userAgent que podemos visualizarcon un simple alert y accediendo con el agente que queramos.

Saludos.

COMENTARIOS

Copyright 2003-2011 © All Rights Reserved | Texto legal y condiciones de uso | Banners | Powered byAutentia | Contacto