CSS min(), max() และ clamp()

ดูวิธีควบคุมการปรับขนาดองค์ประกอบ รักษาระยะห่างที่เหมาะสม และใช้งานการพิมพ์แบบไหลโดยใช้ฟังก์ชัน CSS ที่รองรับเป็นอย่างดีเหล่านี้

Una Kravets

เมื่อการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์มีความละเอียดยิ่งขึ้น CSS จึงพัฒนาอย่างต่อเนื่องเพื่อให้ผู้เขียนควบคุมได้มากขึ้น ฟังก์ชัน min(), max() และ clamp() ซึ่งปัจจุบันรองรับในเบราว์เซอร์ที่ทันสมัยทั้งหมดเป็นหนึ่งในเครื่องมือล่าสุดที่ทำให้การสร้างเว็บไซต์และแอปมีลักษณะแบบไดนามิกและตอบสนองได้มากขึ้น คุณสามารถใช้ฟังก์ชันเหล่านี้เพื่อควบคุมการปรับขนาดและปรับขนาดองค์ประกอบ รักษาระยะห่างระหว่างองค์ประกอบ และสร้างการออกแบบตัวอักษรที่ยืดหยุ่นและไหล

ฟังก์ชันทางคณิตศาสตร์ calc(), min(), max() และ clamp() สามารถใช้นิพจน์ทางคณิตศาสตร์ที่มีการบวก (+) การลบ (-), การคูณ (*) และการหาร (/) เป็นค่าองค์ประกอบ

ค่า CSS และหน่วยระดับ 4

การสนับสนุนเบราว์เซอร์

min()

การสนับสนุนเบราว์เซอร์

  • 79
  • 79
  • 75
  • 11.1

แหล่งที่มา

max()

การสนับสนุนเบราว์เซอร์

  • 79
  • 79
  • 75
  • 11.1

แหล่งที่มา

clamp()

การสนับสนุนเบราว์เซอร์

  • 79
  • 79
  • 75
  • 13.1

แหล่งที่มา

การใช้งาน

คุณใช้ min(), max() และ clamp() ทางด้านขวาของนิพจน์ CSS ใดก็ได้ตามความเหมาะสม สำหรับ min() และ max() คุณจะระบุรายการค่าอาร์กิวเมนต์ และเบราว์เซอร์จะกำหนดว่าค่าใดเล็กหรือใหญ่ที่สุด เช่น ในกรณีของ width: min(1rem, 50%, 10vw) เบราว์เซอร์จะคํานวณหน่วยสัมพัทธ์ที่เล็กที่สุดและใช้ค่านั้นสําหรับความกว้างขององค์ประกอบ

ฟังก์ชัน min() จะเลือกค่าต่ำสุดจากรายการตัวเลือกใน การสาธิต Codepen

ฟังก์ชัน max() จะทำงานเหมือนกันเพื่อให้ได้ค่าสูงสุด

ฟังก์ชัน max() จะเลือกค่าจากรายการตัวเลือกใน การสาธิต Codepen นี้

หากต้องการใช้ clamp() ให้ป้อนค่า 3 ค่า ได้แก่ ค่าต่ำสุด ค่าที่เหมาะจะใช้คำนวณ และค่าสูงสุด

ฟังก์ชัน clamp() จะคงค่าระหว่างค่าต่ำสุดและค่าสูงสุดที่ระบุในการสาธิต Codepen นี้

คุณสามารถใช้ฟังก์ชันเหล่านี้ได้ทุกที่ที่อนุญาต <length>, <frequency>, <angle>, <time>, <percentage>, <number> หรือ <integer> คุณสามารถใช้เดี่ยวๆ (เช่น font-size: max(0.5vw, 50%, 2rem)), calc() (ดังเช่น font-size: max(calc(0.5vw - 1em), 2rem)) หรือประกอบ (อย่าง font-size: max(min(0.5vw, 1em), 2rem)) ก็ได้

ตัวอย่างวิธีใช้ฟังก์ชันเหล่านี้มีดังนี้

ความกว้างที่พอดี

จาก The Elements of Typographic Style โดย Robert Bringhurst ว่า "อักขระตั้งแต่ 45 ถึง 75 ตัวได้รับการยกย่องอย่างกว้างขวางว่าเป็นบรรทัดความยาวที่น่าพอใจสำหรับหน้าคอลัมน์เดียวในหน้าที่มีข้อความ serif ในขนาดข้อความ"

ใช้หน่วย clamp() และ ch (อักขระขั้นสูง แบบ 0 ความกว้าง) เพื่อให้แน่ใจว่าบล็อกข้อความมีความกว้างอยู่ระหว่าง 45 ถึง 75 อักขระ

p {
  width: clamp(45ch, 50%, 75ch);
}

ซึ่งจะช่วยให้เบราว์เซอร์กำหนดความกว้างของย่อหน้าได้ โดยกำหนดความกว้างเป็น 50% โดยค่าเริ่มต้น หาก 50% เล็กกว่า 45ch ระบบจะใช้ 45ch เป็นความกว้างแทน และหาก 50% กว้างกว่า 75ch จะใช้ 75ch

ใช้ฟังก์ชัน clamp() เพื่อกำหนดความกว้างต่ำสุดและสูงสุด ดูการสาธิตเกี่ยวกับ Codepen

นอกจากนี้ คุณยังแบ่งย่อยโดยใช้เพียง min() หรือ max() ได้อีกด้วย หากต้องการให้องค์ประกอบมีความกว้าง 50% เสมอ และความกว้างไม่เกิน 75ch ในหน้าจอที่ใหญ่ขึ้น ให้ใช้ width: min(75ch, 50%); เพื่อตั้งค่าขนาดสูงสุด

ใช้ฟังก์ชัน min() เพื่อกำหนดความกว้างสูงสุด

ในทำนองเดียวกัน คุณอาจกำหนดขนาดขั้นต่ำของข้อความที่อ่านได้ชัดเจนโดยใช้ฟังก์ชัน max() อย่างเช่นใน width: max(45ch, 50%); ในหน้านี้ เบราว์เซอร์จะเลือกค่าที่มากกว่า ซึ่งหมายความว่าองค์ประกอบต้องยาว 45ch ขึ้นไป

ใช้ฟังก์ชัน max() เพื่อตั้งค่าความกว้างขั้นต่ำ

จัดการระยะห่างจากขอบ

คุณยังใช้ max() เพื่อกำหนดขนาดระยะห่างจากขอบขั้นต่ำได้อีกด้วย ตัวอย่างนี้มาจากกลเม็ดของ CSS ที่ผู้อ่าน Caluã de Lacerda Pataca ได้แชร์แนวคิดนี้ว่า ให้องค์ประกอบมีระยะห่างจากขอบเพิ่มเติมในหน้าจอขนาดใหญ่ แต่ให้มีระยะห่างจากขอบขั้นต่ำที่ขนาดหน้าจอที่เล็กกว่า ในการทำเช่นนี้ ให้ใช้ calc() หรือ max() และลบระยะห่างจากขอบขั้นต่ำออกจากองค์ประกอบทั้ง 2 ด้าน: calc((100vw - var(--contentWidth)) / 2) หรือ max(2rem, 50vw - var(--contentWidth) / 2) ในสไตล์ชีตของคุณ ควรมีลักษณะดังนี้

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}
ตั้งค่าระยะห่างจากขอบขั้นต่ำสำหรับคอมโพเนนต์โดยใช้ฟังก์ชัน max() ดูการสาธิตเกี่ยวกับ Codepen

การพิมพ์แบบไหล

ในการเปิดใช้การพิมพ์แบบไหล Mike Riethmeuller ได้ทำให้เทคนิคที่ใช้ฟังก์ชัน clamp() เป็นที่นิยมในการกำหนดขนาดแบบอักษรขั้นต่ำ ขนาดแบบอักษรสูงสุด และอนุญาตให้ปรับขนาดระหว่างขนาดเหล่านั้นได้

ใช้ clamp() เพื่อสร้างการพิมพ์แบบไหล ดูการสาธิตเกี่ยวกับ Codepen

ก่อนวันที่ clamp(), การออกแบบการปรับขนาดแบบอักษรต้องใช้สตริงรูปแบบที่ซับซ้อน และตอนนี้ คุณสามารถปล่อยให้เบราว์เซอร์ทำงานให้คุณแล้ว ตั้งค่าขนาดแบบอักษรขั้นต่ำที่ยอมรับได้ (เช่น 1.5rem สำหรับชื่อหนึ่งๆ) ขนาดสูงสุด (เช่น 3rem) และขนาดที่เหมาะสม (เช่น 5vw) ตอนนี้คุณมีตัวอักษรที่ปรับขนาดตามความกว้างของวิวพอร์ตของหน้า จนกว่าจะถึงค่าต่ำสุดและสูงสุดที่จำกัดโดยใช้โค้ดเพียงเล็กน้อย:

p {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

แหล่งข้อมูลเพิ่มเติม

ภาพหน้าปกจาก @yer_a_wizard ใน Unsplash