CSS Calculations การใช้ Functional Notations – CSS calc()

CSS3 มี Values and Units Module แยกย่อยออกมาเพื่อกำหนด “หน่วย” ของค่าต่างๆ มากมาย “หน่วย” ในที่นี้ก็เช่น px, em, %, cm, gr, fr, deg, rem, vh และอื่นๆ อีกมากมาย โดยที่ความเก๋าและเฉพาะทางของ CSS3 ที่ Module นี้แถมมาด้วยก็คือ การนำเอา “หน่วย” ที่ต่างๆ กันนั้นมา “ทำการคำนวณ” (calc();) เพื่อหาค่าที่ลงตัวใหม่ได้

พูดง่ายๆ ก็เช่น สมมุติว่าเรามีกล่องในอุปกรณ์เครื่องเขียน ซึ่งมีความยาว 100% ของที่มีอยู่ข้างในเราต้องการกำหนดความยาวให้เป็นดังนี้ ดินสอยาว 3cm ยางลบยาว 40px ปากกายาว 100% – 3cm – 40px จากโค้ดตัวอย่าง อันบ้าบิ่นและไม่สมเหตุสมผลนี้ ความยาวของปากกา ก็จะมีค่าเท่ากับ 100% – 3cm – 40px = ? ก็ช่างมัน

นั่นคือหลักการคร่าวๆ ของ calc(); ของ CSS ให้คุณผู้ชมทางบ้านลอง คลิ๊กเข้าไปดูตัวอย่างกันก่อนนะครับ หมายเหตุ กรุณาใช้ Firefox ก่อนนะครับ เพราะบราวเซอร์อื่นๆ ยังไม่รองรับคาดว่าอีกไม่นานคงจะตามมา

Calculations : CSS Functional Notations

จากตัวอย่างนั้น ผมกำหนดให้ความกว้างของ article section และ img ต้องถูกคำนวณตามขนาดของความกว้างหน้าจอ โดยที่ต้องเอามา บวก ลบ คูณ หาร กับ padding, border หรือ margin ก่อน เพื่อให้ได้ค่าที่ลงตัว ให้ขอบใน (padding) ซ้าย-ขวาของ body นั้นมีค่าที่ 5% เพื่อไม่ให้เนื้อหาชิดขอบมากเกินไป

ให้ความกว้างของ aside มีค่าเฉพาะตายตัว ที่ 300px และขอบนอกด้านซ้าย (margin-left) มีค่าเท่ากับ 20px โดยให้ทั้ง article และ aside ติดค่า float ไปทางซ้ายทั้งคู่ โดยการเขียน html เริ่มจาก article ก่อน แล้วก็ตามด้วย aside

ถ้าเป็นเมื่อก่อนนี้ เราจะไม่สามารถหา “ค่าความกว้าง” ที่แม่นยำให้กับ article ที่เป็น “พี่” ของ aside ได้ เพราะว่าค่าความกว้างนั้นจะยึดตามขนาดของหน้าจอ เวลาเราย่อขยายทำให้เกิดการเปลี่ยนแปลงตลอดเวลา แต่วันนี้ “สิงห์คะนองนา” เดินทางมาช่วยเราแล้ว ด้วยเครื่องมือ cal();

ผมสามารถหาความกว้างให้กับ article ได้ดังนี้

article {
width: calc(100% - 1*20px - 300px);
}

จาก code ด้านบน นั่นหมายความว่า ความกว้างของ article เท่ากับ 100% ซึ่งคือความกว้างปกติของ article เอง ลบออกด้วย 1*20px ซึ่งก็คือ ขอบนอกด้านซ้ายของ aside และ ลบออกด้วย 300px ซึ่งเป็นความกว้างของ aside เหลือเท่าไหร่ ก็เป็นความกว้างของ article บางคนอาจจะสงสัย ทำไมผมใช้ 1*20px ทำไมไม่ใช้ 20px ง่ายๆ คำตอบก็เพราะว่า ผมเผื่อเอาไว้ ถ้าเกิดเราดันอยากใส่ padding ให้กับ article อีกข้างละ 20px ผมก็ไม่ต้องไปแก้เป็น 60px ผมแค่แก้เป็น 3*20px ในกรณีที่ element มีไม่เยอะหรือไม่ซับซ้อนเราจะยังไม่เห็นความสำคัญมันเท่าไหร่ ถ้าเราเปลี่ยนตัวเลขไป เช่น จาก 20px เป็น 4.8px แล้วเกิดอยากเพิ่ม padding ให้กับ article ให้เป็นข้างละ 4.8px เท่ากันเราจะเขียนมันออกมายังไง จะเขียนอย่างนี้ใช่หรือไม่ 100% – 14.4px – 300px หรือจะเขียนง่ายๆ 100% – 3*4.8px – 300px ผมคิดว่าแบบแรกนั้น CSS Designer ทั้งหลายต้องรีบไปซื้อหาเครื่องคิดเลขโดยเร็วพลัน!

โดยหลักการเดียวกัน ในกรณีที่ผมใช้กับ section ซึ่งถูกทำเป็น 3 คอลัมน์เท่าๆ กัน ค่าความกว้างต่างๆ ได้ถูกบริหารจัดการตามความเหมาะสม

article>section {
   width: calc(100%/3 - 1px - 2*10px);
}

100%/3 คือทำ 3 คอลัมน์ให้มีความกว้างเท่าๆ กันจากความกว้างของแม่ (article) แล้วเอาไปลบ 1px ของ border-left ก่อน แล้วจึงลบออกจากค่าขอบในสองข้าง ข้างละ 10px

โดยรูปภาพที่เห็นนั้นผมก็ใช้หลักการเดียวกันครับ ไม่ได้ยากมายมากอะไร

ตัวอย่าง Calculations : CSS Functional Notations

สำหรับประโยชน์ที่เห็นเด่นชัดที่สุดของการคำนวณใน CSS แบบนี้คือ การนำไปใช้กับ Mobile Web Application ที่เราต้องเจอกับความกว้างของหน้าจอผู้ใช้อันหลากหลายจากโทรศัพท์ หรือ สามารถโฟนที่เกลื่อนเมืองอยู่ในขณะนี้ แค่โทรศัพท์ที่ใช้พี่แอนดรอยด์ก็นับขนาดหน้าจอกกันไม่ไหวแล้ว

ตอนนี้ calc(); ยังมีแค่ Forefox รองรับ แต่ผมเชื่อว่าอีกไม่นาน Webkit ก็คงตามมา หลังจากนั้น คนที่ทำเว็บดูใน iPad iPhone iPod ก็ได้ฮากัน

แล้ว IE หละ ถ้า iOS มันใช้ ie ได้ก็น่าจะรองรับกะเขาเหมือนนั่นเด้อพี่น้อง

มีความสุขกับการใช้ชีวิตครับ