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 ayudaran 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 a la Interweb 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 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 mas, 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 con @font-face en donde descargamos la fuente determinada para cada navegador:

TTF - TrueType Font

Es 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 también 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 oscuro 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.

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 esta ubicada cada una de las fuentes. Mas 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 conectara a los servidores de Google para sacar las fuentes y se las mostrara a todos tus usuarios cada vez que entren a tu pagina.