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

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

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

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

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

คำศัพท์

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

บล็อกโฟลว์

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

บล็อก 3 บล็อก องค์ประกอบ div พร้อมด้วยลูกศรลงพร้อมข้อความว่า "เส้นทางของบล็อก"

โฟลว์แบบแทรกในบรรทัด

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

เขียน 3 คำว่า &quot;เธอขายเปลือกหอย&quot; โดยมีลูกศรชี้ซ้ายไปขวาพร้อมข้อความเขียนว่า &#39;ไหลในบรรทัด&#39;

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

ด้านใดเชิงตรรกะของคำที่ขีดเส้นใต้

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