รับทำเว็บไซต์ครบวงจร
เลือกภาษา Thai English     facebook


ติดต่อทำเว็บไซต์ โทร : O89-l79-O7l4 (ทุกวัน 24 ชั่วโมง)

รายการหลัก



บทความ


Page Ranking Tool

css reset คืออะไร และการเริ่มใช้งาน


สอน CSS
> css reset คืออะไร และการเริ่มใช้งาน


เคยมั้ย ที่ทำเว็บขึ้นมาแล้ว เปิดดูด้วย firefox, internet explorer 6, internet explorer 7, internet explorer 8, google chrome, safari แล้วมันแสดงผลแตกต่างกัน มากบ้างน้อยบ้างในหลายจุดทั่วทั้งเว็บ แล้วพอเราแก้ จนอันนึงดูดี อันอื่นๆก็เพี้ยนอยู่เหมือนเดิมหรือหนักกว่าเดิม

แต่หลายคนก็มีความสามารถมากพอ ที่จะสามารถใช้เทคนิค CSS Hack เข้ามาช่วยงานได้ โดยช่วยในการกำหนดค่าด้วยรูปแบบคำสั่งพิเศษ เพื่อให้เกิดผลเฉพาะ browser นั้นๆเช่น

*:first-child+html {}

เป็นคำสั่งที่ทำให้มีผลเฉพาะ IE 7 เท่านั้น ซึ่งนั้นก็ช่วยได้ แต่เราต้องมาเหนื่อยนั่งไล่แก้อยู่ทุกจุดไป

ลองดูรูป จะเห็นได้ว่ามันมีความแตกต่างกันเล็กน้อย ถึงปานกลาง ในแต่ละ browser เช่น ความสูง เว้นไม่เท่ากัน หรือระยะขอบเป็นต้น ความต่างแค่เล็กน้อยนี้เมื่อทำเว็บที่มีความซับซ้อนจะเห็นความแตกต่างอย่างชัดเจนมาก เพราะว่ารูปที่ห่างกัน 1 px ก็เห็นได้ชัดว่ามันแตกจากกัน


โดยรูปดังกล่าวคือการแสดงผล ด้วย Internet Explorer 8 > Firefox > Chrome > Internet explorer 7 ตามลำดับ

จะดีกว่าหรือไม่ ที่มี CSS สักตัวนึง เข้ามาช่วยเรา ทำให้การแสดงผลจากแต่ละ browser ออกมาเหมือนกันเกือบทั้งหมด แล้วเวลาที่เราพัฒนาเว็บ ก็เอาเวลาไปทุ่มเทกับการสร้างส่วนใหม่ๆ ไม่ใช่เสียเวลานั่งแก้เพื่อให้หน้าตาออกมาเหมือนกัน


หลังจากที่เราแก้แล้วจะเห็นว่าแสดงผลออกมาเหมือนกันหมดแล้ว (ขนาดตัวหนังสือเรายังไม่พูดถึง เพราะว่าอันนี้เรากำหนดได้ง่ายๆอยู่แล้ว ไม่มีปัญหา)

สำหรับ CSS reset ที่มีในปัจจุบันนั้นมีมาก แต่ว่าที่นิยมมีแค่

  1. YUI reset ของ Yahoo User Interface (Yahoo developer network)
  2. Mayer web
  3. Blueprint CSS Framework

งานของผม มากกว่าสิบชิ้นในช่วงปีที่ผ่านมา เลือกใช้ YUI ครับ จริงๆไม่ได้เลือกหรอก แต่ว่ารู้จักแค่ตัวเดียว 5555 พอเริ่มเห็นจุดอ่อนเลยหาตัวอื่นมาทดแทน เลยเจอตัวอื่นๆเพิ่ม(กำลังจะลอง mayer และ blueprint อยู่ครับ น่าจะสะดวกไม่แพ้กัน)

สำหรับการใช้งานก็ไม่ได้ยากเลยครับ แค่เพิ่ม header ในเว็บเพื่อเรียก css reset เข้าไปก่อน css ตัวอื่นเท่านั้นเองครับ ดังนี้

<link rel="stylesheet" type="text/css" href="reset.css" />

เท่านี้ standard ที่เหลื่อมล้ำจากแต่ละตัวก็ลดไปแทบเกือบหมดไม่ต้องมาไล่แก้ทีละจุดแล้วครับ

จริงๆหลังจากที่เราใช้ reset มันยังมีต่ออีกครับคือเรื่อง css font,css grid เพื่อที่จะเอามาจัดการตัวหนังสือ รวมทั้งโครงสร้างหน้าเว็บซึ่งเราจะพูดกันต่อไป


ขอบคุณ: http://meewebfree.com/site/css/199-using-css-reset...



Short URL click!
<< กลับคืน : เข้าชม 1,368 ครั้ง : ขึ้นไปด้านบน

รับทำเว็บไซต์ รับสร้างเว็บไซต์ รับออกแบบเว็บ รับเขียนเว็บ รับสอนทำเว็บ รับเช่า hosting รับเช่าพื้นที่เว็บไซต์ จดชื่อเว็บ รับโปรโมทเว็บไซต์ รับดูแลเว็บ SiteMap
ดูหนังออนไลน์ ดูหนังชนโรงhttp://www.xn--22c2c4blb9n.xn--o3cw4h/