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

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

Cuando maquetas para impresión, multicolumnas eller flujos fragmentados, tarde eller temprano te preguntas cómo forzar o evitar que algo salte a la suuiente página o columna. Ahí es donde entra en juego egenskapens CSS-breakafter, una 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 util en diseños complejos: periódicos digitales con columnas, informes en PDF, documentos con páginas pares e impares y hasta flujos por regiones. Su potencia radica en que puede forzar, permitir o impedir saltos Según el kontekst: paginas impresas, columnas eller regioner.

Qué es la propiedad CSS break-etter

Eiendommen break-after definere si debe producirse un salto de página, columna o región 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 suuiente "unidad" de fragmentación (página, columna o región) según el entorno en el que esté maquetando el navegador.

Históricamente, en CSS 2.1 disponíamos de page-break-after for mellomstore sider. Hei, break-after amplía dette konseptet 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

La forma básica de uso es directa: break-after: <valor>. Estos valores cubren contextos genericos y específicos de páginas, 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 ni prohíbe un salto), avoid (intenta unvitarlo) always (fuerza un salto en el contexto de fragmentación inmediato) y all (eksperimentell, fuerza el salto atravesando todos los contextos de fragmentación: por ejemplo, columna y página a la vez si aplica).

Valores para medias pagedos: avoid-page (unngå sidesalto), page (kraft sidestempel), 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 o verso følger fluen av idiomen.

Valores for diseño multicolumna: avoid-column unngå et søylesalto og 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 alineære bloques a la cabecera de la suuiente columna.

Verdier for regionene: avoid-region y region controlan el salto entre areas 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 considerar su uso como experimental o de legado.

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

En cada punto donde podria producirse una rotura (el "borde" entre elementos), el navegador evalúa tres propiedades: el break-after det fremre elementet, The break-before den neste og den break-inside del motstander. Es la interacción de las tres la que determina el resultado.

El algoritmo, simplificado, funciona así: si alguna de esas propiedades especifica un tapperhet forzado (always, left, right, page, column, region), ese valor tiene prioridad. Si hay 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 unngåelsesmot (avoid, avoid-page, avoid-column, avoid-region), no se aplicará el salto correspondiente. Después de resolver los saltos forzados, el navegador puede añadir "saltos suaves" si lo necesita, pero nunca en límites marcados con valores de evitar.

Relación con page-break-after og kompatibilitet med historie

For kompatibilitetsmotiver, los navegadores tratan page-break-after som et alias break-after en medios sidedos. Esto asegura que sitios antiguos que usaban la propiedad clásica sigan comportándose como se esperaba.

La equivalencia de valores funciona de la suuiente manera: auto → auto, always → page, avoid → avoid-page, left → left, right → right. I praksis, puedes escribir ambos para mayor robustez i trykk:

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

Det er også page-break-before con la misma filosofía en el "lado anterior" del elemento. Usar før o etter depende del punto exacto donde quieras el corte på din masketasjon.

Ambito de aplicación og comportamiento visual

Eiendommen gjelder blokkeringshus en flujo normal y, por extensiones modernas, a ítems de grid, varer av flex, grupos de filas de tablas og filas de tabla. No se hereda, su valor inicial es auto y su tipo de animación es discreto (es decir, ingen interpola como tal en transiciones).

Cuando una página eller 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. Este detaljer ayuda a mantener el espacio visual correcto tras un salto insertado expresamente.

Praktiske eksempler på bruk

Impresión (TOC que siempre termina la página): Si quieres que después del indice de contenidos empiece una página nueva, puedes usar la suuiente 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 página derecha: en publicaciones a doble cara, puede ser necesario que el suuiente capítulo comience en una página derecha. For hallo, utnytte tapperheten right:

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

Multicolumnas: imagina un contenedor con título principal que occupa todas las columnas (column-span: all) y subsecciones que quieres alinear en cabecera de columna. Applika break-after: column i den forrige blokken (for eksempel i en <p> o en hver <section>) for 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 posible, añade break-after: avoid i filene. En documentos impresos esto redusere 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 i det forreste elementet å manage med 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 */
}

Regioner: si trabajas con flujos por regiones (soporte limitado), puedes indicar que una lista termine una region y que el resto fluya en la suuiente. Aunque no es lo más común hoy, sirve como referencia de cómo se pensó la propiedad i denne konteksten:

.region ul {
  break-after: region;
}

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

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

Combinan break-before, break-etter y break-in

Estas tres propiedades actúan a la vez. Es habitual, por emplo, usar break-inside: avoid en komponent for den ikke tuller med munnen, mientras que una cabecera siguiente erklære break-before: page para arrancar en una página nueva. Si el "før" pide un salto, tendrá preferencia sobre el "etter" previo.

Prioriteringen av kommentarer er viktig: break-before gana en break-after, som en gang vant break-inside. Si varios piden romper, se aplica el del elemento que aparece más tarde en el flujo de documento.

Kompatibilitet og sammenheng

Støtten fra break-after avhengig av kontekst. En sideción/impreción, los navegadores modernos lo implementan de forma amplia, og alias page-break-after mantiene la retrocompatibilidad de sitios antiguos.

I flere kolonner, tapperheten column está disponible en motores modernos; sin embargo, en navegadores basados ​​en WebKit har coexistido el prefijo -webkit-column-break-after como alternative no estándar. Si apuntas a un público amplio, conviene probar y, si procede, incluir el prefijo de respaldo for kolonner.

Para regiones, el panorama es muy irregular: CSS-regioner er ikke implantert generelt, etter hva verdiene region y avoid-region deben considerarse experimentales o de legado.

Un apunte histórico: hubo demostraciones en las que IE10+ søylesalter med pause etter mientras que navegadores WebKit pedían el prefijo -webkit-column-break-after, og Firefox er tilgjengelig i denne konteksten. Hoy el soporte ha mejorado, pero sigue siendo buena idea contrastar los tres entornos (impresión, columnas y regiones) en los navegadores objetivo.

Buenas prácticas de maquetación med pause etter

• Bruk det med måte: un "siempre salta" tras cada bloque genera espacios en blanco y maquetaciones poco fluidas. Empléalo solo donde aporte claridad.
• Unngå kriteriene: misbruke avoid puede provokar cortes incómodos en otras partes del documento. Combínalo con break-inside cuando quieras proteger un componente.
• Pruebas en navegadores y dispositivos: imprime en PDF, usa la vista previa de impresión y testea multicolumnas. Samspillet kan variere med motor og kontekst.
• Mediehenvendelser med overskrift: hay decisiones de fragmentación que tienen sentido en papel pero no en móvil; ajusta con @media når det er nødvendig.

Tekniske detaljer og spesifikasjoner

Recapitulando el modello de la propiedad: startverdi auto, ingen heredada, valor computado "tal cual" se especifica y diskret animasjonstype. Aunque su uso típico no implica animaciones, este detaljer aclara que no existe transición gradvis 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 util 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 irregular, se popularizó un truco: insertar un DIV vakuum med   og tilordne den 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”, men puede rescatar maquetaciones de legado donde page-break-* fungerer best som break-* en ciertos navegadores antiguos.

El truco solía escribirse así (para provokar un salto antes de una tabla): primero el DIV con salto, luego un parrafo 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>

Si trabajas con multicolumnas en WebKit clásico, recuerda que el viejo -webkit-column-break-after aún puede servir como salvavidas junto al valor estándar, por ejemplo:

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

Avanserte brukstilfeller

Sideción a doble cara: en libros y revistas, es común exigir que capítulos arranquen siempre en páginas derechas. For å gjøre dette, bruk right. Si el contenido siguiente ya caía en una derecha, ingen habrá salto ekstra; si nei, el navegador sette inn en ekstra for 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 suuiente bloque empiece limpio en el contexto superior. Es un valor eksperimentell, así que prøvd med mimo.

Reflujo ordenado de secciones: cuando tienes varias secciones que deben comenzar en cabecera de columna, gjelder break-after: column for hver seksjon ayuda a que queden "cuadradas" visualmente, con titler alineados arriba y sin fragmentos partidos en posiciones incómodas.

Pequeño recordatorio de alias y valores equivalentes

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 er lik break-after: page; page-break-after: avoid se kartet a break-after: avoid-page; left y right conservan su significado. Esto te tillate aktualisering av forma progresiva.

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

Vanlige feil og hvordan unngå dem

sted break-after: always i overkant provoka páginas eller semi vacías kolonner. Antes de forzar, valora si avoid o auto ya ofrecen un corte naturlig akseptabel.

Ignorer samhandlingen med break-inside es otro fallo habitual. Si un componente no debe divider, legger break-inside: avoid (o avoid-page/avoid-column) además de manejar el "etter" o "før" en los elementos adyacentes.

Ingen probar en contexto real es el tercer clásico: la vista previa de impresión no siempre es fiel a cómo 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.

Rask eiendomsrapport

• Første: auto
• Se applikasjon a: cajas de bloque, elementer de grid, ítems de flex, grupper av filas de tabla og filas
• Arvet: Nei.
• Beregnet verdi: alt som er spesifikt
• Animasjonstype: diskret

Por último, recuerda que algunos valores (all, recto, verso) seguen marcados como experimentales en los borradores de especificación. Aunque existen implementaciones parciales, tu estrategia debe inkluderer pruebas og "fallbacks" når det avhenger av dem.

Å dominere break-after te permite maquetar documentos que se imprimen bien, columnas ordenadas y flujos de lectura claros. A poco que lo kombinerer 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 partidos donde no toca.