Changing scroll bar color in Gecko Browsers


Although this is not recommended by W3C, out of popular interest, i feel like posting the solution to this problem. The problem, being the fact that IE went ahead and allowed people to customise its scrollbars, while the gecko browsers like Firefox, Opera does not allow user styles to custom browser styles. 

For IE scrollbar settings, you can use the following properties:

scrollbar-arrow-color
scrollbar-base-color
scrollbar-dark-shadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-3dlight-color
scrollbar-shadow-color
scrollbar-track-color

For Gecko-browsers, you can use the FlexiScroll. Its free for commercial use:

http://www.hesido.com/web.php?page=customscrollbar

Hope this helps!!

CSS fixes based on Browser versions


IE Specific CSS loading:

There can be scenarios wherein you might want to load IE version specific CSS. Say an IE6.css file for IE 6 and below, IE7.css for IE 7 alone. In these scenarios, it is good to exploit the conditional comments that IE layout engine Trident look upon.

Check the code below to check out how to implement these comments:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<link href=”main.css” rel=”stylesheet” />
<!–[if IE 7]>
<link href=”ie7.css” rel=”stylesheet” />
<![endif]–>
<!–[if lt IE 7]>
<link href=”ie6.css” rel=”stylesheet” />
<![endif]–>

<title>Conditional Comments Structure</title>
</head>
<body>

</body>
</html>

In the above example, the main.css will be loaded always. While depending on the IE browser versions, the other css will selected. IE7.css will be selected only for IE 7.0 browsers and IE6.css will be selected for IE 6 and below. The styles applied by the selectors in main.css will be overridden by the respective selectors in these css files, if any.

Conditional comments cannot be inserted into the css file, however they can be used with the style tag. For example:

<style type=”text/css”>
.MyStyle {
background-color: red;
}
</style>

<!–[if lt IE 7]>
<style type=”text/css”>
.MyStyle {
background-color: blue;
}
</style>
<![endif]–>

The other possible operators that can be used in the conditional comments are:

Operator Description Example
! not <!–[if ! IE 7]>
lt less than <!–[if lt IE 7]>
gt greater than <!–[if gt IE 7]>
lte less than or equal <!–[if lte IE 7]>
gte greater than or equal <!–[if gte IE 7]>

To target styles for IE 5, IE5.5, IE6.0 and IE 7.0 separately, you can use the following snippet:

h3{

background: #00f;   /* all browsers including Mac IE */
*background: #f00; /* IE 7 and below */
_background: #0f0; /* IE 6 and below */
_bac\kground: #f60; /* IE 6 only */
_background:/**/ #f62; /* IE 5.5 only */
_background/**/: #0f0; /* IE 5.0 */

}

Targeting Firefox Browser:

I would suggest your design your CSS for Firefox and then get back to IE to fix the IE specific bugs. Even under such cases, if you want Firefox specific fix, you can use the code below to load style specific for Firefox browser.You can also add the section inside the css file.

<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
@-moz-document url-prefix() {
h1 {
color: red;
}
}

/* Firefox 1 and 2 specific */
body:empty h1 {
color: red;
}

</style>
</head>
<body>
<h1>This should be red in FF</h1>
</body>
</html>

Targeting  Safari & Opera Browser:

Add styles specific for safari browser, you can use the following snippet:

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Opera 9 rules here */
}

Targeting Opera Browser only:

Opera hacks work out of the negation in CSS.

/* Opera Specific */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
head~body #h1{ display: block; }
}

CSS and Browser Compatibility Chart


We have a lot of browsers poping up every year. Not to mention the versions they come in. At times it can prove difficult to check if the website you have designed would look good in all browser. Browser compatibility has always been a web designers nightmare. Taking into account of this, i thought it would be useful to have a look at the various selectors and declarations used in the CSS 2.1 and CSS 3.

I would suggest you stick to CSS 2.1 as of now and use the advanced selectors judiciously based on your client browsers.

Let us check the compatibility charts of CSS and the popular browsers in the market. Most of the other browsers you get to see in the net will be using one of the layout engines used by the browsers in chart. Hence i feel the chart would suffice the needs of browser compatibility factor for your site.

It would be wise to keep note of this chart before you design your CSS.