“Browser แต่ละเจ้าเค้าก็มี Style กันเป็นของตัวเองนะครับ….” ว่าแต่มันเป็นยังไงหรอ ไอ้เจ้า style ของ browser เนี่ย เชื่อว่าหลายคนน่าจะรู้กันเป็นอย่างดี สำหรับเรื่องนี้ วันนี้เอามาทบทวนก่อน เพื่อเป็นการเริ่มต้นในสิ่งใหม่ๆ
เนื่องจากว่า หลังจากที่เราทำหน้า HTML เสร็จปุ๊บ เอ….เรายังไม่ทันได้ทำอะไรกับ CSS เลย ทำไมอยู่ๆมันถึงมีการแสดงผล
ที่มีบางอย่าง เป๊ะ!!! เรากับถูกกำหนดเอาไว้แบบนั้นละเนี่ย นั้นเป็นเพราะว่า เรากำลังถูก style ของ browser แต่ละตัวกำหนดอยู่นั้นเองครับ
งั้นมันก็เป็นเรื่องของ Software ที่เราเอามา Run ตัว Website ของเราแล้ว ไม่เกี่ยวกับเรา เอ… คิดแบบนี้ก็ไม่ถูกซะทีเดียวนะครับ เนื่องจากว่า บางครั้งการ design ของเราก็อาจจะถูกรบกวนโดยเรื่องของ กฏพื้นฐาน ตรงนี้ก็เป็นไปได้
งั้นเราเริ่มต้นจากการดูก่อนว่า browser เค้ากำหนดอะไรของเราบ้าง จริงๆก็มีไม่เยอะเท่าไหร่นะครับ ผมจะลอง List ให้ดูแล้วกัน จะได้เห็นภาพ
List CSS Default
- Margin
- Padding
- Table
- Font-size
- Header ( เช่น H1-H6 กลุ่มนี้)
- File Input
- Submit button
- Hyper Link ( a )
อืม… สำหรับผมเอง มันก็เยอะแล้วนะ 555 ทีนี้เวลาที่เราทำงานกัน มันอาจจะมีความแตกต่างกันอยู่ครับ ระหว่าง browser แต่ละเจ้า เพราะว่า browser แต่ละค่ายก็มีบางอย่างเล็กๆน้อยๆ ที่แตกต่างกัน ทีนี้หากเราต้องมาเขียนแก้ ให้แต่ละตัวเหมือนกันนั้นคงยาก ก็เลยมีเครื่องมืออย่าง CSS Reset กำเนิดขึ้นมา ล้างค่าตั้งต้นพวกนี้ออกไปซะ
เพื่อให้เราสามารถใช้พลังแห่งความเป็น CSS ทำอะไรก็ได้ บน Browser ที่แตกต่างกันนั้นเอง โห…รู้สึกมีพลังบวกยังไงไม่รู้ แต่กระนั้น ก็มีหลายๆคนให้ความเห็นว่า CSS Reset เป็นเรื่องล้าหลัง และโคตรจะไม่จำเป็นเอาซะเลย เพระามีอีกหลากหลายวิธีที่เราจะ สามารถจัดการกับเรื่องนี้อย่างง่ายดาย หรือแถมไม่ต้องให้ราคา ให้คุณค่าความสำคัญกับมันไปซะก็จบ แบบนั้นมีคนคิดเยอะจริง แต่ผมว่ามันขัดกับความจริงไปซะหน่อย
งั้นผมว่า ผมพาไปดูวิธีง่ายๆในการจัดการกับเรื่องนี้ก็แล้วกัน นั้นคือ การใช้ code library เล็กๆที่อยู่ในกลุ่ม css reset ซึ่งผมคัดๆมาให้ไว้ใน list รายการด้านล่างนี้แล้วครับ
+ Marx
+ Cleanslate
+ MiniReset.css
+ Typeset.css
+ Normalize.css
+ Meyerweb Reset CSS
+ CSS Mini Reset
+ HTML5 Reset Stylesheet
สำหรับคนที่สนใจเนื้อหา และความรู้พื้นฐานด้าน css อย่าลืมติดตามกันได้ที่นี่นะครับ
