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

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

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

พื้นฐาน CSS อยากแน่นๆ มาชวนคุยเรื่องนี้กันดีกว่า

พื้นฐาน เป็นเรื่องสำคัญเสมอ หยิบเรื่อง CSS มาพูดกันบ้าง เดี๋ยวเค้าจะน้อยใจ เอะอะๆอะไรก็พูดถึงแต่คนอื่นอันที่จริงมีเรื่องราวของ CSS เพียบ มากมาย เต็มไปหมดเลยนะครับที่อยากพูด แต่คิดว่าจะลงแค่เรื่องพื้นๆ จะได้คุยกับเพื่อนๆรู้เรื่อง เรื่องที่ advance มากไปผมเองก็ใช่ว่าจะรู้เรื่อง 55555

พื้นฐาน เป็นเรื่องสำคัญเสมอ หยิบเรื่อง CSS มาพูดกันบ้าง เดี๋ยวเค้าจะน้อยใจ เอะอะๆอะไรก็พูดถึงแต่คนอื่นอันที่จริงมีเรื่องราวของ CSS เพียบ มากมาย เต็มไปหมดเลยนะครับที่อยากพูด แต่คิดว่าจะลงแค่เรื่องพื้นๆ จะได้คุยกับเพื่อนๆรู้เรื่อง เรื่องที่ advance มากไปผมเองก็ใช่ว่าจะรู้เรื่อง 55555

ทำไมถึงบอกว่าพื้นฐานของ css นั้นสำคัญ ก็น่าจะเป็นเพราะว่า

สถานการณ์ทุกวันนี้ ที่มีเครื่องไม้ เครื่องมือเต็มไปด้วย Tool ต่างๆ ที่แค่โบกนิด สะบัดหน่อย ก็กลายเป็นผลลัพท์ดังใจ ตามที่เราต้องการแล้ว

ไม่ใช่ว่าไม่ดีนะครับ มันดีมากเลย 555 เพียงแต่ยังไงพื้นฐานก็โคตรจะสำคัญอ่ะทีนี้ แล้วเรื่องของ CSS มันมีอะไรที่เราต้องรู้จักบ้างละ ก็ในเมื่อมันง่ายซะขนาดนั้นแล้ว

อืม…อันนี้เริ่มยากแล้ว เพราะถ้ามองในมุมของผม ทุกอย่างก็สำคัญหมดละมีทั้ง Syntax, comment, browser, selector, color, font, border,

margin, padding ต่างๆพวกนี้ หรือจะเป็น form, layout, positionน่าสนใจทั้งนั้นเลยครับ แล้วยังมีเรื่องของ animation เล็กๆกับ css3 อีกด้วย

แล้ว… ถ้าเรารู้จักพื้นฐาน css แล้ว เราจะเอาไปใช้ทำประโยชน์อะไรได้บ้างละถ้าสำหรับคนที่ไม่ใช่ฝั่ง Dev คุณก็สามารถ ปรับแต่งเนื้อหา content ของคุณให้สวยงาม และมีความแตกต่าง ได้อย่างน่าสนใจ

ไม่ว่าจะเป็นการตกแต่ง Email เพื่อส่งไปหาลูกค้าผ่านทาง Email เค้าก็ยังคงใช้ความเป็น css แบบ inline กันอยู่ หรือจะเป็น ปรับแต่ง wordpress site ของคุณก็เห็นมีให้แก้ไขได้เองง่ายๆ จะได้ไม่ต้องไปจ้างนักพัฒนาราคาสูงๆมาทำให้

ส่วนคนที่เป็นฝั่ง Dev ก็แน่นอนว่ายังไงซะ คุณจะได้รู้จักกับโครงสร้าง และเครื่องมือต่างๆ ที่คุณเลือกใช้งานเป็นอยู่ดี ว่าแต่ละ library หรือ framework มันมีการทำงานอย่างไร หรือว่าเราจะปรับแต่งหน้าตาของมัน จะต้องทำอย่างไร

แล้วทุกวันนี้ CSS ก็ยังมีในส่วนของ Media Queries ที่พบว่าเป็นอีกหนึ่งเรื่อง ที่สำคัญมากๆ ในการทำเว็บไซต์ยุคนี้ เพื่อให้รองรับเครื่องมือในยุคปัจจุบัน ที่ใครๆก็ใช้งาน Smart Phone ในการเข้าถึงกันทั้งนั้น การแสดงผลในหน้าเดียว แต่ต้องเหมาะสมกับทุกขนาดจอซะอย่างงั้น

อ่อ!! แล้วในส่วนของ CSS Preprocessors นี่ยิ่งร้ายกาจ มีคนใช้กันเพียบ แถมเครื่องมือที่เราไปหยิบมา ดันใช้งาน SCSS กันซะเยอะ แล้วเราจะปรับยังไง ถ้าเราไม่รู้จักมัน ซึ่งมันไม่ธรรมดานะครับ เพราะว่ามันทำให้จาก CSS เดิมๆให้กลายเป็น การสร้างตัวแปร การสืบทอดพลังจักรวาล การแจกจ่ายพันธุกรรมต่างๆได้ และยังสามารถใช้งาน Loop หรือพวก if / else ได้อีก แน่ะไม่เบาจริงๆ

นั้นไง มาจนถึงเรื่องนี้จนได้ ไอ้ที่ว่าไม่เบาก็เพราะ ถ้าเราเขียนเยอะ ถ้าเราใช้เยอะ CSS นี่ก็เป็นตัวถ่วงน้ำหนักในหน้าเพจได้เหมือนกันนะครับ อืม….พูดมาตั้งเยอะแล้ว เดี๋ยวไว้ post หน้าเรามาเข้าเรื่องกันเลยดีกว่า ถ้าใครสนใจ ฝากติดตามกันด้วยนะครับ

Photo by Jelleke Vanooteghem
https://unsplash.com/photos/chuzevDl4qM

ขอบคุณที่ติดตามกันครับ