Вы находитесь на странице: 1из 23

CSS Avanzado

Generalidades
Tipos de hojas de estilos
Hojas de estilos
• Hoja de navegador
– estilo inicial de los elementos HTML
• Hoja de usuario
– el usuario puede cambiar algunos
formatos
– no se suele utilizar mucho
• Hoja de diseñador
Orden de aplicación
• navegador
• usuario
• diseñador
important
• en caso de igualdad las reglas con !
important son las de máxima
prioridad
Problema de navegadores
• Las hojas de estilo del navegador son
diferentes en cada navegador
– coinciden en serif, negro…
– diferencias en márgenes, tamaño de
línea…
Solución
• Borrar la hoja de estilo de navegador
– reset
*{
margin: 0;

padding: 0;

}
• Solución arcaica aunque funciona
reset.css
• Creada por Eric Meyer
• se aplica en los principales
FrameWork
• http://meyerweb.com/

• esta hoja es sólo un inicio
Comprobar en varios
navegadores
• Instalar y probar nuestros diseños en
los principales navegadores
• Utilizar aplicaciones que dispongan
de vistas de varios navegadores
– http://browsershots.org/
• crea una imagen de cómo se vería la
página
• proceso más lento pero pruebas todo

IE - Firefox
• Muchas veces se prueba en Explorer
y Firefox
• Luego en alguno más.
• Con Firefox podemos “integrar” IE en
Fx.
– extensión de Fx
• https://addons.mozilla.org/es-ES/firefox/add
– No necesitas cambiar de uno a otro
navegador
Versiones de Explorer
• No puedes instalar varias versiones
de un mismo navegador
– sobreescribe
• http://browsers.evolt.org/
– hay varias versiones para descargar
• http://www.my-debugbar.com/wiki/IETester/
– aplicación gratuita que muestra varias
versiones de IE en el SO
– es imprescindible
Depurar y Validar
Validar CSS
• http://jigsaw.w3.org/css-validator/

Depurar
• Navegadores como Safari, Opera,
Firefox
– soportan outline
– IE7 no puede mostrar perfiles en
elementos de página
• http://homepage.mac.com/chrispage/iblog/
• aplica una regla que muestra los
perfiles en todo
– donde no aparezca es que hay error
* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid
orange }
* * * * * * * * { outline: 1px solid blue }
Firebug
• Más fiable
• Extensión de Firefox
– Para otros navegadores
• http://getfirebug.com/lite.html
– descargar
– <script type="text/javascript"
src="http://getfirebug.com/releases/li
te/1.2/firebug-lite-
compressed.js"></script>
Rendimiento
1. Utilizar sprites CSS para reducir el número de imágenes de adorno
a una única imagen.
2. No utilizar expresiones (expression()) en las hojas de estilos.
El navegador Internet Explorer revalúa continuamente el valor
de las expresiones y puede penalizar el rendimiento de la
página.
3. No utilizar los filtros de Internet Explorer, ya que algunos filtros
como AlphaImageLoader bloquean la carga de la página hasta
que no se descarga la imagen utilizada por el filtro.
4. Enlazar hojas de estilos externas en vez de incluir los estilos en la
propia página.
5. Enlazar las hojas de estilos mediante <link> en vez de @import
6. Reducir el número de archivos CSS de la página.
7. Combinar si es posible todos los archivos CSS individuales en un
único archivo CSS.
8. Reducir el tamaño de las hojas de estilos comprimiendo los
archivos con las herramientas disponibles (CSS Tidy, YUI
Compressor)
CSSTidy
• http://csstidy.sourceforge.net/
– quita espacios en blanco y saltos de
línea
– pone shortand

YUI Compressor
• http://developer.yahoo.com/yui/compress
• comprime el fichero css y js
Herramientas online
• http://www.cleancss.com/