Propiedad CSS break-after: panduan lengkap, kegunaan, dan dukungan

Beranda » Ular sanca » Propiedad CSS break-after: panduan lengkap, kegunaan, dan dukungan

Ketika ada banyak kolom untuk tayangan, multikolom, atau fluks terfragmentasi, lambat atau lambat, permintaan seperti itu akan terhapus atau hilangkan sesuatu yang masuk ke halaman atau kolom berikutnya. Ah, itu tidak masuk dalam permainan la propiedad CSS break-after, sebuah alat yang menunjukkan navigasi jika Anda harus menghasilkan sesuatu hanya setelah elemennya.

Semua jenis tayangan, jeda setelahnya berguna dalam kumpulan dokumen: majalah digital dalam kolom, informasi dalam PDF, dokumen dalam halaman-halaman yang dikupas dan dibaca, serta perubahan-perubahan yang terjadi di berbagai wilayah. Potensinya sangat kuat jika Anda bisa melakukannya, izinkan atau hentikan hal tersebut bagian konteksnya: halaman tayangan, kolom, atau wilayah.

Apa itu propiedad CSS break-after

Properti break-after tentukan jika Anda harus membuat halaman, kolom, atau wilayah segera setelah elemen aplikasi tersebut. Dicho de forma llana, menandai titik yang tepat untuk melintasi komponen, cara konten di belakang dimuat ke dalam “Unit” fragmentasi berikutnya (halaman, kolom, atau wilayah) menampilkan entri di dalamnya yang merupakan maquetando navegador.

Secara historis, CSS 2.1 tersedia de page-break-after para medios paginados. Hoy, istirahat setelah amplía konsep ini untuk berfungsi juga dengan multikolumna dan wilayah, namun tetap menjaga kompatibilitas dengan nilai-nilai klasik yang digunakan dan dicetak.

Sintaksis, nilai dan cara menafsirkannya

Bentuk dasar penggunaannya adalah langsung: break-after: <valor>. Nilai-nilai ini sesuai dengan konteks umum dan spesifik halaman, kolom, atau wilayah:

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

Nilai-nilai generik (berlaku dalam konteks apa pun): auto (ni fuerza ni prohíbe un salto), avoid (intenta evitarlo), always (melemparkan satu garam ke dalam konteks fragmentasi secara langsung) y all (eksperimental, fuerza el salto atravesando semua konteks fragmentasi: sebagai contoh, kolom dan halaman di setiap aplikasi).

Nilai untuk halaman tengah-tengah: avoid-page (evita salto de página), page (fuerza salto de página), left y right (lakukan satu atau beberapa langkah untuk memastikan bahwa konten berikutnya dimulai di halaman yang diambil atau berikutnya, masing-masing). Selain itu, recto y verso anak nilai eksperimental yang mana wajibkan halaman berikutnya searah atau sebaliknya según el flujo del idioma.

Nilai untuk diseño multikolom: avoid-column evita un salto de columna y column lo fuerza. Dalam konten yang luas yang dibagikan oleh berbagai kolom, estos valores son clave para no cortar piezas delicadas (seperti potongan kode) atau untuk blok linier pada kolom berikutnya.

Valores para regiones: avoid-region y region mengontrolnya di antara area yang ditentukan oleh Wilayah CSS. Meskipun ini adalah spesifikasi yang tepat pada saat itu, dukungan nyata dari wilayah ini terbatas di navegadores modern, karena mereka mempertimbangkan penggunaannya sebagai eksperimental atau legado.

Peraturan keputusan navegador: forzar, evitar, dan prioridades

Setiap kali Anda dapat menghasilkan sebuah rotura (perbatasan antara elemen), operator mengevaluasi tiga properti: el break-after del elemento anterior, The break-before del siguiente y el break-inside del contenedor. Ini adalah interaksi tiga kali lipat yang menentukan hasil.

Algoritmanya, disederhanakan, berfungsi seperti ini: jika ada kegunaan tertentu yang spesifik keberanian yang kuat (always, left, right, page, column, region), ini adalah keberanian yang sudah diprioritaskan. Jika ada banyak hal yang harus dilakukan, gana que está más “adelante” en el flujo: break-before > break-after > break-inside.

Jika hal ini muncul keberanian untuk menghindari (avoid, avoid-page, avoid-column, avoid-region), tidak ada aplikasi yang sesuai. Setelah mengatasi masalah garam, navigasi dapat menambahkan “saltos ramah tamah” jika diperlukan, tapi tidak ada batas nilai yang harus dihindari.

Hubungan dengan halaman-break-after dan sejarah yang kompatibel

Karena alasan kompatibilitas, itu adalah navigasi yang buruk page-break-after como un alias de break-after di pagi hari rata-rata. Ini memastikan bahwa situasi-situasi kuno yang menggunakan properti klasik tetap nyaman seperti yang diharapkan.

Fungsi kesetaraan nilai dengan cara berikut: auto → auto, always → page, avoid → avoid-page, left → left, right → right. Dalam praktek, dapat menulis ambos untuk walikota strongez en impresión:

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

Juga ada page-break-before dengan filosofi yang sama dalam elemen “lado anterior”. Gunakan sebelum atau sesudah tergantung pada titik yang tepat ketika Anda ingin melakukannya en tu maquetación.

Aplikasi dan fungsionalitas visual

La propiedad se aplica a cajas de nivel de bloque dalam flujo normal y, untuk ekstensi modern, dan item de grid, ítems de flex, grup filas de tablas dan filas de tabla. Tidak ada di sini, keberanianmu inisial es auto y jenis animasinya bijaksana (Saya menyatakan, tidak ada interpola yang umum dalam transisi).

Ketika ada halaman atau kolom pada sebuah kotak, márgenes, bordes, dan padding tidak diletakkan di titik corte. Pengecualian yang unik adalah margin segera setelah satu hal lagi, yang akan dilestarikan. Detail ini membantu menjaga ruang visual tetap benar ketika dimasukkan secara ekspresif.

Contoh praktis penggunaan

Tayangan (TOC yang selalu Anda hentikan halamannya): Jika Anda ingin setelah indeks konten menampilkan halaman baru, Anda dapat menggunakan yang berikut ini sesuai dengan yang ada di halaman tersebut @media print. Ini adalah situasi yang umum di perpustakaan atau informasikan kepada Anda interesa memisahkan claramente bagian clave:

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

Tayangan di halaman berikutnya: dalam publikasi dengan dua cara, Anda mungkin perlu membaca bab berikut mulai dari halaman berikutnya. Oleh karena itu, utiliza el valor right:

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

Multikolom: bayangkan sebuah wadah dengan judul utama yang menempati semua kolom (column-span: all) dan subbagian yang ingin Anda alinearkan dalam kolom kolom. aplikasi break-after: column en el bloque previo (por ejemplo, en un <p> o en cada <section>) untuk melepaskan garam dari kolom:

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

Hindari hal-hal lain di tabla: jika Anda ingin mempertahankan tabla di halaman yang sama jika ada kemungkinan, lalu break-after: avoid en las filas. Dalam dokumen yang mengesankan ini untuk mengurangi jumlah yang sedikit dalam satu tabel:

tr {
  break-after: avoid;
}

Menghindari kerusakan pada bagian yang lezat dalam kolom: blok kode jika Anda tidak ingin masuk ke dalam kolom dapat menerima manfaat break-after: column en el elemento anterior o manejarlo con break-inside: avoid-column di dalam blok propio, berikut ini masalahnya:

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

Wilayah: jika Anda bekerja dengan flue di suatu wilayah (batas terbatas), Anda dapat menunjukkan bahwa daftar berakhir di suatu wilayah dan restoran fluya berada di urutan berikutnya. Meskipun bukan itu yang paling umum hari ini, Tuan sebagai referensi tentang bagaimana jika Anda berpikir tentang kepemilikannya en ese contexto:

.region ul {
  break-after: region;
}

Penyesuaian bersyarat: jika Anda menginginkan tampilan kecil dari perilaku vuelva a auto untuk menghindari fragmentasi agresivitas, dapat diperluas dalam pertanyaan media:

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

Bagaimana cara menggabungkan break-before, break-after, dan break-inside

Ini adalah propiedades yang sedang berlangsung saat ini. Ini adalah kebiasaan, misalnya, penggunaan break-inside: avoid en un componente para que no se rompa por dentro, sementara itu adalah surat berikut yang diumumkan break-before: page untuk mengatur halaman baru. Jika “sebelum” itu adalah sesuatu yang lain, cenderung lebih suka “setelah” sebelumnya.

Prioritasnya adalah komentar yang penting: break-before gana a break-after, que a su vez gana a break-inside. Jika ada banyak baju monyet, Anda akan menerapkan elemen yang lebih lambat di flujo dokumen.

Kompatibel dan mendukung konteks

Dukungan dari break-after bergantung pada konteksnya. Di halaman/tayangan, navegadores modern lo mengimplementasikan bentuk amplia, dan alias page-break-after menjaga retrocompatibilidad dari situs antiguos.

En multicolumnas, el valor column ini tersedia dalam motor modern; Namun, navigasi berbasis web dan WebKit telah berdampingan dengan sebelumnya -webkit-column-break-after sebagai alternatif lain. Jika Anda pergi ke perusahaan publik, silakan hubungi kami, jika Anda melanjutkan, sertakan biaya respaldo para columnas.

Di beberapa wilayah, panoramanya sangat tidak beraturan: Wilayah CSS tidak ditanamkan secara umum, por lo que los valores region y avoid-region saya harus mempertimbangkan eksperimen atau legado.

Sebuah sejarah: hubo demostraciones en la que IE10+ menampilkan kolom dengan break-after saat Anda menavigasi WebKit, Anda akan melihat nilainya -webkit-column-break-after, dan Firefox akan melakukannya dalam konteks ini. Hoy el soporte ha mejorado, tapi sigue siendo buena idea kontras dengan tiga lingkungan (impresión, Columnas, dan regiones) dengan tujuan navigasi.

Buenas practicas de maquetación con break-after

• Gunakan secukupnya: sebuah “siempre salta” dari setiap blok yang dihasilkan dari ruang kosong dan mesin yang tidak mengalir. Bekerja sendirian tanpa membawa kejelasan.
• Evitar con criterio: penyalahgunaan avoid dapat menyebabkan kesalahan yang tidak disengaja pada bagian dokumen lainnya. Kombinasi con break-inside jika Anda ingin melindungi suatu komponen.
• Pruebas en navegadores dan perangkat: imprime PDF, gunakan tampilan awal tayangan dan uji multikolumna. Perilakunya dapat bervariasi berdasarkan konteks dan motor.
• Media queries con cabeza: ada keputusan fragmentasi yang Anda kirim ke kertas tetapi tidak di ponsel; penyesuaian saja @media bila perlu.

Detail teknik dan spesifikasinya

Rekapitulasi model propiedad: nilai awal auto, tidak ada warisan, keberanian menghitung “tal cual” se spesifiknya tipo de animación discreto. Meskipun penggunaannya biasanya tidak melibatkan animasi, hal ini jelas terlihat bahwa tidak ada transisi bertahap ke dalam tahap proses.

Dalam beberapa bagian yang dibagi oleh satu garam, perbatasan, rellenos, dan margenes, tidak ada yang “berulang” di titik rotura. Jika Anda menyimpan margin segera setelah satu kali forzado, ini berguna untuk menjaga pemisahan konten yang diatur di halaman atau kolom baru.

Pelanggan kebiasaan dan truk (con kontekso histórico)

Dalam beberapa saat dengan dukungan yang tidak teratur, jika Anda mempopulerkan sebuah kebenaran: masukkan sebuah DIV vacío con   dan tetapkan page-break-before/after untuk membuangnya terlebih dahulu atau setelah komponen sebenarnya. Hari ini, tidak ada solusi “bonita”, tetapi Anda dapat menyelamatkan maquetaciones de legado donde page-break-* funciona mejor que break-* di ciertos navegadores antiguos.

Truco solía escribirse así (untuk memprovokasi satu sebelum satu tabla): pertama DIV dengan yang lain, lalu lanjutkan ke pemisah bagian dan tab, cara tab muncul di awal halaman baru:

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

Jika Anda bekerja dengan multikolumna di WebKit klasik, Anda akan menemukan hal itu kehidupan lama -webkit-column-break-after aún puede servir como salvavidas junto al valor estándar, misalnya:

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

Kasus penggunaan lanjutan

Paginación dengan cara ganda: dalam perpustakaan dan revisi, itu sama dengan yang ada capítulos diatur diam-diam di halaman berikutnya. Untuk melakukan ini, gunakan right. Jika konten berikut ini ada di dalamnya, tidak perlu lagi melakukan apa pun; jika tidak, navegador akan memasukkan satu lagi untuk melakukannya.

Diseños hibridos (halaman dengan kolom di dalam): jika berada di bagian multikolom yang ada di halaman yang mengesankan, nilainya all Anda dapat membuka kolom seperti halaman, dijamin bahwa blok berikut akan terhapus dalam konteks yang lebih baik. Itu adalah keberanian eksperimental, itulah yang terjadi pruébalo con mimo.

Urutan kembali bagian: ketika ada beberapa bagian yang harus dimasukkan ke dalam kolom kolom, berlaku break-after: column a cada sección ayuda yang queden “cuadradas” visualmente, con títulos alineados arriba dan tidak ada bagian yang terpisah dalam posisi yang tidak terjangkau.

Catatan kecil tentang alias dan nilai yang setara

Jika Anda masih mempertahankan gaya tayangan Anda page-break-after, bisa alinearlas dengan dunia modern seperti ini: page-break-after: always sama dengan break-after: page; page-break-after: avoid se mapea a break-after: avoid-page; left y right melestarikan arti pentingnya. Ini memungkinkan Anda untuk memperbarui kemajuan Anda.

Karena itu, navigasinya tidak sepenuhnya familier break-* en un contexto concreto, mempertahankan alias clásico seperti “fallback” Tentu saja itu adalah gerakan yang cerdas, karena semua proyek dengan pengguna yang membatasi navigasi sangat bervariasi.

Kesalahan umum dan cara menghindarinya

Tempat break-after: always berlebihan memprovokasi halaman atau kolom setengah kosong. Sebelum maju, valora si avoid o auto ya ofrecen un corte natural yang dapat diterima.

Ignorar la interacción con break-inside itu adalah kebiasaan buruk lainnya. Jika suatu komponen tidak perlu dibagi, tambah break-inside: avoid (o avoid-page/avoid-column) melainkan menggunakan kata “setelah” atau “sebelum” dalam elemen-elemen berikutnya.

Tidak ada pertanyaan dalam konteks nyata yaitu laga klasik: tampilan awal tayangan tidak pernah ada di lapangan seperti yang terjadi pada PDF atau mesin fisik. Hasilkan PDF, revisi sebagian besar, dan pisahkan potongan-potongan kubis dan pai yang lain.

Ficha rápida de la propiedad

• Awal: auto
• Berlaku untuk: cajas de blok, item de grid, item de flex, grup filas de tabla dan filas
• Heredada: tidak
• Valor computado: tal cual se especifica
• Tipo de animación: diskrit

Pada akhirnya, menyelamatkan beberapa nilai (all, recto, verso) berikut adalah merek eksperimental di perbatasan khusus. Meskipun ada implementasi parciales, Strategi Anda harus mencakup penghematan dan “pengembalian” cuando dependas de ellos.

Mendominasi break-after Anda mengizinkan membuat dokumen yang tidak dapat diterima, kolom-kolom yang berurutan, dan kolom-kolom yang jelas. Sebuah poco que lo menggabungkan con break-before y break-inside y tengas en cuenta los alias históricos y los prefijos de respaldo, mendapatkan tindakan yang tepat dan dapat dilihat sebelumnya tanpa membuka halaman-halaman kosong atau blok-blok di seluruh dunia.