La mayor diferencia entre CSS2 y CSS3 es que CSS3 se ha dividido en diferentes secciones, llamadas módulos. Cada uno de estos módulos se está abriendo paso en el W3C en varias etapas del proceso de recomendación. Este proceso ha facilitado mucho la aceptación e implementación en el navegador de varias piezas de CSS3 por parte de diferentes fabricantes.

Si comparamos este proceso con lo que ocurrió con CSS2, donde todo se presentó como un único documento con toda la información de las Hojas de Estilo en Cascada, empezamos a ver las ventajas de dividir la recomendación en partes más pequeñas e individuales. Dado que cada uno de los módulos se trabaja de forma individual, disponemos de una gama mucho más amplia de compatibilidad con navegadores para los módulos CSS3.

Como con cualquier especificación nueva y cambiante, asegúrese de probar sus páginas CSS3 a fondo en tantos navegadores y sistemas operativos como pueda. Recuerde que el objetivo no es crear páginas web que se vean exactamente iguales en todos los navegadores, sino asegurarse de que los estilos que utilice, incluidos los estilos CSS3, se vean bien en los navegadores que los soportan, y que sean compatibles con los navegadores más antiguos que no lo hacen.

Nuevos selectores CSS3

CSS3 ofrece un montón de nuevas formas de escribir reglas CSS con nuevos selectores CSS, así como un nuevo combinador y algunos nuevos pseudo-elementos.

Tres nuevos selectores de atributos:

• El principio del atributo coincide exactamente

  element[foo^="bar"]

  El elemento tiene un atributo llamado foo que comienza con «bar», por ejemplo

• La terminación del atributo coincide exactamente

  elemento[foo$="bar"]

  El elemento tiene un atributo llamado foo que termina con «bar», por ejemplo

• El atributo contiene la coincidencia

  element[foo*="bar"]

  El elemento tiene un atributo llamado foo que contiene la cadena «bar», por ejemplo

16 nuevas pseudo-clases:

• :raíz
  • El elemento raíz del documento. En HTML esto es siempre.
• :nth-child(n)
  • Utilice esta opción para hacer coincidir elementos hijo exactos o utilice variables para obtener coincidencias alternas.
• :nésimo último hijo(a)
  • Coinciden exactamente los elementos hijo contando desde el último.
• :nth-of-type(n)
  • Haga coincidir los elementos hermanos con el mismo nombre en el árbol de documentos.
• :nésimo último de tipo(n)
  • Empareja los elementos hermanos con el mismo nombre contando desde abajo.
• :último hijo
  • Coincide con el último elemento hijo del padre.
• :primero-de-tipo
  • Coinciden con el primer elemento hermano de ese tipo.
• :último de tipo
  • Coinciden con el último elemento hermano de ese tipo.
• :sólo-niño
  • Coincidir con el elemento que es el único hijo de su padre.
• :sólo-de-tipo
  • Empareja el elemento que es el único de su tipo.
• :vacío
  • Coincidir con el elemento que no tiene hijos (incluidos los nodos de texto).
• :objetivo
  • Coincidir con un elemento que es el objetivo de la URI de referencia.
• :habilitado
  • Coincidir con el elemento cuando está habilitado.
• :desactivado
  • Haz coincidir el elemento cuando esté desactivado.
• :marcado
  • Haga coincidir el elemento cuando esté marcado (botón de opción o casilla de verificación).

• :no(s)
  • Coincidir cuando el elemento no coincide con el selector simple s.

Un nuevo combinador:

• elementA ~ elementB
  • Coincidir cuando elementB sigue a elementA en algún lugar, no necesariamente de forma inmediata.

Nuevas propiedades

CSS3 también introdujo una serie de nuevas propiedades CSS. Muchas de estas propiedades eran para crear estilos visuales que probablemente se asociarían más con un programa de gráficos como Photoshop. Algunos de ellos, como border-radius o box-shadow, han existido desde la introducción de CSS3. Otros, como flexbox o incluso CSS Grid son estilos más nuevos que a menudo se consideran adiciones de CSS3.

En CSS3, el modelo de la caja no ha cambiado. Pero hay un montón de nuevas propiedades de estilo que pueden ayudarle a darle estilo a los fondos y bordes de sus cajas.

Múltiples imágenes de fondo

Usando los estilos de imagen de fondo, posición de fondo y repetición de fondo, puede especificar múltiples imágenes de fondo para que se superpongan en el cuadro. La primera imagen es la capa más cercana al usuario, con las siguientes pintadas detrás. Si hay un color de fondo, se pinta debajo de todas las capas de la imagen.

Nuevas propiedades de estilo de fondo

También hay algunas nuevas propiedades de fondo en CSS3.

• clip de fondo
  • Esta propiedad define cómo se debe recortar la imagen de fondo. El valor predeterminado es el cuadro de borde, pero se puede cambiar por el cuadro de relleno o el cuadro de contenido.
• origen-fondo
  • Esta propiedad determina si el fondo debe estar situado en la caja de relleno, en la caja de borde o en la caja de contenido.
• tamaño de fondo
  • Esta propiedad le permite indicar el tamaño de la imagen de fondo. Le permite estirar imágenes más pequeñas para que se ajusten a la página.

Cambios en las propiedades de estilo de fondo existentes

También hay algunos cambios en las propiedades de estilo de fondo existentes:

• repetición de fondo
  • Hay dos nuevos valores para esta propiedad: espacio y redondo. El espacio espacia la imagen de mosaico uniformemente dentro de la caja sin ser recortada. Redondo redondea la imagen de fondo para que se coloque un número entero de azulejos y baldosas en la caja.
• archivo adjunto de fondo
  • Se añade un nuevo valor «local» para que el fondo se desplace con el contenido del elemento cuando éste tenga una barra de desplazamiento.
• fondo
  • La propiedad background shorthand añade las propiedades size y origin.

Propiedades de los bordes de CSS3

En CSS3 los bordes pueden ser los estilos a los que estamos acostumbrados (sólido, doble, discontinuo, etc.) o pueden ser una imagen. Además, CSS3 ofrece la posibilidad de crear esquinas redondeadas. Las imágenes de bordes son interesantes porque usted crea una imagen de los cuatro bordes y luego le dice al CSS cómo aplicar esa imagen a sus bordes.

Nuevas propiedades de estilo de borde

Hay algunas propiedades de borde nuevas en CSS3:

• radio del borde
  • border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius
  • Estas propiedades le permiten crear esquinas redondeadas en sus bordes.
• fuente-imagen-borde
  • Especifica el archivo fuente de la imagen que se utilizará en lugar de los estilos de borde ya definidos.
• borde-imagen-corte
  • Representa los desplazamientos hacia dentro de los bordes de la imagen de borde
• ancho de la imagen de borde
  • Define el valor de la anchura de la imagen del borde.
• border-image-outset
  • Especifica la cantidad que el área de la imagen del borde se extiende más allá del cuadro de borde.
• border-image-stretch
  • Define cómo se deben alicatar o escalar los lados y las partes centrales de la imagen del borde.
• border-image
  • La propiedad taquigrafía para todas las propiedades de la imagen de borde.

Propiedades adicionales de CSS3 relacionadas con bordes y fondos

Cuando una caja se rompe en un salto de página, salto de columna para salto de línea (para elementos en línea), la propiedad Box-decoration-break define cómo se envuelven las nuevas cajas con borde y relleno. Los fondos se pueden dividir entre varias cajas rotas utilizando esta propiedad.

También hay una propiedad box-shadow que se puede utilizar para añadir sombras a los elementos de la caja.

Con CSS3, ahora puede configurar fácilmente una página Web con varias columnas sin tablas ni estructuras complicadas de etiquetas div. Usted simplemente le dice al navegador cuántas columnas debe tener el elemento del cuerpo y qué tan anchas deben ser. Además, puede agregar bordes (reglas), colores de fondo que abarcan la altura de la columna, y su texto fluirá a través de todas las columnas automáticamente.

Columnas CSS3 – Definir el número y ancho de las columnas

Hay tres nuevas propiedades que le permiten definir el número y el ancho de sus columnas:

• ancho de columna
  • Define el ancho que deben tener sus columnas. El navegador entonces fluirá el texto para llenar el espacio con columnas tan anchas.
• recuento de columnas
  • Define el número de columnas de la página. El navegador creará columnas lo suficientemente anchas para que quepan en el espacio, pero sólo el número que usted especifique.
• columnas
  • Propiedad abreviada en la que puede definir el ancho o el número (o ambos, pero que raramente tiene sentido).

Reglas y huecos de columna CSS3

Los huecos y las reglas se colocan entre columnas en el mismo escenario multicolumna. Los espacios en blanco separan las columnas, pero las reglas no ocupan espacio. Si una regla de columna es más ancha que su espacio libre, se superpondrá a las columnas adyacentes. hay cinco nuevas propiedades para las reglas de columna y los espacios libres:

• column-gap
  • Define el ancho de los espacios entre las columnas.
• color de la regla de columna
  • Define el color de la regla.
• estilo de regla de columna
  • Define el estilo de la regla (sólido, punteado, doble, etc.).
• ancho de la regla de la columna
  • Define el ancho de la regla.
• regla de columna
  • Una propiedad abreviada que define las tres propiedades de la regla de las tres columnas a la vez.

Rupturas de Columnas CSS3, Columnas de expansión y Columnas de relleno

Los saltos de columna utilizan las mismas opciones de CSS2 utilizadas para definir saltos en el contenido de las páginas, pero con tres nuevas propiedades: break-before , break-after , y break-inside .

Al igual que con las tablas, puede definir elementos para que abarquen columnas con la propiedad column-span. Esto le permite crear titulares que se extienden a lo largo de varias columnas de forma más parecida a la de un periódico.

Rellenar columnas decide cuánto contenido habrá en cada columna. Las columnas balanceadas intentan poner la misma cantidad de contenido en cada columna, mientras que auto sólo fluye el contenido hasta que la columna está llena y luego pasa a la siguiente.

Más funciones en CSS3 que no están incluidas en CSS2

Hay muchas características adicionales en CSS3 que no existían en CSS2, incluyendo:

• Módulo de disposición de plantillas CSS y módulo de posicionamiento de cuadrícula CSS3 : Creación de cuadrículas con CSS.
• Módulo de texto CSS3 : Esquema de texto e incluso crea sombras con CSS.
• Módulo de color CSS3 : Ahora con opacidad.
• Cambios en el modelo de caja : Incluye una propiedad de marquesina que actúa como la etiqueta IE.
• Módulo de interfaz de usuario CSS3 : Le da nuevos cursores, respuestas a acciones, campos obligatorios e incluso elementos de redimensionamiento.
• Consultas de medios : Las consultas de medios le permiten más flexibilidad a la hora de definir cómo se debe utilizar una hoja de estilo. Por ejemplo, podría definir una hoja de estilo que sea sólo para dispositivos de mano que tengan una ventana de visualización superior a 20em.
• CSS3 Módulo Ruby : Proporciona soporte para lenguajes que utilizan ruby textual para anotar documentos.
• Módulo multimedia con página CSS3 : Para una mayor compatibilidad con los medios con páginas (papel, transparencias, etc.).
• Contenido generado : L ejecutando encabezados y pies de página, notas a pie de página y otro contenido que se genera de forma programática, especialmente para medios de comunicación con páginas.
• CSS3 Módulo de voz : Cambios en CSS aural.