El CSS2 y CSS3

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 camino 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 toda la información de las Hojas de estilo en cascada dentro de él, comenzará 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, tenemos una gama mucho más amplia de soporte de navegador para los módulos CSS3.

Al igual que 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 cualquier estilo que use, incluidos los estilos CSS3, se vea bien en los navegadores que los admiten y que se adapten correctamente a los navegadores más antiguos que no haga.

Nuevos selectores de CSS3

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

Tres nuevos selectores de atributos:

• El principio de atributo coincide exactamente

  elemento foo ^ = "barra" El elemento tiene un atributo llamado foo que comienza con "barra", p. Ej.

• El final del atributo coincide exactamente

  elemento foo $ = "barra" El elemento tiene un atributo llamado foo que termina con "barra", p. Ej.

• El atributo contiene el partido

  elemento foo * = "barra" El elemento tiene un atributo llamado foo que contiene la cadena "barra", por ejemplo.

16 nuevas pseudo-clases:

• :raíz
  • El elemento raíz del documento. En HTML esto es siempre.
• : nth-child (n)
  • Use esto para hacer coincidir elementos hijos exactos o utilice variables para obtener coincidencias alternas.
• : nth-last-child (n)
  • Empareja los elementos hijos exactos contando desde el último.
• : nth-of-type (n)
  • Haga coincidir los elementos de hermanos con el mismo nombre antes que en el árbol de documentos.
• : nth-last-of-type (n)
  • Haga coincidir los elementos hermanos con el mismo nombre contando desde la parte inferior.
• :último niño
  • Empareja el último elemento hijo del padre.
• : primero-de-tipo
  • Coincidir con el primer elemento hermano de ese tipo.
• : último del tipo
  • Coincidir con el último elemento hermano de ese tipo.
• :hijo único
  • Empareja el elemento que es el único hijo de su padre.
• : sólo de tipo
  • Coincidir con el elemento que es el único de su tipo.
• :vacío
  • Haga coincidir el elemento que no tiene hijos (incluidos los nodos de texto).
• :objetivo
  • Haga coincidir un elemento que sea el objetivo del URI de referencia.
• : habilitado
  • Empareja el elemento cuando está habilitado.
• :discapacitado
  • Empareja el elemento cuando está deshabilitado.
• :comprobado
  • Haga coincidir el elemento cuando esté marcado (botón de radio o casilla de verificación).
• : no (s)
  • Hacer coincidir cuando el elemento no coincide con el selector simple s.

Un nuevo combinador:

• elementA ~ elementB
  • Haga coincidir cuando elementB sigue en algún lugar después de elementA, no necesariamente de forma inmediata.

Nuevas propiedades

CSS3 también introdujo una serie de nuevas propiedades CSS. Muchas de estas propiedades fueron para crear 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 a menudo 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 ayudarte a diseñar los fondos y bordes de tus cuadros.

Mágicos de fondo I

Al utilizar los estilos de imagen de fondo, posición de fondo y repetición de fondo, puede especificar varias imágenes de fondo para colocar en capas una encima de otra 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 al cuadro de relleno o al cuadro de contenido.
• origen-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 le permite indicar el tamaño de la imagen de fondo. Te permite estirar imágenes más pequeñas para adaptarse 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 ronda. Espacie los espacios de la imagen en mosaico de manera uniforme dentro de la caja sin recortarla. Redondea la escala de la imagen de fondo para que se acumule un número de veces en el cuadro.
• fondo adjunto
  • 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.
• fondo
  • La propiedad abreviada de fondo agrega las propiedades de tamaño y origen.

Propiedades del 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 ofrece la posibilidad de crear 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 nuevas propiedades de borde en CSS3:

• radio del borde
  • borde superior-derecho-radio, borde inferior-derecha-radio, borde inferior-izquierdo-radio, borde superior-izquierdo-radio
  • Estas propiedades le permiten crear esquinas redondeadas en sus bordes.
• borde-imagen-fuente
  • Especifica el archivo de origen de la imagen que se usará en lugar de los estilos de borde ya definidos.
• borde-imagen-rebanada
  • Representa los desplazamientos internos de los bordes de la imagen del borde.
• borde-imagen-ancho
  • Define el valor del ancho para 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.
• borde-imagen-estiramiento
  • Define cómo los lados y las partes medias de la imagen del borde deben ser en mosaico o escalado.
• imagen de borde
  • La propiedad abreviada de todas las propiedades de imagen de borde.

Propiedades adicionales de CSS3 relacionadas con bordes y fondos

Cuando se rompe un cuadro 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 las nuevas cajas se envuelven con borde y relleno. Los fondos se pueden dividir entre múltiples cajas rotas usando esta propiedad.

También hay una propiedad box-shadow que se puede usar para agregar sombras a los elementos del cuadro.

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

Columnas CSS3: defina el número y el 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 tus columnas. El navegador luego fluirá el texto para llenar el espacio con columnas de ancho.
• recuento de columnas
  • Define el número de columnas en la página. El navegador creará columnas lo suficientemente amplias como 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).

CSS3 Columnas y brechas de columna

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

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

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

Los saltos de columna utilizan las mismas opciones de CSS2 que se utilizan para definir los saltos en el contenido paginado, pero con tres nuevas propiedades: romper antes, descanso despuésy romper el interior.

Al igual que con las tablas, puede establecer elementos para abarcar columnas con la propiedad columna-rango. Esto le permite crear titulares que abarcan varias columnas más como un periódico.

Rellenar columnas decide cuánto contenido habrá en cada columna. Las columnas equilibradas intentan colocar la misma cantidad de contenido en cada columna, mientras que en el proceso automático solo fluye el contenido hasta que la columna está completa y luego pasa a la siguiente.

Más características 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 diseño de plantilla CSS y módulo de posicionamiento de cuadrícula CSS3: Creando grillas con CSS.
• Módulo de texto CSS3: Esquema de texto e incluso crear 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 de IE.
• Módulo de interfaz de usuario CSS3: Proporcionándole nuevos cursores, respuestas a acciones, campos obligatorios e incluso redimensionando elementos.
• Preguntas de los medios: Las consultas de medios le permiten una mayor flexibilidad a la hora de definir cómo se debe usar una hoja de estilo. Por ejemplo, podría definir una hoja de estilo que sea solo para dispositivos de mano que tienen una ventana gráfica más grande que 20em.
• Módulo CSS3 Ruby: Proporciona soporte para idiomas que usan ruby ​​textual para anotar documentos.
• Módulo CSS3 Paged Media: Para una mayor compatibilidad con medios paginados (papel, transparencias, etc.).
• Contenido generado: L ejecutando encabezados y pies de página, notas al pie y otro contenido que se genera mediante programación, especialmente para medios paginados.
• CSS3 módulo de voz: Cambios en el CSS auditivo.