วันนี้จะมาพูดถึงเรื่อง 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 <a> ของ ภาษา html โดยทั่วไปแล้ว browser จะอ่าน <a> เป็นตัวสีฟ้าและมี ขีดเส้นใต้ 5 ปีต่อจากนี้มีบุคคลลึกลับตัดสินใจสร้าง browser ขึ้นมาใหม่ให้มันชื่อว่า Ultra Browser และตัดสินใจว่าตู ( คนสร้าง ) ไม่ชอบสีฟ้าว่ะครับ และขีดเส้นใต้ด้วย แต่ดันเจือกชอบตัวสีแดงและเป็น ตัวหนา ถ้าคุณสร้างกำหนดไว้แล้วว่าเป็นตัวสีฟ้าและขีดเส้นใต้ ดังนั้นคุณมั่นใจได้เลยว่า browser ตัวอื่นจะแสดงผลเหมือนกันคือ สีฟ้าและขีดเส้นใต้
4 ตัวอย่างง่ายๆ
ตัวอย่างที่ 1 ค่าปกติ ( default) ของ tag <p> นั้น
ในตัวอย่างที่ 1 นี้นั้น มี tag <p> อยู่ 3 อันที่ยังไม่ได้ใส่ style ถูกวางใน div ชื่อว่า container ซึ่งกำหนด style ไว้ว่า มี background เป็น blue และ border เป็น orange ซึ่งจะได้เห็นความแตกต่าง
ค่าปกติของ firefox นั้นจะมี space หรือช่องว่างระหว่างขอบบนกับตัวย่อหน้า <p> และ 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 ) เข้าไปให้ <p> ของเรานั้นดูดีขึ้นบ้าง โดยจะใส่เป็น %,px,em ก็ตามแต่ใจเลยครับ โดยผู้เขียนจะแอดแบบนี้
* { margin:0; padding:0;}
p { margin:5px 0 10px 0; }
ตัวอย่างที่ 3 การใส่ style หลังจากเราใช้ * แล้ว
Note: ตัวอย่างที่ใช้ในการอธิบายนั้นเป็นตัวอย่างง่ายๆ ถ้าคุณใช้แต่ <p> ทั้งเว็บคุณก็ไม่ต้อง 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 <table>
แน่นอนว่าเราไม่ได้มีเจ้าเดียวยังมี YUI Reset CSS ซึ่งเป็นอันที่ผู้เขียนใช้มา 6 เวอร์ชั่นแล้ว คุณสามารถจะปรับเปลี่ยนหรือใช้ตัวที่เหมาะสมกับงานของคุณได้ อย่าคิดว่าเรามีหนทางเดียวครับ :D
เอาล่ะ ! ตอนนี้ก็ได้เวลาอันสมควรแล้วที่เราจะได้ไปฝึกฝนกับการฝึกใช้ CSS reset กับงานของเราสักที ( แท่น แทน แท้น….. )
5 tip การใช้ & การฝึก
1. ตัดสินใจว่าจะเลือก tool ในการ reset ตัวไหน
จากที่ได้กล่าวมาข้างต้นแล้วแล้วกับปัญหาและตัวจัดการ reset หลายตัวซึ่งมีตั้งแต่แบบง่ายๆ และไม่แนะนำคือ การใช้ * ( universal selector ) และต่อมาของนาย Eric Meyer’s CSS Reset Reloaded ซึ่งตัวนี้ก็อาจจะยุ่งยากนิดหน่อย และเป็นปรับเปลี่ยนมาเป็นรุ่นปัจจุบัน
2. ทำให้ Browser อ่าน code reset ก่อน
คุณอาจจะปวดตับได้ ถ้าโค้ดบางอย่างที่คุณคิดนั้นจะจัดวาง ในแบบที่คุณคิดไว้แต่ว่า ! มันดันไม่เป็นอย่างนั้น แล้วจะสงสัยว่าทำไม มันไม่ทำงาน ( ฟ่ะ ) ด้วยเหตุนี้เองเราจึงต้องทำให้ browser เห็นตัว reset css ของเราเป็นอันดับแรก ก่อนชาวบ้านเขา
และไม่ต้องกลัวว่าจะขายหน้าว่าทำไมคุณถึงเจอปัญหาอย่างนี้ เพราะปัญหาอย่างนี้เจอแทบจะทุกคนที่เป็นมือใหม่
ตัวอย่างที่ 4 การวาง reset css ผิดที่ผิดทาง
ในตัวอย่างนี้ ถ้าคุณลอง view sources คุณจะเห็นว่าผมได้ประกาศกฎ CSS สำหรับ Tag <p> โดยวางไว้ก่อนที่จะใส่ reset CSS ซึ่งทำให้ตัว browser นั้นอ่านกฎของผมก่อน แล้วไปเจอตัว reset CSS ที่ประกาศไว้สำหรับ Tag <p> เช่นเดียวกัน ดังนั้นตัวด้านล่างจึงทำงานเพราเป็นค่าใหม่สุด จบเลย
3. แบ่งแยกไฟล์ reset CSS กับไฟล์ CSS ของคุณ
ที่ผมกล่าวถึงเรื่องนี้เพราะเห็นว่าเป็นการฝึกเริ่มต้นที่ดีและหลายๆคนให้การสนับสนุนว่าควรจะเขียน การที่คุณแยกไฟล์มันมีข้อดีในตัวมันอยู่แล้ว เช่น คุณสามารถจัดการ บริหารไฟล์ CSS ตัวอื่นๆได้ ไฟล์ตัวไหนทำอะไร เราจะรู้และสามารถแก้ไขได้ทันที ถ้าคุณเปลี่ยนตัว reset css เป็นตัวอื่นก็ไม่กระทบกับไฟล์อื่นๆด้วย
4. หลีกเลี่ยงการใช้ universal selector ( * )
เหมือนที่กล่าวมาข้างต้นนั้นว่าการใช้ universal selector ( * ) นั้นมีข้อบกพร่องและไม่ค่อย เข้ากับทุก browser ซึ่งเป็นทางเลือกที่ไม่ค่อยดีนัก และที่สำคัญอีกประการหนึ่ง “IE” ( Internet Explorer ) ไม่รองรับการทำงานอีกด้วย แต่จะใช้จริงๆ ต้องใช้แบบจำเป็นถึงจะใช้นะครับ
โดยเฉพาะ tip นี้เมื่อคุณต้องการใช้ “one-size-fits-all” ( อารมณ์ว่าทุกหน้าใช้ให้เหมือนๆกันหมดเลย ) คล้ายๆกับพวก CMS ( Content Management System ) Theme
5. หลีกเลี่ยงการประการอย่างฟุ่มเฟื่อยทั้งในตัว Reset CSS และตัวที่คุณสร้างเอง
เช่นในตัว Reset CSS ของตา Eric Meyer เขา set rules CSS ไว้ว่า
body {
line-height:1;
color: black;
background : white;
}
และคุณก็รู้ว่า attribute ของ body tag ของคุณเป็นดังนี้
- background-color: #cccccc;
- color : #996633
- และคุณต้องการในรูปใน background ของคุณ
มันดูแปลกๆ ถ้าคุณจะไปประกาศในไฟล์ CSS ของคุณใต้ Reset CSS ( ซึ่งผู้เขียนบอกว่าเขาก็ทำอย่างนี้เพราะว่า … เขาขี้เกียจ :P ) ให้คุณทำการใส่ค่าที่คุณจะใช้กับงานของคุณในตัวไฟล์ Reset CSS เลย ดังนั้นเราจะได้
body {
line-height:1
color: #996633;
background : #ccc url(path/to/image.jpg) repeat-x top left;
}
สุดท้ายแล้วท้ายสุด ผู้เขียนบอกว่า “อย่ากลัวที่จะเปลี่ยนแปลง ด้วยการตัดสินใจของคุณ” ทั้งโครงสร้าง,ตัวแปร,ลบ,แก้ไขส่วนอื่นๆ
ของแถม
ถ้าคุณผู้อ่านยังไม่จุใจเรามีที่ให้คุณไปตะลุยต่อด้านล่างเลยจัดเต็ม
[WSG] Zeroing default padding/margin
อาจจะเป็นที่แรกที่พูดเกี่ยวกับเรื่อง universal selector
Universal Selector
ที่สองเนี้ยตา Eric Meyer แก่มาบอกกล่าวข้อดีของ universal selector ว่ามันดียังไง
No CSS Reset
ตา Johnathan Snook แก่ก็มาโชว์ข้าไม่ใช่ Reset CSS เฟ้ยอยากรู้ติดตาม
Why I Like (and Use) Reset CSS
ทำไมฉันถึงได้หลงไหลกับ Reset CSS ( Oh ! บร๊ะเจ้า )
Tripoli – a CSS standard for HTML rendering
Tripoli คือ Reset CSS อีกตัวที่มีออกมาหลายเวอร์ชั่นแล้ว ก็ลองจัดไปดูว่าอันไหนเหมาะสมโปรเจ็คของคุณผู้อ่านแล้วกัน
ปล. จบแล้วครับสำหรับอันแรกที่คุณ @imenn เขียนไว้ใน slide ถ้าใครสนใจอยากอ่าน slide ของคุณเม่น ก็จัดคลิกโลด WordPress theme design 2011 สำหรับท่านผู้อ่านถ้ามี เนื้อหาโดนๆอยากให้ช่วยแปลสามารถบอกได้นะครับถ้าว่างจะช่วยแปลแล้วเรียบเรียงใหม่ให้อ่านง่ายๆ ฮ่าๆ ส่วนเนื้อหาอันนี้ถ้าใครอ่านไม่รู้เรื่องรบกวนบอกด้วยครับจะพยายามแปลใหม่ให้เข้าใจง่ายยิ่งขึ้น เพราะนี่เป็นครั้งแรกที่ทำนะครับ
หากอยากศึกษาเกี่ยวกับการทำเว็บเพิ่มเติมให้อ่านที่ link ด้านล่างได้เลยครับ
https://oxygenyoyo.com/general/index-getting-started-code-website/
Credit:
- @imenn
- www.sixrevisions.com สำหรับเนื้อหาที่แปล