Propriedade CSS break-after: guia completo, usos e suporte

Início » Python » Propriedade CSS break-after: guia completo, usos e suporte

Quando maquetas para impressão, multicolunas ou fluxos fragmentados, tarde ou temprano você tem perguntas como forçar ou evitar que algo salte para a próxima página ou coluna. Ahí é onde entra no jogo a propriedade CSS break-after, uma ferramenta que indica ao navegador que você deve produzir um salto logo após um elemento.

Além dos casos típicos de impressão, o break-after é útil em projetos complexos: jornais digitais com colunas, relatórios em PDF, documentos com páginas pares e impares e até fluxos por regiões. Sua potência radical que pode forçar, permitir ou impedir saltos segundo o contexto: páginas impressas, colunas ou regiões.

O que é a propriedade CSS break-after

A propriedade break-after defina se você deve produzir um salto de página, coluna ou região imediatamente após o elemento ao qual se aplica. Dicho de forma llana, marcar um ponto de corte justo atrás do componente, de modo que o conteúdo posterior começa na próxima “unidade” de fragmentação (página, coluna ou região) dependendo do ambiente onde ele está marcando o navegador.

Historicamente, em CSS 2.1 estávamos disponíveis page-break-after para mídias paginadas. Hoje, break-after amplia esse conceito para operar também com multicolunas e regiões, além de manter a compatibilidade com os valores clássicos usados ​​na impressão.

Sintaxe, valores e como interpretá-los

A forma básica de uso é direta: break-after: <valor>. Estes valores abrangem contextos genéricos e específicos de páginas, colunas ou regiões:

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

Valores genéricos (válidos em qualquer contexto): auto (ni forza ni prohíbe un salto), avoid (intenta evitarlo), always (força um salto no contexto de fragmentação imediata) e all (experimental, força o salto atravessando todos os contextos de fragmentação: por exemplo, coluna e página à medida que se aplica).

Valores para mídias paginadas: avoid-page (evita salto de página), page (fuerza salto de página), left y right (fuerzan um ou dois saltos para garantir que o próximo conteúdo comece na página esquerda ou direita, respectivamente). Además, recto y verso são valores experimentais que obrigue a que a próxima página esteja na frente ou no verso según el flujo del idioma.

Valores para design multicoluna: avoid-column evita un salto de columna y column ei força. En contenidos extensos repartidos por diversas colunas, esses valores são clave para não cortar peças delicadas (como um fragmento de código) ou para blocos lineares na cabeça da coluna seguinte.

Valores para regiões: avoid-region y region controla o salto entre áreas definidas pelas regiões CSS. Embora esta especificação seja sua tração no momento, o suporte real das regiões é limitado em navegadores modernos, para que você possa considerar seu uso como experimental ou de legado.

Regras de decisão do navegador: forçar, evitar e prioridades

Em cada ponto onde você pode produzir uma rotação (a “borda” entre elementos), o navegador avalia três propriedades: o break-after do grupo anterior, o break-before del siguiente y el break-inside del contenedor. É a interação entre os três que determina o resultado.

O algoritmo, simplificado, funciona assim: se alguma dessas propriedades especifica um valor forzado (always, left, right, page, column, region), esse valor tem prioridade. Se houver vários forzados, Gana o que está mais “adelante” no fluxo: break-before > break-after > break-inside.

Se esse ponto aparecer alguma coisa valor de evitar (avoid, avoid-page, avoid-column, avoid-region), o salto correspondente não será aplicado. Depois de resolver os saltos forçados, o navegador pode adicionar “saltos suaves” se necessário, mas nunca em limites marcados com valores a serem evitados.

Relação com quebra de página e compatibilidade histórica

Por motivos de compatibilidade, os navegadores tratam page-break-after como um alias de break-after em meios paginados. Isso garante que locais antigos que usam a propriedade clássica sigam comportándose como se esperaba.

A equivalência de valores funciona da seguinte maneira: auto → auto, always → page, avoid → avoid-page, left → left, right → right. Na prática, posso escrever ambos para mayor robustez en impressionión:

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

Há também page-break-before com a mesma filosofia no “lado anterior” do elemento. Usar antes ou depois depende do ponto exato onde você deseja o corte en tu maquetación.

Ámbito de aplicação e comportamento visual

La propiedad se aplica a cajas de nivel de bloque no fluxo normal e, por extensões modernas, a itens de grid, itens de flex, grupos de filas de tablas e filas de tabla. Não se herda, seu valor inicial é auto y seu tipo de animação é discreto (é dito, não há interpolação como tal nas transições).

Quando uma página ou coluna corta uma caixa, los márgenes, bordas e preenchimento não são dibujan no ponto de corte. A única exceção é a margem imediatamente posterior a um salto forçado, que é mantido. Este detalhe ajuda a manter o espaço visual correto após um salto inserido expressamente.

Exemplos práticos de uso

Impressão (TOC que sempre termina a página): se você quiser depois do índice de conteúdo entrar em uma nova página, você pode usar o seguinte regulamento dentro de um @media print. É uma situação típica em livros ou relatórios onde interesse separar claramente seções clave:

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

Impressão na página direita: em publicações duplas, pode ser necessário que o próximo capítulo comece em uma página direita. Para ele, utiliza el valor right:

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

Multicolunas: imagine um conteúdo com título principal que ocupa todas as colunas (column-span: all) e subseções que desejam ser lineares na cabeça da coluna. Aplicativo break-after: column en el blo previo (por exemplo, em um <p> ou em cada <section>) para forçar o salto da coluna:

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

Evitar saltos entre as filas da mesa: se você quiser manter uma mesa na mesma página quando for possível, añade break-after: avoid nas fileiras. Em documentos impressos estão reduzindo cortes raros no corpo de uma tabela:

tr {
  break-after: avoid;
}

Evite cortes dentro de um fragmento delicado em colunas: um bloco de código que não deseja partir entre colunas pode se beneficiar de break-after: column no elemento anterior o manejarlo con break-inside: avoid-column dentro do próprio bloco, conforme o caso:

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

Regiões: se você trabalha com fluxos por regiões (soporte limitado), pode indicar que uma lista encerra uma região e que o resto flui na próxima. Embora não seja o mais comum hoje, Sirve como referência de como se pensa a propriedade nesse contexto:

.region ul {
  break-after: region;
}

Adaptação condicional: se você deseja que as telas pequenas apresentem o comportamento necessário para auto para evitar fragmentação agressiva, você pode se apoiar em consultas de mídia:

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

Como se combina break-before, break-after e break-inside

Estas três propriedades actuam à vez. É habitual, por exemplo, usar break-inside: avoid em um componente para que não se rompa por dentro, enquanto uma cabeça seguinte declara break-before: page para arrancar em uma nova página. Se o “antes” for um salto, tenderá a preferir o “depois” anterior.

A prioridade que você comentou é importante: break-before gana a break-after, que a su vez gana a break-inside. Se houver várias interrupções, o elemento que aparece mais tarde no fluxo do documento será aplicado.

Compatibilidade e suporte por contexto

O apoio de break-after depende do contexto. Na paginação/impressão, os navegadores modernos implementam de forma ampliada, e o alias page-break-after mantenha a retrocompatibilidade de locais antigos.

Em multicolumnas, o valor column está disponível em motores modernos; no entanto, em navegadores baseados em WebKit coexistiram o prefijo -webkit-column-break-after como alternativa não padrão. Se você se candidatar a um público amplo, conviene probar y, se proceder, inclua o prefijo de respaldo para colunas.

Para regiões, o panorama é muito irregular: Regiões CSS não estão implantadas de forma geral, por lo que los valores region y avoid-region deben considerar experimentales o legado.

Un apunte histórico: hubo demonstrações en las que IE10+ mostra saltos de coluna com break-after enquanto os navegadores WebKit pedem o prefijo -webkit-column-break-after, e o Firefox ficou para trás nesse contexto. Hoje o suporte foi melhorado, mas ainda assim é uma boa ideia comparar os três ambientes (impressão, colunas e regiões) nos navegadores alvo.

Boas práticas de maquiagem com break-after

• Use com moderação: un “siempre salta” atrás de cada bloco gerando espaços em branco e maquetaciones poco fluidas. Empléalo solo onde aporte clareza.
• Evitar con criterio: abusar de avoid pode provocar cortes inconvenientes em outras partes do documento. Combinado com break-inside quando você quiser proteger um componente.
• Testes em navegadores e dispositivos: imprima um PDF, use a vista anterior de impressão e teste multicolunas. O comportamento pode variar de acordo com o motor e o contexto.
• Media queries con cabeza: há decisões de fragmentação que fazem sentido no papel, mas não no celular; ajuste com @media quando for necessário.

Detalhes técnicos e especificações

Recapitulando o modelo de propriedade: valor inicial auto, não herdado, valor computado “tal qual” se especifica y tipo de animação discreta. Embora seu uso típico não implique animações, é claro que não existe transição gradual entre estados de corte.

Em caixas divididas por um salto, as bordas, rellenos e margens não se “repitam” no ponto de rotação. Se a margem for preservada imediatamente após um salto forçado, isso é útil para manter a separação do conteúdo que você inicia na nova página ou coluna.

Patrones habituais e trucos (con contexto histórico)

Em épocas com suporte irregular, um truque foi popularizado: inserir um DIV vacío con   e atribuir page-break-before/after para forçar o salto antes ou depois do componente real. No dia de hoje, não é a solução “bonita”, mas você pode resgatar maquetes de legado onde quer que esteja page-break-* funciona melhor que break-* em certos navegadores antigos.

O truque só foi escrito assim (para provocar um salto antes de uma mesa): primeiro o DIV com salto, depois um párrafo separador e a tabela, de modo que a tabela aparece no início de uma nova página ao imprimir:

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

Se você trabalha com multicolunas no WebKit clássico, lembre-se de que o velho -webkit-column-break-after Ainda podemos servir como salvavidas junto com o valor padrão, por exemplo:

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

Casos de uso avançados

Paginação em dupla face: em livros e revistas, é comum que capítulos iniciam sempre nas páginas derechas. Para fazer isso, use right. Se o conteúdo seguinte cair em uma direita, não haverá salto extra; se não, o navegador inserirá um adicional para quadrar isso.

Projetos híbridos (páginas com colunas dentro): se você estiver em uma seção multicoluna situada em uma página impressa, o valor all você pode romper tanto a coluna quanto a página, garantindo que o bloco seguinte fique limpo no contexto superior. É um valor experimental, então pruébalo con mimo.

Ajuste ordenado de seções: quando você tiver várias seções que devem começar na cabeça da coluna, aplicar break-after: column a cada seção ajuda a que queden “quadradas” visualmente, com títulos alineados arriba e sem fragmentos partidos em posições incômodas.

Pequeno registro de alias e valores equivalentes

Se você sempre mantiver hojas de estilo de impressão com page-break-after, podem ser lineares com o mundo moderno assim: page-break-after: always equivalente a break-after: page; page-break-after: avoid se mapea a break-after: avoid-page; left y right conserva seu significado. Isso permite atualizar a forma progressiva.

Para casos onde o navegador não implementa completamente a família break-* em um contexto concreto, manter o apelido clássico como “fallback” suele é um movimento inteligente, sobre tudo em projetos com usuários que imprimem em navegadores muito variados.

Erros comuns e como evitá-los

Place break-after: always em excesso provoca páginas ou colunas semi-vazias. Antes de forzar, valora si avoid o auto você oferece um corte natural aceitável.

Ignorar a interação com break-inside é outra falha habitual. Se um componente não deve ser dividido, adicionar break-inside: avoid (o avoid-page/avoid-column) além de gerenciar o “depois” ou “antes” nos elementos adjacentes.

Nenhuma probabilidade em contexto real é o terceiro clássico: a vista prévia da impressão nem sempre é fiel a cómo cairá o PDF ou a impressora física. Gere um PDF, revise as margens e certifique-se de que os saltos respeitem cabeças e tortas.

Ficha rápida de la propiedad

• Inicial: auto
• Aplica-se a: caixas de bloco, itens de grade, itens flexíveis, grupos de filas de tabela e filas
• Herdado: não
• Valor computado: tal cual se especifica
• Tipo de animação: discreto

Por último, lembre-se de que alguns valores (all, recto, verso) seguem marcados como experimentais nos borradores de especificação. Embora existam implementações parciais, sua estratégia deve incluir testes e “substitutos” cuando dependas de ellos.

Dominador break-after você permite que você faça documentos que sejam impressos bem, colunas ordenadas e fluxos de leitura claros. A poco que lo combina com break-before y break-inside e tengas em contar os pseudônimos históricos e os prefijos de respaldo, obteremos cortes precisos e previsíveis sem pelearte com páginas em branco e blocos partidos onde não toca.