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

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

Una Kravets

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

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

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

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

min()

max()

clamp()

การใช้งาน

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

ฟังก์ชัน max() ก็ทำแบบเดียวกันนี้กับค่าสูงสุด

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

ฟังก์ชันเหล่านี้สามารถใช้ที่ใดก็ได้บน <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))

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

ความกว้างที่สมบูรณ์แบบ

ตามที่ระบุไว้ในองค์ประกอบของการพิมพ์ รูปแบบ โดยโรเบิร์ต บริงเฮิสต์ "ข้อความตั้งแต่ 45 ถึง 75 ตัวได้รับการยกย่องอย่างกว้างขวางว่าเป็น ความยาวบรรทัดที่น่าพอใจสำหรับหน้าคอลัมน์เดียวซึ่งตั้งค่าในหน้าข้อความแบบ Serif ในขนาดข้อความ"

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

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

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

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

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

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

คุณยังใช้ 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);
}

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

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

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

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

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

• ค่าและหน่วย CSS ใน MDN
• ค่า CSS และข้อกำหนดหน่วยระดับ 4
• บทความเคล็ดลับของ CSS เกี่ยวกับความกว้างภายในองค์ประกอบ
• min(), max(), camp() ภาพรวมโดย Ahmad Shadeed

ภาพหน้าปกจาก @yer_a_wizard หน้าจอเปิด