Propietat CSS break-after: guia completa, usos i suport

Inici » Pitó » Propietat CSS break-after: guia completa, usos i suport

Quan maquetes per a la impressió, multicolumnes o fluxos fragmentats, tarda o temprano te preguntes com forçar o evitar que algo salte a la següent pàgina o columna. Ahí es donde entra en juego la propietat CSS break-after, una eina que indica al navegador si ha de produir un salt just després d'un element.

Més allá dels casos típics d'impressió, break-after és útil en dissenys complexos: periódics digitals amb columnes, informes en PDF, documents amb pàgines paris i impartes i fins a fluxos per regions. La seva potència radica en què pot forçar, permetre o impedir els salts segons el context: pàgines impreses, columnes o regions.

Què és la propietat CSS break-after

la propietat break-after define si ha de produir un salt de pàgina, columna o regió immediatament després de l'element al que s'aplica. Dicho de forma llana, marca un punt de corte just tras el componente, de manera que el contingut posterior empiece en la següent “unitat” de fragmentació (página, columna o regió) segons l'entorn en el que estigui maquetant el navegador.

Històricament, en CSS 2.1 disposem de page-break-after per a mitjans de pàgina. Avui, break-after amplia aquest concepte per funcionar també amb diverses columnes i regions, a més de mantenir la compatibilitat amb els valors clàssics utilitzats en impressió.

Sintaxis, valors i com interpretar-los

La forma bàsica d'ús és directa: break-after: <valor>. Aquests valors cúbren contextos genèrics i específics de pàgines, columnes o regions:

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

Valors genèrics (vàlids en qualsevol context): auto (ni força ni prohíbe un salt), avoid (intenta evitar-ho), always (força un salt en el context de fragmentació immediata) y all (experimental, força el salt atravessant tots els contextos de fragmentació: per exemple, columna i pàgina a la vegada si aplica).

Valors per a mitjans paginats: avoid-page (evita el salt de pàgina), page (força de salt de pàgina), left y right (força un o dos salts per assegurar que el següent contingut comença a la pàgina esquerra o dreta, respectivament). A més, recto y verso son valors experimentals que obliga a la següent pàgina sea recto o verso segons el flux de l'idioma.

Valors per al disseny multicolumna: avoid-column evita un salt de columna i column lo fuerza. En continguts extensos repartits per diverses columnes, aquests valors són clau per a no tallar peces delicades (com un fragment de codi) o per a blocs alinears a la capçalera de la següent columna.

Valors per a regions: avoid-region y region controla el salt entre les àrees definides per CSS Regions. Encara que aquesta especificació va fer tracció en el seu moment, el suport real de regions és limitat en navegadors modernos, per lo que convé considerar el seu ús com a experimental o de llegat.

Regles de decisió del navegador: forçar, evitar i prioritats

En cada punt on podria produirse una rotura (el “borde” entre elements), el navegador avalua tres propietats: el break-after de l'element anterior, el break-before del següent i el break-inside del contenedor. És la interacció de les tres la que determina el resultat.

El algoritmo, simplificado, funciona así: si alguna de las propiedades especificadas un valor forçat (always, left, right, page, column, region), aquest valor té prioritat. Si hi ha diversos forçats, gana el que està més “adelante” en el flux: break-before > break-after > break-inside.

Si en aquest punt apareix algun valor d'evitar (avoid, avoid-page, avoid-column, avoid-region), no s'aplicarà el salt corresponent. Després de resoldre els salts forçats, el navegador pot afegir “salts suaus” si ho necessiteu, però mai en límits marcats amb valors d'evitar.

Relació amb el salt de pàgina i la compatibilitat històrica

Per motius de compatibilitat, els navegadors tractan page-break-after com un àlies de break-after en mitjans paginats. Això asseguro que els llocs antics que usaven la propietat clàssica es comportin com s'esperava.

L'equivalència de valors funciona de la següent manera: auto → auto, always → page, avoid → avoid-page, left → left, right → right. A la pràctica, pots escriure ambdós per a major robustez en impressió:

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

També hi ha page-break-before amb la mateixa filosofia en el “lado anterior” de l'element. Usar abans o després depèn del punt exacte donde quieras el corte en la teva maquetació.

Àmbit d'aplicació i comportament visual

La propietat s'aplica a caixes de nivell de bloc en flux normal i, per extensions modernes, a ítems de grid, elements de flex, grupos de filas de tablas y filas de tabla. No es hereda, el seu valor inicial és auto y el seu tipus d'animació és discret (és decir, no interpola com a tal en transicions).

Quan una pàgina o columna curta una caixa, los márgenes, bordes y padding no es dibujan en el punto de corte. L'única excepció és el marge immediatament posterior a un salt forçat, que es conserva. Aquest detall ajuda a mantenir l'espai visual correcte després d'un salt inserit expressament.

Exemples pràctics dús

Impressió (TOC que sempre acaba la pàgina): si voleu que després de l'índex de continguts empiecen una pàgina nova, podeu utilitzar la següent regla dins d'un @media print. És una situació típica en llibres o informes on interessa separar clarament les seccions clau:

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

Impressió amb la pàgina dreta: en publicacions a doble cara, pot ser necessari que el següent capítol comience en una pàgina dreta. Per ello, utilitza el valor right:

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

Multicolumnas: imagina un contenedor amb títol principal que ocupa totes les columnes (column-span: all) i subseccions que volen alinear en capçalera de columna. Aplica break-after: column en el bloc anterior (per exemple, en un <p> o en cada <section>) per forçar el salt de columna:

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

Evitar salts tras filas de tabla: si quieres mantener una tabla en la misma página cuando sea posible, añade break-after: avoid en les files. En documents impresos esto reduce cortes raros en el cuerpo de una tabla:

tr {
  break-after: avoid;
}

Evitar cortes dins d'un fragment delicat en columnes: un bloc de codi al que no vol partir entre columnes pot beneficiar-se de break-after: column a l'element anterior o manejar-ho amb break-inside: avoid-column dins del propi bloc, segons el cas:

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

Regions: si treballa amb fluxos per regions (soporte limitat), podeu indicar que una llista determini una regió i que el resta fluya al següent. Encara que no és el més comú avui, sirve como referencia de cómo se pensó la propiedad en aquest context:

.region ul {
  break-after: region;
}

Adaptació condicional: si voleu que en pantalles petites el comportament vuelva a auto per evitar la fragmentació agressiva, pots donar suport a les consultes de mitjans:

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

Com es combina break-before, break-after i break-inside

Aquestes tres propietats actuen a la vegada. És habitual, per exemple, utilitzar break-inside: avoid en un component per a què no es trenca per dins, mentre que una capçalera següent declare break-before: page per arrancar en una pàgina nova. Si el “before” pide un salt, tindrà preferència sobre el “després” anterior.

La prioritat que has comentat és important: break-before guanya a break-after, que a la seva vegada guanya a break-inside. Si diversos piden romper, s'aplica l'element que apareix més tard al flux de document.

Compatibilitat i suport per al context

El suport de break-after depèn del context. En paginació/impressió, los navegadores modernos lo implementan de forma amplia, i l'àlies page-break-after manté la retrocompatibilitat dels llocs antics.

En multicolumnes, el valor column està disponible en motores moderns; sense embargo, en navegadors basats en WebKit ha coexistit el prefix -webkit-column-break-after com a alternativa no estàndard. Si apunta a un públic ampli, conviene probar i, si procedeix, inclou el prefix de respaldo per a columnes.

Per regions, el panorama és molt irregular: CSS Regions no està implantat de forma general, pel que fa als valors region y avoid-region han de considerar experimentals o de llegat.

Un apunte histórico: hubo demostraciones en las que IE10+ mostrava salts de columna amb break-after mentre que navegadors WebKit pedían el prefix -webkit-column-break-after, i Firefox s'han quedat enrere en aquest context. Hoy el suport ha millorat, pero sigue siendo una bona idea contrastar els tres entorns (impressió, columnes i regions) als navegadors objectius.

Bones pràctiques de maquetación amb break-after

• Fes-lo servir amb moderació: un “siempre salta” tras cada bloc genera espais en blanc i maquetacions poc fluides. Empléalo solo donde aporte claridad.
• Evitar amb criteri: abusar de avoid pot provocar cortes incòmodes en altres parts del document. Combínalo con break-inside quan vols protegir un components.
• Prueba en navegadors i dispositius: imprimeu un PDF, usa la vista prèvia d'impressió i prova multicolumnes. El comportament pot variar pel motor i el context.
• Consultes multimèdia amb cap: hi ha decisions de fragmentació que tenen sentit en paper però no en mòbil; ajustar amb @media quan sigui necessari.

Detalls tècnics i d'especificació

Recapitulant el model de la propietat: valor inicial auto, no heredada, valor computado “tal cual” se especifica y tipus d'animació discreta. Encara que el seu ús típic no implica animacions, aquest detall aclara que no existeix transició gradual entre els estats de corte.

En caixes dividides per un salt, els bordes, rellenos i màrgenes no es “repiten” en el punt de rotura. Conserveu el marge immediatament després d'un salt forçat, el que és útil per mantenir la separació del contingut que arranca a la nova pàgina o columna.

Patrones habituals i trucs (con context històric)

En èpoques amb suport irregular, es va popularitzar un truc: inserir un DIV buit amb   i assignar-lo page-break-before/after per forçar el salt abans o després del components real. A dia d'avui, no és la solució “bonita”, però pot rescatar maquetacions de llegat on page-break-* funciona millor que break-* en certs navegadors antics.

El truc solía escriurese així (per provocar un salt abans d'una taula): primer el DIV amb salt, després un párrafo separador i la taula, de manera que la taula apareixia al principi d'una pàgina nova a imprimir:

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

Si treballeu amb múltiples columnes en WebKit clàssic, recordeu-ho el vell -webkit-column-break-after encara pot servir com a salvavides junt al valor estàndard, per exemple:

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

Casos d´ús avançats

Paginació a doble cara: en llibres i revistes, és comú exigir que capítols arranquen siempre en páginas derechas. Per això, utilitza right. Si el contingut següent ja va anar a una dreta, no habra salt extra; si no, el navegador inserirà un addicional per al quadre.

Dissenys híbridos (páginas amb columnes dins): si estàs en una secció multicolumna situada en una pàgina impresa, el valor all pot trencar tant la columna com la pàgina, garantint que el següent bloc empiece limpio en el context superior. És un valor experimental, així que prova-ho amb mim.

Reflux ordenat de seccions: quan tinguis diverses seccions que han de començar a la capçalera de columna, aplicar break-after: column a cada secció ajuda a que queden “cuadradas” visualment, con títols alineats a dalt i sense fragments partits en posicions incómodes.

Petit recordatori d'àlies i valors equivalents

Si encara manté fulles d'estil d'impressió amb page-break-after, pots alinear-les amb el món modern així: page-break-after: always equival a break-after: page; page-break-after: avoid es mapeja a break-after: avoid-page; left y right conservan el seu significat. Això us permet actualitzar la forma progressiva.

Per a casos on el navegador no implementa completament la família break-* en un context concret, mantenir l'àlies clàssic com a "fallback" sol ser un moviment intel·ligent, sobre tot en projectes amb usuaris que imprimeixen amb navegadors molt variats.

Errors comuns i com evitar-los

Col · locar break-after: always en excés provoca pàgines o columnes semi vacías. Antes de forçar, valora si avoid o auto ja ofereixen un corte natural acceptable.

Ignorar la interacció amb break-inside és otro fallo habitual. Si un component no s'ha de dividir, afegeix break-inside: avoid (o avoid-page/avoid-column) a més de manejar el “after” o “before” en els elements adyacentes.

No probar en context real és el tercer clàssic: la vista previa de impresión no siempre es campo a com quedarà el PDF o la impressora física. Genera un PDF, revisa màrgenes i asegúrate de que els salts respecten capçaleres i pastissos.

Fitxa ràpida de la propietat

• inicial: auto
• S'aplica a: caixes de bloc, ítems de grid, ítems de flex, grups de filas de taula i filas
• Heredada: no
• Valor calculat: tal com s'especifica
• Tipus d'animació: Discret

Per últim, recordeu alguns valors (all, recto, verso) segueixen marcats com a experimentals en els borradors d'especificació. Encara que hi hagi implementacions parcials, la teva estratègia ha d'incloure proves i "fallbacks" quan depèn d'ells.

dominar break-after et permet maquetar documents que s'imprimeixen bé, columnes ordenades i fluxos de lectura clars. A poc que lo combines con break-before y break-inside i tinguis en compte els àlies històrics i els prefixos de respaldo, obtendrás cortes precises y previsibles sin pelearte amb pàgines en blanc ni blocs partits on no toca.