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

eCSStender สำหรับรัน CSS3 in IE6 เว็บดีไซน์

สวัสดีครับ คราวนี้ไปเจอบทความในเว็บไซต์ 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 {<br />
    border-radius: 5px;<br />
    -moz-border-radius: 5px;<br />
    -webkit-border-radius: 5px;<br />
}<br />

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

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

<p>#this-is-ugly-code {<br />
border-radius: 10px 5px;<br />
-moz-border-radius:  10px 5px;<br />
-webkit-border-top-left-radius: 10px;<br />
-webkit-border-top-right-radius:  5px;<br />
-webkit-border-bottom-right-radius: 10px;<br />
-webkit-border-bottom-left-radius:  5px;<br />
}</p>

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

<p>#this-is-the-end {<br />
border-radius: 10px 5px;<br />
-moz-border-radius: 10px 5px;<br />
-webkit-border-top-left-radius: 10px;<br />
-webkit-border-top-right-radius: 5px;<br />
-webkit-border-bottom-right-radius: 10px;<br />
-webkit-border-bottom-left-radius: 5px;<br />
-o-border-radius: 10px 5px;<br />
-khtml-border-top-left-radius: 10px;<br />
-khtml-border-top-right-radius: 5px;<br />
-khtml-border-bottom-right-radius: 10px;<br />
-khtml-border-bottom-left-radius: 5px;<br />
}</p>

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

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 {<br />
border-radius: 10px 5px;<br />
}<br />

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

Download eCSStender + วิธีใช้

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

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

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

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

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

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

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







There are 21 comments

Add yours
  1. แอ๋ม

    ตอนแรกที่เห็นยังไม่ค่อยอยากใช้ เพราะไม่อยากให้ link js เข้ามาเกินความจำเป็น
    โค้ดเลยเต็มไปด้วย -moz กับ -webkit
    ลืมไปว่ายังไม่ได้เทสต์งานกับตระกูล Opera
    สงสัยคงต้องเอามาใส่แล้วล่ะ 🙂

    • Designil

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

  2. LuviKunG

    ยอดเยี่ยมมากครับ อ่านแล้วมีประโยชน์จริงๆ
    ขอเอาไปใช้เลยละกัน 555+

  3. LuviKunG

    บทความหน้าของผมแล้วสินะ =___=… ใช่มั้ยท่านวอร่า

  4. กระปาล์ม

    ไม่มีปัญหากับ บราวเซอร์ตัวอื่นใช่ไหม หรือต้องทำ css แยกเพื่อไออี

      • Angiko

        อังขอเอาลิงค์ของเว็บคุณไปแปะใน blog อังหน่อยแนะ
        เอาไปแนะนำคนที่เขาอยากอ่านเกี่ยวกับ CSS
        เพราะตัวเองขี้เกียจเขียน 55555555+

      • DesignIL

        ได้คร้าบ ^^

        ขอบคุณที่ช่วยเผยแพร่บทความนะคร้าบ

  5. ak2010

    ขอบคุณสำหรับบทความดีดีครับแต่ผมโหลดมาแล้วไฟล์ .js ไม่เหมือนตัวอย่างครับ
    ตัวอย่างข้างบน
    2
    4
    5
    6

    มีใช้กับ IE8 ได้ด้วยไหมครับ ขอบคุณครับ

  6. ิaofrintit ออฟ

    เจ็งมากเลย สรุปได้ดีมาก ทำให้มีความสนใจอยากเรียนรู้เพื่อพัฒนามาก ๆ ขอบคุณค่ะ

  7. Nontachai Saptawepong

    ขอบคุณครับ มีประโยชน์มากเลยครับ สำหรับการทำเว็บ

  8. Nay Skul

    ขอบคุณค่ะ เข้าใจอะไรขึ้นเยอะเลย
    เขียนแค่ border-radius แล้วก็เพิ่ม script อันที่แนะนำให้โหลด run แล้วได้ผลอย่างที่ต้องการบน chrome และ Firefox ได้ (อันอื่นไม่ได้ลองเปิดดู คิดว่าน่าจะได้นะ) แต่ใน IE ยังคงไม่ได้เหมือนเดิมอ่ะ “””


Post a new comment