La Propiedad BREAK-BEFORE

La propiedad break-before en CSS especifica cómo debe comportarse un salto de página, de columna o de región antes del elemento al que se aplica.

 

La propiedad break-before en CSS especifica cómo debe comportarse un salto de página, de columna o de región antes del elemento al que se aplica. Es una herramienta esencial para controlar el flujo del contenido y asegurar que la presentación sea la deseada en diferentes medios (como la impresión o diseños multi-columna).

Sintaxis Básica

La sintaxis básica para usar la propiedad break-before es la siguiente:

CSS
 
selector {
  break-before: <valor>;
}

Donde <valor> puede ser una de las siguientes palabras clave:

Valores de la Propiedad break-before

La propiedad break-before acepta diferentes valores dependiendo del contexto en el que se esté utilizando (impresión, diseño en columnas, regiones CSS).

Valores para Saltos de Página (en contextos de impresión)

  • auto: Este es el valor inicial. El navegador inserta saltos de página donde sea necesario.
  • avoid: El navegador intenta evitar insertar un salto de página inmediatamente antes del elemento.
  • always: Siempre fuerza un salto de página justo antes del elemento. El elemento comenzará en una nueva página.
  • page: Es un alias de always.
  • left: Inserta uno o dos saltos de página antes del elemento para que este se formatee como una página izquierda.
  • right: Inserta uno o dos saltos de página antes del elemento para que este se formatee como una página derecha.
  • avoid-page: Es un alias de avoid.

Valores para Saltos de Columna (en diseños multi-columna)

  • avoid-column: El navegador intenta evitar insertar un salto de columna inmediatamente antes del elemento.
  • column: Siempre fuerza un salto de columna justo antes del elemento. El elemento comenzará en la siguiente columna.

Valores para Saltos de Región (en Regiones CSS)

  • avoid-region: El navegador intenta evitar insertar un salto de región inmediatamente antes del elemento.
  • region: Siempre fuerza un salto de región justo antes del elemento. El elemento fluirá hacia la siguiente región.

Ejemplos Prácticos

Veamos algunos ejemplos de cómo usar break-before en diferentes contextos:

Ejemplo 1: Forzar que un encabezado comience siempre en una nueva página (para impresión)

Supongamos que quieres que cada sección de tu documento comience en una nueva página al imprimir. Puedes usar break-before: always; en los encabezados de sección:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  h2 {
    break-before: always; /* Fuerza un salto de página antes de cada encabezado 2 */
  }
</style>
</head>
<body>

  <p>Contenido de la página anterior...</p>
  <h2>Sección 1</h2>
  <p>Contenido de la Sección 1...</p>

  <p>Más contenido...</p>
  <h2>Sección 2</h2>
  <p>Contenido de la Sección 2...</p>

</body>
</html>

Cuando imprimas este documento, "Sección 1" y "Sección 2" comenzarán en nuevas páginas.

Ejemplo 2: Evitar que una imagen se separe del texto anterior (para impresión)

Si tienes un párrafo de texto seguido inmediatamente por una imagen y quieres evitar que la imagen comience en una nueva página, puedes usar break-before: avoid; en la imagen:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  img {
    break-before: avoid; /* Intenta evitar un salto de página antes de la imagen */
  }
</style>
</head>
<body>

  <p>Este es un párrafo de texto que describe la siguiente imagen importante.</p>
  <img src="ruta/a/tu/imagen.jpg" alt="Imagen importante">
  <p>Texto después de la imagen...</p>

</body>
</html>

El navegador intentará mantener la imagen en la misma página que el párrafo anterior si es posible.

Ejemplo 3: Forzar que un elemento comience en una nueva columna (en diseño multi-columna)

Si estás utilizando un diseño con múltiples columnas y quieres que un cierto elemento siempre comience al principio de una nueva columna, puedes usar break-before: column;:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .contenedor-columnas {
    column-count: 3; /* Divide el contenido en 3 columnas */
    column-gap: 20px;
  }

  .elemento-nueva-columna {
    break-before: column; /* Fuerza este elemento al inicio de una nueva columna */
    background-color: lightgray;
    padding: 10px;
    margin-bottom: 10px;
  }
</style>
</head>
<body>

  <div class="contenedor-columnas">
    <p>Este es el primer párrafo en la primera columna.</p>
    <p>Este es el segundo párrafo en la primera columna.</p>
    <div class="elemento-nueva-columna">Este elemento comenzará en la segunda columna.</div>
    <p>Este es el tercer párrafo que ahora estará en la segunda columna.</p>
    <p>Este es el cuarto párrafo que también estará en la segunda columna.</p>
    <div class="elemento-nueva-columna">Este elemento comenzará en la tercera columna.</div>
    <p>Este es el quinto párrafo en la tercera columna.</p>
  </div>

</body>
</html>

En este ejemplo, los elementos con la clase elemento-nueva-columna forzarán que comiencen al inicio de la siguiente columna disponible.

Consideraciones Importantes

  • La efectividad de break-before: avoid; depende del espacio disponible. El navegador podría verse obligado a insertar un salto de página o columna incluso si se especifica avoid.
  • Las propiedades de salto de página son más relevantes cuando se genera una versión impresa de la página (a través de la función de impresión del navegador).
  • Las propiedades de salto de columna solo tienen efecto cuando el elemento padre tiene definida la propiedad column-count o columns.
  • El soporte para las propiedades relacionadas con regiones CSS (avoid-region, region) puede ser limitado en algunos navegadores, ya que las Regiones CSS no son una característica ampliamente adoptada.

Propiedades Relacionadas

Existen otras propiedades CSS que controlan los saltos:

  • break-after: Especifica cómo debe comportarse un salto de página, de columna o de región después del elemento.
  • break-inside: Especifica cómo se deben manejar los saltos de página, de columna o de región dentro del elemento.

Compatibilidad del Navegador

La compatibilidad con la propiedad break-before es generalmente buena en los navegadores modernos. Sin embargo, es recomendable verificar la compatibilidad específica de los valores que planeas utilizar, especialmente para las características más avanzadas como las regiones CSS.

Conclusión

La propiedad break-before te ofrece un control preciso sobre cómo se inicia un elemento en relación con los saltos de página, columna o región. Utilizarla correctamente puede mejorar significativamente la legibilidad y la presentación de tu contenido en diferentes medios. Experimenta con los diferentes valores para lograr el diseño y el flujo de contenido deseados.