คุณสมบัติทางตรรกะ

พอดแคสต์ CSS - 012: คุณสมบัติทางตรรกะ

รูปแบบอินเทอร์เฟซผู้ใช้ที่พบได้ทั่วไปคือป้ายกำกับข้อความที่มีไอคอนแทรกในบรรทัดที่รองรับ

ไอคอนนี้จะอยู่ทางด้านซ้ายของข้อความโดยมีช่องว่างเล็กน้อยระหว่างทั้ง 2 ข้อความ แสดงโดย margin-right บนไอคอน อย่างไรก็ตาม จะไม่มีปัญหา เพราะ จะใช้ได้เฉพาะเมื่อทิศทางข้อความซ้ายไปขวาเท่านั้น หากทิศทางข้อความเปลี่ยนเป็นแบบขวาไปซ้าย ซึ่งเป็นแบบที่ภาษาต่างๆ อย่างภาษาอาหรับอ่านได้ ไอคอนจะตั้งอยู่คู่กับข้อความ

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

คำศัพท์

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

บล็อกขั้นตอน

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

บล็อก 3 บล็อก, องค์ประกอบ div มีลูกศรลงและมีป้ายกำกับว่า "ขั้นตอนบล็อก"

โฟลว์แบบอินไลน์

โฟลว์แบบแทรกในบรรทัดคือลักษณะการไหลของข้อความในประโยค ในเอกสารภาษาอังกฤษ โฟลว์ในหน้าจะอ่านจากซ้ายไปขวา หากคุณต้องการเปลี่ยนภาษาของเอกสารของหน้าเว็บเป็นภาษาอาหรับ (<html lang="ar">) ขั้นตอนแบบแทรกในบรรทัดจะเป็นแบบขวาไปซ้าย

3 คำ &quot;เธอขายเปลือกหอย&quot; มีลูกศรซ้าย-ขวาและเขียนว่า &quot;inline Flow&quot;

ข้อความจะมีทิศทางตามทิศทางการเขียนของเอกสาร คุณเปลี่ยนทิศทางการวางข้อความได้ด้วยพร็อพเพอร์ตี้ 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 จะย้ายเข้าจากจุดเริ่มต้นของการบล็อก

พร็อพเพอร์ตี้ 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
เนื้อหาจะไหลเป็นบล็อก และข้อมือของคุณเคลื่อนที่ไปตามแกนนี้เมื่อจบเนื้อหาประเภทหนึ่งแล้วเริ่มเล่นอีกประเภทหนึ่ง

เลือกทุกรายการที่อาจได้รับประโยชน์จากพร็อพเพอร์ตี้เชิงตรรกะ

สี
สีจะไม่เปลี่ยนเมื่ออยู่ในโหมดการเขียนเอกสาร
alignment
ตัวอย่าง: flex-start, block-end และ inline-start
เงา
โดยเงาจะไม่เปลี่ยนแปลงเมื่อโหมดการเขียนเอกสารเปลี่ยน
ด้านข้างกล่อง
ตัวอย่าง: block-start และ inline
ขนาด
ตัวอย่าง: inline-size และ max-block-size
มุมกล่อง
เช่น border-end-end-radius

คำที่มีการขีดเส้นใต้ในด้านตรรกะใด

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