reset css

5 tip reset css พื้นฐานของการก้าวไปสู่ master

วันนี้จะมาพูดถึงเรื่อง 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:

Loading

เป็นโปรแกรมเมอร์ที่ตามหาคุณค่าของชีวิตและความฝันในวัยเด็ก ชอบเล่นเกม เรียนรู้ทุกอย่าง ชอบเจอคนใหม่ๆ งานสังคมทุกชนิด ออกกำลังกายในวันว่าง อ่านหนังสือ มีเว็บรีวิวหนังสือด้วย www.readraide.in.th