พอดแคสต์ CSS - 012: คุณสมบัติเชิงตรรกะ
รูปแบบอินเทอร์เฟซผู้ใช้ที่พบบ่อยคือป้ายข้อความที่มีไอคอนแบบอินไลน์ที่รองรับ
ไอคอนจะอยู่ทางด้านซ้ายของข้อความโดยมีช่องว่างระหว่างข้อความเล็กน้อย
จาก margin-right
บนไอคอน
ก็จะมีปัญหาเกิดขึ้น
เพราะจะใช้ได้เมื่อทิศทางข้อความอยู่จากซ้ายไปขวาเท่านั้น
หากทิศทางข้อความเปลี่ยนจากขวาไปซ้ายซึ่งเป็นภาษาที่ใช้อ่านในภาษาอาหรับ ไอคอนจะวางอยู่เหนือข้อความ
คุณอธิบายถึงเรื่องนี้ใน CSS อย่างไร คุณสมบัติเชิงตรรกะช่วยให้คุณแก้ไขสถานการณ์เหล่านี้ได้ และประโยชน์อื่นๆ อีกมากมาย ได้แก่ การสนับสนุนอัตโนมัติฟรีเพื่อทำให้เป็นสากล ซึ่งช่วยให้คุณสร้างฟรอนท์เอนด์ที่ยืดหยุ่นและไม่แบ่งแยก
คำศัพท์
คุณสมบัติทางกายภาพของด้านบน ขวา ล่าง และซ้ายหมายถึงขนาดทางกายภาพของวิวพอร์ต คุณอาจมองภาพเหล่านี้เหมือนรูปเข็มทิศบนแผนที่ ในทางตรงกันข้าม คุณสมบัติเชิงตรรกะ จะหมายถึงขอบกล่องที่เกี่ยวข้องกับโฟลว์ของเนื้อหา ดังนั้น จึงอาจเปลี่ยนได้หากทิศทางของข้อความหรือโหมดการเขียนมีการเปลี่ยนแปลง นี่เป็นการเปลี่ยนแปลงครั้งใหญ่จากรูปแบบที่ชี้นำ และทำให้เรามีความยืดหยุ่นมากขึ้นในการจัดรูปแบบอินเทอร์เฟซ
บล็อกโฟลว์
การบล็อกเนื้อหาคือทิศทางในการวางบล็อกเนื้อหา ตัวอย่างเช่น หากมี 2 ย่อหน้า ขั้นตอนการบล็อกจะเป็นตำแหน่งที่ย่อหน้าที่ 2 จะแสดงอยู่ ในเอกสารภาษาอังกฤษ รูปแบบการใช้บล็อกจะเป็นแบบบนลงล่าง ลองนึกถึงบริบทของย่อหน้าข้อความเรียงต่อกันแบบบนลงล่าง
โฟลว์แบบแทรกในบรรทัด
ขั้นตอนในบรรทัดคือวิธีการรับส่งข้อความในประโยค
ในเอกสารภาษาอังกฤษ คำว่า "แทรกในบรรทัด" จะมีจากซ้ายไปขวา
หากคุณเปลี่ยนภาษาเอกสารของหน้าเว็บเป็นภาษาอาหรับ (<html lang="ar">
)
โฟลว์ในหน้าจะอ่านจากขวาไปซ้าย
ข้อความไหลไปตามทิศทางที่กำหนดโดยโหมดการเขียนของเอกสาร
คุณสามารถเปลี่ยนทิศทางการวางข้อความได้ด้วยพร็อพเพอร์ตี้ writing-mode
ซึ่งนำไปใช้กับทั้งเอกสารหรือองค์ประกอบแต่ละรายการก็ได้
โฟลว์สัมพัทธ์
ในอดีตใน CSS
เราสามารถใช้คุณสมบัติ เช่น อัตรากำไร เมื่อเทียบกับทิศทางของด้านข้างเท่านั้น
ตัวอย่างเช่น margin-top
จะใช้กับส่วนบนสุดทางกายภาพขององค์ประกอบ
เมื่อใช้คุณสมบัติเชิงตรรกะ margin-top
จะกลายเป็น margin-block-start
ซึ่งหมายความว่าไม่ว่าภาษาและทิศทางของข้อความจะเป็นอย่างไรก็ตาม
ขั้นตอนการบล็อกมีกฎขอบที่เหมาะสม
การกำหนดขนาด
หากต้องการป้องกันไม่ให้องค์ประกอบมีขนาดเกินความกว้างหรือความสูงที่กำหนด เขียนกฎแบบนี้:
.my-element {
max-width: 150px;
max-height: 100px;
}
ค่าเทียบเท่าที่สัมพันธ์กับโฟลว์คือ max-inline-size
และ max-block-size
คุณยังใช้ min-block-size
และ min-inline-size
แทน min-height
และ min-width
ได้ด้วย
ด้วยคุณสมบัติเชิงตรรกะ กฎความกว้างและความสูงสูงสุดจะมีลักษณะดังนี้
.my-element {
max-inline-size: 150px;
max-block-size: 100px;
}
เริ่มต้นและสิ้นสุด
แทนที่จะใช้เส้นทาง เช่น บน ขวา ล่าง และซ้าย ให้ใช้จุดเริ่มต้นและจุดสิ้นสุด ซึ่งจะระบุจุดเริ่มต้นของบล็อก สิ้นสุดในบรรทัด สิ้นสุดบล็อก และเริ่มต้นแบบแทรกในบรรทัด ซึ่งจะช่วยให้คุณใช้คุณสมบัติ CSS ที่ตอบสนองต่อการเปลี่ยนแปลงโหมดการเขียนได้
ตัวอย่างเช่น คุณสามารถใช้ CSS ต่อไปนี้ในการจัดข้อความไปทางขวา
p {
text-align: right;
}
หากเป้าหมายไม่อยู่ในแนว
ที่ถูกต้องทางกายภาพ
แต่ให้เริ่มจากจุดเริ่มต้นของทิศทางการอ่าน
ไม่มีประโยชน์
ค่าตรรกะ จะทำให้มีค่า start
และ end
ที่มีประโยชน์มากกว่า ซึ่งจะจับคู่กับทิศทางของข้อความ
กฎการจัดแนวข้อความจะมีลักษณะดังนี้
p {
text-align: end;
}
การเว้นระยะห่างและการวางตำแหน่ง
พร็อพเพอร์ตี้เชิงตรรกะสำหรับ margin
, padding
และ inset
ทำให้การวางตำแหน่งองค์ประกอบ และกำหนดวิธีที่องค์ประกอบเหล่านี้จะโต้ตอบกันในโหมดการเขียนได้อย่างง่ายดายและมีประสิทธิภาพมากขึ้น
พร็อพเพอร์ตี้ที่สัมพันธ์กับระยะขอบและระยะห่างจากขอบยังคงเป็นการแมปโดยตรงกับเส้นทาง
แต่ความแตกต่างหลักๆ ก็คือเมื่อโหมดการเขียนเปลี่ยน ก็จะเปลี่ยนไปตามโหมดการเขียนด้วย
.my-element {
padding-top: 2em;
padding-bottom: 2em;
margin-left: 2em;
position: relative;
top: 0.2em;
}
การดำเนินการนี้จะเพิ่มพื้นที่ภายในแนวตั้งที่มี padding
และดันออกจากด้านซ้ายด้วย margin
พร็อพเพอร์ตี้ top
ย้ายลงมาด้วย
ด้วยคุณสมบัติเชิงตรรกะที่เทียบเท่ากัน จะมีลักษณะดังนี้
.my-element {
padding-block-start: 2em;
padding-block-end: 2em;
margin-inline-start: 2em;
position: relative;
inset-block-start: 0.2em;
}
การดำเนินการนี้จะเพิ่มพื้นที่ทํางานแบบแทรกในบรรทัดภายในด้วย padding
และดันออกจากบรรทัดเริ่มต้นด้วย margin
พร็อพเพอร์ตี้ inset-block
ย้าย URL เข้ามาจากจุดเริ่มต้นของการบล็อก
พร็อพเพอร์ตี้ inset-block
ไม่ใช่ตัวเลือกแบบสั้นเพียงอย่างเดียวที่มีพร็อพเพอร์ตี้เชิงตรรกะ
กฎข้อนี้สามารถย่อเพิ่มเติมได้
โดยใช้พร็อพเพอร์ตี้ระยะขอบและระยะห่างจากขอบเวอร์ชันสั้นๆ
.my-element {
padding-block: 2em;
margin-inline: 2em 0;
position: relative;
inset-block: 0.2em 0;
}
ขอบ
และยังเพิ่ม border
และ border-radius
โดยใช้คุณสมบัติเชิงตรรกะได้อีกด้วย
หากต้องการเพิ่มเส้นขอบด้านล่างและขวาด้วยรัศมีด้านขวา ให้คุณเขียนกฎดังนี้
.my-element {
border-bottom: 1px solid red;
border-right: 1px solid red;
border-bottom-right-radius: 1em;
}
หรืออาจใช้คุณสมบัติเชิงตรรกะดังนี้
.my-element {
border-block-end: 1px solid red;
border-inline-end: 1px solid red;
border-end-end-radius: 1em;
}
end-end
ใน border-end-end-radius
คือจุดสิ้นสุดของบล็อก และ จุดสิ้นสุดในบรรทัด
หน่วย
พร็อพเพอร์ตี้เชิงตรรกะจะมีหน่วยใหม่ 2 หน่วย ได้แก่ vi
และ vb
หน่วย vi
เท่ากับ 1% ของขนาดวิวพอร์ตในทิศทางอินไลน์
ค่าเทียบเท่าของพร็อพเพอร์ตี้ที่ไม่ใช่เชิงตรรกะคือ vw
หน่วย vb
คือ 1% ของวิวพอร์ตในทิศทางบล็อก
ค่าเทียบเท่าของพร็อพเพอร์ตี้ที่ไม่ใช่เชิงตรรกะคือ vh
หน่วยเหล่านี้จะจับคู่กับทิศทางการอ่านเสมอ
เช่น หากต้องการให้องค์ประกอบใช้พื้นที่อินไลน์ที่มีอยู่ของวิวพอร์ต 80%
โดยใช้หน่วย vi
จะเปลี่ยนขนาดดังกล่าวให้เป็นบนลงล่างโดยอัตโนมัติหากโหมดการเขียนเป็นแนวตั้ง
การใช้สมบัติเชิงตรรกะในทางปฏิบัติ
คุณสมบัติเชิงตรรกะและโหมดการเขียนไม่ได้มีไว้เพื่อการปรับให้เป็นสากลเท่านั้น คุณสามารถใช้อินเทอร์เฟซผู้ใช้เพื่อสร้างอินเทอร์เฟซผู้ใช้ที่มีประโยชน์หลากหลายมากขึ้น
หากคุณมีแผนภูมิที่มีป้ายกำกับเกี่ยวกับแกน X และแกน Y คุณอาจต้องการให้ข้อความบนป้ายกำกับ Y อ่านในแนวตั้ง
เนื่องจากป้ายกำกับแกน Y ในเดโมมี writing-mode
เป็น vertical-rl
คุณจะใช้ค่า margin
เดียวกันในป้ายกำกับทั้ง 2 ป้ายได้
ค่า margin-block-start
มีผลกับป้ายกำกับทั้ง 2 รายการ
เพราะจุดเริ่มต้นของบล็อกอยู่ด้านขวาสำหรับแกน Y และอยู่ด้านบนสำหรับแกน X
ด้านที่เริ่มบล็อกจะมีเส้นขอบสีแดงเพื่อให้คุณมองเห็นได้
การแก้ไขปัญหาเกี่ยวกับไอคอน
เมื่อพูดถึงคุณสมบัติเชิงตรรกะไปแล้ว ความรู้นี้สามารถประยุกต์ใช้กับปัญหาการออกแบบที่เราเริ่มไว้
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-right: 0.5em;
flex: none;
}
มีการใช้ขอบทางด้านขวาขององค์ประกอบไอคอนแล้ว
เพื่อให้ระยะห่างระหว่างไอคอนและข้อความสามารถรองรับทิศทางการอ่านทั้งหมด
คุณต้องใช้พร็อพเพอร์ตี้ margin-inline-end
แทน
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-inline-end: 0.5em;
flex: none;
}
ตอนนี้โดยไม่คำนึงถึงทิศทางการอ่าน ไอคอนจะวางตำแหน่งตัวเองและเว้นระยะห่างอย่างเหมาะสม
ตรวจสอบความเข้าใจ
ทดสอบความรู้ของคุณเกี่ยวกับสมบัติเชิงตรรกะ
เมื่อคุณใช้มือเขียน ข้อมือของคุณจะเคลื่อนที่ไปตามแกนตรรกะใด
inline
block
เลือกได้หลายคำตอบจากคุณสมบัติเชิงตรรกะ
flex-start
, block-end
และ inline-start
block-start
และ inline
inline-size
และ max-block-size
border-end-end-radius
ด้านใดเชิงตรรกะของคำที่ขีดเส้นใต้