Diferencias entre CSS y CSS3
La especificación original de hojas de estilo en cascada, así como su revisión CSS3 mucho más reciente, son tecnologías utilizadas para mejorar y formatear páginas web HTML. CSS se diseñó inicialmente para manejar la capa de presentación de una página web de una manera más eficiente que el formateo con HTML, que nunca tuvo la intención de manejar la compleja construcción de la web contemporánea. Debido a que CSS2 es una extensión universalmente adoptada de CSS1, el término CSS sin número implica la inclusión de CSS2. La especificación CSS3 aún está en desarrollo a partir de julio de 2014, por lo que los desarrolladores web deben tener en cuenta que la compatibilidad de funciones varía entre los navegadores.
CSS3 es retrocompatible con CSS
CSS3 es una actualización de CSS2 que mantiene la compatibilidad con todas las funciones de CSS; CSS3 no desaprueba ningún código CSS. El código CSS3 está diseñado para que las páginas web se vean mejor y se carguen más rápido, así como para reducir el tiempo de desarrollo para crear páginas en el navegador de un usuario. CSS3 hace que el diseño web dependa menos de los archivos de imagen para los elementos de diseño de página y reduce las solicitudes de transferencia de archivos y el tiempo de descarga al usar menos imágenes. CSS1 se centró en el formato de apariencia, mientras que CSS2 agregó capacidades de posicionamiento para texto y objetos. Las versiones de navegador más antiguas, como IE 9 y anteriores, no son ampliamente compatibles con las funciones adicionales de CSS3, lo que puede requerir más tiempo de desarrollo para mantener el código de respaldo de CSS.
CSS3 agrega esquinas redondeadas y degradados
Antes de CSS3, los desarrolladores web necesitaban diseñar archivos de imagen para agregar cosas como esquinas redondeadas para bordes estructurales y degradados de imagen de fondo; CSS3 incluye características comparables que se pueden agregar con unas pocas líneas de código. En CSS, un desarrollador web tiene que diseñar un borde o degradado, subirlo al servidor de imágenes, colocar la imagen en la página y usar CSS para colocar correctamente el borde. En CSS3, el desarrollador web puede lograr algo similar con un código como ".roundBorder{border-radius:10px;}". Los gradientes de fondo son un poco más complicados y requieren un código diferente para diferentes navegadores. Por ejemplo, un degradado de blanco a negro para Chrome e IE usa un código como ".gradBG{background:liner-gradient(white,black);}".
CSS3 añade funciones de animación y efectos de texto
CSS3 tiene un puñado de características que no están presentes en CSS para mejorar la apariencia de los elementos de su página. Con CSS3, los desarrolladores web pueden agregar una sombra de texto al texto para que sea más fácil de leer o agregar un estilo visual y pueden forzar saltos de línea dentro de palabras más largas para que quepan dentro de columnas con ajuste de línea. Antes de CSS3, los desarrolladores web necesitaban codificar la animación en lenguajes de secuencias de comandos como JavaScript y jQuery; CSS3 agrega varias funciones de animación a la capa de diseño. El W3C todavía está trabajando en un estándar de animaciones web para resolver problemas de compatibilidad entre las diferentes técnicas de animación.
CSS3 define columnas de texto
CSS3 agrega la capacidad de dividir secciones de texto en múltiples columnas para leer como un periódico. En la especificación CSS2, los desarrolladores web tienen dificultades para construir secciones de texto de varias columnas porque el estándar no está equipado para dividir el texto automáticamente. Particularmente con los sitios que cuentan con un diseño receptivo, una técnica de desarrollo que reorganiza y cambia el tamaño del contenido según la resolución de la pantalla del dispositivo de visualización, las personas con monitores más grandes pueden tener dificultades para leer las filas de texto que se extienden por la pantalla.