มานูเอล มาตูโซวิช: max() Trickery

โดยวิธีการ กระทู้ของ มานูเอล มาตูโซวิช ซึ่งเป็นวิธีการสาธิตโดย เทมานี่ อาฟิฟ.

.wrapper {
  margin-inline: max(0px, ((100% - 64rem) / 2)); 
}

คุณน่าจะชอบที่จะอ่านรายละเอียดทั้งหมดของ Manuel เกี่ยวกับสิ่งที่เกิดขึ้นที่นี่ แต่โดยพื้นฐานแล้วมันได้ผลเทียบเท่ากับรูปแบบที่ยาวกว่านี้:

.wrapper {
  max-width: 64rem;
  margin: 0 auto;
  width: 100%;
}

…ที่ไหน:

• สูงสุด () ยอมรับรายการค่าตัวเลข CSS ที่คั่นด้วยเครื่องหมายจุลภาค โดยที่ค่าที่ใช้จะมากที่สุด (หรือตาม MDN วางไว้, "แง่บวกมากที่สุด") หนึ่งในชุด
• 0px เป็นค่าแรกในชุด ทำให้มั่นใจว่าค่าที่น้อยที่สุดจะมากกว่าศูนย์พิกเซลเสมอ
• (100% - 64rem) เป็น “ค่า” ที่สองในชุด แต่แสดงเป็นการคำนวณ (โปรดทราบว่า calc() ไม่จำเป็น) ที่หักลบ max-width ขององค์ประกอบ (64rem) จากที่มีอยู่ทั้งหมด width (100%). สิ่งที่เหลืออยู่คือพื้นที่ที่องค์ประกอบไม่ถูกครอบครอง
• ((100% - 64rem) / 2)) แบ่งพื้นที่ที่เหลือนั้นเท่าๆ กัน เนื่องจากเรากำลังแบ่งมันระหว่างขอบเขตอินไลน์ขององค์ประกอบ
• max(0px, ((100% - 64rem) / 2)) เปรียบเทียบ 0px และ (100% - 64rem) / 2). ใช้ค่าที่มากที่สุด นั่นจะเป็นผลลัพธ์ของสมการในกรณีส่วนใหญ่ แต่ถ้า 64rem มีค่ามากกว่าค่าที่คำนวณได้ขององค์ประกอบเต็ม 100% width มันจะล็อกค่านั้นไว้ที่ศูนย์เพื่อให้แน่ใจว่าจะไม่ส่งผลให้เกิดค่าลบ
• margin-inline เป็นคุณสมบัติที่ชุดค่าที่ชนะซึ่งใช้มาร์จิ้นกับด้านอินไลน์ขององค์ประกอบ - นั่นคือชวเลขเชิงตรรกะที่เทียบเท่ากับการตั้งค่าเดียวกันเป็น margin-left และ margin-right คุณสมบัติทางกายภาพ

เป็นความคิดแบบเดียวกัน คริสแชร์เมื่อสักครู่ ที่ใช้ CSS max()ทำหน้าที่แก้ “ปัญหาภายใน” — คอนเทนเนอร์ที่รองรับสีพื้นหลังแบบเต็มในขณะที่จำกัดเนื้อหาภายในด้วย padding.

max(), calc(), margin-inline… นั่นคือ CSS แบบใหม่จำนวนมาก! และมานูเอลก็ตบตรงกลาง เขียนเกี่ยวกับคุณสมบัติ CSS เหล่านี้และคุณสมบัติอื่น ๆ ที่ทันสมัยกว่า 100 วัน.

ลิงค์ตรง →