Propiedad CSS break-after: guía completa, usos y supporte

Utama » Python » Propiedad CSS break-after: guía completa, usos y supporte

Cuando maquetas para impresión, multicolumnas o flujos fragmentados, tarde o temprano te preguntas cómo forzar or evitar que algo salte a la siguiente página or columna. Ahí es donde entra en juego la propiedad CSS break-after, satu herramienta que indica al navegador si debe producirse un salto justo después de un elemento.

Más allá de los casos típicos de impresión, break-after es útil en diseños complejos: periódicos digitales con columnas, informes en PDF, documentos con páginas pares and impares y hasta flujos por regiones. Su potencia radica en que puede forzar, permitir o impedir saltos ikut konteks: halaman impresas, columnas or regiones.

Qué es la propiedad CSS break-after

Harta break-after takrifkan si debe producirse un salto de página, columna or region inmediatamente después del element al que se aplica. Dicho de forma llana, marca un punto de corte justo tras el componente, de modo que el contenido posterior empiece en la siguiente “unidad” de fragmentación (página, columna or región) según el entorno en el que esté maquetando el navegador.

Sejarah, dalam CSS 2.1 disponíamos de page-break-after para medios paginados. Hoy, break-after amplía ese concepto untuk fungsi también dengan berbilang ruangan dan wilayah, además de mantener compatibilidad con los valores clásicos usados ​​en impresión.

Sintaxis, valores y cómo interpretarlos

La forma básica de uso es directa: break-after: <valor>. Estos valores cubren contextos genéricos y específicos de páginas, columnas or regiones:

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

Valores genéricos (válidos en cualquier contexto): auto (ni fuerza ni prohíbe un salto), avoid (intenta evitarlo), always (fuerza un salto en el contexto de fragmentación inmediato) y all (percubaan, fuerza el salto atravesando todos los contextos de fragmentación: sebagai contoh, columna y página a la vez si aplica).

Valores para medios paginados: avoid-page (evita salto de página), page (fuerza salto de página), left y right (fuerzan uno o dos saltos para asegurar que el siguiente contenido comienza en página izquierda o derecha, respectivamente). Además, recto y verso son valores experimentales que obligan a que la siguiente página sea recto or verso según el flujo del idioma.

Valores para diseño multicolumna: avoid-column evita un salto de columna y column lo fuerza. En contenidos extensos repartidos por varias columnas, estos valores son clave para no cortar piezas delicadas (como un fragmento de código) o para alinear bloques a la cabecera de la siguiente columna.

Valores para regiones: avoid-region y region controlan el salto entre áreas definidas por CSS Regions. Aunque esta especificación tuvo tracción en su momento, el sokorte real de regiones es limitado en navegadores modernos, por lo que conviene considerar su uso como experimental or de legado.

Reglas decisión del navegador: forzar, evitar y prioridades

En cada punto donde podría producirse una rotura (el “borde” entre elements), el navegador evalúa tres propiedades: el break-after del elemento anterior, The break-before del siguiente y el break-inside del contenedor. Es la interacción de las tres la que determina el resultdo.

Algoritmo, simplificado, funciona así: si alguna de esas propiedades especifica un berani forzado (always, left, right, page, column, region), ese valor tiene prioridad. Untuk pelbagai jenis, gana el que está más “adelante” en el flujo: break-before > break-after > break-inside.

Si en ese punto aparece algún valor de evitar (avoid, avoid-page, avoid-column, avoid-region), tiada se aplicará el salto correspondiente. Después de resolver los saltos forzados, el navegador puede añadir “saltos suaves” si lo necesita, tetapi nunca en límites marcados con valores de evitar.

Relación con page-break-after y compatibilidad histórica

Oleh motivos de compatibilidad, los navegadores tratan page-break-after como un alias de break-after dan biasa-biasa sahaja. Esto asegura que sitios antiguos que usban la propiedad clásica sigan comportándose como se esperaba.

La equivalencia de valores funciona de la siguiente manera: auto → auto, always → page, avoid → avoid-page, left → left, right → right. Dalam latihan, puedes escribir ambos para mayor robustez dalam kesan:

.elemento {
  page-break-after: always; /* fallback histórico */
  break-after: page;        /* estándar actual */
}

Terdapat juga page-break-before con la misma filosofia dalam elemen "lado anterior". Usar sebelum o selepas bergantung del punto exacto donde quieras el corte en tu maquetación.

Ambito de aplicación y comportamiento visual

La propiedad se aplica a cajas de nivel de bloque en flujo normal y, por extensiones modernas, a ítems de grid, ítem de flex, grupos de filas de tablas y filas de tabla. No se hereda, su valor inicial es auto y su tipo de animación es discreto (es decir, no interpola como tal en transiciones).

Cuando satu halaman atau columna corta satu caja, los márgenes, bordes y padding no se dibujan en el punto de corte. La única excepción es el margen inmediatamente posterior a un salto forzado, que se conserva. Este detalle ayuda and mantener el espacio visual correcto tras un salto insertado expresamente.

Contoh penggunaan yang praktikal

Impresión (TOC que siempre termina la página): si quieres que después del índice de contenidos emppiece una página nueva, puedes usar la siguiente regla dentro de un @media print. Es una situación típica en libros o informes donde minata separar claramente secciones clave:

@media print {
  #tabla-de-contenidos {
    break-after: always;
  }
}

Impresión con página derecha: en publicaciones a doble cara, puede ser necesario que el siguiente capítulo comience en una página derecha. Untuk salam, utiliza el valor right:

@media print {
  #tabla-de-contenidos {
    break-after: right;
  }
}

Multicolumnas: imagina un contenedor con titulo principal que ocupa todas las columnas (column-span: all) y subsecciones que quieres alinear en cabecera de columna. Aplika break-after: column en el blok sebelum ini (sebagai contoh, en un <p> o en cada <section>) untuk forzar el salto de columna:

main {
  column-width: 200px;
}
h1 {
  column-span: all;
}
section {
  break-after: column; /* cada sección empieza arriba de la siguiente columna */
}

Evitar saltos tras filas de tabla: si quieres mantener una tabla en la misma página cuando sea possible, añade break-after: avoid en las filas. En documentos impresos esto reduce cortes raros en el cuerpo de una tabla:

tr {
  break-after: avoid;
}

Evitar cortes dentro de un fragmento delicado en columnas: un bloque de código al que no quieres partir entre columnas puede beneficiarse de break-after: column en el elemen anterior o manejarlo con break-inside: avoid-column dentro del propio bloque, según el caso:

.articulo {
  column-width: 12em; /* activa multicolumnas */
}
.articulo .code-snippet {
  break-after: column; /* tras el snippet, siguiente columna */
}

Kawasan: si trabajas con flujos por regiones (soporte limitado), puedes indicar que una list terminine una región y que el resto fluya en la siguiente. Aunque no es lo más común hoy, sirve como referencia de cómo se pensó la propiedad dalam konteks ini:

.region ul {
  break-after: region;
}

Adaptación condicional: si deseas que en pantallas pequeñas el comportamiento vuelva a auto untuk evitar fragmentación agresiva, puedes apoyarte en pertanyaan media:

@media screen and (max-width: 768px) {
  h2 {
    break-after: auto;
  }
}

Como se combinan pecah-sebelum, pecah-selepas y pecah-dalam

Estas tres propiedades actúan a la vez. Es habitual, por ejemplo, usar break-inside: avoid en un componente para que no se rompa por dentro, mientras que una cabecera siguiente declare break-before: page untuk arrancar dalam satu halaman nueva. Si el "sebelum" pide un salto, tendrá preferences sobre el “after” previo.

Keutamaan komen adalah penting: break-before gana a break-after, que a su vez gana a break-inside. Untuk pelbagai pakaian, anda boleh menggunakan elemen ini untuk memastikan dokumen yang diperlukan.

Keserasian dan menyokong konteks

Sokongan dari break-after bergantung pada konteks. En paginación/impresión, los navegadores modernos lo implementan de forma amplia, y el alias page-break-after mantiene la retrocompatibilidad de sitios antiguos.

En multicolumnas, el valor column está disponible en motores modernos; embargo dosa, dan navegadores basados ​​dalam WebKit mempunyai wujud bersama el prefijo -webkit-column-break-after como alternativa no estándar. Si apuntas a un público amplio, conviene probar y, si procede, incluir el prefijo de respaldo para columnas.

Kawasan, panorama yang tidak teratur: CSS Kawasan tidak ada implantado de forma general, por lo que los valores region y avoid-region deben considerarse experimentales o de legado.

Un apunte histórico: hubo demostraciones en las que IE10+ mostraba saltos de columna con break-after mientras que navegadores WebKit pedían el prefijo -webkit-column-break-after, dan Firefox melihat dan melihat konteks ini. Hoy el soporte ha mejorado, but sigue siendo buena idea contrastar los tres entornos (impresión, columnas y regiones) en los navegadores objetivo.

Buenas prácticas de maquetación con break-after

• Úsalo con moderasi: un “siempre salta” tras cada bloque genera espacios en blanco y maquetaciones poco fluidas. Empléalo solo donde aporte claridad.
• Evitar con criterio: abuser de avoid puede provocar cortes incómodos en otras parts del documento. Combínalo con break-inside cuando quieras proteger un componente.
• Pruebas en navegadores y dispositivos: imprime PDF, usa la vista previa de impresión y testea multicolumnas. El comportamiento puede variar por motor y contexto.
• Pertanyaan media dengan cabeza: keputusan jerami de fragmentación que tienen sentido en papel tapi no en móvil; ajusta con @media apabila perlu.

Detalles técnicos y de especificación

Recapitulando el modelo de la propiedad: nilai permulaan auto, tiada heredada, keberanian mengira "tal cual" sespecifica y jenis animasi discreto. Aunque su uso típico no implica animaciones, este detalle aclara que no existe transición gradual entre states de corte.

En cajas divididas por un salto, los bordes, rellenos y márgenes no se “repiten” en el punto de rotura. Se conserva el margen inmediatamente después de un salto forzado, lo cual es útil for mantener la separación del contenido que arranca en la nueva página or columna.

Patrones habituales y trucos (con contexto histórico)

En épocas con soporte irregular, se popularizó un truco: insertar un DIV vacío con   dan menetapkannya page-break-before/after para forzar el salto antes o después del componente real. A día de hoy, no es la solución “bonita”, tetapi puede rescatar maquetaciones de legado donde page-break-* funciona mejor que break-* en ciertos navegadores antiguos.

El truco solía escribirse así (para provocar un salto antes de una tabla): primero el DIV con salto, luego un párrafo separador y la tabla, de modo que la tabla apareciera al principio de una página nueva al imprimir:

<div style="page-break-before: always;">&nbsp;</div>
<p></p>
<table>
  <tr><td>Contenido...</td></tr>
</table>

Jika terdapat pelbagai ruangan dalam WebKit klasik, ia boleh didapati el viejo -webkit-column-break-after aún puede servir como salvavidas junto al valor estándar, sebagai contoh:

figure {
  break-after: column;
  -webkit-column-break-after: always; /* respaldo no estándar */
}

Kes penggunaan lanjutan

Paginación a double cara: en buku dan revistas, es común exigir que capítulos arranquen siempre en páginas derechas. Untuk melakukan ini, gunakan right. Si el contenido siguiente ya caía en una derecha, no habrá salto extra; Jika tidak, el navegador insertará uno adicional para cuadrarlo.

Diseños híbridos (páginas con columnas dentro): si estás en una sección multicolumna situada en una página impresa, el valor all puede romper tanto la columna como la página, garantizando que el siguiente bloque empiece limpio en el contexto superior. Es un valor experimental, así que pruébalo con mimo.

Reflujo ordenado de secciones: cuando tienes varias secciones que deben comenzar en cabecera de columna, memohon break-after: column bahagian cada ayuda a que queden “cuadradas” visualmente, con títulos alineados arriba y dosa fragmentos partis en posiciones incómodas.

Pequeño recordatorio de alias y valores equivalentes

Si todavía mantienes hojas de estilo de impresion con page-break-after, puedes alinearlas con el mundo moderno así: page-break-after: always setara a break-after: page; page-break-after: avoid se mapea a break-after: avoid-page; left y right conservan su significado. Esto te permite actualizar de forma progresiva.

Para casos donde el navegador no implemente completamente la familia break-* en un contexto concreto, mantener el alias clásico como "fallback" suele ser un movimiento intelligente, sobre todo en proyectos con usuarios que imprimen con navegadores muy variados.

Kesilapan biasa dan cara mengelakkannya

Tempat break-after: always berlebihan provoca páginas or columnas semi vacías. Antes de forzar, valora si avoid o auto ya ofrecen un corte semula jadi boleh diterima.

Ignoar la interacción con break-inside es otro fallo habitual. Si un componente no debe dividirs, tambah break-inside: avoid (o avoid-page/avoid-column) además de manejar el “selepas” atau “sebelum” dalam elemen adyacentes.

Tiada probar en contexto real es el tercer clásico: la vista previa de impresión no siempre es fiel a como quedará el PDF o la impresora física. Genera un PDF, revisa márgenes y asegúrate de que los saltos respetan cabeceras y pies.

Ficha rápida de la propiedad

• Permulaan: auto
• Terpakai kepada: cajas de bloque, ítems de grid, ítems de flex, groups de filas de tabla y filas
• Heredada: tidak
• Pengiraan keberanian: tal cual se specific
• Jenis animasi: bijaksana

Oleh itu, recuerda que algunos valores (all, recto, verso) siguen marcados como experimentales en los borradores de especificación. Aunque existen implementaciones parciales, estrategia debe inkluir pruebas y "fallbacks" cuando dependas de ellos.

Untuk menguasai break-after te permite maquetar documentos que se imprimen bien, columnas ordenadas y flujos de lectura claros. A poco que lo menggabungkan con break-before y break-inside y tengas en cuenta los alias históricos y los prefijos de respaldo, obtendrás cortes precisos y previsibles sin pelearte con páginas en blanco ni bloques partys donde no toca.