ถ้าเลือกได้ อย่าดอกจัน แผดดิ้งศูนย์ มาร์จิ้นศูนย์

ThaiCSS Direct วันนี้ขอเสนอ Tips เล็กๆ น้อยๆ เท่าหำแมงสาบ เอาไว้ให้นักเลงคีย์บอร์ด CSS ได้เก็บไว้ใช้งานเมื่อยามจำเป็น เรื่องพื้นๆ กาก กากส์ ในวันนี้ไม่ใช่เรื่องใหญ่อะไรเป็นเพียงแค่เทคนิคการสังเกตกระบวนการ render css ของบราวเซอร์ที่เราสามารถช่วยบราวเซอร์ประหยัดพลังงานและเพิ่มความเร็วในการแสดงผลหน้าเว็บขึ้นไปอีก 0.0046 มิลลิเซคคั่น

ถ้าทำได้พยายามอย่า Reset ค่าโรงงานของ CSS

ถ้าเป็นไปได้ อย่า Reset padding และ margin ซึ่งเป็นค่าโรงงานของ CSS ที่ติดมากับ HTML หรือ CSS ที่เป็นค่ามาตรฐานของบราวเซอร์ ถ้าใครสังเกตจะเห็นว่า Element ที่อยู่ในหมวดหมู่ Grouping Contents และ Headings นั้นมักจะมีค่า Default เหล่านี้ติดมาด้วย รวมไปถึง List Style ต่างๆ ของ li ใน ul และ ol ด้วย

หลายท่านถ้าเป็น CSS คาวบอยสมัยก่อนที่ต้องเขียนทุกอย่างเองชอบใช้นี่เลยครับ * { padding: 0; margin: 0; list-style-type: none; }

เรามาดูรูปแบบง่ายๆ ของการเรนเดอร์ CSS ของบราวเซอร์กันก่อน

Chrome inspection with OL

ผมขอยกตัวอย่าง ol เพื่อที่ให้เราเห็นภาพได้ชัดขึ้นนะครับ รายละเอียดตามตัวเลขมีประมาณนี้

  1. C คือ HTML Markup กรณีนี้ใช้ ol
  2. 1 คือ User Agent Style หรือ ค่าที่ติดมาจากโรงงานในสมัยพระเจ้าสามหำ ค่าตรงนี้ของแต่ละบราวเซอร์กระจัดกระจายไปคนละทางมาก แม้ว่า W3C จะบังคับให้แต่ละค่ายใช้ให้เหมือนกันแต่ด้วยความแตกต่างหลายๆ อย่าง รวมถึงทั้งเรื่อง ฟอนท์พื้นฐานในแต่ละระบบปฏิบัติการที่แตกต่างกันทำให้ค่าพื้นฐานตรงนี้ไม่สามารถเหมือนกันไปด้วย แต่ในปัจจุบันเกือบทุกค่าย ไม่ว่าจะลุมพินีหรืออ้อมน้อยเริ่มหันมาให้ความร่วมมือในการใช้มาตรฐานร่วมกันมากยิ่งขึ้น ทำให้ความแตกต่างเริ่มมีให้เห็นน้อยจนถือได้ว่าเราสามารถวางใจคิดซะว่ามันเหมือนหรือเท่ากันไปได้เลย (ให้สังเกตคู่เอกปลายยกสี่ ราคาต่อรองจะสวิง)

    สาเหตุที่คาวบอยทั้งหลายต้อง Reset ในสมัยก่อนเพราะว่า IE แต่ละเวอร์ชั่นพี่ท่านนั้นค่าพื้นฐานมันยังมาไม่เหมือนกันเลย จึงจำเป็นต้องแก้ปัญหาด้วยการ Reset แล้วเขียนเองใหม่โดย Override ค่าโรงงาน (ผ่านไปสิบกว่าปี พี่เขาตื่นแล้ว)

  3. 2 คือ Style ที่เราๆ ท่านๆ เขียนกันเข้าไป ไม่ว่าจะเขียน Selector ไว้ที่ไหนลูกๆ ก็จะทำการสืบทอดค่าต่างๆ ที่สามารถสืบทอดกันได้เหมือนปอบที่สืบทอดกันผ่านน้ำลาย ในตัวอย่างนี้ ol ได้ค่าสีตัวหนังสือและรูปแบบตัวหนังสือมาจาก body ได้ค่าความสูงของแถวมาจากคำสั่ง ลูกหรือหลาน เหลน โหลน ของคลาส entry-body
  4. 3 สำหรับบราวเซอร์อย่าง Google Chrome จะมีรูปแบบของ Basic Box Model มาให้เราดูด้วยว่ากล่องของเรานั้นแสดงผลประมาณไหน
  5. 4 คือผลสรุปครั้งสุดท้ายที่บราวเซอร์จะเอาไปใช้เพื่อการแสดงผล ซึ่งจะมีทุกอย่างที่เราเขียนเข้าไปไม่ว่าจะเขียนไว้ที่ไหนในเลขหัวข้อที่ 2 บราวเซอร์จะเอามารวมกันที่ตรงนี้ ให้สังเกตว่า Units หรือหน่วยของตัวเลขต่างๆ จะถูกสรุปเป็น Pixel ทั้งหมดเพื่อความแม่นยำของการแสดงผล ไม่ว่าในส่วนของหัวข้อที่ 2 นั้นเราจะเขียนด้วยหน่วยอะไรก็ตาม กระบวนการทั้งหมดนั้นขึ้นอยู่กับการทำงานของบราวเซอร์เองซึ่งไม่เกี่ยวกับโรคฟันผุใดๆ ซึ่งตรงนี้นี่เองมีส่วนทำให้แต่ละบราวเซอร์แสดงผลต่างกันไปด้วย

Override เท่ากับ Overload

ถ้าเราเขียน Stylesheet Override หรือเขียนทับกันไปบ่อยแค่ไหน จะทำไห้บราวเซอร์ต้อง Re-Render บ่อยเท่านั้น ซีึ่งเป็นสาเหตุหนึ่งที่ทำให้กระบวนการ Render หน้าเว็บเราช้าไปด้วย แม้ว่าไม่ถึงขั้นทำให้บราวเซอร์เช็ดน้ำตา แต่เพื่อความสง่างามเราควรตระหนักและทำอย่างไรก็ได้เพื่อที่จะไม่ให้เกิดการ Re-Render บ่อยๆ

อีกอย่างที่เราไม่ควรทำการ Override ทั้งหมดเพราะว่า ค่าพื้นฐานที่โรงงานให้มานั้นได้รับการทดสอบและวิจัยมาแล้วว่าเหมาะสมต่อระยะห่างระหว่างวัตถุกับสายตามวลมนุษยชาติ เราจึงไม่จำเป็นต้องไปแก้ไขเพิ่มเติมให้มากนัก ยกเว้นเสียว่าเรามี Designer เทพๆ ที่ว่างเว้นจากการกินมะม่วงดองและผลไม้ยามบ่ายจะบอกเราว่า ระยะห่างจาก h1 ไปยัง p ต้อง 9px เท่านั้น (9 พ่อง padding อันก่อนมึงยังใช้ 7 อยู่เลย)

ถ้าใช้ Framework หล่ะ

สำหรับเทพองค์ใดที่ใช้ Frameworks ที่เกลื่อนกลาดอยู่ตามตลาดไทหรือสี่มุมเมืองซึ่งเจ้าของตลาดเขา Reset มาให้เรียบร้อยแล้ว บอกคำเดียวครับว่า “ช่างแม่ม” เพราะเรื่องนี้ไม่ใช่เรื่องใหญ่อะไร เป็นแค่เรื่องพื้นๆ ที่คนทำงานต้องเข้าใจ อธิบายลูกค้าหรือเล่าให้ทีม คนอื่นๆ ที่ทำงานด้วยกันฟังได้ว่า ที่มาและที่ไปมันเป็นยังไง นอกเหนือจากนี้เป็นเรื่องที่เราไม่สามารถควบคุมมันได้ อย่าไปเครียด เครียดไปก็เยี่ยวเหนียว

สำหรับวันนี้ ThaiCSS Direct ขอลาไปก่อน มีความสุขกับการใช้ชีวิตครับ

Back to Top

3 Responses to ถ้าเลือกได้ อย่าดอกจัน แผดดิ้งศูนย์ มาร์จิ้นศูนย์

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top