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