Es de esperar que las exclusiones sean como flotadores más potentes para la red | Programar Plus

Las exclusiones (que se encuentran actualmente en una especificación de “borrador de trabajo” mientras escribo) son como float ya que permiten que el contenido en línea envuelva un elemento. Pero no exactamente un flotador. Chen Hui Jing tiene una excelente explicación:

Un elemento de exclusión es un elemento a nivel de bloque que no es flotante y genera un cuadro de exclusión. Un elemento de exclusión establece un nuevo contexto de formato de bloque.

Un elemento se convierte en una exclusión cuando su propiedad wrap-flow se calcula en algo diferente a su valor inicial de auto. Cuando un elemento se convierte en una exclusión, el contenido en línea se ajustará a las áreas de exclusión, pero dentro de sus propios contextos de formato.

Fuente: artículo de Chen

El soporte está limitado a Edge e IE (nuevamente, mientras escribo):

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.

Escritorio

Móvil / Tableta

Chen presenta un gran caso de por qué son útiles, pero últimamente también ha surgido otra ronda de discusión. Rob Weychert documenta una situación de diseño simple en la que una imagen flota a la izquierda y el texto la rodea:

Fuente: artículo de Rob

Como indican esas barras de color rojo claro, Rob ha configurado algunos display: grid; columnas para alinear elementos del artículo con esos ejes. De hecho, un clásico “diseño editorial”. Pero realmente no existe un buen mecanismo para colocar esa imagen en la cuadrícula y mantener la envoltura. Al colocar tanto el contenido como la imagen en elementos de cuadrícula separados, no obtiene el ajuste. Puedes usar float, pero eso no es usar la cuadrícula.

Rachel Andrew intervino en que la respuesta es Exclusiones de CSS. Si bien el ejemplo de Rob finalmente tuvo que usar flotadores, Rachel lo volvió a hacer con exclusiones. Las exclusiones hacen que el código sea mucho más simple.

/* with floats, replicating exactly what the grid is doing */
img {
  float: left;
  width: calc( 3 * ((100% - 50px - 15em) / 6) + 50px + 2em );
}

/* with exclusions, using the grid */
img {
  grid-row: 2;
  grid-column: 1 / 3;
  -ms-wrap-flow: both;
}

Quizás podamos intervenir con el pulgar hacia arriba en la llamada de Rachel para ver qué pasa con el estado de la especificación y con otros casos de uso del autor.