Propiedad CSS pertrauka po: guía completa, usos y soporte

Pagrindinis » Pitonas » Propiedad CSS pertrauka po: 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 la propiedad CSS pertrauka po, 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 útil 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 konteksto: páginas impresas, columnas o regiones.

Qué es la propiedad CSS break-after

Nuosavybė break-after define 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 komponente, de modo que el contenido posterior empiece en la siguiente „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 vidutinio dydžio puslapiams. Sveiki, 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

La forma basica de uso es directa: break-after: <valor>. Estos valores cubren contextos genéricos 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 konteksto): auto (ni fuerza ni prohíbe un salto), avoid (ketinama vengti), always (fuerza un salto en el konteksto de fragmentación inmediato) y all (eksperimentinis, fuerza el salto atravesando todos los kontekstos de fragmentación: por ejemplo, columna y página a la vez si aplica).

Valores para medios paginados: avoid-page (puslapio eilutė), page (puslapio viršuje), left y right (fuerzan uno o dos saltos para asegurar que el siguiente contenido comienza en página izquierda o derecha, respectivamente). Ademas, recto y verso sūnus valores experimentales que obligan a que la siguiente página sea recto o verso kitą kalbos srautą.

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) arba para alinear bloques a la cabecera de la siguiente columna.

Vertės regionams: avoid-region y region kontroliuoti CSS regionų apibrėžtas sritis. Aunque esta especificación tuvo tracción en su momento, el soporte real de regiones es limitado en navegadores modernos, por lo que conviene regardar su uso como experimental o de legado.

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

En cada punto donde podría producirse una rotura (el „borde“ entre elementos), el navegador evalúa tres propiedades: el break-after priekinio elemento, break-before po kito ir el break-inside del contenedor. Es la interacción de las tres la que determina el resultado.

El algoritmas, supaprastintas, funciona así: si alguna de esas propiedades especifica un išplėšta drąsa (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 evataro drąsa (avoid, avoid-page, avoid-column, avoid-region), no se aplicará el salto correctiente. Después de solver los saltos forzados, el navegador puede añadir „saltos suaves“ si lo necesita, pero nunca en límites marcados con valores de evitar.

Ryšys su puslapio pertrauka po y suderinamumo istorijos

Por motivos de compatibilidad, los navegadores tratan page-break-after kaip slapyvardis break-after en medios paginados. Esto asegura que sitios antiguos que usaban 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. Praktikoje, puedes escribir ambos para meras robustez įspaudu:

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

Taip pat egzistuoja page-break-before con la misma filosofía en el "lado anterior" del elemento. Usar prieš o po priklauso depende del punto specifico donde quieras el corte į tavo maquetación.

Ámbito de aplicación y comportamiento visual

La propiedad se applied a bloko lygio sijos en flujo normal y, por extensiones modernas, a ítems de grid, daiktai iš 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 página o 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 detalle ayuda a mantener el espacio visual correcto tras un salto insertado expresamente.

Praktiniai naudojimo pavyzdžiai

Impresión (TOC que siempre termina la página): si quieres que después del índice de contenidos empiece 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 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 siguiente capítulo comience en una página derecha. Para ello, panaudoti drąsą 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. Aplikacija break-after: column ankstesniame bloke (pavyzdžiui, viename <p> o en cada <section>) para 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 serialuose. En documentos impresos esto sumažinti 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 partr entre columnas puede beneficiarse de break-after: column priekiniame elemente 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 */
}

Regionai: si trabajas con flujos por regiones (soporte limitado), puedes indicar que una lista termine 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 šiame kontekste:

.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 žiniasklaidos užklausos:

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

Cómo se combinan break-for, break-af y break-inside

Estas tres propiedades actúan a la vez. Es habitual, por eemplo, usar break-inside: avoid kaip vieną komponentą viduje nebūna, mientras que una cabecera siguiente deklaruoti break-before: page para arrancar en una página nueva. Si el "prieš" pide un salto, tendrá preferencia sobre el „po“ ankstesnio.

La prioridad ya Comentada es svarbu: break-before gana a break-after, ką jūs tikriausiai gana break-inside. Si varios piden romper, se aplica el del elemento que aparece más tarde en el flujo de documento.

Suderinamumas ir tinkamas kontekstui

Parama break-after priklauso nuo konteksto. En paginación/impresión, los navegadores modernos lo implementan de forma amplia, y el slapyvardis page-break-after mantiene la retrocompatibilidad de sitios antiguos.

Daugiasluoksnėje erdvėje – drąsa column está disponible en motores modernos; sin embargo, en navegadores basados ​​en WebKit ha coexistido 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 dėl stulpelių.

Para regiones, el panorama es gali netaisyklinga: CSS Regions no está implantado de forma general, dėl kokių vertybių region y avoid-region deben attentionarse 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 se quedaba atrás en ese kontekste. 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 con break-after

• Naudokite saikingai: un „siempre salta“ tras cada bloque genera espacios en blanco y maquetaciones poco fluidas. Empléalo solo donde aporte claridad.
• Evitar pagal kriterijus: piktnaudžiavimas avoid puede provocar cortes incómodos en otras partes del documento. Combínalo con break-inside cuando quieras proteger un komponente.
• Pruebas en navegadores y dispositivos: imprime PDF, usa la vista previa de impresión y testea multicolumnas. El Comportamiento puede variar por motor y konteksto.
• Žiniasklaidos užklausos su užklausa: hay Decisiones de fragmentación que tienen sentido en papel pero no en móvil; ajusta con @media kai reikia.

Detalles técnicos y de especificación

Reapitulando el modelo de la propiedad: pradinė vertė auto, no heredada, valor computado “tal cual” se especifica y diskretiškos animacijos tipas. Aunque su uso típico no implica animaciones, este detalle aclara que no existe transición gradual 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 irregular, se popularizó un truco: insertar un DIV vakuumas su   ir priskirti page-break-before/after para forzar el salto antes o después del komponente real. A día de hoy, no es la solución "bonita", pero puede rescatar maquetaciones de legado donde page-break-* geriausiai veikia 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>

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

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

Išplėstinio naudojimo atvejai

Paginación a doble cara: en libros y revistas, es común exigir que capítulos arranquen siempre en páginas derechas. Norėdami tai padaryti, naudokite right. Si el contenido siguiente ya caía en una derecha, no habrá salto extra; si ne, 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 eksperimental, así que prébalo su mimo.

Reflujo ordenado de secciones: cuando tienes varias secciones que deben comenzar en cabecera de columna, taikomos break-after: column a cada sección ayuda a que queden "cuadradas" visualmente, con título alineados arriba 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 atitikmuo a break-after: page; page-break-after: avoid se mapea a break-after: avoid-page; left y right conservan su significado. Esto te atļauje aktualizar de forma progresiva.

Para casos donde el navegador no implemente Completamente la familia break-* konkrečiame kontekste, mantener el alias clásico como „atsarginis“ suele ser un movimiento inteligente, sobre todo en proyectos con usuarios que imprimen con navegadores muy variados.

Dažnos klaidos ir kaip jų išvengti

Vieta break-after: always perteklius provoca páginas o columnas semi vacías. Antes de forzar, valora si avoid o auto ya ofrecen un corte natural aceptable.

Ignoruoti sąveiką su break-inside es otro fallo habitual. Si un komponente no debe dividiirse, pridėti break-inside: avoid (o avoid-page/avoid-column) además de manejar el „po“ arba „prieš“ en los elementos adyacentes.

No probar en konteksto 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.

Nuosavybės greitoji informacija

• Pradinis: auto
• Taikoma: cajas de bloque, ítems de grid, ítems de flex, grupos de filas de tabla y filas
• Heredada: ne
• Apskaičiuota drąsa: tal cual se especifica
• Animacijos tipas: diskretus

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" kiek nuo jų priklauso.

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