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

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

อัครเดช ชัยดี
โอริออล บรูฟา
Oriol Brufau
GitHub

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

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

การรับส่งเอกสาร

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

ในภาษาอังกฤษ ตัวอักษรและคำจะเรียงจากซ้ายไปขวา ขณะที่ย่อหน้าจะเรียงซ้อนกันจากบนลงล่าง ในภาษาจีนตัวเต็ม ตัวอักษรและคำจะอยู่จากบนลงล่าง ขณะที่ย่อหน้าจะเรียงซ้อนกันจากขวาไปซ้าย ใน 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 แบบย่อ

โดยไม่ได้จัดส่งความสามารถใหม่ๆ เลย แต่ใช้
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;

น่าจะสะดวกขึ้นโดยทันที ส่วนแทรกเป็นคำย่อของขอบทั้ง 2 ด้าน และทำงานเหมือนกับระยะขอบและระยะห่างจากขอบ

ฟีเจอร์ใหม่

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

รองรับ Polyfilling และรองรับหลายเบราว์เซอร์

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

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

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

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 🤓

ความคิดเห็น