La diferencia entre CSS2 y CSS3

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

Si compara este proceso con lo que sucedió con CSS2, donde todo se envió como un solo documento con todas las Hojas de estilo en cascada información que contiene, comienza a ver las ventajas de dividir la recomendación en partes más pequeñas e individuales. Debido a que cada uno de los módulos se está trabajando individualmente, los desarrolladores disfrutan de una gama mucho más amplia de compatibilidad con los navegadores para módulos CSS3.

Nuevos selectores CSS3

CSS3 ofrece varias formas nuevas de escribir reglas CSS con nuevos selectores CSS, así como un nuevo combinador y algunos pseudoelementos nuevos.

Hay tres nuevos selectores de atributos:

• El principio del atributo coincide exactamente:

  elemento [foo ^ = "bar"]

  El elemento tiene un atributo llamado foo que comienza con "bar", p. Ej.
• El final del atributo coincide exactamente:

  elemento [foo $ = "bar"]

  El elemento tiene un atributo llamado foo que termina con "bar", p. Ej.
• El atributo contiene la coincidencia:

  elemento [foo * = "bar"]

  El elemento tiene un atributo llamada foo que contiene la cadena "barra".

Se han introducido 16 nuevas pseudoclases:

• :raíz
  • El elemento raíz del documento.
• : enésimo hijo (n)
  • Use esto para hacer coincidir elementos secundarios exactos o use variables para obtener coincidencias alternas.
• : enésimo último hijo (n)
  • Haga coincidir los elementos secundarios exactos contando desde el último.
• : enésimo de tipo (n)
  • Haga coincidir los elementos hermanos con el mismo nombre antes en el árbol del documento.
• : enésimo último de tipo (n)
  • Haga coincidir los elementos hermanos con el mismo nombre contando desde abajo.
• :último niño
  • Coincidir con el último elemento hijo del padre.
• : primero de tipo
  • Coincide con el primer elemento hermano de ese tipo.
• : último de tipo
  • Coincide con el último elemento hermano de ese tipo.
• :hijo único
  • Coincide con el elemento que es el único hijo de su padre.
• : único de tipo
  • Coincide con el elemento que es el único de su tipo.
• :vacío
  • Coincide con el elemento que no tiene hijos (incluidos los nodos de texto).
• :objetivo
  • Coincide con un elemento que sea el destino del URI de referencia.
• :activado
  • Haga coincidir el elemento cuando esté habilitado.
• :discapacitado
  • Haga coincidir el elemento cuando esté deshabilitado.
• :comprobado
  • 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 simple selectores.

Hay un nuevo combinador:

• elementoA ~ elementoB
  • Coincidir cuando elementB sigue en algún lugar después de elementA, no necesariamente inmediatamente.

Nuevas propiedades

CSS3 también introdujo varias propiedades nuevas de CSS. Muchas de estas propiedades crean estilos visuales que probablemente se asociarían más con un programa de gráficos como Photoshop. Algunos de estos, 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 todavía se consideran adiciones de CSS3.

En CSS3, el modelo de caja no ha cambiado. Pero hay un montón de nuevas propiedades de estilo que pueden ayudarlo a diseñar los fondos y los bordes de sus cuadros.

Varias imágenes de fondo

Con los estilos de imagen de fondo, posición de fondo y repetición de fondo, puede especificar varias 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 propiedades de fondo nuevas 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 al cuadro de relleno o al cuadro de contenido.
• origen de fondo
• Esta propiedad determina si el fondo debe colocarse en el cuadro de relleno, el cuadro de borde o el cuadro de contenido.
• tamaño de fondo
• Esta propiedad indica el tamaño de la imagen de fondo. Te 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 en mosaico de manera uniforme dentro del cuadro sin recortarla. Redondo cambia la escala de la imagen de fondo para que se coloque en mosaico un número entero de veces en el cuadro.
• adjunto de fondo
  • Se agrega un nuevo valor "local" para que el fondo se desplace con el contenido del elemento cuando ese elemento tenga una barra de desplazamiento.
• antecedentes
  • La propiedad abreviada de fondo agrega las propiedades de tamaño y origen.

Propiedades de borde 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 admite esquinas redondeadas. Las imágenes de borde son interesantes porque creas una imagen de los cuatro bordes y luego le dices al CSS cómo aplicar esa imagen a tus bordes.

Nuevas propiedades de estilo de borde

Hay algunas propiedades de borde nuevas en CSS3:

• radio de borde
• border-top-right-radius, border-bottom-right-radius, radio de borde inferior izquierdo, border-top-left-radius
• Estas propiedades le permiten crear esquinas redondeadas en sus bordes.
• fuente de imagen de borde
• Especifica el archivo de origen de la imagen que se utilizará en lugar de los estilos de borde ya definidos.
• rebanada de imagen de borde
• Representa los desplazamientos internos desde los bordes de la imagen del borde.
• ancho de imagen de borde
• Define el valor del ancho de su imagen de borde.
• borde-imagen-inicio
• Especifica la cantidad que el área de la imagen del borde se extiende más allá del cuadro del borde.
• estiramiento de imagen de borde
• Define cómo se deben colocar en mosaico o escalar los lados y las partes medias de la imagen del borde.
• imagen de borde
• La propiedad abreviada para todas las propiedades de la imagen de borde.

Propiedades adicionales de CSS3 relacionadas con bordes y fondos

Cuando un cuadro se rompe en un salto de página, un salto de columna o un salto de línea (para elementos en línea), el caja-decoracion-descanso La propiedad define cómo se envuelven los nuevos cuadros con borde y relleno. Los fondos se dividen entre varias cajas rotas que utilizan esta propiedad.

Un nuevo sombra de la caja La propiedad agrega sombras a los elementos de la caja.

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

Definir el número y el ancho de las columnas

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

• ancho de columna
  • Define el ancho que deben tener las columnas. El navegador luego hará fluir el texto para llenar el espacio con columnas de ese ancho.
• recuento de columnas
  • Define el número de columnas de la página. Luego, el navegador creará columnas lo suficientemente anchas para caber en el espacio, pero solo el número que especifique.
• columnas
  • Propiedad abreviada donde puede definir el ancho o el número (o ambos, pero eso rara vez tiene sentido).

Reglas y espacios en blanco de las columnas CSS3

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

• espacio entre columnas
  • Define el ancho de los espacios entre las columnas.
• color-regla-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 regla de columna
  • Define el ancho de la regla.
• regla de columna
  • Una propiedad abreviada que define las tres propiedades de la regla de columna a la vez.

Saltos de columna CSS3, columnas de expansión y columnas de relleno

Columna Las interrupciones utilizan las mismas opciones de CSS2 que se utilizan para definir las interrupciones en el contenido paginado, pero con tres propiedades nuevas: romper antes, romper después, y irrumpir.

Al igual que con las tablas, puede configurar elementos para que abarquen columnas con la propiedad column-span. Esto le permite crear titulares que abarcan varias columnas más como un periódico.

El llenado de columnas decide cuánto contenido habrá en cada columna. Las columnas equilibradas intentan poner la misma cantidad de contenido en cada columna, mientras que automáticamente 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, que incluyen:

• Módulo de diseño de plantilla CSS y módulo de posicionamiento de cuadrícula CSS3: Creación de cuadrículas con CSS.
• Módulo de texto CSS3: Delinea texto e incluso crea sombras con CSS.
• Módulo de color CSS3: Ahora con opacidad.
• Cambios en el modelo de caja: Incluyendo un marquesina propiedad que actúa como la etiqueta IE.
• Módulo de interfaz de usuario CSS3: Dándote nuevos cursores, respuestas a acciones, campos obligatorios e incluso elementos de cambio de tamaño.
• Preguntas de los medios: Preguntas de los medios le permiten más flexibilidad a la hora de definir cómo se debe utilizar una hoja de estilo. Por ejemplo, puede definir una hoja de estilo que sea solo para dispositivos portátiles que tengan una ventana de visualización superior a 20 em.
• Módulo CSS3 Ruby: Proporciona compatibilidad con idiomas que utilizan ruby ​​textual para anotar documentos.
• Módulo de medios paginados CSS3: Para una mayor compatibilidad con soportes paginados (papel, transparencias, etc.).
• Contenido generado: Ejecución de encabezados y pies de página, notas al pie y otro contenido que se genera mediante programación, especialmente para medios paginados.
• Módulo de voz CSS3: Cambios en CSS auditivo.