คุณสมบัติเชิงตรรกะสำหรับชวเลขที่มีประโยชน์

Michelle Barker กับบล็อกโพสต์ sorta ที่ฉันโปรดปราน: สั้น ๆ ใช้งานได้จริงและปล่อยให้คุณมีนักเก็ตที่มีค่าสำหรับเวลาของคุณ ที่นี่, เธอเข้าสู่การจดชวเลขคุณสมบัติเชิงตรรกะใน CSSโดยเฉพาะอย่างยิ่งที่ตั้งค่าความยาวบนแกนเดียว พูดเฉพาะแกนบล็อก (แนวตั้ง) หรือเฉพาะแกนอินไลน์ (แนวนอน)

ฉันพูดว่า "บล็อก" และ "อินไลน์" เพราะเท่าที่เกี่ยวข้องกับคุณสมบัติเชิงตรรกะ แกน x สามารถทำงานเหมือนแกนแนวตั้งได้เช่นกันขึ้นอยู่กับกระแส writing-mode.

ดังนั้นที่ๆเราเคยมี padding, marginและ border ชวเลขที่รองรับไวยากรณ์แบบหลายค่า ไม่มีใครอนุญาตให้เราประกาศความยาวบนแกนเฉพาะโดยไม่ต้องตั้งค่าความยาวบนอีกแกนหนึ่งด้วย

ตัวอย่างเช่น:

/* This gives us margin on the inline axis */
margin: 0 3rem;

…แต่เราต้องตั้งค่าอีกแกนหนึ่งเพื่อไปที่นั่น อย่างไรก็ตาม ด้วยคุณสมบัติเชิงตรรกะ เรามีชวเลขเพิ่มเติมสำหรับแต่ละแกน ซึ่งหมายความว่าเราสามารถระบุ margin-inline ชวเลขเพื่อทำงานโดยเฉพาะบนแกนอินไลน์:

margin-inline: 3rem;

มิเชลล์กล่าวถึงการจดชวเลขคุณสมบัติเชิงตรรกะที่ฉันโปรดปรานในการผ่าน กี่ครั้งที่คุณวางตำแหน่งบางสิ่งบางอย่างในทำนองนี้:

.position-me {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

เราสามารถเอาสี่บรรทัดนั้นเข้าไปด้วย inset: 0. หรือเราสามารถกำหนดเป้าหมายบล็อกและแกนอินไลน์โดยตรงด้วย inset-block และ inset-inlineตามลำดับ

ในขณะที่เรากำลังพูดชวเลข ฉันชอบที่จะใส่คำเตือนเกี่ยวกับ ”โดยบังเอิญ” CSS รีเซ็ต. เพียงหนึ่งใน ข้อผิดพลาด CSS ทั่วไปที่ฉันทำ.

ลิงค์ตรง →