Ensuring your website looks consistent across different browsers and operating systems can be challenging. Here are some effective CSS techniques and hacks to address common issues and ensure cross-browser compatibility:
1. CSS Browser Selector
The CSS Browser Selector is a lightweight JavaScript tool that enhances CSS selectors, allowing you to target specific operating systems and browsers. Instead of maintaining separate CSS files for different browsers (e.g., ie7.css, ie8.css), you can use a single stylesheet (browserfixes.css) and include browser-specific styles:
/* Windows IE styles */
.win.ie { /* Styles for Windows IE */ }
.win.ie7 { /* Styles for Windows IE7 */ }
2. Conditional Comments
Conditional comments are a simple method to target Internet Explorer (IE) versions. They are supported only by IE and are ignored by other browsers, making them a safe choice for applying IE-specific styles:
<!--[if IE]> Some CSS Code <![endif]-->
<!--[if lte IE 6]> Some CSS Code <![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="ie_hacks.css" /><![endif]-->
Here’s a quick guide on the conditions:
-
IE: Targets all IE versions. -
lt IE version: Targets versions less than the specified version. -
lte IE version: Targets versions less than or equal to the specified version. -
gte IE version: Targets versions greater than or equal to the specified version. -
gt IE version: Targets versions greater than the specified version.
3. Selector Hacks
CSS selector hacks allow you to target specific browsers or versions by using unique CSS selector patterns:
/* IE6 and below */
* html #idname { color: red; }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, Safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* Safari 3+, Chrome 1+, Opera9+, FF 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* Safari 3+, Chrome 1+, Opera9+, FF 3.5+ */
body:first-of-type #ocho { color: red }
/* Safari 3+, Chrome 1+, FF 3.5+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile WebKit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#veintiun { color: red; }
}
/* Firefox only */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/* Firefox 3.5+ */
body:not(:-moz-handler-blocked) #cuarenta { color: red; }
4. Attribute Hacks
Attribute hacks use specific CSS attributes to target particular versions of Internet Explorer:
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 */
#veintesiete { color: blue !ie; }
/* IE8, IE9 */
#anotherone { color: blue\0/; }
/* IE9, IE10 */
@media screen and (min-width:0\0) {
#veintidos { color: red }
}
5. Min-Height Hack
The min-height property may not work consistently across all browsers. Use the following hack to ensure it functions correctly:
selector {
min-height: 500px;
height: auto !important;
height: 500px;
}
6. Transparent Images in IE6, IE7
Internet Explorer 6 and 7 can have issues with transparent PNGs. Use specific fixes or libraries like the Twin Helix PNG Fix to handle transparency issues.
7. Underscore Hack
The underscore hack targets IE5.5 and IE6:
.example {
color: blue;
_color: red; /* Applies only in IE5.5 and IE6 */
}
8. Overflow Hidden Not Working in IE7
If overflow: hidden doesn’t work, add position: relative to the container:
<div style="overflow: hidden; position: relative;">
<div style="border: black 1px solid; height: 200px; overflow: auto;">
<!-- Content will now be hidden properly in IE7 -->
</div>
</div>
9. Disable Textarea Resizing
To disable resizing of <textarea> elements:
textarea {
resize: none;
}
10. Disable Input Focus on Click
To remove the outline from focused inputs:
input {
outline: none;
}
11. Image Rollover Borders Without Layout Changes
To avoid layout jumps when adding borders on hover:
#example-one a img, #example-one a {
border: none;
overflow: hidden;
float: left;
}
#example-one a:hover {
border: 3px solid black;
}
#example-one a:hover img {
margin: -3px;
}
12. Set Color of Selected Text
To customize the color of selected text:
::selection {
background: #ffb7b7; /* Safari */
}
::-moz-selection {
background: #ffb7b7; /* Firefox */
}
_::selection {
background: #ffb7b7; /* Everything but Firefox and IE ≤8 */
}
13. Disable User Click on Elements
To disable user interaction with elements:
.example {
pointer-events: none;
}
14. Disable Text Selection with CSS
To prevent text selection across different browsers:
.disable-selection {
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer */
-khtml-user-select: none; /* KHTML browsers (e.g., Konqueror) */
-webkit-user-select: none; /* Chrome, Safari, Opera */
-webkit-touch-callout: none; /* Android and iOS callouts */
}
15. Tamil Numbers in List
To use Tamil numbers in ordered lists:
ol {
list-style-type: -moz-tamil;
list-style-type: tamil;
}
These techniques and hacks help ensure that your site performs consistently across different browsers and platforms. For ongoing improvements, stay updated with the latest CSS developments and best practices.
Top comments (1)
Who's still using Internet Explorer, which is no longer supported by Microsoft?