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

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

Adam Argyle

Oriol Brufau

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

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

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

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

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

คุณเคยตรวจสอบองค์ประกอบ p ใน Chrome DevTools ไหม หากเป็นเช่นนั้น คุณอาจ สังเกตว่ารูปแบบ 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 หมายความว่ารูปแบบที่เขียนสำหรับภาษาหนึ่งจะเป็นไปตามบริบทและเหมาะสม ที่สมัครในภาษาอื่นๆ ด้วย เนื้อหาจะไหลลื่นโดยสัมพันธ์กับภาษาที่กำลังนำส่งเนื้อหา

ชวเลขใหม่

ตัวอย่างย่อต่อไปนี้ไม่ใช่ฟีเจอร์ใหม่สำหรับเบราว์เซอร์ แต่ใช้ง่ายกว่า วิธีเขียนรูปแบบโดยใช้ประโยชน์จากความสามารถในการกำหนดค่าในทั้ง 2 บล็อก หรือขอบในบรรทัดได้พร้อมกัน คุณสมบัติเชิงตรรกะ 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 ชวเลขเหล่านี้ ความสะดวกในการเขียนของนักพัฒนาซอฟต์แวร์ (ใช้เวลาพิมพ์น้อยกว่า) แต่ยังเพิ่ม แนวโน้มการเข้าถึงสำหรับเลย์เอาต์เนื่องจาก มีการสัมพัทธ์กับความเคลื่อนไหว

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

position: absolute;
inset-block: 10px;

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

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

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

เส้นขอบสั้น

เส้นขอบ รวมถึงพร็อพเพอร์ตี้ 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> และพร็อพเพอร์ตี้เชิงตรรกะบางรายการ หากคุณสงสัยว่าทั้งหมดนี้ พิจารณา CSS ที่ทำงานร่วมกัน เราหวังว่านี่จะเป็นบทนำที่มีความหมายเล็กน้อย

การทำโพลีฟิลล์และการรองรับข้ามเบราว์เซอร์

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

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 และผู้เล่นอื่นๆ มี Bundler อัตโนมัติและ/หรือสร้าง ที่มีทางเลือกหรือทางแก้ไขที่หลากหลาย ลองดูผลิตภัณฑ์แต่ละอย่าง เพื่อดูว่ารายการใดตรงกับ Toolchain และกลยุทธ์โดยรวมของเว็บไซต์

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

CSS จำนวนมากขึ้นจะมีคุณสมบัติเชิงตรรกะ แต่ยังไม่เสร็จ ขาดไป 1 เล่มใหญ่ ชุดชวเลข และการแก้ไขปัญหายังอยู่ระหว่างรอดำเนินการในปัญหาเกี่ยวกับ 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 หากไม่มีปัญหาที่มีอยู่ที่ตรงกับข้อบกพร่องของคุณ ให้สร้างรายการใหม่