การสร้างเค้าโครง 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>
ถ้ามีสีพื้นหลังสีเขียว จะมีลักษณะดังนี้
และหากคุณย่อขนาดระดับบนสุด จะมีลักษณะดังนี้
ข้อดีก็คือ เราทราบเสมอว่าขอบขวาของเนื้อหาจะเป็น 100px ทางซ้ายตรงกลางของพื้นที่ที่มี การที่คุณสามารถรวมค่าประเภทต่างๆ ด้วยวิธีนี้ จะช่วยให้เว็บแอปพลิเคชันของคุณสามารถจัดการกับการจัดวางในอุปกรณ์ขนาดต่างๆ ได้โดยมีการควบคุมที่ดีขึ้นกว่าแต่ก่อน
หน่วยผสม
สิ่งที่ดีมากอีกอย่างหนึ่งคือความสามารถในการรวมหน่วยวัดต่างๆ เข้าด้วยกันเพื่อให้ได้ขนาดผลลัพธ์ ตัวอย่างเช่น คุณสามารถกำหนดขนาดที่สัมพันธ์กับขนาดแบบอักษรปัจจุบันโดยการผสมหน่วย "em" และ "px"
#bar {
height: calc(10em + 3px);
}
ดูตัวอย่างการรวมค่าได้ที่นี่และที่นี่
ลองเลย
calc() จะช่วยให้คุณใช้ +, -, * และ / เพื่อบวก ลบ คูณ และหารค่าได้ เพื่อความเป็นไปได้ทุกแบบ คุณใช้ calc() ได้ทุกที่ที่มีความยาว CSS หรือหมายเลขได้ เรากำลังเพิ่ม calc() สำหรับพร็อพเพอร์ตี้มุมและความถี่ในเร็วๆ นี้ พร็อพเพอร์ตี้ calc() สำหรับความยาวพร้อมให้ใช้งานแล้วใน Chrome 19 (เวอร์ชันที่กำลังพัฒนา) โดยใช้พร็อพเพอร์ตี้ -webkit-calc ใน Firefox ตั้งแต่เวอร์ชัน 8 โดยใช้พร็อพเพอร์ตี้ -moz-calc และใน Internet Explorer ตั้งแต่เวอร์ชัน 9 ที่ไม่มีคำนำหน้า บอกให้เราทราบว่าคุณคิดอย่างไรโดยแสดงความคิดเห็นด้านล่าง