วันนี้จะมาพูดถึงเรื่อง reset css สักหน่อย สำหรับ Web Designer แล้วคงจะหลีกหนีเจ้าภาษา CSS ( Cascading Style Sheets ) ซึ่งการที่พวกเราโชคดี ( หรือร้าย ) ที่ได้เกิดมายุคที่มี browser ให้เราเลือกใช้มากกว่า IE และดีกว่าด้วยประการทั้งปวง ทำให้เรานั้นต้องเข้าใจว่า browser แต่ละยี่ห้อนั้นอ่าน CSS บางตัวนั้น แสดงผลออกมาไม่เหมือนกัน ซึ่งทำให้เราต้องปวดกระหม่อม ( กะบาลนั่นเอง ) ไม่รู้ว่าอันไหนอ่านอะไร แก้ให้ตัวนี้อ่านได้สวยอีกตัว ที่มี inter inter อะไรเนี้ยดันอ่านไม่เหมือนชาวบ้านอีก ดังนั้นเราจึงต้อง RESET !!! มันให้การแสดงผลมันเหมือนกันให้หมดทุก browser หรือที่เราเรียกว่า cross-browser แล้วเวลาจะเรียกใช้จะได้แสดงออกมาเหมือนกัน เอ้า !! แล้วทำยังไงล่ะ !!? นั่นนะสิ … มันถึงได้มาเป็นหัวข้อที่จะเขียนในวันนี้ไง ( 555+ )
ทักทายกันก่อน
เนื้อหาของบทความนี้ได้แปลมาจากเว็บ www.sixrevisions.com/ ซึ่งผมไปเจอจาก slide ของคุณเม่น @imenn ซึ่งได้ทำไว้ในงาน WPDevNight หากท่านผู้อ่นต้องการติดตามเนื้อหาส่วนอื่นสามารถตามดูได้ที่ www.designil.com แล้วเกิดความสนใจอยากอ่านขึ้นมาจึงแปลไปด้วยเพื่อใครอยากจะเรียนรู้แล้วเจออังกฤษเยอะๆเลยไม่อยากอ่าน ( ผมแปลไม่ตรงหมดหรอกใส่ความเกรียนไว้เยอะ lol ) แต่ก็อยากแบ่งปันให้ครับ
การเลี่ยงหลีกไม่ให้ browser แสดงผลไม่เหมือนกัน
สำหรับตัวอย่าง เราจะใช้ Tag ของ ภาษา html โดยทั่วไปแล้ว browser จะอ่าน เป็นตัวสีฟ้าและมี ขีดเส้นใต้ 5 ปีต่อจากนี้มีบุคคลลึกลับตัดสินใจสร้าง browser ขึ้นมาใหม่ให้มันชื่อว่า Ultra Browser และตัดสินใจว่าตู ( คนสร้าง ) ไม่ชอบสีฟ้าว่ะครับ และขีดเส้นใต้ด้วย แต่ดันเจือกชอบตัวสีแดงและเป็น ตัวหนา ถ้าคุณสร้างกำหนดไว้แล้วว่าเป็นตัวสีฟ้าและขีดเส้นใต้ ดังนั้นคุณมั่นใจได้เลยว่า browser ตัวอื่นจะแสดงผลเหมือนกันคือ สีฟ้าและขีดเส้นใต้
4 ตัวอย่างง่ายๆ
ตัวอย่างที่ 1 ค่าปกติ ( default) ของ tag
นั้น
ในตัวอย่างที่ 1 นี้นั้น มี tag
อยู่ 3 อันที่ยังไม่ได้ใส่ style ถูกวางใน div ชื่อว่า container ซึ่งกำหนด style ไว้ว่า มี background เป็น blue และ border เป็น orange ซึ่งจะได้เห็นความแตกต่าง
ค่าปกติของ firefox นั้นจะมี space หรือช่องว่างระหว่างขอบบนกับตัวย่อหน้า
และ space ระหว่างขอบล่างของ container แต่ว่า …
ค่าปกติของ Internet Explorer นั้นไม่มีครับกำแล้วไง เนี้ยขนาดเราเปรียบเทียบค่าแค่ 2 browser ยังขนาดนี้
คำถามคือแล้ว browser ตัวไหนแสดงผลได้ถูกต้องล่ะ เอ่อ … น่าคิดนะในเมื่อเราไม่เคยเจอของแท้แล้วเราจะรู้ได้ไงว่าอันไหนของแท้ ( ฮิ้วว คิดสด ) Firefog หรือว่า IE ? ช่างมันเถอะมันไม่สังคัง เฮ้ย ! สำคัญไปกว่า มีช่องว่างที่ทำให้ทั้งการแสดงผลไม่เหมือนกัน ถ้าเราไม่ set ค่า margin และ padding ต่างๆไว้เพราะว่าค่าปกติมันแตกต่างกันนั่นเอง !
ตัวอย่างที่ยกมานั้นอาจจะดูง่ายไปหน่อย ในการฝึกฝน CSS นั้น การใช้ CSS reset เป็นสิ่งสำคัญในการเอาพวกการแสดงผลไม่แน่นอนตาม browser ออกไป เช่น maring , padding , line-height เพราะจะได้ทำให้ทุก browser เริ่มต้นอ่านเหมือนๆกัน : )
ทั้งหมดนี้คือหลักการในการสร้าง style ของคุณโดยที่ไม่ต้องให้ browser ทำการอ่านค่า style เป็นค่าพื้นฐานซึ่งให้ผลออกมาไม่เหมือนกัน ขั้นต่อไปเราจะไปคุยกันในตอนฝึกใช้ แต่มีสิ่งหนึ่ง ( ที่ยังค้างใจอยู่ ~~ ไม่ใช่แหละเล่นเพลงดักแก่เลยใครอ่านแล้วรู้จักบอกได้เลยว่าเริ่มแก่แหละ ) ที่เราควรจะรู้ว่าทำไมเจ้า CSS reset ถึงได้มาเป็นมาตราฐาน ( standard ) ของนักพัฒนาเว็บไซร์ ( อร๊างงง ) สมัยใหม่
เรื่องมันเริ่มต้นมาจาก …
Concept แรกของ CSS reset ที่ได้พูดถึงอย่างเป็นทางการโดยนาย Andrew Krespanis เกิดขึ้นในยุคไดโนเสาร์ยังเดินให้พรึ่บ ! ในโลกอินเตอร์เน็ต โดยหัวข้อของคนนี้เขาได้บอกไว้ว่า ในใช้ universal selector (*) หรือบ้านเราเรียกว่าดอกจัน ( ไว้เวลาเผาศพอ่ะ เพี้ยะ ! ใช่ที่ไหนเล่า ) ใส่ไว้ในบรรแรกของไฟล์ CSS เลยโลด มันจะดลบันดาลทุก element มีค่า margin , padding เป็น 0 ( อารมณ์คล้ายๆรวบยอดแต่ต้น = =a )
* {
margin:0;
padding:0;
}การทำแบบนั้นเหมือนกับการสั่งให้ทุก element มีค่า margin,padding เป็น 0 เพื่อเราจะได้หลีกเลี่ยงปัญหาในตัวอย่างที่ 1 แต่ก็อีกแหละว่ามีบาง browser ตูไม่ support นะฮ๊าฟฟฟ ตามไปดูโลดอันไหนไม่ support => browser ที่จุดยืน (ไม่เหมือนชาวบ้าน)
ตรงจุดแต่ก่อนเขาใช้อย่างนี้กันมา เพื่อให้เราสามารถหลีกเลี่ยงปัญหาข้างต้นที่ได้กล่าวไว้ ด้วยเหตุนี้จึงทำให้ค่า margin,padding ต่างๆถูก reset !! ( หรือพูดอีกในหนึ่งว่า เราไม่ต้องการให้ browser เสนอการอ่าน element ต่างๆ เราต้องประกาศให้รู้ว่าใครใหญ่ ใครเป็นเจ้านาย ว่ะ ฮ่า ฮ่า ฮ่า *~ )
ตัวอย่างที่ 2 เราได้ทำการ ใส่ * เรียบร้อยแล้ว
คราวนี้เราไม่มีพื้นที่ให้เรา ( ปลูกผัก เตะบอล เลี้ยงวัว ) ได้เลยมันอึดอัด หายใจลำบาก ตัวอักษรติดกันอย่างกับสลัมบอมเบย์ พวกเราต้องการพื้นที่ เราสามารถเพิ่มเติม margin ( หรือ padding ) เข้าไปให้
ของเรานั้นดูดีขึ้นบ้าง โดยจะใส่เป็น %,px,em ก็ตามแต่ใจเลยครับ โดยผู้เขียนจะแอดแบบนี้
* { margin:0; padding:0;}
p { margin:5px 0 10px 0; }ตัวอย่างที่ 3 การใส่ style หลังจากเราใช้ * แล้ว
Note: ตัวอย่างที่ใช้ในการอธิบายนั้นเป็นตัวอย่างง่ายๆ ถ้าคุณใช้แต่
ทั้งเว็บคุณก็ไม่ต้อง reset ค่า margin , padding เป็น 0 ด้วยการใส่ * ใช้แค่การ ประกาศ CSS แบบทั่วไปก็เพียงพอแล้ว เพราะว่าต่อจากนี้นั้น เราจะอธิบายถึงการประกาศการใช้ CSS แบบเต็มสูบและปฎิบัติไปด้วยกับการฝึกแบบดีที่สุด ด้านล่าง
หลังจากนั้นไม่นาน – ก็มีกูรู CSS ชื่อว่า Eric Meyer ซึ่งขยายต่อเติมเจ้า concept reset นี้ โดยเขาได้อธิบายถึง undohtml.css ไม่ใช่แค่ reset margin , padding แต่รวมไปถึง ตัว attribute ต่างๆด้วยเช่น line-heights, font styles, and list styles
หลังจากมีการปรับแต่งซ้ำไปมาแล้ว เราจึงได้หนทางแก้ไขปัญหาที่เจ๋งมากๆ CSS Reset อันนี้นี่เอง !! (ปรับคลื่นเป็นเสียงคนพากท์ TV แชมป์เปี้ยนคุณจะได้อารมณ์มากขึ้น ) ซึ่งเจ้าตัวนี้ที่ evolution มาแล้วจากอดีตมีความแม่นยำและสามารถเจาะจงพวกชื่อ tag html ลงไปลึกว่าในระดับของการใช้แค่ * ( universal selector ) เพราะการใช้ * ตัวนี้มันล้มเหลวกับการที่เราจะมานั่ง reset html tag ทุกตัวครับ แต่ก็ยังมีปัญหาเกี่ยวกับการ set ค่าปกติ ( default ) ให้กับ tag บางตัวที่ยุ่งยากเช่น tag table
