Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Exclusiones CSS: Haciendo los Diseños Aburridos, Menos Aburridos.

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Viviana Brito (you can also view the original English article)

En este tutorial, vamos a explorar CSS Exclusions. A primera vista, CSS Exlusions puede lucir similar a CSS Shapes en la forma en que envuelven el contenido alrededor de un elemento. Sin embargo, técnicamente, sirven para un propósito diferente. 

El Módulo CSS Shapes define la forma real de un elemento, pero el contenido no se envolverá alrededor de esa forma hasta que el elemento sea flotante. El Módulo CSS Exclusions, por otro lado, está diseñado específicamente para esto; permitiendo el contenido inline envolverse alrededor de un elemento sin hacerlo flotante, sin importar cómo el elemento esté posicionado — absolute, relative, o fixed .

Propiedades

El Módulo CSS Exclusions, introduce un par de nuevas propiedades y valores, como ser:

  • wrap-flow: establece el área de exclusión, como también la forma en que el contenido debería ubicarse a su alrededor.
  • wrap-margin: su nombre lo dice, establece el margen o el  offset que rodea el área de exclusión.  

Soporte del Navegador

Vale la pena notar que  CSS Exclusions actualmente sólo trabaja sobre Internet Explorer 10 y otras versiones más actuales y Edgen, una vez más demostrando cómo Microsoft está empujando las fronteras del navegador web (tenemos que agradecerles también el desarrollo de los CSS Grid). Por el momento, tenemos que prefijar las nuevas propiedades con -ms- cuando se las emplea. 

can i use css exclusions
Y el mar de rojo continúa a la derecha..

Para entender mejor cómo CSS Exclusions trabaja, hemos preparado una simple página de inicio que comprende unas pocas líneas de contenido y una imagen avatar al final.

Diseño sin CSS Exclusions

Este es un patrón bastante común en la web, así que veamos si podemos pulirlo un poco haciendo uso de CSS Exclusions- Asumiendo que tu navegador soporta Excludes, vamos a apuntar a este resultado:

Usando CSS Exclusions

Primero, vamos a organizar el contenido en dos columnas y posicionar la imagen avatar en el centro. No importa cómo ordenes el diseño, puedes emplear CSS Flexbox, CSS Grid, o el enfoque "tradicional" al usar la propiedad float

Encantador, texto-basado en columna (no es obligatorio para este demo)

Podemos ver por la imagen de arriba que la imagen avatar ha sido eliminada del flujo del documento y está posicionada por encima del contenido, eclipsando al mismo. Usando CSS Exclusions, podemos forzar al contenido para que flote alrededor de la imagen avatar.

Para lograr esto, establecemos la propiedad wrap-flow en el avatar y fijamos el valor para both

La propiedad wrap-flow define .avatar como un "área de exclusión"; un área donde ningún contenido debería atravesar. Como puedes ver abajo, el contenido ahora flota a la derecha e izquierda de la imagen avatar.

Valores Aceptables

Otros valores aceptables son start, end, maximun, minimun, and clear .

El primer valor, start, encerrará el contenido alrededor del comienzo del área de exclusión, pero dejará vacío el final del área.

De acuerdo al contenido en nuestra página, el resultado sería el siguiente. 

El contenido flota a la izquierda de la imagen.

El valor end, como su nombre lo sugiere, trabaja a la inversa; envolverá el contenido alrededor del final del área de exclusión. 

Esto nos da la siguiente resultado:

Envoltura alrededor de la derecha.

Nota: el comienzo y el final del área de exclusión, es determinado por la dirección de escritura del contenido. Donde los scripts son escritos de derecha a izquierda, como usualmente vemos en Árabe y Hebreo, el contenido se envuelve a partir de la derecha y termina a la izquierda del área de exclusión.

Con el Japonés, donde se escriben de arriba hacia abajo, el contenido se envuelve comenzando desde arriba y termina abajo. 

Flujo de contenido en diferentes direcciones de escritura. Imagen por (W3C)

El tercer valor aceptable es maximun.

Esto envolverá el contenido alrededor del área de exclusión dondequiera que encuentre el espacio más amplio, dentro del área del contenedor.

El valor minimun trabaja de manera inversa. 

Aquí, el contenido fluirá a través del espacio más estrecho disponible alrededor del área de exclusión.

El último valor es clear.

Éste es bastante similar al clear con el que ya está familiarizado de floats, en el que despejará la derecha y la izquierda del área del exclusión. Por lo tanto sólo deja que el contenido fluya en la parte superior e inferior del área de exclusión. 

Exclusions Margin

Similar a CSS Shapes, el Módulo CSS Exclusions también incluye una propiedad para la definición del margen del área de exclusión, llamada wrap-margin. Diferente a la propiedad margin, el valor de wrap-margin debe ser un valor positivo. 

Además, las propiedades de wrap-margin no nos permite establecer el margen de cada lado (derecha, izquierda, arriba, abajo) de manera individual. Si esta característica es introducida en el futuro, todavía queda por verse. 

Una vez establecidos, deberíamos ver más espacio en blanco alrededor del área de exclusión.

@supports

Puesto que posicionamos nuestro avatar sobre el contenido, sin soporte para CSS Excludes, quedamos con un diseño desordenado. Por lo tanto, es aconsejable considerar la alternativa y envolver los estilos relevantes dentro de una regla @supports, de la siguiente manera:

Ahora nuestros estilos CSS Exclusions serán aplicados sólo si son soportados por el navegador. 

Finalizando

Las CSS Exclusions, junto con CSS Shapes y otras especificaciones bleeding edge, nos permitirán explorar los diseños de sitios web más allá de lo que estamos acostumbrados. Esperemos poder ver avances rápidos en el soporte de navegadores y empujando los límites de parte del equipo Microsoft Edge. 

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.