Share
En este tutorial, vamos a explorar las Exclusiones de CSS. A primera vista, las Exclusiones de CSS pueden parecer similares a las Formas CSS, ya que envuelven el contenido alrededor de un elemento. Técnicamente, sin embargo, tienen un propósito diferente..
El Módulo de Formas CSS define la forma real de un elemento, pero el contenido no se ajustará alrededor de esa forma hasta que el elemento flote. El Módulo de Exclusiones de CSS, por otro lado, está diseñado específicamente para esto; permitiendo que el contenido en línea se ajuste a un elemento sin Flotándolo, independientemente de cómo esté posicionado el elemento.-absoluto, relativo, o fijo.
El Módulo de Exclusiones de CSS presenta un par de nuevas propiedades y valores, a saber:
Accentsconagua
envolver el flujo: establece el área de exclusión, así como la forma en que el contenido debe envolverlo.margen de ajuste: es bastante autoexplicativo, establece el margen o la compensación que rodea el área de exclusión.Vale la pena señalar que las Exclusiones de CSS actualmente solo funcionan en Internet Explorer 10 y superior, y Edge, una vez más demostrando cómo Microsoft está impulsando las fronteras de los navegadores web (también debemos agradecerles el desarrollo de CSS Grid). Por el momento, tenemos que prefijar las nuevas propiedades con -Sra- cuando se usa.
Y el mar de rojo sigue hacia la derecha ... Para comprender mejor cómo funcionan las Exclusiones de CSS, hemos preparado una página de inicio simple que incluye unas pocas líneas de contenido y una imagen de avatar al final.
Diseño sin exclusiones de CSS Este es un patrón bastante común en la web, así que veamos si podemos pulirlo un poco con las Exclusiones de CSS. Suponiendo que su navegador sea compatible con Exclude, buscamos este resultado:
Primero, organicemos el contenido en dos columnas y coloquemos la imagen del avatar en el centro. No importa cómo organice el diseño, puede usar CSS Flexbox, CSS Grid o el enfoque "tradicional" usando el flotador propiedad.
Texto encantador, basado en columnas (no obligatorio para esta demostración)Podemos ver en la imagen anterior que la imagen de avatar se ha eliminado del flujo de documentos y se coloca sobre el contenido, ocultándolo. Usando Exclusiones de CSS, podemos forzar que el contenido fluya alrededor de la imagen del avatar.
Para ello, configuramos el envolver el flujo propiedad al avatar y establecer el valor en ambos.
.avatar -ms-wrap-flow: ambos; // Funciona en IE y Edge. envolver el flujo: ambos; // No funciona en ningún navegador.
los envolver el flujo propiedad establece el .avatar como “área de exclusión”; Un área donde no debe pasar ningún contenido. Como puede ver a continuación, el contenido ahora fluye hacia la derecha y hacia la izquierda de la imagen del avatar..
Otros valores aceptables son comienzo, fin, máximo, mínimo, y claro.
El primer valor, comienzo, envolverá el contenido alrededor del inicio del área de exclusión, pero dejará el final del área vacío.
.avatar -ms-wrap-flow: inicio;
Dado el contenido de nuestra página, el resultado se vería de la siguiente manera.
El contenido fluye a la izquierda de la imagen.. los fin El valor, como su nombre lo indica, funciona a la inversa; Envolverá el contenido al final del área de exclusión..
.avatar -ms-wrap-flow: final;
Esto nos da el siguiente resultado:
Envolviendo alrededor de la derechaNota: el inicio y el final del área de exclusión están determinados por la dirección de escritura del contenido. Donde los guiones se escriben de derecha a izquierda, como se ve a menudo con el árabe y el hebreo, el contenido se ajusta a la derecha y termina a la izquierda del área de exclusión.
Con el japonés, cuando se escribe de arriba a abajo, el contenido se ajusta comenzando desde la parte superior y termina en la parte inferior.
Flujo de contenido en diferentes direcciones de escritura. Imagen por (W3C)El tercer valor aceptable es máximo.
.avatar -ms-wrap-flow: máximo;
Esto envolverá el contenido alrededor del área de exclusión donde encuentre el espacio más amplio dentro del área del contenedor.
los mínimo El valor funciona de manera opuesta..
.avatar -ms-wrap-flow: mínimo;
Aquí, el contenido fluirá a través del espacio más estrecho disponible alrededor del área de exclusión.
El último valor es claro.
.avatar -ms-wrap-flow: claro;
Esto es bastante similar a la claro ya estás familiarizado con los flotadores, ya que despejará la derecha y la izquierda del área de exclusión. Por lo tanto, solo permite que el contenido fluya hacia la parte superior e inferior del área de exclusión..
De manera similar a CSS Shapes, el Módulo de Exclusiones de CSS también viene con una propiedad para definir el margen del área de exclusión, a saber: margen de ajuste. A diferencia del margen propiedad, el valor de margen de ajuste debe ser un valor positivo.
.avatar -ms-wrap-flow: final; -ms-wrap-margin: -10px; // Inválido. -ms-wrap-margin: 10px; // Válido.
Además, el margen de ajuste Las propiedades no nos permiten establecer el margen de cada lado (derecho, izquierdo, superior e inferior) individualmente. Si esta característica será introducida en el futuro aún está por verse.
.avatar -ms-wrap-flow: final; -ms-wrap-margin: 10px 20px 10px 30px; // Inválido. -ms-wrap-margin: 10px; // Válido.
Una vez configurado, deberíamos ver más espacios en blanco alrededor del área de exclusión.
Dado que hemos posicionado a nuestro avatar sobre el contenido, sin soporte para CSS Exclude nos queda un diseño desordenado. Por lo tanto, es aconsejable considerar el respaldo y envolver los estilos relevantes dentro de un @supports regla, como asi:
.sitio-contenido .avatar ancho: 180px; altura: 180px; margen derecho: auto; margen izquierdo: auto; text-align: center; margen superior: 80px; / * envuelve las reglas relevantes en una declaración de @supports, solo para estar seguro * / @supports (-ms-wrap-flow: both) .site-content .avatar position: absolute; superior: 300px; izquierda: 50%; margen izquierdo: -90px; -ms-wrap-margin: 50px; -ms-wrap-flow: ambos
Ahora nuestros estilos de exclusión de CSS solo se aplicarán si son compatibles con el navegador.
Las exclusiones de CSS, junto con las formas de CSS y otras especificaciones de vanguardia, nos permitirán explorar diseños de sitios web mucho más allá de lo que nos hemos acostumbrado. Con suerte, veremos un rápido avance en la compatibilidad con navegadores y un mayor empuje de los límites del equipo de Microsoft Edge!
