CSS hacks

อยู่ในประเภท: style sheet |
โพสเมื่อ July 21st, 2008 โดย Bird

การที่เราจะเขียนเว็บไซต์ที่ใช้ style sheet โดยเฉพาะแบบ tablelessให้ cross browser
มาสักเว็บนึง เป็นเรื่องที่ยากลำบาก เพราะ web brower รุ่นเก่า มาตรฐานการ render จะต่าง
จาก web browser รุ่นใหม่ แม้กระทั่งยี่ห้อเดียวกัน แต่ต่างรุ่น ก็แสดงผลต่างกัน เช่น IE6 กับ
IE7 ที่แสดงผลบางอย่าง ไม่เหมือนกัน ดังนั้น เพื่อให้บรรลุวัตถุประสงค์(ทำเว็บ cross browser)
เราก็ต้องอาศัย การ hack css เข้าช่วย

CSS hacks คืออะไร?

คือการใช้ bug ของ browser ช่วยในการสร้างเงื่อนไขการทำงานของ style sheet
เพราะบาง browser จะมี bug โดยเฉพาะ IE เช่น คำสั่ง a สามารถใช้กับ IE ได้(เป็น bug ของ IE)
แต่ใช้กับ browser อื่นไม่ได้ เราก็ใช้คำสั่ง a เป็นเงื่อนไขในการสั่งให้ style sheet ทำงาน
ทำให้เราสามารถใช้ 2 คำสั่งที่เหมือนกันได้ แต่ต่างกันตรงที่ ค่าที่ระบุให้คำสั่งนั้นต่างกัน

Important Hack

  1. p { color: #ff0000; }
  2. p { color: #000000; }

ตามปกติแล้ว css จะถูกอ่านตามลำดับ ถึงแม้ว่าจะเป็นคำสั่งที่เหมือนกัน แต่คำสั่งสุดท้ายเท่านั้นที่
ถูกใช้งาน ดังตัวอย่างข้างต้นสีตัวอักษรจะเป็นสี #000000 เท่านั้น สี #ff0000 จะไม่มีผล

แต่ถ้าเราใช้คำสั่ง !important

  1. p { color: #ff0000 !important; }
  2. p { color: #000000; }

ไม่ว่าคำสั่ง color: #ff0000 !important; จะอยู่ส่วนไหนของเอกสาร(ลำดับการเขียนไม่เป็นผล)
คำสั่งนี้เท่านั้นที่จะถูกทำงาน

แต่คำสั่งนี้ใช้ได้กับ ie6

  1. #maincontent {
  2. min-height: 300px;
  3. height: auto !important; /* For Saf/Fx */
  4. height: 300px; /* IE6 expands this if needed */
  5. }

จากตัวอย่าง ie6 จะใช้คำสั่ง height: 300px; ได้เท่านั้น ส่วน browser อื่นก็ใช้คำสั่ง
height: auto !important; (ลำดับไม่สำคัญเพราะมี !important)

Underscore Hack

เนื่องจาก CSS specification ได้สงวนการขึ้นต้นคำสั่ง(property)ด้วย ขีดล่าง(_) or ขีดกลาง(-)
ไว้ใช้กับ vendor-specific property name จึงทำให้คำสั่งที่ขึ้นต้นด้วย _,- ไม่ถูกอ่านจาก
browser สมัยใหม่ ยกเว้น ie6 เท่านั้น ที่ยังอ่านคำสั่งนี้ได้อยู่

  1. p{
  2. color: black;
  3. _color: blue;
  4. }

จากตัวอย่าง ie6 จะอ่านทั้งสองคำสั่ง แต่จะสั่งให้ทำงานได้เฉพาะคำสั่งสุดท้าย (วิธีนี้ลำดับการเขียน
มีความสำคัญ) แต่ browser อื่นอ่านคำสั่งแรกเท่านั้น

Backslash Hack

วิธีนี้คือการใส่ \ เข้าไปในชื่อ property ส่งผลให้ browser อื่นละเว้นคำสั่งนี้ แต่ยังคงมีผลกับ ie
(ผมไม่แน่ใจว่ามีผลกับ ie7 หรือป่าว เพราะยังไม่ได้ลอง : P )

  1. .test {
  2. height: 500px;
  3. he\ight: 400px;
  4. }

จากตัวอย่าง ie ใช้คำสั่ง he\ight: 400px; ส่วน   browser อื่น ๆ จะใช้ height: 500px;

note: backslash ไม่ควรใส่นำหน้าตัวอักษร a-f, A-F และ 0-9 เพราะอาจจะถูกตีค่าว่าเป็น
เลขฐาน 16

Star-HTML Hack

ดอกจัน (*) คือ Universal Selector

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }

จากตัวอย่าง ทุก element ในเอกสารจะถูกควบคุมด้วยคำสั่งที่อยู่ในปีกกาของ *

การใช้ Universal Selector จะเห็นผลได้มีอยู่สองกรณีคือ

  • ใช้ * อย่างเดียว ดังตัวอย่างข้างต้น
  • ใช้ * ร่วมกับ simple selector

note: simple selector คือ การเขียน selector ที่ขึ้นต้นด้วย element แล้วตามด้วย
Universal Selector หรือ attribute selectors หรือ ID selectors หรือ pseudo-classes

  1. * em{
  2. ⋮ declarations
  3. }
  1. <body>
  2. <div>
  3. <h1>The <em>Universal</em> Selector</h1>
  4. <p>We must <em>emphasize</em> the following:</p>
  5. <ul>
  6. <li>It’s <em>not</em> a wildcard.</li>
  7. <li>It matches elements regardless of <em>type</em>.</li>
  8. </ul>
  9. This is an <em>immediate</em> child of the division.
  10. </div>
  11. </body>

การใช้ * em จะมีผลกับ

  • “Universal” ใน h1เพราะ * ตรงกับ <h1>
  • “emphasize” ใน  p เพราะ * ตรงกับ <p>
  • “not” ใน li ตัวแรก เพราะ * ตรงกับ <ul> หรือ  <li>
  • “type” ใน li ตัวที่สอง เพราะ * ตรงกับ <ul> หรือ  <li>

แต่ถ้าหากใช้ universal selector ไม่ได้ตามด้วย simple selector การใช้ universal selector
จะไม่เป็นผล พูดง่าย ๆ ก็คือ ใช้ก็เหมือน ไม่ใช้ ดังตัวอย่างข้างล่างนี้

  1. *.warning {
  2. ⋮ declarations
  3. }
  4. .warning {
  5. ⋮ declarations
  6. }

ทั้งสอง ไม่ต่างกันเลย

มาเข้าเรื่องกัน ถ้าเราใช้ Universal Selector ร่วมกับ html เป็น * html จะเกิดอะไรขึ้น

  1. .test {
  2. position: fixed;
  3. }
  4. * html .test{
  5. position: absolute;
  6. }

คำสั่งที่เป็นของ(อยู่ภายในวงเล็บปีกกา) * html จะถูกใช้งานก็ต่อเมื่อ html ถูกสืบทอดมาจาก
element ใด ๆ แต่มันเป็นไปไม่ได้ที่ html จะสืบทอดมาจาก element อื่น เพราะ html เป็น root
ดังนั้น browser ส่วนใหญ่จึงมองข้ามกลุ่มคำสั่งนี้และไม่ประมวลผล แต่ ie6 และต่ำกว่า ie6
จะยังอ่านค่าพวกนี้อยู่ เลยเกิดเป็น bug ของ ie6

ตารางแสดง browser ที่ bug * html
ที่มาตาราง: http://reference.sitepoint.com/css/universalselector

Easy selectors hack


ใช้ได้กับ IE7 เท่านั้น

  1. *:first-child+html {
  2. ⋮ declarations
  3. }

ใช้ได้กับ IE7 และต่ำกว่า

  1. *:first-child+html {} * html {
  2. ⋮ declarations
  3. }

ใช้ได้กับ IE7 และ browser รุ่นใหม่ อื่น ๆ

  1. html>body {
  2. ⋮ declarations
  3. }

ใช้ได้กับ browser รุ่นใหม่ แต่ไม่รวมถึง IE7

  1. html>/**/body {
  2. ⋮ declarations
  3. }

สรุป

ลำดับ CSS hacks IE6 IE7 Firefox Safari
1. !important /
2. _property หรือ -property /
3. * html /
4. *:first-child+html {} /
5. *:first-child+html {} * html {} / /
6. html>body {} / / /
7. html>/**/body {} / /

ตารางแสดง bug หรือการ hack ของ browser ที่ประมวลผลบน windows เท่านั้น

เครื่องหมาย “/” ในตารางหมายถึง “ใช้ได้กับ”

References:

แท็กส์ : , ,
Trackback url : คุณสามารถ trackback จากเว็บคุณได้
« Using an image as a link
บันทึกสิบเอก ตอนที่ 1: เรียกพล’s eve »


ตอบมา 4 คน- “CSS hacks”

  1. teehard พูดว่า:
    July 31st, 2008 เมื่อ 12:03 am

    ขออนุญาตินำบทความไปลงที่blogนะครับ

  2. iNhumBa พูดว่า:
    August 26th, 2008 เมื่อ 2:34 pm

    มีประโยชน์มากเลย ขอบคุณครับ

  3. pligg.com พูดว่า:
    October 10th, 2008 เมื่อ 2:19 am

    CSS hacks | callmebird…

    การที่เราจะเขียนเว็บไซต์ที่ใช้ style sheet โดยเฉพาะแบบ tablelessให้ cross browser
    มาสักเว็บนึง เป็นเรื่องที่ยา…

  4. trirong พูดว่า:
    October 29th, 2008 เมื่อ 2:34 pm

    thankyou…

คอมเม้นท์ซะหน่อย

8 + 9 =