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 developer mempertahankan kontrol tata letak internasional mereka melalui gaya arah dan dimensi yang logis, bukan fisik. Di Chromium 87, singkatan dan offset telah disediakan untuk membuat properti dan nilai logis ini sedikit lebih mudah ditulis. Tindakan ini akan memindahkan Chromium ke Firefox, yang telah mendukung penggunaan singkatan sejak 66. Safari telah menyiapkannya dalam pratinjau teknologi.

Latin, Ibrani, dan Jepang ditampilkan dengan mengedit teks placeholder dalam bingkai perangkat. Panah dan warna mengikuti teks untuk membantu mengaitkan 2 arah blok dan sejajar.

Alur dokumen

Jika sudah terbiasa dengan properti logis, sumbu sejajar dan blok, serta tidak ingin mempelajari ulang, Anda dapat melanjutkan. Jika tidak, berikut ini adalah penyegaran singkat.

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

Oleh karena itu, sisi fisik kotak tidak terlalu berguna secara internasional. Selanjutnya, proses dukungan beberapa bahasa dimulai; dengan mempelajari sisi fisik vs. logis dari model kotak.

Pernahkah Anda memeriksa elemen p di Chrome DevTools? Jika demikian, Anda mungkin telah memperhatikan 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 Stylesheet Agen Pengguna Chromium

Margin tidak berada di atas atau bawah seperti yang mungkin dipercaya oleh pembaca berbahasa Inggris. block-start dan block-end! Properti logis ini mirip dengan bagian atas dan bawah pada pembaca bahasa Inggris, tetapi juga mirip dengan pembaca Jepang seperti kanan dan kiri. Ditulis sekali, bisa digunakan di mana saja.

Aliran normal adalah saat halaman web secara sengaja menjadi bagian dari multi-arah ini. Saat konten halaman diperbarui sesuai dengan perubahan arah dokumen, tata letak dan elemennya dianggap dalam alur. Baca selengkapnya tentang "masuk" dan "keluar" dari alur di MDN atau di spesifikasi Modul Tampilan CSS. Meskipun properti logis tidak diharuskan dalam alur, properti melakukan banyak tugas sulit untuk Anda seiring perubahan arah. Alur menyiratkan arah, huruf, kata, dan konten mana yang harus dilalui. Hal ini membuat kita memblokir dan menyelaraskan arah yang logis.

Arah blok adalah arah yang diikuti blok konten baru, seperti bertanya pada diri sendiri, "di mana harus meletakkan paragraf berikutnya?". Anda dapat menganggapnya sebagai "blok konten", atau "blok teks". Setiap bahasa mengatur bloknya dan mengurutkannya di sepanjang block-axis masing-masing. block-start adalah sisi tempat paragraf pertama kali ditempatkan, sedangkan block-end adalah sisi tempat paragraf baru mengalir.

Misalnya, dalam tulisan tangan tradisional Jepang, arah blok mengalir dari kanan ke kiri:

Arah sejajar adalah arah huruf dan kata. Pertimbangkan arah lengan dan tangan saat Anda menulis; arahnya sepanjang inline-axis. inline-start adalah sisi tempat Anda mulai menulis, sedangkan inline-end adalah sisi tempat penulisan diakhiri atau digabungkan. Video di atas, inline-axis ditampilkan dari 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 kontekstual dan diterapkan dengan tepat ke dalam bahasa lain. Konten akan mengalir sesuai dengan bahasa yang dikirimkan kepadanya.

Singkatan baru

Beberapa cara pintas berikut bukanlah fitur baru untuk browser, melainkan cara yang lebih mudah untuk menulis gaya dengan memanfaatkan kemampuan untuk menetapkan nilai pada kedua tepi blok atau inline sekaligus. Properti logika inset-* memang menghadirkan kemampuan baru, karena tidak ada cara lama untuk menentukan posisi absolut dengan properti logika sebelumnya. Namun, inset dan singkatan mengalir bersama dengan sangat baik, saya akan memberi tahu Anda tentang semua properti logis baru yang hadir di Chromium 87 sekaligus.

Singkatan margin

Tidak ada kemampuan baru yang dikirimkan, tetapi beberapa pintasan yang sangat praktis melakukannya:
margin-block dan margin-inline.

Panjang
margin-block-start: 2ch;
margin-block-end: 2ch;
Singkatan baru
margin-block: 2ch;
/* or */
margin-block: 2ch 2ch;

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

Panjang
margin-inline-start: 4ch;
margin-inline-end: 2ch;
Singkatan baru
margin-inline: 4ch 2ch;

Singkatan untuk padding

Tidak ada kemampuan baru yang dikirimkan, tetapi cara pintas yang lebih praktis yang dilakukan:
padding-block dan padding-inline.


Panjang
padding-block-start: 2ch;
padding-block-end: 2ch;
Singkatan baru
padding-block: 2ch;
/* or */
padding-block: 2ch 2ch;

Dan inline rangkaian singkat gratis:

Panjang
padding-inline-start: 4ch;
padding-inline-end: 2ch;
Singkatan baru
padding-inline: 4ch 2ch;

Inset dan singkatan

Properti fisik top, right, bottom, dan left semuanya dapat ditulis sebagai nilai untuk properti inset. Semua nilai position dapat memanfaatkan sisi setelan yang memiliki inset.

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


Panjang fisik
position: absolute;
top: 1px;
right: 2px;
bottom: 3px;
left: 4px;
Singkatan fisik baru
position: absolute;
inset: 1px 2px 3px 4px;

Seharusnya fitur ini langsung terlihat praktis. Inset adalah singkatan untuk sisi fisik, dan bekerja seperti margin dan {i>padding<i}.

Fitur baru

Meskipun singkatnya sisi fisik menarik, ada lebih banyak lagi fitur logis yang dibawa oleh singkatan inset tambahan. Singkatan ini memberikan kemudahan penulisan developer (lebih singkat untuk mengetik), tetapi juga meningkatkan potensi jangkauan untuk tata letak karena sifatnya relatif terhadap alur.

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


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

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

Singkatan garis batas

Border, ditambah properti color, style, dan width bertingkatnya juga memiliki singkatan logis yang baru.


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


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


Panjang 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 singkatan dan longhand batas tersedia di MDN.

Contoh properti logika <figure>

Mari kita gabungkan semuanya dalam sebuah contoh kecil. Properti logis dapat mengatur tata letak gambar dengan teks untuk menangani berbagai arah penulisan dan 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 semua CSS yang dipertimbangkan secara internasional ini bekerja sama, semoga ini adalah pengantar kecil yang bermanfaat.

Polyfilling dan dukungan lintas browser

Cascade atau alat build adalah opsi yang memungkinkan untuk memiliki browser lama dan baru, yang ditempatkan dengan benar dengan properti logis terbaru. Untuk penggantian Bertingkat, ikuti properti fisik dengan properti logis dan browser akan menggunakan properti "terakhir" yang ditemukan selama resolusi gaya.

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;
}

Itu bukanlah solusi lengkap untuk semua orang. Berikut adalah penggantian yang ditulis tangan yang memanfaatkan pemilih semu :lang() untuk menargetkan bahasa tertentu, menyesuaikan spasi fisiknya dengan tepat, lalu di bagian akhir menawarkan spasi logis untuk mendukung browser:

/* 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 menyediakan penggantian properti fisik atau tidak:

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

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

Sass, PostCSS, Emotion dan lainnya memiliki pemaket otomatis dan/atau penawaran waktu build yang memiliki beragam penggantian atau solusi. Periksa setiap alat untuk melihat mana yang cocok dengan toolchain dan strategi situs Anda secara keseluruhan.

Langkah selanjutnya

Lebih banyak CSS akan menawarkan properti logis, tetapi belum selesai. Namun, ada satu kesalahan besar yang hilang, dan penyelesaiannya masih tertunda dalam masalah GitHub ini. Ada solusi sementara dalam draf. Bagaimana jika Anda ingin menata gaya semua sisi kotak yang logis 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;

Dengan proposal draf saat ini, Anda harus menulis logical di setiap singkatan untuk menerapkan padanan logisnya, yang terdengar tidak terlalu DRY untuk sebagian orang.

Ada proposal lain untuk mengubahnya di tingkat blok atau halaman, tetapi hal itu dapat 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 ..? */

Pertanyaan yang sulit! Berikan suara, sampaikan pendapat, dan kami ingin mendengar pendapat Anda.

Ingin belajar atau mempelajari sifat logika lebih lanjut? Berikut adalah referensi mendetail, beserta panduan dan contoh, di MDN 🤓

Masukan

  • Untuk mengusulkan perubahan pada sintaksis CSS singkat relatif alur, periksa masalah yang ada terlebih dahulu di repositori csswg-drafts. Jika tidak ada masalah yang cocok dengan proposal Anda, buat masalah baru.
  • Untuk melaporkan bug pada penerapan singkatan flow-relatif Chromium, periksa masalah yang ada terlebih dahulu di Pelacak Bug Chromium. Jika tidak ada masalah yang cocok dengan bug Anda, buat masalah baru.