การเขียน javascript ให้เรียก Css อีกไฟล์ นิยมใช้ในกรณีที่ การแสดงผลทางบราวเซอร์ไม่ตรงกัน คล้ายกับแสดงว่า ถ้าเป็น browser IE ให้ใช้ css ชื่อนี้ ดังตัวอย่างต่อไปนี้
<link rel=”stylesheet” type=”text/css” media=”screen” href=”style.css” /><!–[if IE]><link rel=”stylesheet” type=”text/css” media=”screen” href=”iehack.css” />< ![endif]–>
ถ้าเป็น บราวเซอร์ IE ให้เรียกใช้file css ชื่อว่า iehack.css
ซึ่งการทำอย่างนี้มีประโยชน์มากในการแสดงผลบราวเซอร์ที่ต่างกัน นอกเหนือจากนั้นยังมีหลายวิธีซึ่งต่อไปจะำนำมาเสนอ
การจัดทำ เอกสารที่เกียวกับ css ก็เพื่อประโยชน์โดยส่วนตัว เพราะเวลาเขียนแล้วต้องหาข้อมูลต้องต่อเนตโดยตลอดเวลาในการทำงาน แต่ถ่าทำอย่างนี้แล้วสามารถเก็บเข้ากับเอกสารส่วนตัวได้เวลามีปัญหาจะได้ดูโดยไม่ต้องต่ออินเตอร์เนต
นอกเหนือจากคำสั่ง javascript ข้างต้นแล้วยังมีอีกหลายวิธี
#header {margin-bottom: 3em;}
html>body #header {margin-bottom: 1em;}
ข้างบนนี้เป็นการ hack สำหรับ IE ซึ่ง IE จะไม่เข้าใจคำสั่งในบรรทัดที่ 2
ต่อไปเป็น box hack สำหรับ IE6 และรุ่นที่ต่ำกว่า
padding: 4em; border: 1em solid red; width: 30em; width/**/:/**/ 25em;height:100px;
min-height: 100px;
height:auto !important;
Mordern browser Hack or Firefox Hack
Use html>/**/body {} hack which will support only in both firefox2 and firefox3.
For Example:
Syntax: html>/**/body .selector{property:value;}
=================================================
Browser hack for Opera versions 9 and below
Use html:first-child {} for opera browser. Also you use
Syntax: @media all and (min-width:0px) {head~body .selector {property:value;}}
For Example:
@media all and (min-width:0px) {head~body .logo {margin-left:10px;}} only for opera
============================================================
Firefox3 browser hack
Use html>/**/body .selector, x:-moz-any-link, x:default {property:value;} for firfox3 only.
For Example:
Syntax: html>/**/body .pro_yl, x:-moz-any-link, x:default {background:red;}
===========================================================
Google Chrome browser hack
Use body:nth-of-type(1) .elementOrClassName{property:value;} only for google chrome.
For Example:
body:nth-of-type(1) .logo{margin:20px;}
=============================================================
Safari browser hack
Use Syntax: body:first-of-type .elementOrClassName{property:value;}
For Example:
body:first-of-type .logo{margin-top:10px;} only for safari.