descanso después | Trucos CSS - Trucos CSS

CSS break-after la función es clara porque permite, fuerza o evita interrupciones en los medios de página, los diseños de varias columnas y las regiones. Cuando aplicamos una propiedad a un elemento, lo que hacemos es proporcionar instrucciones sobre si romper o evitar saltos entre páginas, columnas y regiones.

Nota: break-after es un apodo para los rechazados page-break-after Propiedad.

Sintaxis

break-after: auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region

• Inicialmente: auto
• Se refiere a: campos a nivel de bloque, elementos de cuadrícula, elementos flexibles, grupos de filas en la tabla, filas de la tabla
• heredado: no
• Valor estimado: Como se indica
• Tipo de animación: discretamente discretamente

Valores

En el momento de escribir este artículo, los siguientes valores están definidos en la especificación de nivel 1 del módulo de diseño de varias columnas de CSS, que se encuentra en el estado de borrador del editor. Entonces, algunos de los siguientes valores son experimentales y pueden cambiar en algún momento.

Lo bueno que debes saber break-after es que está diseñado para trabajar con diseños de página por página con múltiples columnas y regiones. Esto significa que tenemos tres conjuntos de valores posibles que se pueden usar según el contexto.

Valores totales de interrupción

Estos valores son comunes en el sentido de que pueden usarse en los tres contextos:

• auto: No fuerce ni prohíba una interrupción (página, columna o región) después del elemento.
• avoid: Evita una interrupción (página, columna o región) después del elemento.
• all: (Experimental) Forzar un salto de página después de un elemento. Profundizando en todos los contextos posibles de fragmentación. Por lo tanto, romper un contenedor de varias columnas que estaba dentro de un contenedor de página forzaría un salto de columna y de página.
• always: (Experimental) Fuerza un salto de página después del elemento. Este valor está en el contexto de la fragmentación inmediata. Si estamos dentro de un contenedor con varias columnas, usando column La propiedad del contenedor principal forzará un salto de columna. En las páginas de medios, rompe una página a la fuerza.

Valores de medios con páginas

• avoid-page: Evita cualquier interrupción en la página después del elemento.
• page: Fuerza un salto de página después del elemento.
• left: Fuerza uno o dos saltos por página después del elemento, de modo que todo lo que llegue a la página siguiente se formateará a la izquierda, es decir, a partir de la página izquierda.
• right: Fuerza uno o dos saltos por página después del elemento, de modo que todo lo que llegue a la página siguiente se formateará a la derecha, es decir, a partir de la página derecha.

• recto: (Experimental) División forzada de una o dos páginas después del elemento para que la página siguiente tenga el formato de página recto (es decir, página derecha que se mueve de izquierda a derecha o página izquierda que se mueve de derecha a izquierda).
• verso: (Experimental) División forzada de una o dos páginas después del elemento para que la página siguiente se formatee como una página posterior (es decir, la página izquierda se mueve de izquierda a derecha o la página derecha se mueve de derecha a izquierda).

Valores de diseño con varias columnas.

• avoid-column: (Experimental) Evite romper una columna después de un elemento.
• column: (Experimental) Siempre obliga a una columna a romperse después del elemento.

valores regionales

• avoid-region: Evita interrumpir la región después del elemento.
• region: Siempre rompa a la fuerza una región después del elemento.

break-after sustitutos page-break-after

Si break-after parece algo familiar porque toma el lugar de page-break-afteruna de las tres propiedades de salto de página.

¿Cuál es la diferencia? MI, page-break-after era solo para páginas de medios. break-after es mucho más estable en cuanto a dónde y cómo se puede usar, ya que además de servir como seudónimo para page-break-aftertambién está contenido en CSS Fragmentación, Maquetación con varias columnas y regiones especificaciones.

Aquí hay una tabla de break-after valores que corresponden al patrimonio page-break-after valores de propiedad si lo usa como un alias:

break-after	page-break-after
auto	auto
right	right
avoid	avoid
left	left
page	always

A pesar de que break-after sustitutos page-break-aftersigue siendo una buena idea preguntar page-break-after como una opción de respaldo para navegadores que pueden carecer de soporte break-after:

.element {
  page-break-after: always; /* fallback */
  break-after: page;
}

Demostraciones

Echemos un vistazo a algunas demostraciones para comprender mejor cómo break-after obras.

Maquetación con varias columnas

En esta demostración, tenemos un conjunto de campos que queremos mostrar como un diseño de varias columnas. En particular, queremos que cada campo sea una columna. Esto es HTML:

<main>

  <section>
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
      Aliquid a corporis nostrum velit repudiandae fuga commodi aut delectus numquam.
      Debitis quod repellendus reprehenderit obcaecati asperiores?</p>
  </section>

  <section>
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
      Aliquid a corporis nostrum velit repudiandae fuga commodi aut delectus numquam.
      Debitis quod repellendus reprehenderit obcaecati asperiores?</p>
  </section>

  <section>
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
      Aliquid a corporis nostrum velit repudiandae fuga commodi aut delectus numquam.
      Debitis quod repellendus reprehenderit obcaecati asperiores?</p>
  </section>

  <!-- and so on... -->

</main>

Si solo definimos columnas y nos detenemos allí, no hay garantía de que las cajas encajen bien.

aquí es donde break-after entra Si lo ponemos en un valor de column (después de todo, trabajamos con un diseño con varias columnas) en <section> artículo como este:

section {
  break-after: column;
}

... entonces las columnas se romperán justo después cada <section> que arregla bien las cosas:

Alias ​​de medios paginados

En este ejemplo, avoid El valor se usa para evitar interrupciones en una página, columna o región en el diseño, de modo que al imprimir la página, sí, con una impresora real que usa papel, no haya interrupciones entre las columnas. En cambio, lo que obtenemos es un buen diseño de una sola columna que es más adecuado para imprimir:

Compatibilidad con navegador

Soporte de navegador para break-after varía según el contexto en el que se utilice.

Medios con páginas

Maquetación con varias columnas

Datos de soporte para la función mdn-css__properties__break-after__multicol_context en los principales navegadores

Regiones CSS

Datos de soporte para la función mdn-css__properties__break-after__region_context en los principales navegadores

Más información

Conectado