Diferencias entre CSS y CSS3 (compatibilidad, bordes redondeados, gradientes, animaciones, columnas)

CSS (CSS1+CSS2) y CSS3 son tecnologías para dar formato a HTML. CSS separa presentación de estructura. CSS3 (en desarrollo desde 2011, módulos estandarizados progresivamente) añade potencia y reduce dependencia de imágenes.

CSS3 es retrocompatible con CSS

CSS3 no deprecata nada de CSS1/2. Código CSS antiguo sigue funcionando. CSS3 mejora: carga más rápida, menos peticiones HTTP (menos imágenes), menos tiempo desarrollo. Navegadores antiguos (IE9-) no soportan novedades CSS3 → requiere fallbacks (código alternativo).

CSS3: Bordes redondeados y gradientes (sin imágenes)

• CSS2: crear imagen borde/gradiente → subir → posicionar con CSS.
• CSS3: .roundBorder { border-radius: 10px; } → esquinas redondas nativas.
  Gradientes: código específico por motor (prefijos). Ej. blanco-negro Chrome/Edge/Firefox moderno:
  .gradBG { background: linear-gradient(white, black); }
  (Safari antiguo: -webkit-linear-gradient; IE10: -ms-linear-gradient).

CSS3: Animaciones y efectos de texto

• text-shadow: sombra en texto (legibilidad/estilo).
• word-wrap / overflow-wrap: fuerza salto de línea en palabras largas para columnas.
• Animaciones (@keyframes, transition, animation): antes requerían JavaScript/jQuery. Ahora en capa de diseño. W3C trabaja en Web Animations API para unificar.

CSS3: Columnas de texto (multi-column layout)

.news { column-count: 3; column-gap: 2em; } divide texto en 3 columnas como periódico. En CSS2 era muy difícil (float/position hack). Vital para diseño responsive: pantallas anchas → columnas legibles; móviles → 1 columna.