Penyempurnaan tata letak logis dengan pintasan yang relatif terhadap alur

Singkatan properti logis baru dan properti inset baru untuk Chromium.

Adam Argyle
Oriol Brufau
Oriol Brufau
GitHub

Sejak Chromium 69 (3 September 2018), properti logis dan nilai telah membantu pengembang mempertahankan kontrol atas tata letak internasional mereka melalui logika, bukan daripada gaya fisik, arah, dan dimensi. Di Chromium 87, singkatan dan telah dikirim untuk membuat properti dan nilai logika ini sedikit lebih mudah ditulis. Hal ini akan menyelaraskan Chromium ke Firefox, yang telah mendukung singkatan sejak 66 tahun. Safari sudah menyiapkannya dalam pratinjau teknologi.

Bahasa Latin, Ibrani, dan Jepang ditampilkan yang merender teks placeholder dalam bingkai perangkat. Panah dan warna mengikuti teks untuk membantu mengaitkan 2 arah blok dan sebaris.

Alur dokumen

Jika Anda sudah memahami properti logis, sumbu inline dan blok, serta jangan ingin penyegaran, Anda dapat melewatinya. Jika tidak, berikut adalah penyegaran singkat.

Dalam bahasa Inggris, huruf dan kata mengalir dari kiri ke kanan sementara paragraf ditumpuk dari atas ke bawah. Dalam bahasa China Aksara Tradisional, huruf dan kata diletakkan dari atas ke bawah sementara paragraf ditumpuk kanan ke kiri. Hanya dalam 2 kasus ini, jika kita menulis CSS yang menempatkan "margin top" pada paragraf, kita hanya memberi spasi 1 gaya bahasa dengan tepat. Jika halaman diterjemahkan ke dalam bahasa tradisional China dari bahasa Inggris, batas ini mungkin tidak masuk akal pada mode penulisan vertikal baru.

Oleh karena itu, sisi fisik kotak tidak terlalu berguna secara internasional. Dengan demikian, proses mendukung beberapa bahasa; tentang sisi fisik versus logis model boks.

Pernahkah Anda memeriksa elemen p di Chrome DevTools? Jika demikian, Anda mungkin memiliki melihat bahwa gaya Agen Pengguna default tidak bersifat fisik, tetapi logis.

p {
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

CSS dari User Agent Stylesheet Chromium

Margin tidak berada di bagian atas atau bawah seperti yang mungkin dipahami oleh pembaca dalam bahasa Inggris. Ini block-start dan block-end! Sifat-sifat logis ini mirip dengan pengetahuan pembaca berbahasa Inggris atas dan bawah, tetapi juga mirip dengan pembaca berbahasa Jepang seperti kanan dan kiri. Ditulis sekali, berfungsi di mana saja.

Aliran normal adalah ketika halaman web menjadi bagian dari multi-arah dengan sengaja. Saat konten halaman diperbarui sesuai dengan perubahan arah dokumen, tata letak dan elemen yang dipertimbangkan. Baca selengkapnya tentang "di" dan "keluar" dari alur di MDN atau di Spesifikasi Modul Layar CSS. Sedangkan properti logis tidak harus berjalan lancar, mereka melakukan banyak tugas berat untuk Anda saat arah perubahan. Alur menyiratkan arah, huruf, kata, dan konten mana yang perlu dilalui. Hal ini membuat kita memblokir dan menyisipkan arah logis.

Arah blok adalah arah yang diikuti oleh pemblokiran konten baru, seperti bertanya kepada diri sendiri, "di mana harus menempatkan paragraf berikutnya?". Anda mungkin menganggapnya sebagai "blok konten", atau "blok teks". Setiap bahasa mengatur blok dan mengurutkannya block-axis-nya masing-masing. block-start adalah sisi paragraf pertama kali ditempatkan, sedangkan block-end adalah paragraf baru samping yang mengalir.

Dalam tulisan tangan tradisional Jepang, misalnya, arah blok mengalir dari kanan ke kiri:

Arah inline adalah arah penulisan huruf dan kata. Pertimbangkan arahnya tangan dan tangan Anda bergerak ketika Anda menulis; mereka bepergian di sepanjang inline-axis. inline-start adalah sisi tempat Anda mulai menulis, sedangkan inline-end adalah sisi di mana tulisan berakhir atau diakhiri. Video di atas, inline-axis berada di atas ke bawah, tetapi di video berikutnya, inline-axis mengalir dari kanan ke kiri.

Menjadi flow-relative berarti gaya yang ditulis untuk satu bahasa akan bersifat kontekstual dan sesuai yang diterapkan ke dalam bahasa lain. Konten akan ditampilkan sesuai bahasa pengirimannya.

Cara pintas baru

Beberapa singkatan berikut bukan fitur baru untuk {i>browser<i}, melainkan, lebih mudah cara menulis gaya dengan memanfaatkan kemampuan untuk menetapkan nilai di kedua blok atau inline sekaligus. Properti logis inset-* membawa kemampuan baru, karena tidak ada cara tradisional untuk menentukan posisi absolut dengan properti logis sebelumnya. {i>Inset<i} dan {i>shorthands<i} mengalir bersama-sama dengan sangat baik, saya akan memberi tahu Anda tentang semua fitur properti logis baru yang hadir di Chromium 87 sekaligus.

Singkatan margin

Tidak ada kemampuan baru, tetapi beberapa pintasan yang sangat berguna berhasil:
margin-block dan margin-inline.

Tangan
margin-block-start: 2ch;
margin-block-end: 2ch;
Cara pintas baru
margin-block: 2ch;
/* or */
margin-block: 2ch 2ch;

Tidak ada singkatan untuk "atas dan bawah" atau "kiri dan kanan"... sampai sekarang! Anda mungkin mereferensikan keempat sisinya menggunakan singkatan margin: 10px;, dan sekarang Anda dapat dengan mudah mereferensikan 2 sisi yang saling bebas menggunakan singkatan properti yang logis.

Tangan
margin-inline-start: 4ch;
margin-inline-end: 2ch;
Cara pintas baru
margin-inline: 4ch 2ch;

Singkatan padding

Tidak ada kemampuan baru, tetapi pintasan yang sangat berguna berhasil:
padding-block dan padding-inline.


Tangan
padding-block-start: 2ch;
padding-block-end: 2ch;
Cara pintas baru
padding-block: 2ch;
/* or */
padding-block: 2ch 2ch;

Dan kumpulan singkatan gratis untuk inline:

Tangan
padding-inline-start: 4ch;
padding-inline-end: 2ch;
Cara pintas baru
padding-inline: 4ch 2ch;

Inset dan singkatan

Sifat fisik top, right, bottom, dan left dapat ditulis sebagai nilai untuk properti inset. Semua nilai position dapat memperoleh manfaat dari mengatur sisi dengan {i>inset<i}.

.cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
}


Gerakan tangan fisik
position: absolute;
top: 1px;
right: 2px;
bottom: 3px;
left: 4px;
Cara pintas fisik baru
position: absolute;
inset: 1px 2px 3px 4px;

Seharusnya terlihat praktis! {i>Inset<i} adalah singkatan untuk sisi fisik, dan cara kerjanya sama seperti margin dan pelapis.

Fitur baru

Meskipun disingkat sisi fisiknya, ada banyak hal lain dari fitur logis yang dihadirkan oleh singkatan inset tambahan. Cara singkat ini membawa kemudahan penulisan yang diberikan developer (ukurannya lebih pendek) tetapi juga meningkatkan potensi jangkauan untuk tata letak karena bersifat relatif terhadap alur.

Gerakan tangan fisik
position: absolute;
top: 10px;
bottom: 10px;
Singkatan logis
position: absolute;
inset-block: 10px;


Gerakan tangan fisik
position: absolute;
left: 10px;
right: 20px;
Singkatan logis
position: absolute;
inset-inline: 10px 20px;

Bacaan lebih lanjut dan daftar lengkap singkatan dan tulisan tangan inset tersedia di MDN.

Singkatan batas

Border, serta properti color, style, dan width bertingkat, semuanya sudah didapatkan serta singkatan logis yang baru.


Gerakan tangan fisik
border-top-color: hotpink;
border-bottom-color: hotpink;
Singkatan logis
border-block-color: hotpink;
/* or */
border-block-color: hotpink hotpink;


Gerakan tangan fisik
border-left-style: dashed;
border-right-style: dashed;
Singkatan logis
border-inline-style: dashed;
/* or */
border-inline-style: dashed dashed;


Gerakan tangan fisik
border-left-width: 1px;
border-right-width: 1px;
Singkatan logis
border-inline-width: 1px;
/* or */
border-inline-width: 1px 1px;

Bacaan lebih lanjut dan daftar lengkap batas pendek dan garis miring tersedia di MDN.

Contoh properti logika <figure>

Mari kita satukan semuanya dalam sebuah contoh kecil. Properti logika dapat mengatur tata letak gambar dengan keterangan untuk menangani berbagai penulisan dan arah dokumen.

Atau cobalah!

Anda tidak perlu melakukan banyak hal untuk membuat kartu responsif secara internasional dengan <figure> dan beberapa properti logis. Jika Anda ingin tahu bagaimana cara kerja teknologi dengan penuh pertimbangan bekerja sama, saya harap ini menjadi pengantar yang bermanfaat.

Polyfilling dan dukungan lintas-browser

Alat {i>Cascade<i} atau {i>build<i} adalah opsi yang layak untuk memiliki browser lama dan baru, diberi spasi dengan benar menggunakan properti logis yang diperbarui. Untuk penggantian Cascade, ikuti properti fisik dengan logika dan browser akan menggunakan "last" yang ditemukan selama gaya resolusi.

p {
  /* for unsupporting browsers */
  margin-top: 1ch;
  margin-bottom: 2ch;

  /* for supporting browsers to use */
  /* and unsupporting browsers to ignore and go 🤷‍♂️ */
  margin-block: 1ch 2ch;
}

Namun, itu bukan solusi yang lengkap untuk semua orang. Berikut adalah penggantian yang ditulis tangan yang memanfaatkan pemilih semu :lang() untuk menargetkan bahasa tertentu, menyesuaikan spasi fisik mereka dengan tepat, maka pada akhirnya menawarkan elemen yang logis spasi untuk browser pendukung:

/* physical side styles */
p {
  margin-top: 1ch;
  margin-bottom: 2ch;
}

/* adjusted physical side styles per language */
:lang(ja) {
  p {
    /* zero out styles not useful for traditional Japanese */
    margin-top: 0;
    margin-bottom: 0;

    /* add appropriate styles for traditional Japanese */
    margin-right: 1ch;
    margin-left: 2ch;
  }
}

/* add selectors and adjust for languages all supported */
:lang(he) {…}
:lang(mn) {…}

/* Logical Sides */
/* Then, for supporting browsers to use */
/* and unsupporting browsers to ignore #TheCascade */
p {
  /* remove any potential physical cruft.. */
  margin: 0;
  /* explicitly set logical value */
  margin-block: 1ch 2ch;
}

Anda juga dapat menggunakan @supports untuk menentukan apakah akan memberikan akses penggantian properti:

p {
  margin-top: 1ch;
  margin-bottom: 2ch;
}

@supports (margin-block: 0) {
  p {
    margin-block: 1ch 2ch;
  }
}

Sass, PostCSS, Emosi dan lainnya memiliki pemaket dan/atau build otomatis penawaran waktu yang memiliki beragam penggantian atau solusi. Lihat satu per satu untuk melihat mana yang cocok dengan toolchain dan strategi situs Anda secara keseluruhan.

Langkah berikutnya

Lebih banyak CSS akan menawarkan properti logis, tetapi belum selesai. Ada satu hal besar yang hilang langkah singkat, dan penyelesaiannya masih tertunda dalam masalah GitHub ini. Ada solusi sementara dalam draf. Bagaimana jika Anda ingin menata gaya sisi logis dari sebuah kotak dengan singkatan?

Singkatan fisik
margin: 1px 2px 3px 4px;
margin: 1px 2px;
margin: 2px;
Singkatan logis
margin: logical 1px 2px 3px 4px;
margin: logical 1px 2px;
margin: logical 2px;

Draf proposal saat ini berarti Anda harus menulis logical dalam setiap singkatan untuk mendapatkan padanan logis yang diterapkan, yang tidak terdengar sangat kering bagi sebagian orang.

Ada usulan lain untuk mengubahnya di tingkat blok atau halaman, tapi itu bisa membocorkan penggunaan logis ke dalam gaya yang masih mengasumsikan sisi fisik.

html {
  flow-mode: physical;
  /* or */
  flow-mode: logical;
  /* now all margin/padding/etc references are logical */
}

/* hopefully no 3rd/1st party code is hard coded to top/left/etc ..? */

Ini sulit! Berikan suara Anda, suarakan pendapat Anda, kami ingin mendengar pendapat Anda.

Ingin belajar atau mempelajari lebih lanjut properti logika? Berikut adalah referensi terperinci, beserta panduan dan contohnya, di MDN 🤓

Masukan

  • Untuk mengusulkan perubahan pada sintaks CSS dari pintasan yang relatif terhadap alur, pertama-tama periksa masalah yang ada di repositori csswg-drafts. Jika tidak ada masalah yang sudah ada yang cocok dengan proposal Anda, buat masalah baru.
  • Untuk melaporkan bug terkait implementasi pintasan flow-relatif Chromium, pertama-tama periksa masalah yang ada di Pelacak Bug Chromium. Jika tidak ada masalah yang ada yang cocok dengan bug Anda, buat masalah baru.