พอดแคสต์ CSS - 012: คุณสมบัติทางตรรกะ
รูปแบบอินเทอร์เฟซผู้ใช้ที่พบได้ทั่วไปคือป้ายกำกับข้อความที่มีไอคอนแทรกในบรรทัดที่รองรับ
ไอคอนนี้จะอยู่ทางด้านซ้ายของข้อความโดยมีช่องว่างเล็กน้อยระหว่างทั้ง 2 ข้อความ
แสดงโดย margin-right
บนไอคอน
อย่างไรก็ตาม จะไม่มีปัญหา เพราะ
จะใช้ได้เฉพาะเมื่อทิศทางข้อความซ้ายไปขวาเท่านั้น
หากทิศทางข้อความเปลี่ยนเป็นแบบขวาไปซ้าย ซึ่งเป็นแบบที่ภาษาต่างๆ อย่างภาษาอาหรับอ่านได้ ไอคอนจะตั้งอยู่คู่กับข้อความ
คุณจะอธิบายถึงสิ่งนี้ใน CSS ได้อย่างไร คุณสมบัติทางตรรกะช่วยให้คุณแก้ไขสถานการณ์เหล่านี้ได้ นอกจากจะให้ประโยชน์อื่นๆ มากมายแล้ว องค์กรยังให้การสนับสนุนแบบอัตโนมัติโดยไม่คิดค่าใช้จ่ายสำหรับการทำให้เป็นสากล ซึ่งจะช่วยคุณสร้างฟรอนท์เอนด์ที่มีความยืดหยุ่นและครอบคลุมมากขึ้น
คำศัพท์
คุณสมบัติทางกายภาพของด้านบน ขวา ด้านล่าง และซ้ายหมายถึงขนาดทางกายภาพของวิวพอร์ต คุณอาจคิดว่าสิ่งเหล่านี้เป็นเหมือนเข็มทิศพุ่งอยู่บนแผนที่ ในทางกลับกัน คุณสมบัติทางตรรกะหมายถึงขอบของช่องเนื่องจากสัมพันธ์กับการไหลของเนื้อหา ดังนั้นจึงอาจเปลี่ยนแปลงได้หากทิศทางของข้อความหรือโหมดการเขียนเปลี่ยนไป นี่เป็นการเปลี่ยนแปลงครั้งใหญ่จากสไตล์ที่มีทิศทาง และช่วยให้เราจัดรูปแบบอินเทอร์เฟซได้อย่างยืดหยุ่นขึ้นมาก
บล็อกขั้นตอน
โฟลว์บล็อกคือทิศทางในการวางบล็อกเนื้อหา เช่น หากมี 2 ย่อหน้า ขั้นตอนการบล็อกจะแสดงย่อหน้าที่ 2 ในเอกสารภาษาอังกฤษ ขั้นตอนการบล็อกจะแสดงจากบนลงล่าง ให้นึกถึงแนวคิดนี้ในบริบทของย่อหน้าข้อความที่เรียงต่อกันไปโดยเรียงจากบนลงล่าง
โฟลว์แบบอินไลน์
โฟลว์แบบแทรกในบรรทัดคือลักษณะการไหลของข้อความในประโยค
ในเอกสารภาษาอังกฤษ โฟลว์ในหน้าจะอ่านจากซ้ายไปขวา
หากคุณต้องการเปลี่ยนภาษาของเอกสารของหน้าเว็บเป็นภาษาอาหรับ (<html lang="ar">
) ขั้นตอนแบบแทรกในบรรทัดจะเป็นแบบขวาไปซ้าย
ข้อความจะมีทิศทางตามทิศทางการเขียนของเอกสาร
คุณเปลี่ยนทิศทางการวางข้อความได้ด้วยพร็อพเพอร์ตี้ writing-mode
ซึ่งนำไปใช้กับทั้งเอกสารหรือองค์ประกอบเดียวได้
สัมพัทธ์ของการไหล
ที่ผ่านมาใน CSS
เราสามารถใช้เฉพาะคุณสมบัติ เช่น ส่วนต่างกำไรที่สัมพันธ์กับทิศทางของฝั่ง
เช่น มีการใช้ margin-top
กับส่วนบนขององค์ประกอบ
เมื่อมีคุณสมบัติเชิงตรรกะ margin-top
จะกลายเป็น margin-block-start
ซึ่งหมายความว่าไม่ว่าภาษาและข้อความจะเป็นอย่างไร ขั้นตอนการบล็อกจะมีกฎอัตรากำไรที่เหมาะสม
![แผนภาพแสดงกล่องขนาดต่างๆ ทั้งหมดและส่วนการกำหนดขนาดแต่ละส่วนเริ่มต้นและสิ้นสุด](https://web.dev/static/learn/css/logical-properties/image/a-diagram-showing-the-di-12ce9bdac4132.png?authuser=6&hl=th)
ขนาด
หากต้องการป้องกันไม่ให้องค์ประกอบมีความกว้างหรือความสูงเกินที่กำหนด ให้เขียนกฎดังนี้
.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
จะย้ายเข้าจากจุดเริ่มต้นของการบล็อก
พร็อพเพอร์ตี้ inset-block
ไม่ใช่ตัวเลือกชวเลขเพียงตัวเลือกเดียวที่มีพร็อพเพอร์ตี้เชิงตรรกะ
กฎนี้สามารถย่อให้ละเอียดขึ้นโดยใช้พร็อพเพอร์ตี้ระยะขอบและระยะห่างจากขอบซึ่งเป็นเวอร์ชันแบบสั้น
.my-element {
padding-block: 2em;
margin-inline: 2em 0;
position: relative;
inset-block: 0.2em 0;
}
Borders
คุณจะเพิ่ม 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
เดียวกันในป้ายกำกับทั้งสองได้
ค่า 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
คำที่มีการขีดเส้นใต้ในด้านตรรกะใด