El documento discute las ventajas de no requerir que una página web se vea exactamente igual en todos los navegadores. Esto permite un desarrollo más rápido y experiencias de usuario más ligeras, aunque la página debe verse bien en todos los navegadores. CSS 3 ayuda a mejorar la compatibilidad al agregar nuevas características como sombras, colores, bordes y selectores.

1. CSS 3

2. ¿Una web debe verse
exactamente igual en todos los
navegadores?

3. NO.
Fuente: Google

4. ¿NO? ¿PORQUÉ?
• Mayor esfuerzo en la creación y mantenimiento.
• Marcado extra.
• Imágenes.
• Recurrir a JavaScript y/u otras técnicas.

5. ¿NO? ¿PORQUÉ?
• Peor experiencia de usuario:
• Páginas más pesadas.
• Mayor número de peticiones.
• Desarrollo por encima de las posibilidades del
navegador.

6. Una web debe verse BIEN en
todos los navegadores

7. CSS 3
• Intenta “rellenar” los huecos dejados por CSS 2.1
• Colores y sombras.
• Bordes.
• Columnas.
• Selectores.
• ...

8. GUERRA DE NAVEGADORES
0 13 25 38 50
IE
Firefox
Chrome
Safari
Opera
Fuente: statcounter.com (junio 2011)

9. SOPORTE CSS 3
0 25 50 75 100
IE 9
Firefox
Chrome
Safari
Opera
Fuente: http://www.findmebyip.com/litmus

10. COLORES RGB
rgb(red,green,blue)
color:rgb(255,255,0);
rgba(red,green,blue,alpha)
color:rgba(255,255,0,.5);
http://jsfiddle.net/Alwaison/h7nkn/

11. COLORES HSL
hls(hue,light(%),saturation (%))
color:hsl(60,100%,50%);
hlsa(hue,light (%),saturation (%),alpha)
color:hsla(60,100%,50%,.5);
http://jsfiddle.net/Alwaison/cX7HQ/

12. SOMBRAS TEXTO
text-shadow:vert(px),hor(px),dif(px),color
text-shadow:2px 2px 3px #000;
Múltiples sombras en un mismo elemento
text-shadow:1px 1px 1px #000, -1px -1px 1px #fff;
http://jsfiddle.net/Alwaison/xarYR/

13. SOMBRAS CAJAS
box-shadow:vert(px),hor(px),dif(px),color
box-shadow:5px 5px 3px #554433;
Para mayor compatibilidad, utilizar vendor-prefixes
moz-box-shadow (FF 3.6 y anteriores)
webkit-box-shadow (Safari 5, Chrome 9 y anteriores)

14. SOMBRAS CAJAS
Sombras interiores
box-shadow:5px 5px 3px #000 inset;
Múltiples sombras en un mismo elemento
box-shadow:0 0 20px #000, 20px 15px 30px #ff0, -20px 15px 30px #0f0, -20px -15px 30px
#00f, 20px -15px 30px #f00;
http://jsfiddle.net/Alwaison/SuB2J/

15. BACKGROUNDS
background:url(imagen) posX poxY [repeat],
url(imagenAlt) posX posY [repeat];
http://jsfiddle.net/Alwaison/uK9Ar/

16. FUENTES
@font-face {
font-family: 'Tipografia';
font-style: normal;
font-weight: normal;
src: local('ruta-a-la-fuente') format('xxx');
}
Formatos:
- eot (Embebed OpenType)
- woff
- ttf
- svg
http://jsfiddle.net/Alwaison/eW6k2/

17. DEGRADADOS LINEAL
linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
- point: Posición inicial del degradado (%, px, o top left).
- angle: Ángulo del degradado (45deg).
- stop: Compuesto por un color, y opcionalmente una posición de parada.
http://jsfiddle.net/Alwaison/rnSp2/

18. DEGRADADOS RADIAL
radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )
- point: Posición inicial del degradado (%, px, o top left).
- angle: Ángulo del degradado (45deg).
- shape: Forma del degradado (circle ó ellipse).
- size: Tamaño del degradado (closest-side, closest-corner, farthest-side, farthest-corner, contain, cover)
- stop: Compuesto por un color, y opcionalmente una posición de parada.
http://jsfiddle.net/Alwaison/a3Qd4/

19. COLUMNAS
• Column-count: Número de columnas (cantidad o tamaño).
• Column-width: Tamaño de las columnas (ancho).
• Column-gap: Separación entre las columnas (tamaño).
• Column-rule: Separador de las columnas.
http://jsfiddle.net/Alwaison/F72bF/

20. SELECTORES
• E[attr^=”var”] • E:first-of-type
• E[attr$=”var”] • E:last-of-type
• E[attr*=”var”] • E:only-child
• E:nth-child(n) • E:empty
• E:nth-last-child(n) • E:not(s)
• E:nth-of-type(n) • E~F
• E:nth-last-of-type(n) • E::before
• E:last-child • E::after
Todos en: http://www.w3.org/TR/css3-selectors/#selectors
http://jsfiddle.net/Alwaison/Zf4mf/

21. TRANSFORMACIONES 2D
• Rotación.
• Escalado.
• Trasladar.
• Sesgar.
http://jsfiddle.net/Alwaison/beRc2/

22. ALGUNOS RECURSOS...
• Detección de propiedades CSS 3 soportadas por los navegadores (http://www.modernizr.com/)
• Generador de sombras en CSS (http://westciv.com/tools/boxshadows/index.html)
• Google Web Fonts (http://www.google.com/webfonts/)
• Generador de fuentes (http://www.fontsquirrel.com/fontface/generator)
• Generador de degradados lineales (http://www.colorzilla.com/gradient-editor/)
• Generador de degradados radiales (http://www.westciv.com/tools/radialgradients/)
• Emulación de selectores CSS 3 y pseudo atributos en IE 6 - 8 (http://selectivizr.com/)
• Documentación sobre el estado de los módulos de la W3C (http://www.w3.org/TR/#tr_CSS)
• Enlaces, posts y varios sobre CSS 3 (http://www.delicious.com/alwaison/css3)

23. ¿DUDAS?

24. ¡GRACIAS!
jfernandezp@cesser.com
@alwaison