Cross Browser CSS Fixes, Tools, and Hacks
Tags: BeginnerAs 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
- Firefox – (Download)
- Internet Explorer – (Download)
- Safari – (Download)
- Google Chrome – (Download)
- Opera – (Download)
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
- Using CSS to Fix Anything 20 Common Bugs and Fixes
- IE CSS Bugs That’ll Get You Every Time
- Solving 5 Common CSS Headaches
- Using Javascript to Fix 12 Common Browser Headaches
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 Hackhtml:lang(en)>body .classname {}Opera 7 Hack@media all and (min-width: 0px){
.classname {}
}CSS Hack Resources
- Opera CSS Hack
- Google Chrome Hack
- http://www.stylegala.com/resources/css_hacks.htm
- http://www.centricle.com/ref/css/filters/
- http://www.sitepoint.com/article/browser-specific-css-hacks/
- http://www.w3schools.com/browsers/browsers_stats.asp
- http://www.webdevout.net/css-hacks
Không có nhận xét nào:
Đăng nhận xét