CSS3 y sus capacidades

En este bloque hablaremos de CSS, profundizando de una manera profesional y a fondo sobre sus nuevas capacidades y extensiones que te ayudarán a escribir código y entender conceptos clave.

CSS son las hojas de estilo en cascada, es decir, es el encargado de generar los estilos de nuestro documento HTML.
Si tu eres de las personas que dice que programa al momento de hacer un documento en CSS, te doy la triste y mala noticia de que esto es falso ya que tu nunca programas en CSS o en HTML, sino tu diseñas y modelas datos.

CSS3 siendo parte de la estrategia de marketing para las nuevas tecnologías HTML5, viene a ser la actualización milagrosa de CSS2 en donde nuestra vida es más bella y divertida al momento de pasar un diseño de Fireworks o Illustrator a la web real.

¿Te acuerdas cuando tenías que poner un código asqueroso lleno de imágenes para tan solo colocar un borde redondeado? O quizás recuerdes cuando una sombra en un diseño era una pesadilla y la mejor de todas las falencias era tener que volver a crear un diseño especial para móviles en un subdominio que empezaba por m.tudominio.com. Una época muy complicada. 

Es cuando llega CSS3 con sus bordes redondeados, sombras, animaciones, dibujo en 2D y 3D y lo que nos resolvió la vida en cuanto a los móviles que cada día nos invaden más: Responsive Design junto a los layouts fluidos.

Nuevas capacidades de CSS3

Fuentes
Uno de los mayores problemas en el pasado de CSS2 era que tu podías usar la fuente que quisieras, pero tenías que limitarte a las que estuvieran disponibles en todos los navegadores o dependiendo hacia donde iba dirigido tu producto. La opción era usar una u otra fuente en caso de no ser encontrada, y esto hacía que nuestro diseño no pudiera ser tan completo y propio como nosotros quisiéramos.
Hoy en día tenemos un millón de alternativas para poder hacer que nuestras fuentes sean compatibles en todos los navegadores. Esto lo logramos con @font-face en donde descargamos la fuente determinada para cada navegador:

TTF - TrueType FontEs muy estándar pero no tiene protección ninguna. Es un formato abierto y reusable, por lo que fuentes privadas o propietarias (como Helvetica o Myriad Pro) al ponerlas en la web, son distribuidas. 

Esto está prohibido por la licencia del creador de la fuente (historia larga) y para ello, varios navegadores crearon estas opciones.

Soportada por Internet Explorer 9.0 o posterior, Firefox 19.0 o posterior, Chrome 24.0 o posterior, Safari 5.1 o posterior, Opera 12.1 o posterior, Safari Mobile 4.1 o posterior, Android Browser 2.2 o posterior y Blackberry Browser 7.0 o posterior.

WOFF - Web Open Font Format
Web Open Font Format es el formato oficial de la W3C, creado por Mozilla y ahora apoyado por Chrome, Opera e IE9 y 10. También oscuro, pero necesario.
Soportada por internet explorer 9.0 o posterior, Firefox 19.0 o posterior, Chrome 24.0 o posterior, Safari 5.0 o posterior, Opera 12.1, Safari Mobile 5.0, algunas versiones modificadas de Android y BlackBerry Browser 7.0 o posterior.

EOT - Embedded Open Type
El formato Embedded Open Type (.eot) fue creado por Microsoft como pionero en Internet Explorer 6 para agregar fuentes a través de font-face. Es bastante tenebroso pero es la única forma de hacer que las fuentes funcionen en IE6, 7 y 8.

Soportada por Internet Explorer 6.0 o posterior.

SVG - Scalable Vector Graphics
Scalable Vector Graphics es un formato de dibujo vectorial soportado por todos los navegadores y por herramientas como Adobe Illustrator. SVG también puede contener fuentes por dentro, porque una fuente a fin de cuentas es un vector. SVG es obligatorio para darle soporte a Safari Mobile (iPhone, iPad).

Soportada por Chrome 24.0 o posterior, Safari 5.1 o posterior, Opera 12.1 o posterior, Safari Mobile 3.2 o posterior, Android Browser 3.0 o posterior y Blackberry Browser 7.0 o posterior.

Cómo utilizar @font-face

La forma de implementar las fuentes después de descargarlas sera mediante @font-face el cual es totalmente compatible con TODOS los navegadores como mostramos a continuación:



SRC indica la URL en donde está ubicada cada una de las fuentes. Más info en caniuse.com
Tenemos otras opciones como Google Web Fonts, en donde solo hace falta importar un script dinámico (esa linea de código te la indican según su fuente, no debes matarte la cabeza), y por arte de magia, tu web se conectará a los servidores de Google para sacar las fuentes y se las mostrará a todos tus usuarios cada vez que entren a tu página.