romper-antes | Trucos CSS - Trucos CSS

CSS break-before 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-before es un apodo para los rechazados page-break-before Propiedad.

Sintaxis

break-before: 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

Al momento de escribir, los siguientes valores están definidos en Especificación del módulo de fragmentación de nivel 4 de CSSque es capaz de redactar el editor. Entonces, algunos de los siguientes valores son experimentales y pueden cambiar en algún momento. realmente común all y always los valores a continuación no fueron incluidos en Especificaciones de nivel 3.

Lo bueno que debes saber break-before 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: Ni fuerza ni prohíbe una interrupción (página, columna o región) antes del elemento.
• avoid: Evita una interrupción (página, columna o región) antes del elemento.
• all: (Experimental) Obliga a la página a romperse después del elemento, interrumpiendo todos los contextos de fragmentación posibles. Entonces, una ruptura en un contenedor de varias columnas que está dentro de un contenedor de página forzaría una ruptura tanto en la columna como en la página.
• always: (Experimental) Fuerza un descanso después del elemento. Este valor está en el contexto de la fragmentación inmediata. Por ejemplo, si estamos dentro de un contenedor con varias columnas, como el uso de column propiedad del contenedor principal; entonces requerirá un salto de columna; dentro del portador de la página requerirá un salto de página.

Valores de medios con páginas

• avoid-page: Evita cualquier interrupción de la página anterior al elemento.
• page: Fuerza un salto de página antes del elemento.
• left: Fuerza uno o dos saltos por página antes del elemento para que cualquier cosa que llegue a la página siguiente se formateará a la izquierda; es decir, comienza desde la página izquierda.
• right: Fuerza uno o dos saltos por página antes del elemento, de modo que todo lo que llegue a la página siguiente se formateará a la derecha, es decir, comenzando en la página derecha.
• recto: (Experimental) Fuerza una o dos pausas en una página antes del elemento para que la página siguiente se formatee como una página anverso (es decir, una página derecha que se mueve de izquierda a derecha o una página izquierda que se mueve de derecha a izquierda).
• verso: (Experimental) Fuerza una o dos pausas en una página antes del elemento para que la página siguiente tenga el formato de página posterior (es decir, una página izquierda que se mueve de izquierda a derecha o una página derecha que se mueve de derecha a izquierda)

Valores de diseño con varias columnas.

• avoid-column: (Experimental) Evite romper una columna antes que el elemento.
• column: (Experimental) Siempre fuerza un salto de columna antes del elemento.

valores regionales

• avoid-region: Evita romper la región anterior al elemento.
• region: Siempre obliga a que una región se rompa antes que el elemento.

break-before sustitutos page-break-before

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

¿Cuál es la diferencia? MI, page-break-before era solo para páginas de medios. break-before 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-beforetambién está contenido en CSS Fragmentación, Maquetación con varias columnas y regiones especificaciones.

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

romper antes	página-salto-antes
auto	auto
avoid	avoid
right	right
left	left
page	always

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

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

Pero cuando se trata de la continuación y el cambio page-break-before a break-before a lo largo de su código, no se preocupe. page-break-before ahora se conoce como una abreviatura heredada para break-before y corresponderá a los valores de la tabla anterior.

Demostraciones

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

Maquetación con varias columnas

En esta demostración, tenemos un conjunto de campos que queremos mostrar como en diseño con 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-before 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 antes de cada una <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-before varía según el contexto en el que se utilice.

Medios con páginas

Maquetación con varias columnas

Regiones CSS

Más información

Conectado