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

Domov » Pytón » Propiedad CSS break-after: guía completa, usos y soporte

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

Má všetky typy záznamov, prestávky sa používajú a dopĺňajú: digitálne periódy so stĺpcami, informácie vo formáte PDF, dokumenty so stránkami a zmeny a rýchle zmeny v regiónoch. Su potencia radica en que puede forzar, permitir o impedir saltos según el contexto: paginas impresas, columnas o regiones.

Qué es la propiedad CSS break-after

Vlastníctvo break-after define si debe producirse un salto de página, columna o region inmediatamente después del elemento 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 o region) según el entorno en el que esté maquetando el navegador.

Históricamente, en CSS 2.1 disponíamos de page-break-after pre stredné stránky. Hej, break-after amplía ese concepto para funcionar también con multicolumnas y regiones, además de mantener compatibilidad con los valores clásicos usados ​​en impresión.

Sintaxis, valores y cómo interpretarlos

Základná forma uso es directa: break-after: <valor>. Estos valores cubren contextos genéricos y específicos de paginas, columnas o regiones:

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

Valores genericos (válidos en cualquier contexto): auto (ni fuerza ani prohíbe un salto), avoid (úmysel zrušiť), always (fuerza un salto en el contexto de fragmentación inmediato) y all (experimentálne, fuerza el salto atravesando todos los contextos de fragmentación: por ejemplo, columna y página a la vez si aplica).

Valores para medios paginados: avoid-page (preskočenie strany), page (prechod na ďalšiu stranu), left y right (fuerzan uno o dos saltos para asegurar que el siguiente contenido comienza en pagina izquierda o derecha, relevantivamente). Además, recto y verso syn valores experimentales que obligan a que la siguiente pagina mora recto o verso podľa prúdu jazyka.

Valores para diseño multicolumna: avoid-column vyskočil zo stĺpca 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 siguente columna.

Hodnoty pre regióny: avoid-region y region controlan el salto entre áreas definidas por CSS Regions. Aunque esta especificación tuvo tracción en su momento, el soporte real de regiones es limitado en navegadores modernos, por lo que conviene uvažuje su uso ako experimental or de legado.

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

En cada punto donde podría producirse una rotura (el „borde“ entre elementos), el navegador evalúa tri propiedades: el break-after predného prvku, break-before nasledujúceho a break-inside del contenedor. Es la interacción de las tres la que determina el resultado.

Algoritmus, zjednodušenie, funkcia ako: a alguna de esas propiedades especifica un statočnosť Forzado (always, left, right, page, column, region), ese valor tiene prioridad. Si seno varios forzados, gana el que está más “adelante” en el flujo: break-before > break-after > break-inside.

Si en ese punto aparece algún odvaha zbaviť sa (avoid, avoid-page, avoid-column, avoid-region), no se aplicará el salto corporation. Después de resolver los saltos forzados, el navegador puede añadir “saltos suaves” si lo treba, pero nunca en límites marcados con valores de evitar.

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

Motivos de compatibilidad, los navegadores tratan page-break-after ako pseudonym break-after en medios paginados. Esto asegura que sitios antiguos que usaban la propiedad clasica sigan comportándose como se esperaba.

Ekvivalencia de valores funciona de la siguiente manera: auto → auto, always → page, avoid → avoid-page, left → left, right → right. V praxi, puedes escribir ambos para starosta robustez v odtlačku:

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

Je tu tiež page-break-before con la misma filosofía en el „lado anterior“ del elemento. Usar pred o po zavisle del punto presne donde quieras el corte vo vašej makete.

Ambito de aplicación y comportamiento visual

Vlastníctvo sa uplatňuje blokovacie kazety en flujo normal y, por extensiones modernas, a ítems de grid, položky z 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 una pagina alebo columna corta una 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. Toto je podrobný návod a vizuálna korekcia výrazu.

Praktické príklady použitia

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

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

Impresión con pagina derecha: en publicaciones a doble cara, puede ser necesario que el siguiente capítulo comience en una pagina derecha. ahoj, využiť odvahu right:

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

Multicolumnas: imagina un contenedor con título principal que ocupa todas las columnas (column-span: all) y subsecciones que quieres alinear en cabecera de columna. Aplica break-after: column v predchádzajúcom bloku (napríklad, v jednom <p> o en cada <section>) pre 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 stránka cuando sea posible, añade break-after: avoid v radoch. En documentos impresos esto znížiť 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 v prednom prvku alebo manévrovať s 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 */
}

Regióny: si trabajas con flujos por regiones (soporte limitado), puedes indicar que una lista termine una region y que el resto fluya en la siguiente. Aunque no es lo más común hoy, sirve ako referencia de cómo se pensó la propiedad v týchto kontextoch:

.region ul {
  break-after: region;
}

Podmienky prispôsobenia: si deseas que en pantallas pequeñas el comportamiento vuelva a auto para evatar fragmentación agresiva, puedes apoyarte en mediálne dotazy:

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

Ako sa kombinuje prestávka pred, prestávka po prestávke a vnútri

Estas tres propiedades actúan a la vez. Je to obvyklé, napríklad, používa sa break-inside: avoid v komponente pre ktorý nerobí sa v ňom, mientras que una cabecera siguiente vyhlásiť break-before: page para arrancar en una pagina nueva. Si el „pred“ pide un salto, tendrá preferencia sobre el “after” previo.

Priorita je dôležitá: break-before gana a break-after, čo si ty vez gana a break-inside. Si varios piden romper, aplica el del del elemento que aparece más tarde en el flujo de documento.

Kompatibilita a podpora v kontexte

Podpora break-after závisí od kontextu. 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.

V mnohých stĺpcoch, odvaha column está disponible en motores modernos; sin embargo, en navegadores basados ​​en WebKit ha coexistido el prefijo -webkit-column-break-after ako alternatíva no estándar. Si apuntas a un público amplio, conviene probar y, si procede, incluir el prefijo de repaldo pre stĺpce.

Pararegióny, panoráma je nepravidelná: CSS Regions no está implantado de form generalpre tie hodnoty region y avoid-region deben zvažované 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, y Firefox sa quedaba atrás en ese contexto. Hoy el soporte ha mejorado, pero sigue siendo buena idea kontrasta los tres entornos (impresión, columnas y regiones) en los navegadores objetivo.

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

• Používajte ho s mierou: un “siempre salta” tras cada bloque genera espacios en blanco y maquetaciones poco fluidas. Vytvorte si sólo donde aporte claridad.
• Vyhnúť sa kritériám: zneužívať avoid puede provocar cortes incómodos en otras partes del documento. Kombinované kon break-inside cuando quieras proteger un componente.
• Pruebas en navegadores y dispositivos: imprime a PDF, usa la vista previa de impresión y testea multicolumnas. Tento rozdiel sa mení v závislosti od motora a kontextu.
• Mediálne otázky týkajúce sa cabezy: hay decisiones de fragmentación que tienen sentido en papel pero no en móvil; ajusta con @media ak je to potrebné.

Podrobnosti o técnicos y de especificación

Rekapitulácia modelu propiedad: počiatočná hodnota auto, no heredada, valor computado “tal cual” sa especifica y diskrétny typ animácie. Aunque su uso típico no implica animaciones, este detalle aclara que no existe transición progressive entre estados 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 para mantener la separación del contenido que arranca en la nueva página o columna.

Patrones habituales y trucos (con contexto histórico)

En épocas con soporte nepravidelný, sa popularizó un truco: insertar un DIV vákuum s   a priradiť ho page-break-before/after para forzar el salto antes o después del componente skutočný. A día de hoy, no es la solución “bonita”, pero puede rescatar maquetaciones de legado donde page-break-* funguje lepšie ako break-* en ciertos navegadores antiguos.

El truco solea 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 pagina nueva al imprimir:

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

Si trabajas con multicolumnas en Klasico WebKit, recuerda que starý -webkit-column-break-after aún puede servir ako salvavidas junto al valor estándar, por ejemplo:

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

Pokročilé prípady použitia

Paginación a doble cara: en libros y revistas, es común exigir que capítulos arranquen siempre en páginas derechas. Na to použite right. Si el contenido siguiente ya caía en una derecha, no habrá salto extra; si nie, 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 pagina impresa, el valor all puede romper tanto la columna como la pagina, garantizando que el siguiente bloque empiece limpio en el contexto superior. Es un valor experimental, así que overené s mimo.

Reflujo ordenado de secciones: cuando tienes varias secciones que deben comenzar en cabecera de columna, platiť break-after: column každá sekcia ayuda a que queden “cuadradas” visualmente, con prichádzajúce alineárne titulky y sin fragmentos partidos en posiciones incómodas.

Pequeño recordatorio de alias y valores ekvivalentes

Si todavía mantienes hojas de estilo de impresión con page-break-after, Puedes alinearlas con el mundo moderno así: page-break-after: always rovná sa break-after: page; page-break-after: avoid sa mapuje break-after: avoid-page; left y right zachovať význam. Esto te permite currentizar de form progresiva.

Para casos donde el navegador no implemente completamente la familia break-* v konkrétnom kontexte, mantener el alias clasico ako „záložný“ suele ser un movimiento inteligente, sobre todo en proyectos con usuarios que imprimen con navegadores muy variados.

Časté chyby a ako sa im vyhnúť

miesto break-after: always viac provoca paginas o columnas semi vacías. Antes de forzar, valora si avoid o auto ya ofrecen un corte natural prijateľné.

Ignorovať interakciu s break-inside es otro fallo obvyklé. Si un componente no debe dididirse, dodáva break-inside: avoid (o avoid-page/avoid-column) además de manejar el „po“ alebo „pred“ en los elementos adyacentes.

Žiaden problém v reálnom kontexte pre klasický tercer: la vista previa de impresión no siempre es fiel a cómo quedará el PDF o la impresora fisica. Genera un PDF, revisa márgenes y asegúrate de que los saltos respetan cabeceras y pies.

Rýchla platba nehnuteľnosti

• Počiatočné: auto
• Platí pre: cajas de bloque, ítems de grid, items de flex, grupos de filas de tabla y filas
• Zdedené: žiadny
• Vypočítaná odvaha: aký je špecifický
• Typ animácie: diskrétne

Por último, recuerda que algunos valores (all, recto, verso) siguen marcados como experimentales en los borradores de especificación. Aunque existen implementaciones parciales, tu estrategia debe incluir pruebas y „fallbacks“ keď to od nich závisí.

Dominovať break-after te permite maquetar documentos que se imprimen bien, columnas ordenadas y flujos de lectura claros. A poco que lo spája con break-before y break-inside y tengas en cuenta los alias históricos y los prefijos de repaldo, obtendrás cortes precisos y previsibles sin pelearte con paginas en blanco ni bloques partidos donde no toca.