Proprietatea CSS break-after: ghid complete, uses and support

Acasă » Piton » Proprietatea CSS break-after: ghid complete, uses and support

Când maquetas pentru imprimare, mai multe coloane sau fluxuri fragmentate, târziu sau temprano vă întrebări despre cum să forțați sau să evitați că algo să salte la următoarea pagină sau coloană. Ahí es donde entra en joc proprietatea CSS break-after, o unealtă care indică navigatorul și trebuie să producă un salt după un element.

Mai multe cazuri tipice de imprimare, break-after este utilă în designuri complexe: periódicos digitales cu coloane, rapoarte în PDF, documente cu pagini parți și împărțiți și până la fluxuri de regiuni. Su potența radică în care poate forza, permite sau împiedica salturile según el context: páginas impresas, columns o regiones.

Ce este la proprietate CSS break-after

Proprietatea break-after definești dacă trebuie să producă un salt de pagină, coloană sau regiune imediat după elementul care se aplică. Dicho de forma llana, marca un punct de corte justo tras el componente, de modo că el conținut posterior empiece în la următoare “unidad” de fragmentación (pagina, columna o regiune) în funcție de mediul în care este maquetând browserul.

Istoric, în CSS 2.1 dispunem de page-break-after pentru pagini medii. Astăzi, break-after amplia ese concept pentru a funcționa și cu mai multe coloane și regiuni, în plus pentru a menține compatibilitatea cu valorile clasice utilizate în imprimare.

Sintaxis, valori și cum interpretarlos

La forma básica de utilizare este directa: break-after: <valor>. Aceste valori cubren contexte generice și specifice ale paginilor, coloanelor sau regiunilor:

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

Valori generice (valide în orice context): auto (ni fuerza ni prohíbe un salto), avoid (încercarea de a evita), always (fuerza un salt în contextul fragmentării imediate) y all (experimental, fuerza el salto atravesando toate contexturile de fragmentare: de exemplu, columna și pagina la o dată în care se aplică).

Valori pentru medii paginate: avoid-page (evită să sari de pe pagină), page (forță de salt de pagină), left y right (fuerzan uno sau dos salts pentru a asigura că el următorul conținut începe în pagina stânga sau dreapta, respectiv). În plus, recto y verso son valores experimentales que obliga a que la siguiente pagina sea recto sau verso conform fluxului limbii.

Valori pentru design multicoloană: avoid-column evită o săritură de coloană și column lo fuerza. În conținuturi extinse repartizate pe mai multe coloane, estos valores son clave para nu cortar piese delicate (como un fragment de código) sau para alinear bloques a la cabecera de la siguiente columna.

Valori pentru regiuni: avoid-region y region controlați saltul între zonele definite de CSS Regions. Cu toate că această specificație tuvo tracțiune în acest moment, el suport real de regions este limitat en navegadores modernos, por lo que conviene să considere su utiliz ca experimental o de legado.

Reglas de decizie del browser: forzar, evitar y priorities

În fiecare punct unde ar putea produce o rotură (el „borde” între elemente), el browser evaluează trei proprietăți: el break-after elementul anterior, break-before al următorului și al celui următor break-inside del contenedor. Este la interacțiunea celor trei la care determina rezultatul.

El algoritmo, simplificado, funcționează așa: și vreo proprietăți specificate un curaj forțat (always, left, right, page, column, region), ese valor tiene prioritate. Și există mai multe forțe, gana el que está más „adelante” în el flux: break-before > break-after > break-inside.

Si în ese punct apare vreunul curajul de a evita (avoid, avoid-page, avoid-column, avoid-region), nu se aplica el salt correspondiente. După rezolvarea saltărilor forțate, browserul poate adăuga „salts suaves” dacă aveți nevoie, pero nunca en límites marcados con values ​​de evitar.

Relația cu pagina-break-after și compatibilitatea istorică

Por motivos de compatibilidad, los navegadores tratan page-break-after ca un alias de break-after en medios paginados. Asigur că site-urile vechi care folosesc proprietatea clasică se comportă ca să se aștepte.

Echivalența valorilor funcționează în următoarea manieră: auto → auto, always → page, avoid → avoid-page, left → left, right → right. In practica, puteți scrie ambii pentru mayor robustez în impresie:

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

Există, de asemenea, page-break-before con la misma filosofía în el “lado anterior” del element. Utilizați înainte sau după depende del punto exacto donde quieras el corte pe machetarea ta.

Ambitu de aplicare și comportament vizual

Proprietatea se aplică la cutii cu nivel de bloc en flujo normal y, por extensiones modernes, a ítems de grid, articole din flex, grupos de filas de tablas y filas de tabla. No se hereda, su valor inicial es auto y su tipo de animación este discret (es decir, no interpola como tal en transiciones).

Când o pagină sau o coloană scurtă într-o cutie, los márgenes, bordes y padding no se dibujan en el punto de corte. La única excepție este marginea imediat posterior a unui salt forțat, care se conservă. Acest detaliu ajută la menținerea spațiului vizual corect după un salt inserat în mod expres.

Exemple practice de utilizare

Impresión (TOC care siempre termina la pagina): dacă vrei să după ce indexul conținutului adaugă o pagină nouă, poți folosi următoarea regulă într-o pagină @media print. Este o situație tipică în cărți sau rapoarte unde interesa să se separe clar secțiunile clave:

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

Impresión cu pagina dreapta: în publicaciones a doua cara, poate fi necesar ca următorul capitol comience într-o pagină dreapta. Bună ziua, folosește valoarea right:

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

Multicolumnas: imagina un contenedor cu titlu principal care ocupa toate coloanele (column-span: all) y subsecciones que quieres alinear en cabecera de columna. Aplica break-after: column în blocul anterior (de exemplu, într-un <p> în fiecare <section>) para forzar 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 */
}

Evitați săriți tras filas de tabla: și doriți să mențineți o tabla în această pagină când sea posible, añade break-after: avoid în filele. În documente impresos esto reduce cortes rares in el cuerpo de una tabla:

tr {
  break-after: avoid;
}

Evitați cortesele dintr-un fragment delicat în coloane: un bloc de cod al că nu vrea să plece între coloane poate beneficia de break-after: column în elementul anterior a-l manevra cu break-inside: avoid-column dentro del propio bloc, după caz:

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

Regiuni: dacă lucrează cu fluxuri de regiuni (suportate limitate), poți să indicați că o listă va avea loc într-o regiune și pe care să-l reacționeze în următoarea. Deși nu este mai comun astăzi, sirve como referencia de cómo se pensó la proprietate în acest context:

.region ul {
  break-after: region;
}

Adaptación condicional: si deseas que en pantallas smalls el comportament vuelva a auto pentru a evita fragmentarea agresivă, poți sprijini interogările media:

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

Cum se combina break-before, break-after y break-inside

Aceste proprietăți acționează la o dată. Este obișnuit, de exemplu, utiliza break-inside: avoid într-o componentă pentru care nu se zbate înăuntru, în timp ce o capete următoare declare break-before: page pentru a aranja într-o pagină nouă. Si el “before” pide un salt, va avea preferință asupra „după” anterior.

Prioritatea pe care o comentați este importantă: break-before câștigă a break-after, pe care o câștigă de fiecare dată break-inside. Si varios piden romper, se aplica elementul care apare mai tarziu in fluxul documentului.

Compatibilitate și suport pentru context

Sprijinul break-after depinde de context. În paginație/imprimare, los navegadores modernos lo implementan de forma amplia, și aliasul page-break-after menține retrocompatibilitatea site-urilor vechi.

Pe mai multe coloane, valoarea column este disponibil în motoare moderne; fără embargo, în navigatorii bazați în WebKit a coexistido cu prefijo -webkit-column-break-after ca alternativă nu standard. Si apuntas a un public amplio, conviene probar y, si procede, include el prefijo de respaldo pentru coloane.

Pentru regiuni, panorama este foarte neregulată: CSS Regions nu este implementat de forma generală, pentru ceea ce valorile region y avoid-region deben considerarse experimentales o de legado.

Un apunte histórico: hubo demostraciones en las que IE10+ arată salturi de coloană cu break-after în timp ce navigatorii WebKit pedían el prefijo -webkit-column-break-after, și Firefox a rămas în urmă în acest context. Hoy el suport a improved, pero sigue siendo o bună idee contrastar celor trei medii (imprimare, coloane și regiuni) în obiectivele navigatorilor.

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

• Folosește-l cu moderație: un „siempre salta” tras cada bloc genera spații în blanco și maquetaciones poco fluidas. Empléalo solo donde aporte claridad.
• Evitați îndeplinirea criteriilor: abuz de avoid poate provoca cortes incómodos en otras partes del document. Combínalo con break-inside când vrei să protejezi un componente.
• Pruebas en browseres and devices: imprime a PDF, usa la vista previa de imprimare si testea multicolumnas. Comportamentul poate varia prin motor și context.
• Interogări media cu capul: hay decisiones de fragmentación que tienen sentido en papel pero no en mobil; ajusta con @media când este necesar.

Detalii tehnice și de specificație

Recapitulando modelul proprietății: valoarea inițială auto, no heredada, valor computado “tal cual” se specifica y tip de animație discretă. Deși este tipicul utilizării nu implică animații, este detaliat că nu există tranziție graduală între statele corte.

În cajas divididas por un salto, los bordes, rellenos y márgenes no se „repiten” în el punto de rotura. Se conserva el margen imediat după un salt forzat, ceea ce este util pentru a menține separarea conținutului pe care îl aranjează în noua pagină sau coloană.

Patrones habituales y trucos (con context histórico)

En épocas con soporte irregular, se popularizó un truco: insertar un DIV vid cu   și atribuiți-o page-break-before/after para forzar el salt antes sau după del componente real. A day de hoy, no es la soluție „bonita”, pero poate salva maquetaciones de legado donde page-break-* funcționează mai bine decât break-* en ciertos navegadores antiguos.

El truco solía escribirse así (para provocar un salt înainte de una tabla): primero el DIV cu salto, apoi un párrafo separador și la tabla, de modo că tabla apareciera la principiu de o pagină nouă în imprimare:

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

Si lucrează cu mai multe coloane în WebKit clasic, recuerda que bătrânii -webkit-column-break-after poate servi ca salvavi împreună cu valoarea standard, de exemplu:

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

Cazuri de utilizare avansate

Paginación a doble cara: en libros y revistas, es común exigir que capítulos arranquen siempre en páginas derechas. Pentru a face acest lucru, utilizați right. Si el contenido siguiente ya caía en una derecha, no habrá salto extra; si nu, el navegador insertará uno adicional para cuadrarlo.

Diseños híbridos (páginas con columnas dentro): si este intr-o sectiune multicolumna situata intr-o pagina impresa, el valor all poate rupe atât la coloana ca pagina, garantând următoarea blocare a limbii în context superior. Este un valor experimental, așa că am încercat cu mimică.

Refluxul ordonat de secțiuni: când are mai multe secțiuni care trebuie să înceapă într-o coloană, aplica break-after: column fiecare secțiune ayuda a queden „cuadradas” vizual, con titluri aliniate sus y sin fragmentos partidos en posiciones incómodas.

Pequeño recordatorio de alias și valori echivalente

Și încă păstrează foile de stil de imprimare cu page-break-after, poți alinia cu el mundo moderno așa: page-break-after: always egal break-after: page; page-break-after: avoid se mapea a break-after: avoid-page; left y right conservan su significado. Esto vă permite actualizarea formei progresive.

Pentru cazuri unde el navegador nu implementează complet familia break-* într-un context concret, menține alias clasic ca „fallback” Suele ser un mișcare inteligent, despre toate proiectele cu utilizatorii care imprimă cu navigatori foarte variați.

Greșeli frecvente și cum să le evitați

loc break-after: always în exces provoca pagini sau coloane semi vacías. Antes de forzar, valora si avoid o auto ya oferă un corte natural acceptable.

Ignorați interacțiunea cu break-inside este otro fallo habitual. Dacă o componentă nu trebuie divizată, adaugă break-inside: avoid (o avoid-page/avoid-column) además de manejar el „după” sau „înainte” în elementele adyacentes.

Nu proba în context real este al treilea clasic: la vista previa de impresión no siempre es fiel a cum va fi PDF sau imprimanta fizică. Genera un PDF, revisa márgenes și asegúrate de que los salts respetan cabeceras și pies.

Închidere rapidă a proprietății

• Iniţială: auto
• Se aplică la: casete de bloc, ítems de grid, ítems de flex, grupos de filas de tabla și filas
• Mostenit: Nu.
• Valoare calculată: ce anume se specifică
• Tip de animație: discret

În ultimul rând, amintiți-vă că unele valori (all, recto, verso) siguen marcados como experimentales en los borradores de especificación. Deși există implementări parțiale, ta strategie trebuie să includă probe și „fallbacks” când depinde de ei.

A domina break-after vă permiteți documentele care se imprimă bine, coloane ordonate și fluxuri de lectură clară. A poco que lo combines con break-before y break-inside y tengas en cuenta los alias históricos și los prefijos de respaldo, obtendrás cortes precisos y previsibles sin pelearte con páginas en blanco ni blocs partidos donde no toca.