Proprietà CSS breakafter: guida completa, usi e supporto

Casa » Python » Proprietà CSS breakafter: guida completa, usi e supporto

Quando si utilizzano maschere per la stampa, colonne multiple o flussi frammentati, è necessario attendere o ritardare le domande su come forzare o evitare che qualcosa salti nella pagina successiva della colonna. Ecco dove entri nel gioco la propiedad CSS break-after, un attrezzo che indica al navigatore se deve produrre un salto giusto dopo un elemento.

Oltre ai tipici casi di stampa, break-after è utile in progetti complessi: periodici digitali con colonne, informazioni in PDF, documenti con pagine diverse e impareggiabili e tutti i flussi di regione. La sua potenza è radicale in quanto può forzare, permettere o impedire i salti secondo il contesto: pagine aziendali, colonne o regioni.

Che cosa è la proprietà CSS breakafter

La proprietà break-after definire se è necessario produrre un salto di pagina, colonna o regione immediatamente dopo l'elemento a cui si applica. Dicho de forma llana, contrassegnare un punto di taglio appena oltre il componente, in modo che il contenuto posteriore venga inserito nella successiva “unità” di frammentazione (pagina, colonna o regione) secondo l'ambiente in cui si sta mascherando il navigatore.

Storicamente, nei CSS 2.1 disponiamo di page-break-after para medios paginados. Hoy, break-after amplia questo concetto per funzionare anche con più colonne e regioni, è inoltre necessario mantenere la compatibilità con i valori classici utilizzati in stampa.

Sintassi, valori e come interpretarli

La forma base di utilizzo è diretta: break-after: <valor>. Questi valori contengono contesti generici e specifici di pagine, colonne o regioni:

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

Valori generici (validi in qualsiasi contesto): auto (ni forza, non proibisco un salto), avoid (intenta evitarlo), always (forza un salto nel contesto di frammentazione immediata) y all (sperimentale, fuerza el salto atravesando todos los contextos de frammentación: por ejemplo, columna y página a la vez si aplica).

Valori per i mezzi paginati: avoid-page (evita salto de página), page (fuerza salto de página), left y right (forzare uno o due salti per assicurarsi che il successivo contenuto inizi nella pagina interrotta o derecha, rispettivamente). Además, recto y verso sono valori sperimentali que obbligare a que la prossima pagina sia recto o verso según el flujo del idioma.

Valori per il design multicolonna: avoid-column evita un salto de columna y column lo forza. In contenuti estesi ripartiti per varie colonne, estos valores son clave para no cortar piezas delicadas (come un frammento di codice) o per allineare i blocchi alla testa della colonna successiva.

Valores para regiones: avoid-region y region controlla il salto tra le aree definite da CSS Regions. Anche se questa specifica è la tua trazione al momento, il supporto reale delle regioni è limitato nei navigatori moderni, perché conviene considerarne l'uso come sperimentale o storico.

Regole di decisione del navigatore: forzare, evitare e priorità

In ogni punto in cui potrebbe produrre una rotonda (il “bordo” tra gli elementi), il navigatore valuta tre proprietà: break-after del elemento anteriore, la break-before del siguiente y el break-inside del contenitore. È l'interazione tra gli tre a determinare il risultato.

L'algoritmo semplificato funziona così: se alcune di quelle proprietà sono specifiche valor forzado (always, left, right, page, column, region), questo valore ha la priorità. Si hanno vari forzati, gana el que está más “adelante” en el flujo: break-before > break-after > break-inside.

Se in questo punto appare qualcosa valor de evitar (avoid, avoid-page, avoid-column, avoid-region), non verrà applicato il salto corrispondente. Dopo aver risolto i salti forzati, il navigatore può aggiungere “saltos suaves” se necessario, ma mai nei limiti contrassegnati con valori da evitare.

Rapporto con interruzione di pagina e compatibilità storica

Per motivi di compatibilità, los navegadores tratan page-break-after como un alias de break-after in medios paginados. Questo assicura che i siti antichi che utilizzano la proprietà classica si comportano come se speravano.

L'equivalenza dei valori funziona nel modo seguente: auto → auto, always → page, avoid → avoid-page, left → left, right → right. In pratica, puedes escribir ambos para mayor robustez en impression:

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

Vi è anche page-break-before con la stessa filosofia nel “lado anteriore” dell'elemento. Usar prima o dopo dipende dal punto esatto dove quieras el corte en tu maquetación.

Ambito di applicazione e comportamento visivo

La propiedad se aplica a cajas de nivel de bloque nel flusso normale e, per estensioni moderne, a ítems de grid, elementi di flex, gruppi di file di tabelle e file di tabelle. No se hereda, su valor inicial es auto y il suo tipo di animazione è discreto (es decir, no interpola como tal en transiciones).

Quando una pagina o una colonna corta una scatola, los márgenes, bordi e imbottitura non si dibujan nel punto di corte. L'unica eccezione è il margine immediatamente posteriore a un salto forzato, che si conserva. Questo dettaglio aiuta a mantenere lo spazio visivo corretto dopo un salto inserito espressamente.

Esempi pratici di utilizzo

Impressione (TOC che chiude sempre la pagina): se vuoi che dopo l'indice dei contenuti componi una nuova pagina, puoi utilizzare la seguente regola all'interno di una @media print. È una situazione tipica nei libri o nelle informazioni ovunque interesa separar chiaramente sezioni clave:

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

Stampa con pagina destra: nelle pubblicazioni a doppia pagina, potrebbe essere necessario che il prossimo capitolo inizi su una pagina destra. Paraello, utiliza el valor right:

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

Multicolonne: immagina un contenitore con il titolo principale che occupa tutte le colonne (column-span: all) e sottosezioni che vuoi allineare nella testa della colonna. Applicazione break-after: column en el bloque previo (per esempio, in un <p> o en cada <section>) per forzare il salto della colonna:

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

Evitare di saltare tra le file della tabella: se vuoi mantenere una tabella nella stessa pagina quando è possibile, aggiungi break-after: avoid nelle file. Nei documenti stampati questo riduce i casi rari nel corpo di una tabella:

tr {
  break-after: avoid;
}

Evita di corteggiare all'interno di un delicato frammento di colonne: un blocco di codice al quale non vuoi partir tra le colonne puoi trarne vantaggio break-after: column nell'elemento anteriore o manejarlo con break-inside: avoid-column all'interno del proprio blocco, secondo il caso:

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

Regioni: se si lavora con flussi per regioni (supporto limitato), è possibile indicare che un elenco termina una regione e che il resto scorre nel successivo. Anche se non è lo più comune oggi, sirve como referencia de como se pensó la propiedad en ese contexto:

.region ul {
  break-after: region;
}

Adattamento condizionale: se desideri che sui pantaloni piccoli il comportamento venga visualizzato auto per evitare la frammentazione aggressiva, puoi apoyarte en media query:

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

Come combinare break-before, break-after e break-inside

Estas tres propiedades actúan a la vez. È abituale, ad esempio, usarlo break-inside: avoid en un componente para que no se rompa por dentro, mentre dichiari una cabecera successiva break-before: page per arrancar su una nuova pagina. Si el “prima” pide un salto, tenderà a preferire il “dopo” precedente.

La priorità già commentata è importante: break-before gana a break-after, que a su vez gana a break-inside. Se vari piden romper, si applica l'elemento che appare più tardi nel flusso del documento.

Compatibilità e supporto per contesto

Il supporto break-after dipende dal contesto. In impaginazione/stampa, los navegadores modernos lo implementan de forma amplia, e l'alias page-break-after mantiene la retrocompatibilità dei siti antichi.

En multicolumnas, el valor column è disponibile in motori moderni; tuttavia, nei navigatori basati su WebKit ha coesistito il prefijo -webkit-column-break-after come alternativa non standard. Se si punta a un pubblico ampio, conviene provare e, si procede, includere il prefijo di risposta per colonne.

Per le regioni il panorama è molto irregolare: Le regioni CSS non sono state impiantate in forma generale, por lo que los valores region y avoid-region deben considerarse sperimentale o de legato.

Un punto storico: hubo dimostraciones en las que IE10+ mostra i salti della colonna con break-after mentre i navigatori WebKit digitano il prefisso -webkit-column-break-after, e Firefox verrà visualizzato in questo contesto. Hoy el soporte has mejorado, pero sigue siendo buena idea contrastar los tres entornos (impresión, Columnas y regiones) en los navegadores objetivo.

Buone pratiche di lavorazione con break-after

• Usalo con moderazione: un “siempre salta” tras cada bloque genera espacios en blanco y maquetaciones poco fluidas. Empléalo solo donde aporte claridad.
• Evitar con criterio: abusare di avoid può provocare scomodi in altre parti del documento. Combinalo con break-inside quando vuoi proteggere un componente.
• Test su navigatori e dispositivi: stampare un PDF, utilizzare la vista precedente della stampa e testare più colonne. Il comportamento può variare a seconda del motore e del contesto.
• Media queries con cabeza: ci sono decisioni di frammentazione che non sentiamo sulla carta ma non sul cellulare; aggiusta con @media quando necessario

Dettagli tecnici e specifiche

Ricapitolando il modello di proprietà: valore iniziale auto, no heredada, valor computado “tal cual” se especifica y tipo de animación discreto. Anche se il suo uso tipico non implica animazioni, questi dettagli chiariscono che non esiste una transizione graduale tra gli stati di corte.

En cajas divididas por un salto, los bordes, rellenos y márgenes no se “repiten” en el point de rotura. Conservare il margine immediatamente dopo un salto forzato, ciò è utile per mantenere la separazione del contenuto che si trova nella nuova pagina o colonna.

Patroni abituali e trucos (con contesto storico)

In epoche con supporto irregolare, si diffuse un trucco: inserirne uno DIV vacío con   y asignarle page-break-before/after per forzare il salto prima o dopo il componente reale. Il giorno di oggi non è la soluzione “buona”, ma puoi recuperare i trucchi di legado dove page-break-* funciona mejor que 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>

Se lavori con più colonne nel WebKit classico, ricordalo il vecchio -webkit-column-break-after puoi anche servire come salvavita insieme al valore standard, ad esempio:

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

Casi d'uso avanzati

Paginazione a doppia cara: in libri e recensioni, è comune esigir que i capitoli sono sempre disposti nelle pagine derecha. Per fare questo, usa right. Se il contenuto successivo è già caduto in una destra, non habrá salto extra; in caso contrario, il navigatore ne inserirà uno aggiuntivo per cuadrarlo.

Disegni ibridi (pagine con colonne all'interno): se sei in una sezione a più colonne situata in una pagina stampata, il valore all può rompere sia la colonna che la pagina, garantendo che il blocco successivo sia pulito nel contesto superiore. È un valore sperimentale, ecco pruébalo con mimo.

Reflusso ordinato di sezioni: quando hai varie sezioni che devono iniziare in testa alla colonna, applicare break-after: column a cada sección ayuda a queden “cuadradas” visivamente, con títulos alineados arriba e senza frammenti di parti in posizioni scomode.

Piccolo registratore di alias e valori equivalenti

Si mantiene oggi lo stile di stampa con page-break-after, puoi allinearti con il mondo moderno così: page-break-after: always è uguale a break-after: page; page-break-after: avoid se mapea a break-after: avoid-page; left y right conservare il suo significato. Questo ti permette di attualizzare la forma progressiva.

Per i casi in cui il navigatore non implementa completamente la famiglia break-* en un contexto concreto, mantenere l'alias classico come “fallback” suele è un movimento intelligente, sopra tutti i progetti con utenti che imprimen con navigatori molto vari.

Errori comuni e come evitarli

posto break-after: always in eccesso provoca pagine o colonne semi vuote. Prima di forzare, valora si avoid o auto ya ofrecen un corte natural aceptable.

Ignorar la interacción con break-inside es otro fallo abituale. Se un componente non deve dividersi, aggiunge break-inside: avoid (o avoid-page/avoid-column) inoltre maneggiare il “dopo” o il “prima” negli elementi adiacenti.

Non provare in un contesto reale è il terzo classico: la vista precedente alla stampa non è sempre sul campo come sarà archiviato il PDF o la stampante fisica. Genera un PDF, rivedi i margini e assicurati che i salti rispettino capolavori e torte.

Ficha rápida de la propiedad

• Iniziale: auto
• Vedere un'applicazione: contenitori di blocco, elementi della griglia, elementi flessibili, gruppi di fili di tabella e fili
• Ereditato: no
• Valore computato: tal cual se especifica
• Tipo di animazione: distinto

Infine, ricorda che alcuni valori (all, recto, verso) siguen marcados como sperimentales en los borradores de especificación. Anche se esistono implementazioni parziali, la tua strategia deve includere prove e “fallback” cuando dependas de ellos.

Dominare break-after ti consente di creare documenti stampati bene, colonne ordinate e flussi di lettura chiari. A poco que lo combina con break-before y break-inside e tengas en cuenta los alias históricos y los prefijos de respaldo, otterrai cortes precisi e previsibili sin pelearte con páginas en blanco ni bloques partidos donde no toca.