tel./fax: +34 91 675 33 06 [email protected] - …...smultron (bloc de notas) 2. introducción y...
TRANSCRIPT
Avenida de Castilla,1 - Edificio Best Point - Oficina 21B28830 San Fernando de Henares (Madrid)
tel./fax: +34 91 675 33 [email protected] - 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