Specifics of large projects slicing
Joomla CMS Overview

CSS hacks overview

Browsers and standards is an eternal pursuit. Because of discrepancies to standards and different ways of rendering of pages the largest part of the web designer time takes the smoothing down these discrepancies. As a result, instead of effective work, the designer enters unnatural relations with browsers, wasting precious time. In this article some css hacks (they are also called css-filters) which will help you to solve some problems of discrepancy of browsers are considered.

1. Box Model hack

Box Model hack is used to solve the problem of Explorer where border and padding are included into the width of the element.

padding: 4em;
border: 1em solid red;
width: 30em;
width/**/:/**/ 25em;

2. Relative comments

Relative comments work only in IE under Windows, for other browsers they are usual comments, therefore they can be used without serious consequences.

The syntax is the following:

<!–[if condition]> HTML <![endif]–>

If you wish the explorer to ignore any part of a code you can use the following comment:

<!–[if !condition]> HTML <![endif]–>

The Condition can be such as:

  • IE – for any version IE
  • lt IE x – (less than) for all browsers IE which version is less than x
  • lte IE x – (less than or equal) for all browsers IE which version is less than or equals x
  • gte IE x – (greater than or equal) – for IE, which version is greater or is equal to x
  • gt IE x – (greater than) – for IE which version is greater than x.

Example:

<!–[if lte IE 6]> <link rel=”stylesheet” type=”text/css” href=”ie_png.css” /> <![endif]–>

3. Min-width and max-width: the maximum and minimum width of block

IE does not understand these css properties. Hack for the block with id “wrapper” looks like this:

А) the Minimum width 750px:

#container{
	min-width: 960px;
	width: expression(document.body.clientWidth < 960? "960px": "auto" );
 }

B) The Maximum width 1220px, minimum 750px 

#container{
	min-width: 750px;
	max-width: 1220px;
	width: expression(document.body.clientWidth < 750? "750px" : document.body.clientWidth &gt; 1220? "1220px" : "auto");
 }

Min-height hack from Dustin Diaz:

.selector {
	min-height: 500px;
	height: auto !important;
	height: 500px;
 }

4. Simple selectors

It is not an obligatory to create separate css-files for different browsers if the difference in rendering is not very big. It is possible to use the following css-selectors in your basic css-file:


IE 6 and less * html {}
IE 7 and less *:first-child+html {} * html {}
IE 7 only *:first-child+html {}
IE 7 and normal browsers html> body {}
Only normal browsers (not IE 7) html> / **/body {}
Opera of version 9 and less html:first-child {}

Usage example: we need to appoint some properties for the selector #mydiv .title only in IE7. It is done like this:

*:first-child+html #mydiv .title {<span class="comm">/*Necessary properties */</span>}

5. !important

In IE of version 6 and less there is a problem with the identifier !important which is used to ignore announcement of some property even if this announcement appears after the flowing. An example:

p { 
	background: green !important; 	/* for normal browsers and IE&gt;6.
		This property remains, because it is marked as important */
	background: red; /* IE 6 and less uses this property ignoring !important */ 
 }

6. @import “nonie.css” all;

IE 7 and less does not support media selectors @import. Therefore it is possible to write css for normal browsers and import it to your css using @import “nonie.css” all;. This hack works for IE of versions 7 and less, and may not work in the greater versions of IE.

7. body[class|="page-body"]

p {
	background: red; /* Works in all browsers */
 }
body[class|="page-body"] p {
	background: green; /* Works in IE7 and most part of the normal browsers except Opera */
 }

All above-named hacks use valid css. The following will allow you to solve the problem quickly, but will make css not valid. It is NOT recommended to use them.

8. Underlining and a hyphen

If you put underlining “_” or a hyphen “-” before the property in css these properties will be perceived only in IE of versions 6 less. Usage example:

p { 
	background: red; /*  Works in all browsers */ 
	_background: green; /*  Works in IE6 and less */ 
 }

9. The asterisk

Works for IE7 and less.

p { 
	background: red; /* Works in all browsers */ 
	*background: green; /* Works in IE6 and less */ 
 }

I would like to remind that this hack uses not valid css and is not recommended to use.

10. body:empty

Generally speaking :empty is a pseudo class which is described for CSS3 and should choose the elements which don’t have other elements or text in them. Nevertheless, if using it for an element body, Firefox 1.5 and Firefox 2 always choose it even if there is content inside the tag body.

So, most likely this hack will be valid in CSS3, but it is not valid for CSS2.x now. The summary:

body:empty {}

chooses a tag body in FF1.5 and FF2.0. May not work in the next versions.

11. a:link:visited, a:visited:link

According to the standards, pseudo tags :link and :visited can not be used simultaneously, :link means a not visited link. Nevertheless IE 7 and less will ignore these pseudo-classes if some other will appear in the same selector.

Example (selects a in IE7 and less):

a:link:visited, a:visited:link {}

12. >body

>body {} selects body only in IE7.

13. html* {}

html* {} selects all elements inside the element html. Works only in IE7 and less.

14. !important!

As we have mentioned before Explorer has problems with identifier !important. But it understands identifier
!important! (Other browsers do not accept this feature). It works for IE7 and below.

Tags: ,

This entry was posted on Thursday, November 27th, 2008 at 8:55 pm and is filed under News. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply