Default Browser Styles กับ เรื่องของ CSS

“Browser แต่ละเจ้าเค้าก็มี Style กันเป็นของตัวเองนะครับ….” ว่าแต่มันเป็นยังไงหรอ ไอ้เจ้า style ของ browser เนี่ย เชื่อว่าหลายคนน่าจะรู้กันเป็นอย่างดี สำหรับเรื่องนี้ วันนี้เอามาทบทวนก่อน เพื่อเป็นการเริ่มต้นในสิ่งใหม่ๆ

browser-logos

“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 อย่าลืมติดตามกันได้ที่นี่นะครับ

Leave a Reply

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