[CSS Tips] อยากใช้ CSS3 ใน IE6 ทำไง + Validate CSS ตระกูล -moz- ยังไงให้ผ่าน?

สวัสดีครับ คราวนี้ไปเจอบทความในเว็บไซต์ A List Apart ที่น่าสนใจมา แต่พอเข้าไปอ่านแล้วรู้สึกว่าบทความอ่านเข้าใจยากเหมือนกัน (ถ้าเลื่อนลงมาแบบเร็ว ๆ จะค่อนข้างเมาตัวอักษร ลองดูครับ) เห็นว่าน่าจะเป็นประโยชน์ต่อเว็บดีไซเนอร์มาก ๆ ครับ ก็เลยตัดสินใจเอามาเรียบเรียงใหม่ให้ได้อ่านกัน

ปัญหา CSS3 ใน IE6

ช่วงนี้มีเทคนิคเจ๋ง ๆ โดยใช้ CSS3 ออกมาให้เห็นกันมากมายเลย (ใครสนใจเรียนรู้ CSS3 สามารถไปอ่านบทความสอน CSS ของเราได้เลยครับ) ซึ่งหลายคนคงทราบกันดีว่า CSS3 จะไม่ยอมแสดงผลในเว็บบราวเซอร์ชื่อดังอย่าง Internet Explorer 6-7 ครับ ก็เลยเกิดปัญหาเว็บดีไซเนอร์กล้า ๆ กลัว ๆ ไม่อยากใช้ CSS3 เพราะมันแสดงผลได้ไม่ครบทุกบราวเซอร์ โดยเฉพาะในประเทศไทยที่อัตราส่วนคนใช้ Internet Explorer เยอะจนน่าตกใจครับ

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

สำหรับวิธีแก้ปัญหาด้านบน เดี๋ยวไปอ่านทีเดียวครับ ตอนนี้มาดูอีกปัญหาหนึ่งของเว็บดีไซเนอร์ก่อน

ปัญหาการ Validate CSS ตระกูล -moz- หรือ -webkit

การที่เรา Validate CSS ผ่าน สำหรับเว็บดีไซเนอร์อย่างเราแล้วถือเป็นกำไรชีวิตอย่างนึงเลยครับ เป็นการแสดงฝีมือให้เห็นด้วยว่าเราเขียนโค้ดถูกต้องตามมาตรฐานนะ สำหรับใครไม่รู้ว่ามันคืออะไร ก็ไปอ่านที่ Validate CSS คืออะไร ได้เลยครับ ปัญหาที่เกิดขึ้น คือ ถ้าใครชอบใช้ CSS เฉพาะของบราวเซอร์ ตัวอย่างเช่นตระกูล -moz- หรือตระกูล -webkit- จะทำให้ Validate CSS ไม่ผ่านครับ (ใครอ่านบทความสอน CSS3 ของเราแล้วจะเห็นว่ามีการใช้ CSS พวกนี้ด้วย)

เรามาดูตัวอย่างโค้ดที่มี -moz- กับ -webkit- ก่อนครับ ถ้าเราต้องการทำขอบมน ๆ ในเว็บไซต์ด้วย CSS ปกติเราจะเขียนแบบนี้ครับ

somebox {

border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

ซึ่ง border-radius บรรทัดแรก เป็นของ CSS3 ครับ หมายความว่าบรรทัดนี้จะ Validate ผ่าน แต่ปัญหาคือมันจะไม่แสดงผลขอบมนให้เห็นใน Firefox และบราวเซอร์ที่ใช้ Webkit ครับ เราเลยต้องใส่ -moz-border-radius กับ -webkit-border-radius ในบรรทัดต่อมาด้วย ซึ่งอันนี้ก็จะแสดงขอบมนใน Firefox และบราวเซอร์ที่ใช้ Webkit ครับ แต่สองบรรทัดนี้จะทำให้ Validate ไม่ผ่าน

ถ้าไม่สนเรื่อง Validate CSS ก็พอจะปล่อยผ่านไปได้ครับ ในเคสนี้ CSS ยังดูโอเค ไม่รกมากอยู่ แต่ถ้าอยากให้ขอบแต่ละด้านมนไม่เท่ากัน…

this-is-ugly-code {

border-radius: 10px 5px;
-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
}

จะเห็นว่าโค้ดเริ่มรกครับ เพราะ -webkit- กำหนดแบบบรรทัดเดียวไม่ได้นั่นเอง… คำถามต่อมา คือ แล้วถ้าเราต้องการให้มันแสดงผลบนบราวเซอร์อย่าง Opera และ Konquerer ด้วยล่ะ? โค้ดจะออกมาเป็นแบบนี้ (Konquerer เป็นเว็บบราวเซอร์ที่ไม่ค่อยดังครับ แต่ซัพพอร์ท CSS3 ได้ดีในระดับนึงเลย)

this-is-the-end {

border-radius: 10px 5px;
-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
-o-border-radius: 10px 5px;
-khtml-border-top-left-radius: 10px;
-khtml-border-top-right-radius: 5px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 5px;
}

เห็นได้ชัดเลยว่าโค้ดยาว ๆ รก ๆ แบบน่ากลัวมากครับ ทั้งที่เราแค่อยากจะใส่ขอบมนให้กล่อง ๆ นึงแค่นั้นเอง เรามาดูวิธีแก้ปัญหานี้กันดีกว่าครับ!

eCSStender มาแล้ว แว้ว แว้ว แว้ว

สำหรับปัญหาต่าง ๆ ที่ผมอธิบายไปด้านบน ทั้งการใช้ CSS3 ใน IE6 และการ Validate CSS ตระกูล -moz- -webkit- สามารถแก้ได้ด้วย eCSStender ตัวนี้เลยครับ!

eCSStender เป็น Javascript Library ที่สร้างขึ้นมาเพื่อเว็บดีไซเนอร์โดยเฉพาะ ความสามารถหลักของมันมีเพียงอย่างเดียว คือ “แสดงผลความสามารถ CSS บางส่วนที่บราวเซอร์นั้น ๆ ยังไม่ซัพพอร์ท” ครับ

โดย eCSStender ซัพพอร์ทความสามารถ CSS ดังต่อไปนี้:

• CSS3 Selectors
• RGBa / HSLa (ทำสีโปร่งใส)
• @font-face (ใช้ฟ้อนต์นอกเหนือจาก Web-safe Fonts)
• border-radius (ใช้ทำขอบมน แต่ยังใช้ใน IE ไม่ได้)
• box-shadow (ใส่เงาให้กล่อง)
• CSS3 Transform (เปลี่ยนแปลงรูปร่างกล่องหรือตัวอักษร ตอนนี้ซัพพอร์ทแค่การหมุน เอาไว้หมุนใน IE6 ได้ด้วย)
• CSS3 Transition (เอาไว้เปลี่ยนแปลงรูปร่างเมื่อเราทำอะไรกับกล่อง เช่น ชี้กล่อง)

ความสามารถด้านบนทุกอัน ยกเว้น border-radius จะถูกทำให้ใช้ได้ใน Internet Explorer เวอร์ชั่น 6+ ทั้งหมดครับ

ปัญหาแรกแก้ไขได้แล้ว ทีนี้มาดูว่าปัญหาที่สองเราจะแก้ไขด้วย eCSStender ได้ยังไง…

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

beautified-code {

border-radius: 10px 5px;
}

โดยสำหรับการแสดงผลในแต่ละบราวเซอร์ ตัว eCSStender จะไปจัดการให้เราเองครับ ทีนี้โค้ดของเราก็ Validate CSS ผ่านสบาย ๆ แล้ว

Download eCSStender + วิธีใช้

สามารถไปดาวน์โหลด eCSStender กันได้ที่ เว็บไซต์ eCSStender เลยครับ

สำหรับวิธีใช้ก็แกะซิปแล้วเอาไฟล์ .js ในนั้นไปใส่ในเว็บไซต์เราครับ จากนั้นใส่โค้ดเพื่อเรียกใช้ในหน้าเว็บไซต์เราเลย:

<script type="text/javascript" src="eCSStender.js"></script>
<script type="text/javascript" src="eCSStender.CSS3-backgrounds-and
-borders.js"></script>
<script type="text/javascript" src="eCSStender.CSS3-selectors.js">
</script>
<script type="text/javascript" src="eCSStender.CSS3-color.js"></script>

eCSStender จะแบ่งเป็นหลายส่วนครับ สามารถไปดูได้ว่า แต่ละส่วนของ eCSStender มีอะไรบ้าง ได้เลย ถ้าเราจะเลือกใช้แค่บางส่วนก็ใช้โค้ดแบบด้านล่างได้เลยครับ

<script type="text/javascript" src="eCSStender.js"></script>
<script type="text/javascript" src="eCSStender.CSS3-color.js"></script>

สำหรับบทความวันนี้ก็ขอจบแต่เพียงเท่านี้ครับ เขียนนานมาก ยังไงมีข้อสงสัยอะไรก็ถามได้เลยนะครับผม~!!

อ้อ! อย่าลืมแวะไปเยี่ยม เว็บบอร์ดเว็บดีไซน์ ของเรากันด้วยครับ มีแจกของฟรี และความรู้ดี ๆ ในนั้นรออยู่อีกเพียบเลย หากมีข้อสงสัยเกี่ยวกับเว็บดีไซน์ก็เข้าไปถามในนั้นได้เลยไม่ต้องเกรงใจครับ (การเข้าบอร์ดแจกของฟรีจะต้องโพสเกิน 5 โพสก่อนนะคร้าบ)