การสร้างเลย์เอาต์ CSS ที่ดีเริ่มต้นด้วยการกําหนดขนาดสําหรับองค์ประกอบทั้งหมดที่วางไว้ในเว็บแอปพลิเคชัน ฟีเจอร์หนึ่งที่ผู้ใช้ต้องการมากที่สุดคือการระบุขนาดโดยใช้หน่วยวัดขนาดแบบผสม เช่น คงจะดีหากสามารถจองพื้นที่ 50% บวกพื้นที่คงที่ เช่น 10 พิกเซล คุณทําได้ทันทีโดยใช้พร็อพเพอร์ตี้ calc() คุณสามารถใช้ฟีเจอร์นี้ได้ทุกที่ที่มีการใช้ความยาวหรือตัวเลข คุณจึงใช้เพื่อจัดตำแหน่งสิ่งต่างๆ หรือในค่าสี rgb() ได้ด้วย จึงมีประโยชน์มากมายในสไตล์ชีต
สิ่งที่คุณทำได้ด้วย calc()
คุณใช้พร็อพเพอร์ตี้ calc() ได้ทุกที่ที่มีความยาวหรือตัวเลข CSS ในสไตล์ชีต
ซึ่งจะมีฟีเจอร์หลัก 2 รายการที่ช่วยเพิ่มความยืดหยุ่นให้กับเลย์เอาต์
- การผสมเปอร์เซ็นต์และค่าสัมบูรณ์
- การผสมผสานหน่วยขนาด
การผสมเปอร์เซ็นต์กับหน่วยสัมบูรณ์
มาดูตัวอย่างการผสมเปอร์เซ็นต์กับหน่วยสัมบูรณ์กัน สมมติว่าเราต้องการจัดสรรพื้นที่ที่มีอยู่ 50% ลบด้วยจำนวนพิกเซลคงที่ เราจะเขียนสูตรนี้ดังนี้
#foo {
width: calc(50% - 100px);
}
<div id="foo">Always 100 pixels less than half the available area</div>
หากมีสีพื้นหลังเป็นสีเขียว ข้อความจะมีลักษณะดังนี้
และหากคุณย่อขนาดของรายการหลัก ลักษณะจะเหมือนกับรูปภาพต่อไปนี้
ข้อดีคือเราทราบเสมอว่าขอบด้านขวาของเนื้อหาจะอยู่ห่างจากตรงกลางของพื้นที่บรรจุไปทางซ้าย 100 พิกเซล การรวมค่าประเภทต่างๆ เข้าด้วยกันด้วยวิธีนี้ช่วยให้เว็บแอปพลิเคชันจัดการเลย์เอาต์ในอุปกรณ์ขนาดต่างๆ ได้อย่างมีการควบคุมมากกว่าที่เคย
หน่วยการผสม
อีกสิ่งหนึ่งที่ยอดเยี่ยมคือความสามารถในการรวมหน่วยวัดต่างๆ เข้าด้วยกันเพื่อให้ได้ขนาดที่ต้องการ เช่น คุณอาจกำหนดขนาดโดยสัมพันธ์กับขนาดแบบอักษรปัจจุบันด้วยการผสมหน่วย "em" และ "px"
#bar {
height: calc(10em + 3px);
}
ดูตัวอย่างการรวมค่าที่ยอดเยี่ยมได้ที่นี่และที่นี่
ลองเลย
เมื่อใช้ calc() คุณจะใช้ +, -, * และ / เพื่อบวก ลบ คูณ และหารค่าได้ ซึ่งเปิดโอกาสให้ใช้รูปแบบต่างๆ ได้ คุณสามารถใช้ calc() ได้ทุกที่ที่สามารถใช้ความยาวหรือตัวเลข CSS ได้ นอกจากนี้ เรายังกําลังเพิ่ม calc() สําหรับพร็อพเพอร์ตี้มุมและพร็อพเพอร์ตี้ความถี่ในเร็วๆ นี้ด้วย พร็อพเพอร์ตี้ calc() สำหรับความยาวพร้อมใช้งานใน Chrome 19 (บิลด์เวอร์ชันที่กำลังพัฒนา) โดยใช้พร็อพเพอร์ตี้ -webkit-calc ใน Firefox ตั้งแต่เวอร์ชัน 8 โดยใช้พร็อพเพอร์ตี้ -moz-calc และใน Internet Explorer ตั้งแต่เวอร์ชัน 9 ที่ไม่มีคำนำหน้า โปรดแสดงความคิดเห็นด้านล่างเพื่อบอกให้เราทราบว่าคุณคิดเห็นอย่างไร