css tricks

CSS Hacks, Tricks and Proprietary Extensions

Below is a list of CSS hacks that can be used to filter out different browsers in cases when standard CSS does not work or the conditional comments of IE cannot be applied.

Internet Explorer 6

* html .elementOrClassName
{
	property: value;
}
.elementOrClassName
{
	_property: value;
}

Internet Explorer 7

* + html .elementOrClassName
{
	property: value;
}

Internet Explorer 8 in Standards Compliance Mode

.elementOrClassName
{
	property /*\**/: value\9;

}

\9 is required and the number cannot be different. I suppose that this has something to do with regular expressions.

All versions of Internet Explorer

.elementOrClassName
{
	property: value\9;
}

\9 is required and the number cannot be different. I suppose that this has something to do with regular expressions.

Turn on Image Scaling and Resampling in Internet Explorer

Funny enough, but unlike other browsers, Internet Explorer comes with bicubic interpolation mode turned off, and this is why sometimes images look frayed without an obvious reason. To fix this, you can use the following:

img
{
	-ms-interpolation-mode: bicubic;
}

Turn on CSS background-image caching in IE6

To avoid flicker of elements with background images when hovered, you may use the Microsoft-proprietary BackgroundImageCache Exec Command, for example:

$(document).ready(function()
{
 if(window.attachEvent)
 {
  document.execCommand("BackgroundImageCache", false, true);
 }
});

Emulate border-color: transparent in Internet Explorer 6

IE6 does not support border-color: transparent, here’s how this can be emulated. First you need to set some exotic border-color value (named or hex), then hide it with the chroma CSS filter of Internet Explorer. Of course you need to use the star hack for IE6:

* html .elementOrClassName
{
	border-color: pink;
	filter: chroma(color=pink);
}

Goolge Chrome and Apple Safari

@media screen and (-webkit-min-device-pixel-ratio:0)
{
	.elementOrClassName
	{
		property: value;
	}
}

Mozilla FireFox

@-moz-document url-prefix()
{
 .elementOrClassName
 {
  property: value;
 }
}

Tantek Celik’s Box Model Hack for Internet Explorer 5

Rarely used today, but still useful if you care about the wrong box model of IE5.

Opera 7x – 9x

This one should be used very carefully, as it targets older versions of Opera (circa 2005-2007) with CSS properties that already implemented in WebKit browsers.

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
	head~body .elementOrClassName
	{
		property: value;
	}
}

Proprietary CSS extensions

Below is a list of vendor-specific CSS extensions, which are valid CSS according to W3C.

Opera (prefixed with -o-)

Mozilla FireFox (prefixed with -moz-)

Internet Explorer 8 and greater (prefixed with -ms-)

WebKit Browsers – Google Chrome, Apple Safari, etc (prefixed with -webkit- or -khtml-)

Advertisements

Acid.JS Component Library 3.7 is Out With 1 Update and New Website

The new version of Acid.JS has just been released with one update * – version 2.0 of GuestBook.XML – an AJAX instant feedback component. I am also happy to announce the new website of the libary as well, so make sure you update your links.

* A couple of outdated components have been discontinued, and they are no longer shipped with Acid.JS – AJAX Photo Gallery, CSS Watermark, Antipixel Buttons.XML, Upload.XML, Skinnable Browser Dialogs and Page Announcement.XML.

Acid.JS Web 2.0 Component Library 3.6 is Out With 3 Updates

The new version of Acid.JS has just been released with three major component updates – AJAX Hotel Reservation Form 3.0, Web 2.0 AJAX Loading Panel 3.0 and Rounded Corners Panel 2.0.

Click here to view the release notes for the latest version.

Acid.JS Web 2.0 Component Library 3.5 is Out

The new version of Acid.JS has just been released with 2 new components – Acid.RSS and EULA.XML, updated versions of CheckBox.XML and RadioButton.XML.

Click here to view the release notes for the latest version.

Acid.JS Library 3.3 is out with Rounded Corner Textboxes Script

Get most of the website widgets and tools I’m developing in a single package that is regularly updated. Whenever a new script or script update is available, it will be included in the download file. To stay informed and up-to-date with Acid.JS, please, subscribe to my RSS feed.

Acid.JS Library 3.2 is out with AJAX Hotel Reservation Form

Get most of the website widgets and tools I’m developing in a single package that is regularly updated. Whenever a new script or script update is available, it will be included in the download file. To stay informed and up-to-date with Acid.JS, please, subscribe to my RSS feed.

Acid.JS Library 3.1 Has Been Released With 1 New Script

Get most of the website widgets and tools I’m developing in a single package that is regularly updated. Whenever a new script or script update is available, it will be included in the download file. To stay informed and up-to-date with Acid.JS, please, subscribe to my RSS feed.