Thứ Ba, 22 tháng 3, 2011

Cross Browser CSS Fixes, Tools, and Hacks

Cross Browser CSS Fixes, Tools, and Hacks

Tags:
As designers and developers we are all responsible for the product we produce, and cross browser testing is a must in our line of work. Although the W3C statistics show about 7 browsers that people tend to use most, in my opinion, two of them are the most important and should be given special attention to perfecting (Firefox and Internet Explorer).
Below are some commonly used browsers, tools, solutions, and hacks to overcome your daily issues.

Commonly Used Browsers

Want to find more? Checkout Smashing Magazine’s article.

Cross Browsing Tools

Sometimes its not possible to have a running browser with multiple versions (example: IE7 + IE6 on Same PC) so its useful to have standalone browsers to help you debug and test. Here are some tools below that may be helpful for you.
Want to find more? Checkout Smashing Magazine’s article.

Great Articles For Your Everyday CSS Fix

CSS Hacks

I hesitate sharing these hacks, because most beginners have tendencies to want to hack everything up, which leads to a nightmare in the long run. I have come a cross a few of them which I would like to share, but please use them wisely. With good XHTML/CSS structure, hacks are not needed. If all else fails, go ahead and check some of the options below.
IE Conditional Tags
<!--[if IE ]>
  <link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->
Checkout Site Point’s Article on conditional tags for IE
IE 6 Hack
*html .classname {}
IE 6 ‘!important’ Hack
.classname {
float: left;
margin: 200px !important; /*--The !important; hack tells IE6 to skip this line.--*/
margin: 220px;
}
IE 7 Hack
*+html .classname {}
Safari Hack
html:lang(en)>body  .classname {}
Opera 7 Hack
@media all and (min-width: 0px){
.classname {}
}

CSS Hack Resources

Conclusion

As you can see, testing and making your design work in all browsers can be a pain at times, but the more you get the hang of this the smoother your work flow will be. If you have any other solutions, tools, or tricks of your own, I would love to hear about it!

Related Posts

Không có nhận xét nào:

Đăng nhận xét