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 atas tata letak internasional mereka melalui gaya dimensi dan arah yang logis, bukan fisik. Di Chromium 87, singkatan dan offset telah dikirim untuk membuat properti dan nilai logis ini sedikit lebih mudah ditulis. Hal ini membuat Chromium sejajar dengan Firefox, yang telah memiliki dukungan untuk singkatan sejak versi 66. Safari telah menyiapkannya di pratinjau teknologi mereka.

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 inline.

Alur dokumen

Jika sudah memahami properti logis, sumbu inline dan blok, dan tidak ingin mengulang materi, Anda dapat melanjutkan. Jika tidak, berikut adalah pengingat singkat.

Dalam bahasa Inggris, huruf dan kata mengalir dari kiri ke kanan, sedangkan paragraf ditumpuk dari atas ke bawah. Dalam bahasa China tradisional, huruf dan kata dibaca 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 spasi yang sesuai untuk 1 gaya bahasa. Jika halaman diterjemahkan ke dalam bahasa China tradisional dari bahasa Inggris, margin tersebut mungkin tidak masuk akal pada mode penulisan vertikal baru.

Oleh karena itu, sisi fisik kotak tidak terlalu berguna secara internasional. Dengan demikian, dimulailah proses untuk mendukung beberapa bahasa; mempelajari sisi fisik versus logis dari model kotak.

Pernahkah Anda memeriksa elemen p di Chrome DevTools? Jika demikian, Anda mungkin telah melihat bahwa gaya Agen Pengguna default bukanlah 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 bagian atas atau bawah seperti yang mungkin diyakini pembaca bahasa Inggris. block-start dan block-end. Properti logis ini mirip dengan atas dan bawah pembaca bahasa Inggris, tetapi juga mirip dengan pembaca bahasa Jepang sebagai kanan dan kiri. Ditulis sekali, berfungsi di mana saja.

Alur normal adalah saat halaman web 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 "dalam" dan "di luar" alur di MDN atau dalam spesifikasi Modul Tampilan CSS. Meskipun properti logis tidak diwajibkan untuk berada dalam alur, properti tersebut melakukan banyak pekerjaan berat untuk Anda saat arah berubah. Alur menyiratkan arah, yang harus dilalui huruf, kata, dan konten. Hal ini membuat kita memblokir dan menyisipkan petunjuk logis.

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

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

Arah inline adalah arah huruf dan kata. Pertimbangkan arah gerakan lengan dan tangan Anda saat menulis; keduanya bergerak di sepanjang inline-axis. inline-start adalah sisi tempat Anda mulai menulis, sedangkan inline-end adalah sisi tempat penulisan berakhir atau pembungkus. Pada video di atas, inline-axis mengalir dari atas ke bawah, tetapi pada video berikutnya, inline-axis mengalir dari kanan ke kiri.

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

Singkatan baru

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

Singkatan margin

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

Tulisan tangan
margin-block-start: 2ch;
margin-block-end: 2ch;
Singkatan 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 sisi menggunakan singkatan margin: 10px;, dan sekarang Anda dapat dengan mudah mereferensikan 2 sisi pelengkap menggunakan singkatan properti logis.

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

Singkatan padding

Tidak ada kemampuan baru yang dikirimkan, tetapi ada lebih banyak singkatan yang sangat praktis:
padding-block dan padding-inline.


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

Dan kumpulan singkatan gratis untuk inline:

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

Singkatan dan sisipan

Semua properti fisik top, right, bottom, dan left dapat ditulis sebagai nilai untuk properti inset. Nilai position apa pun dapat memperoleh manfaat dari menetapkan sisi dengan inset.

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


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

Tampilannya akan langsung terlihat praktis. Inset adalah singkatan untuk sisi fisik, dan bekerja seperti margin dan padding.

Fitur baru

Meskipun disingkat sisi fisik ini menarik, ada lebih banyak lagi dari fitur logis yang dihadirkan oleh singkatan inset tambahan. Cara pintas ini memberikan kemudahan penulisan developer (lebih singkat mengetik), tetapi juga meningkatkan potensi jangkauan untuk tata letak karena bersifat relatif terhadap alur.

Tulisan tangan panjang 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 tanda tangan inset tersedia di MDN.

Singkatan batas

Batas, beserta properti color, style, dan width bertingkatnya juga memiliki singkatan logis 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 singkat dan tanda tangan tersedia di MDN.

Contoh properti logis <figure>

Mari kita gabungkan semuanya dalam contoh kecil. Properti logika dapat menata gambar dengan teks untuk menangani penulisan dan arah dokumen yang berbeda.

Atau coba!

Anda tidak perlu melakukan banyak hal untuk membuat kartu responsif secara internasional dengan <figure> dan beberapa properti logis. Jika Anda penasaran dengan cara kerja semua CSS yang berorientasi secara internasional ini, semoga ini adalah pengantar kecil yang bermakna.

Dukungan polyfilling dan lintas browser

Alat Cascade atau build adalah opsi yang layak untuk memiliki browser lama dan baru, dengan spasi yang tepat dan properti logis yang diperbarui. Untuk penggantian Cascade, 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;
}

Namun, itu bukan solusi lengkap untuk semua orang. Berikut adalah penggantian tulisan 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 memberikan 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. Lihat masing-masing untuk melihat mana yang cocok dengan toolchain dan strategi situs Anda secara keseluruhan.

Langkah berikutnya

CSS akan menawarkan lebih banyak properti logis, dan ini belum selesai. Namun, ada satu kumpulan singkatan besar yang hilang, dan penyelesaiannya masih menunggu di masalah GitHub ini. Ada solusi sementara dalam draf. Bagaimana jika Anda ingin menata gaya semua sisi logis dari kotak dengan penyingkatan?

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 dengan setiap singkatan untuk mendapatkan padanan logis yang diterapkan, yang mungkin tidak terlalu DRY bagi sebagian orang.

Ada proposal lain untuk mengubahnya di tingkat blok atau halaman, tetapi hal itu dapat membocorkan penggunaan logis ke 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 mempelajari atau mempelajari lebih lanjut properti logis? Berikut adalah referensi terperinci, beserta panduan dan contohnya, di MDN 🤓

Masukan

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