La diferencia entre CSS2 y CSS3
Comprender los principales cambios en CSS3
Tabla de contenidoExpandir- Nuevos selectores CSS3 introducidos
- Nuevas propiedades CSS en CSS3
- Múltiples imágenes de fondo
- Nuevas propiedades de estilo de fondo
- Cambios en las propiedades de estilo de fondo existentes
- CSS3 Nuevas propiedades y estilos de borde
- Nuevas propiedades de estilo de borde
- Más propiedades de borde y fondo
- Nuevas propiedades para definir el número y ancho de columna
- Reglas y espacios entre columnas de CSS3
- CSS3 Nuevas opciones de división de columnas
- Más características nuevas en 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 abre camino a través del W3C en varias etapas del proceso de recomendación. Este proceso ha hecho mucho más fácil que diferentes fabricantes acepten e implementen varias piezas de CSS3 en el navegador.
Si compara este proceso con lo que sucedió con CSS2, donde todo se envió como un solo documento con todos los Hojas de estilo en cascada información que contiene, comienza a ver las ventajas de dividir la recomendación en partes individuales más pequeñas. Debido a que cada uno de los módulos se está trabajando individualmente, los desarrolladores disfrutan de una gama mucho más amplia de soporte de navegador 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 elemento raíz del documento.
- Use esto para hacer coincidir elementos secundarios exactos o use variables para obtener coincidencias alternas.
- Haga coincidir los elementos secundarios exactos contando desde el último.
- Haga coincidir los elementos hermanos con el mismo nombre antes que él en el árbol del documento.
- Une los elementos hermanos con el mismo nombre contando desde abajo.
- Coincidir con el último elemento hijo del padre
- Coincide con el primer elemento hermano de ese tipo.
- Coincide con el último elemento hermano de ese tipo.
- Coincide con el elemento que es el único hijo de su padre.
- Coincidir con el elemento que es el único de su tipo.
- Haga coincidir el elemento que no tiene hijos (incluidos los nodos de texto).
- Haga coincidir un elemento que sea el destino del URI de referencia.
- Haga coincidir el elemento cuando esté habilitado.
- Coincide con el elemento cuando está deshabilitado.
- Haga coincidir el elemento cuando esté marcado (botón de radio o casilla de verificación).
- Coincidencia cuando el elemento no coincide con el simple selectores .
- Coincide cuando el elemento B sigue en algún lugar después del elemento A, no necesariamente inmediatamente.
- Esta propiedad define cómo debe recortarse 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.
- Esta propiedad determina si el fondo debe colocarse en el cuadro de relleno, el cuadro de borde o el cuadro de contenido.
- Esta propiedad indica la tamaño de la imagen de fondo . Te permite estirar imágenes más pequeñas para que se ajusten a la página .
- Hay dos nuevos valores para esta propiedad: espacio y redondo . Espacio espacia la imagen en mosaico uniformemente dentro del cuadro sin que se recorte. Redondo cambia la escala de la imagen de fondo para que aparezca en mosaico un número entero de veces en el cuadro.
- 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.
- La propiedad abreviada de fondo agrega las propiedades de tamaño y origen.
- borde-arriba-derecha-radio , borde-inferior-derecho-radio , borde-inferior-izquierda-radio , borde-superior-izquierda-radio
- Estas propiedades le permiten crear esquinas redondeadas en sus bordes.
- Especifica el archivo de origen de la imagen que se utilizará en lugar de los estilos de borde ya definidos.
- Representa los desplazamientos hacia adentro desde los bordes de la imagen del borde.
- Define el valor del ancho de su imagen de borde.
- Especifica la cantidad que el área de la imagen del borde se extiende más allá del cuadro del borde.
- Define cómo se deben colocar en mosaico o escalar los lados y las partes medias de la imagen del borde.
- La propiedad abreviada para todas las propiedades de imagen de borde.
- Define el ancho que deben tener sus columnas. Luego, el navegador fluirá el texto para llenar el espacio con columnas de ese ancho.
- Define el número de columnas en la página. El navegador creará columnas lo suficientemente anchas como para caber en el espacio, pero solo el número que especifique.
- Propiedad abreviada donde puede definir el ancho o el número (o ambos, pero eso rara vez tiene sentido).
- Define el ancho de los espacios entre las columnas.
- Define el color de la regla.
- Define el estilo de la regla (sólido, punteado, doble, etc.).
- Define el ancho de la regla.
- Una propiedad abreviada que define las tres propiedades de la regla de columna a la vez.
Se han introducido 16 nuevas pseudoclases:
Hay un nuevo combinador:
Nuevas propiedades
CSS3 también introdujo varias propiedades CSS nuevas. 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, existen desde la introducción de CSS3. Otros, como flexbox o incluso CSS Grid, son estilos más nuevos que a menudo 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.
Múltiples imágenes de fondo
Con los estilos background-image, background-position y background-repeat, puede especificar varias imágenes de fondo para superponerlas 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:
Cambios en las propiedades de estilo de fondo existentes
También hay algunos cambios en las propiedades de estilo de fondo existentes:
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:
Propiedades adicionales de CSS3 relacionadas con bordes y fondos
Cuando un cuadro se rompe en un salto de página, salto de columna o salto de línea (para elementos en línea), el caja-decoración-descanso La propiedad define cómo se envuelven los nuevos cuadros con borde y relleno. Los fondos se dividen entre varias cajas rotas usando esta propiedad.
un nuevo sombra de la caja La propiedad agrega sombras a los elementos del cuadro.
Con CSS3, ahora puede configurar fácilmente una página web con varias columnas sin tablas o complicadas división 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:
Reglas y espacios entre columnas de CSS3
Los espacios y las reglas se colocan entre las columnas en el mismo escenario de varias columnas. Los huecos separarán 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 de columna y los espacios:
CSS3 Saltos de columna, columnas de expansión y columnas de relleno
Columna breaks utiliza las mismas opciones de CSS2 que se utilizan para definir los breaks en el contenido paginado, pero con tres propiedades nuevas: romper antes , descanso después , y irrumpir en el interior .
Al igual que con las tablas, puede establecer elementos para abarcar columnas con la propiedad column-span. Esto le permite crear titulares que abarquen varias columnas más como un periódico.
Rellenar columnas decide cuánto contenido habrá en cada columna. Las columnas equilibradas intentan poner la misma cantidad de contenido en cada columna, mientras que el flujo automático fluye hasta que la columna está llena 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, que incluyen: