การปรับปรุงการออกแบบเชิงตรรกะด้วยสัญลักษณ์แบบย่อที่สัมพันธ์กับโฟลว์

ตัวย่อพร็อพเพอร์ตี้เชิงตรรกะใหม่และพร็อพเพอร์ตี้ส่วนเกินใหม่สําหรับ Chromium

Adam Argyle

Oriol Brufau

ตั้งแต่ Chromium 69 (3 กันยายน 2018) พร็อพเพอร์ตี้เชิงตรรกะและค่าต่างๆ ช่วยให้นักพัฒนาซอฟต์แวร์ควบคุมเลย์เอาต์ระหว่างประเทศได้โดยใช้ตรรกะ แทนที่จะเป็นรูปแบบทางกายภาพ ทิศทาง และมิติข้อมูล ใน Chromium 87 มีการจัดส่งชวเลขและออฟเซ็ตเพื่อให้เขียนคุณสมบัติและค่าเชิงตรรกะเหล่านี้ได้ง่ายขึ้น การทำเช่นนี้จะอัปเดต Chromium จนถึง Firefox ซึ่งมีการรองรับชวเลข มาตั้งแต่ 66 ปี Safari มีฟีเจอร์เหล่านี้ให้ใช้งานในเวอร์ชันตัวอย่างเทคโนโลยี

ขั้นตอนของเอกสาร

หากคุ้นเคยกับพร็อพเพอร์ตี้เชิงตรรกะ แกนแนวตั้งและแนวนอน และไม่ต้องการศึกษาเพิ่มเติม คุณสามารถข้ามไปข้างหน้าได้ หรือจะดูข้อมูลสรุปสั้นๆ ก็ได้

ในภาษาอังกฤษ ตัวอักษรและคำจะอ่านจากซ้ายไปขวาในขณะที่ย่อหน้าเรียงซ้อนกันตั้งแต่บนลงล่าง ในภาษาจีนแบบดั้งเดิม ตัวอักษรและคำจะเรียงจากบนลงล่าง ส่วนย่อหน้าจะซ้อนกันจากขวาไปซ้าย ใน 2 กรณีนี้ หากเราเขียน CSS ที่วาง "ระยะขอบบน" ในย่อหน้า เราจะเว้นวรรคเพียง 1 รูปแบบภาษาอย่างเหมาะสม หากหน้าเว็บแปลจากภาษาอังกฤษเป็นจีนตัวเต็ม การเยื้องอาจไม่เหมาะสมในโหมดการเขียนแนวตั้งแบบใหม่

ดังนั้น กล่องของอุปกรณ์จึงไม่ค่อยมีประโยชน์มากนักในต่างประเทศ จึงเริ่มต้นกระบวนการรองรับหลายภาษา โดยเรียนรู้เกี่ยวกับด้านจริงหรือด้านตรรกะของโมเดลกล่อง

เคยตรวจสอบองค์ประกอบ p ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ไหม ในกรณีนี้ คุณอาจสังเกตเห็นว่าสไตล์ User Agent เริ่มต้นไม่ใช่สไตล์ที่แท้จริง แต่เป็นแบบตรรกะ

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

CSS จากสไตล์ชีต User Agent ของ Chromium

โดยไม่ได้อยู่ที่ด้านบนหรือด้านล่างอย่างที่ผู้อ่านภาษาอังกฤษอาจเข้าใจ block-start กับ block-end พร็อพเพอร์ตี้เชิงตรรกะเหล่านี้คล้ายกับด้านบนและด้านล่างสำหรับผู้อ่านภาษาอังกฤษ แต่ยังคล้ายกับด้านขวาและซ้ายสำหรับผู้อ่านภาษาญี่ปุ่นด้วย เขียนเพียงครั้งเดียว ใช้งานได้ทุกที่

ขั้นตอนปกติคือเมื่อหน้าเว็บเป็นส่วนหนึ่งของการนําทางแบบหลายทิศทางนี้โดยเจตนา เมื่อเนื้อหาหน้าเว็บอัปเดตตามการเปลี่ยนแปลงการวางแนวเอกสาร ระบบจะพิจารณาเลย์เอาต์และองค์ประกอบของเลย์เอาต์ในลำดับ อ่านเพิ่มเติมเกี่ยวกับ "ใน" และ "นอก" ของโฟลว์ใน MDN หรือในข้อกำหนดของโมดูลการแสดงผล CSS แม้ว่าพร็อพเพอร์ตี้เชิงตรรกะจะไม่จำเป็นต้องอยู่ในโฟลว์ แต่พร็อพเพอร์ตี้เหล่านี้จะทํางานหนักให้คุณเมื่อทิศทางเปลี่ยนแปลง การวางเลย์เอาต์จะกำหนดทิศทางที่ตัวอักษร คำ และเนื้อหาต้องวาง ซึ่งนำไปสู่การบล็อกและคำสั่งเชิงตรรกะแบบอินไลน์

ทิศทางของบล็อกคือทิศทางที่บล็อกเนื้อหาใหม่จะวางอยู่ เช่น ถามตัวเองว่า "จะวางย่อหน้าถัดไปไว้ตรงไหน" คุณอาจมองว่าเป็น "การบล็อกเนื้อหา" หรือ "บล็อกข้อความ" แต่ละภาษาจะจัดเรียงบล็อกและเรียงลําดับตามblock-axisของตน block-start คือด้านที่ย่อหน้าแรกวางอยู่ ส่วน block-end คือด้านที่ย่อหน้าใหม่จะไหลไป

ในตัวเขียนภาษาญี่ปุ่นแบบดั้งเดิม ทิศทางของกลุ่มตัวอักษรจะไหลจากขวาไปซ้าย เช่น

ทิศทางในบรรทัดคือทิศทางของตัวอักษรและคำต่างๆ ลองนึกถึงทิศทางที่แขนและมือของคุณเคลื่อนไหวเมื่อเขียน นั่นคือการเคลื่อนไหวไปตาม inline-axis inline-start คือด้านที่คุณเริ่มเขียน ส่วน inline-end คือด้านที่สิ้นสุดการเขียนหรือตัดบรรทัด ในวิดีโอด้านบน inline-axis จะแสดงจากบนลงล่าง แต่วิดีโอถัดไปนี้ inline-axis จะแสดงจากขวาไปซ้าย

ค่าเป็น flow-relative หมายความว่ารูปแบบที่เขียนสำหรับภาษาหนึ่งจะใช้ตามบริบทและนำไปใช้กับภาษาอื่นๆ อย่างเหมาะสม เนื้อหาจะแสดงตามภาษาที่ส่ง

ตัวย่อใหม่

ทางลัดบางรายการต่อไปนี้ไม่ใช่ฟีเจอร์ใหม่สําหรับเบราว์เซอร์ แต่เป็นวิธีการที่ง่ายกว่าในการเขียนรูปแบบโดยใช้ประโยชน์จากที่สามารถกําหนดค่าบนทั้งขอบบล็อกหรือขอบในบรรทัดได้พร้อมกัน inset-*พร็อพเพอร์ตี้เชิงตรรกะมีความสามารถใหม่ๆ เนื่องจากก่อนหน้านี้ไม่มีวิธีระบุตําแหน่งสัมบูรณ์ด้วยพร็อพเพอร์ตี้เชิงตรรกะ เนื่องจากการแทรกและตัวย่อทำงานร่วมกันได้ดี (ฮ่าๆ) เราจึงจะบอกคุณเกี่ยวกับฟีเจอร์ใหม่ทั้งหมดของพร็อพเพอร์ตี้เชิงตรรกะที่จะเปิดตัวใน Chromium 87 พร้อมกัน

ตัวย่อของระยะขอบ

แต่ไม่มีความสามารถใหม่ๆ เกิดขึ้นเลย แต่มีทักษะสั้นๆ ที่มีประโยชน์มาก ได้แก่
margin-block และ margin-inline

margin-block-start: 2ch;
margin-block-end: 2ch;

margin-block: 2ch;
/* or */
margin-block: 2ch 2ch;

ก่อนหน้านี้ยังไม่มีตัวย่อสำหรับ "ด้านบนและด้านล่าง" หรือ "ซ้ายและขวา" คุณอาจอ้างอิงทั้ง 4 ด้านโดยใช้อักษรย่อ margin: 10px; และตอนนี้คุณก็อ้างอิง 2 ด้านเสริมกันได้ง่ายๆ โดยใช้อักษรย่อของพร็อพเพอร์ตี้เชิงตรรกะ

margin-inline-start: 4ch;
margin-inline-end: 2ch;

margin-inline: 4ch 2ch;

ระยะห่างจากขอบ

ยังไม่มีความสามารถใหม่ๆ อะไรเลย แต่ข้อความสั้นๆ ที่มีประโยชน์มากยิ่งไปกว่านั้น:
padding-block และ padding-inline

padding-block-start: 2ch;
padding-block-end: 2ch;

padding-block: 2ch;
/* or */
padding-block: 2ch 2ch;

และชุดตัวย่อ inline แบบไม่เสียค่าใช้จ่าย

padding-inline-start: 4ch;
padding-inline-end: 2ch;

padding-inline: 4ch 2ch;

ข้อความแทรกและตัวย่อ

สถานที่จริง top, right, bottom และ left ทั้งหมดเขียนเป็นค่าสำหรับพร็อพเพอร์ตี้ inset ได้ ค่าใดๆ ของ position จะได้รับประโยชน์จากการใส่ค่าระยะขอบ

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

position: absolute;
top: 1px;
right: 2px;
bottom: 3px;
left: 4px;

position: absolute;
inset: 1px 2px 3px 4px;

แค่นี้ก็ดูสะดวกแล้ว Inset คือชวเลขสำหรับด้านจริง และจะทำงานเหมือนระยะขอบและระยะห่างจากขอบ

ฟีเจอร์ใหม่

การใช้ตัวย่อด้านรูปธรรมนั้นน่าตื่นเต้นเพียงใด แต่ยังมีฟีเจอร์เชิงตรรกะอีกมากมายที่ได้จากตัวย่อ inset เพิ่มเติม ชวเลขเหล่านี้ช่วยเพิ่มความสะดวกในการเขียนให้กับนักพัฒนาซอฟต์แวร์ (ใช้เวลาพิมพ์น้อยกว่า) แต่ยังเพิ่มโอกาสในการเข้าถึงเลย์เอาต์อีกด้วยเพราะขึ้นอยู่กับความลื่นไหล

position: absolute;
top: 10px;
bottom: 10px;

position: absolute;
inset-block: 10px;

position: absolute;
left: 10px;
right: 20px;

position: absolute;
inset-inline: 10px 20px;

การอ่านเพิ่มเติมและรายการชวเลขหมายมือและลองจิจูดทั้งหมดมีอยู่ใน MDN

ตัวย่อของเส้นขอบ

พร็อพเพอร์ตี้ Border รวมถึงพร็อพเพอร์ตี้ color, style และ width ที่ฝังอยู่ทั้งหมดมีอักษรย่อเชิงตรรกะใหม่ด้วย

border-top-color: hotpink;
border-bottom-color: hotpink;

border-block-color: hotpink;
/* or */
border-block-color: hotpink hotpink;

border-left-style: dashed;
border-right-style: dashed;

border-inline-style: dashed;
/* or */
border-inline-style: dashed dashed;

border-left-width: 1px;
border-right-width: 1px;

border-inline-width: 1px;
/* or */
border-inline-width: 1px 1px;

อ่านเพิ่มเติมและดูรายการแบบย่อและแบบเต็มของเส้นขอบทั้งหมดได้ใน MDN

ตัวอย่างพร็อพเพอร์ตี้แบบตรรกะ <figure>

มาลองดูตัวอย่างสั้นๆ กัน พร็อพเพอร์ตี้เชิงตรรกะสามารถวางเลย์เอาต์รูปภาพที่มีคำบรรยายเพื่อจัดการกับรูปแบบการเขียนและการวางแนวเอกสารที่แตกต่างกัน

หรือจะลองใช้ก็ได้

คุณไม่ต้องทำอะไรมากนักเพื่อให้การ์ดแสดงผลได้ทั่วโลกด้วย <figure> และพร็อพเพอร์ตี้เชิงตรรกะ 2-3 รายการ หากสงสัยว่า CSS ทั้งหมดที่คำนึงถึงผู้ใช้ทั่วโลกเหล่านี้ทำงานร่วมกันอย่างไร เราหวังว่าข้อมูลเบื้องต้นนี้จะช่วยคุณได้

การรองรับการแทนที่เนื้อหาและการสนับสนุนข้ามเบราว์เซอร์

เครื่องมือการเรียงซ้อนหรือเครื่องมือสร้างเป็นตัวเลือกที่ใช้งานได้ดีสำหรับเบราว์เซอร์เก่าและเบราว์เซอร์ใหม่ โดยมีระยะห่างอย่างเหมาะสมด้วยคุณสมบัติเชิงตรรกะที่อัปเดต สำหรับการแสดงผลสำรองตามลำดับขั้น ให้ตามหลังพร็อพเพอร์ตี้เชิงกายภาพด้วยพร็อพเพอร์ตี้เชิงตรรกะ แล้วเบราว์เซอร์จะใช้พร็อพเพอร์ตี้ "สุดท้าย" ที่พบระหว่างการแก้ไขสไตล์

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

แต่วิธีนี้ไม่ใช่โซลูชันที่สมบูรณ์สำหรับทุกคน ต่อไปนี้คือบรรทัดแรกสำรองที่เขียนด้วยมือซึ่งใช้ประโยชน์จากตัวเลือกเสมือน :lang() เพื่อกำหนดเป้าหมายภาษาที่เฉพาะเจาะจง ปรับระยะห่างที่เหมาะสม แล้วใส่ระยะห่างเชิงตรรกะไว้ท้ายบรรทัดสำหรับเบราว์เซอร์ที่รองรับ

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

นอกจากนี้ คุณยังใช้ @supports เพื่อระบุว่าจะให้สถานที่ตั้งสำรองสำหรับพร็อพเพอร์ตี้จริงหรือไม่ ดังนี้

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

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

Sass, PostCSS, Emotion และอื่นๆ มีเครื่องมือรวมและ/หรือข้อเสนอสำหรับเวลาสร้างแบบอัตโนมัติที่มีทางเลือกหรือโซลูชันมากมาย ลองดูแต่ละรายการเพื่อดูว่ารายการใดตรงกับเครื่องมือและกลยุทธ์โดยรวมของเว็บไซต์

ขั้นตอนถัดไป

CSS ยังมีพร็อพเพอร์ตี้เชิงตรรกะอีกมากมายที่ยังไม่พร้อมใช้งาน แต่ยังมีชุดตัวย่อที่สำคัญชุดหนึ่งที่ขาดหายไป และเรายังรอการแก้ปัญหาในปัญหา GitHub นี้ เรามีวิธีแก้ปัญหาชั่วคราวในฉบับร่าง แล้วถ้าคุณอยากจัดรูปแบบ ด้านตรรกะทั้งหมดของกล่องด้วยชวเลข

margin: 1px 2px 3px 4px;
margin: 1px 2px;
margin: 2px;

margin: logical 1px 2px 3px 4px;
margin: logical 1px 2px;
margin: logical 2px;

ร่างข้อเสนอปัจจุบันหมายความว่าคุณต้องเขียน logical ในอักษรย่อทุกตัวเพื่อให้ใช้ตรรกะเทียบเท่าได้ ซึ่งฟังดูแห้งสำหรับบางคน

ยังมีข้อเสนออื่นๆ ที่จะทำการเปลี่ยนแปลงที่ระดับบล็อกหรือระดับหน้า แต่ก็อาจทำให้การใช้งานเชิงตรรกะหลุดไปในสไตล์ที่ยังคงถือว่าเป็นไปในด้านจริง

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 ..? */

ปัญหานี้ยากมาก ลงคะแนนเสียง แสดงความคิดเห็น เราอยากฟังจากคุณ

หากต้องการเรียนรู้หรือศึกษาสมบัติเชิงตรรกะเพิ่มเติม นี่คือข้อมูลอ้างอิงโดยละเอียด รวมถึงคำแนะนำและตัวอย่างใน MDN 🤓

ความคิดเห็น

• หากต้องการเสนอการเปลี่ยนแปลงไวยากรณ์ CSS ของคำย่อแบบสัมพันธ์กับโฟลว์ ให้ตรวจสอบปัญหาที่มีอยู่ในที่เก็บ csswg-drafts ก่อน หากไม่มีปัญหาที่มีอยู่ตรงกับข้อเสนอ ให้สร้างรายการใหม่
• หากต้องการรายงานข้อบกพร่องเกี่ยวกับการใช้งานชวเลขที่สัมพันธ์กับโฟลว์ของ Chromium ให้ตรวจสอบปัญหาที่มีอยู่ในเครื่องมือติดตามข้อบกพร่องของ Chromium ก่อน หากไม่มีปัญหาที่มีอยู่ที่ตรงกับข้อบกพร่องของคุณ ให้สร้างรายการใหม่