2012年12月28日 星期五

IE only stylesheet and hacks


As a web developer one of our biggest challenges is to make web design look the same or at least similar for all browsers. Most of the browsers renders almost identical but we have one mind bugging little nasty thing called Internet Explorer, we can’t ignore this browser as it is the standard browser in Windows so it has a lot of users and of course Microsoft made extra hard for us so that every version has its own life. There are a few ways to tackle this thing, most common once are with conditional tags or CSS hacks.

What is and how to use conditional stylesheets

Reason is graphical issues and they need to be fixed. It also verifies in html and is accepted by Microsoft. It’s also possible to less-than/greater-than targeting multiple versions at once.

Syntax

Needs to go in your with all the other CSS linked files. Syntax should be familiar, just regular HTML comments. Opening >!–[if IE]< and closing >![endif]–<. “!” stand for not, so !IE means not IE. “gt” means “greater then”, “gte” means “greater then or equal”, so >!–[if gte IE 8]< means IE8 or higher. Then we have “lt” means “lower than” and “lte” means “lower than equal.

Examples

<head>
<!-- TARGET ALL IE -->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie.css" />
<![endif]-->
 
<!-- TARGET ALL NON IE BROWSERS -->
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
 
<!-- TARGET ONLY ONE SPECIFIC VERSION, IN THIS CASE IE 6 -->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
 
<!-- TARGET ONLY ONE SPECIFIC VERSION, IN THIS CASE IE 5.5 -->  
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->
 
<!-- TARGET IE 6 AND LOWER -->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
 
<!-- TARGET IE 8 AND HIGHER -->
<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
</head>

CSS hacks, only if you must

Hacks are used in your general stylesheet file, it is not recommended to use but sometimes it makes the life easier.
/* HIDE FROM IE 6 AND LOWER */
#selector { width/**/: 320px; }
html > body #selector { width/**/: 320px; }
 
/* HIDE FROM IE 7 ONLY */
#selector { _width: 300px; }
 
/* IE 6 ONLY */
* html #selector { width: 240px; }
 
/* IE 7 ONLY */
*+html #selector { width: 300px; }
 
/* IE-8 ONLY */
#selector { width: 300px\0/; }
 
/* IE-7 & IE-8 */
#selector { height: 300px\9; }

Hack vs conditional stylesheets

Hacks are against web standards and should be carefully used, I’ll say it’s wrong to use them and should always be avoided.

Plus for conditional stylesheets

If you call you self a web developer and do care of your end product, you do need them. Using conditional styelsheets is the only way you can get a good result in all IE browsers. I’ll say this is the most boring part as a developer, most time consuming and frustration work. Don’t know how many times I’ve been swearing at Microsoft doing this kind of work. I always try and use greater-than/less-than to target multiple versions, its a great tool.

What about IE 6?

Probably one of the most challenging browsers to work with, I dropped support for this browser years ago, so have also big corporations and governments so I’ll say its safe to ignore IE 6. You can visit theThe Internet Explorer 6 Countdown to see if you target areas has a lot of users. If you targeting China I say you must tackle this bugger.
張貼者： 於
標籤： , , , ,

沒有留言:

張貼留言

歡迎熱愛 Puzzle and Dragons 的玩家一起上來討論及研究各種降臨打法。

進擊的 Puzzle and Dragons Facebook 專頁現已開幕 ~ 歡迎大家上去追查各種新舊貼。 Enjoy your Puzzle and Dragons

訂閱： 張貼留言 (Atom)