CSS Hacks
In Mac, if you already installed an anti-virus then this the best thing you've done to secure notebook. To find out if your mac address has been hacked. You can easily check it out by scanning your Mac. Usually, Mac users have to scan its system regularly to know if check anything usual such as the trojan virus. Commented Backslash MacIE5 CSS Hack - v2. The are 2 divs below. One says 'This is not MacIE5', and should be visible for all css-supporting browsers except MacIE5. The other says 'This is MacIE5' and should only be visible in Mac IE5.
See Centricle CSS filters for a useful overview.
After I published this columnSimon Willison came up with one (and only one) case in which CSS hacksare allowed. If you actively maintain a site (because it's your personal blog, for instance) CSS hacks areless dangerous. When browser compatibility patterns shift you can easily update the offending CSS.
There are an incredible number of CSS hacks available that are said to make sure that certainstyles are or aren't parsed by certain browsers. In general I strongly feel you shouldn't use them.See my Keep CSS simple column for the complete argument against browser hacks.
The safe list
Below I started a list of safe hacks, that is, a list of hacks that are extremely unlikely to misfire in thefuture.
- The
@import
hack against Netscape 4. This browser is extremely dead by now.
Any style sheet you import is not parsed by Netscape 4. Hence you should move all declarations that don't work in Netscape 4 to this style sheet. Netscape 4 will not read the CSS in the notForNetscape4.css file. - The commented backslash hack (original) against Explorer 5 Mac. This browser, too, is dead.
The commented backslash hack works as follows: - Conditional comments, aimed at Explorer Windows only.
That's it. I don't use any more hacks. In general I advise you to do the same.
Box Model Hack?
But what about the Father of all CSS hacks, Tantek Çelik's famousBox Model Hack? I've never actually used it, mainly because I've always feltthat the whole sequence of quotes and brackets and backslashes is an eyesore. I do admire it in the abstract,though, because it showed that CSS hacks are possible.
More recently I catch myself wondering if this hack hasn't opened a can of worms that should haveremained closed.
If you are trying to do pixel-perfect cross-browser CSS layout, then you have probably ran into problems with IE . I am going to highlight the top 7 CSS hacks that we often use to have pixel perfect design.
Mac Shack Jobs
1)Box Model Hack
The box model hack is used to fix a rendering problem in pre-IE 6 browsers, where the border and padding are included in the width of an element, as opposed to added on
2) Conditional Comments
These conditional comments are for IE-only and they’re not supported by any other browser. For other browsers they are just an ordinary comments and therefor, they are safe to use.
The typical usage is as follows:
The above code applies to all versions of Internet Explorer, i.e. 5.01, 5.5 and 6.0, but now we want to apply it to versions of Internet Explorer, i.e. 5.01, 5.5 and 6.0, so we will apply the following condition:
After we finish testing, we remove all hacks to separate file(s), so the main CSS is clean and tidy. This separate file is then called in the header section of a file within conditional comments.
Condition is one of the following:
- IE (Any version of IE)
- lt IE version (Versions less than version)
- lte IE version(Versions less than or equal to version)
- IE version (Only version)
- gte IE version (Versions greater than or equal to version)
- gt IE version (Versions greater than version)
Mac Chrome Css Hack Only
Version is the version of Internet Explorer, typically 5, 5.5, 6, or 7, you can read more info about this at Quirksmode.
3) Min-width and Max-width of an element
IE doesn’t understand this command, so we’ll need a new way of making this work in this browser. Let’s take a quick example, we need to apply this to a div with:
Next we create our CSS commands, so as to create a minimum width of 750px:
Mac Css Hack Download
You might also want to combine this minimum width of 750px with a maximum width 1220px:
Another Alternative for for min-height without javascript is to use Dustin Diaz’ nice hack: :
4) Easy Selectors
Most in-CSS hacks deal with selector bugs. Below is a list of different IE versions and the beginnings of selectors that are known to select elements in them. All of these selectors use valid CSS.
- IE 6 and below
- IE 7 and below
- IE 7 only
- IE 7 and modern browsers only
- Modern browsers only (not IE 7)
- Recent Opera versions 9 and below
5)Whatever: hover
The :hover selector enables you to have cool effect for html elements like and in tables.Most browsers have no problem with this, except IE which look at the stylesheets and each individual rule with javascript.
If :hover rules can be tracked, and .htc can be used to change an elements behavior, then it should be possible to create a behavior that enables :hover for any element.
You can read more about this here
6)Transparent PNGs
IE dosn’t handle transparent PNG too well. You’ll get an ugly grayish type background wherever it’s supposed to be transparent. And we cann’t just use GIFs because aren’t good for higher resolution images. So we need a CSS hack to fix this. Follow the following steps and you will be set:
- A HTC script and a transparent GIF will be used to solve this issue. You can download both files here
- Now just upload these 2 files to wherever you store your IE.css file.
- Add one simple line of CSS code to your ie.css file:
Another solution can be found at Komodomedia
7) Stylegala- No More CSS Hacks
Stylegala’s method is to detect browser version and serve different CSS rules to different user agents, without using hacks or conditional comments. At the same time the end user or validator will never see the CSS rules specified for other browsers than the one they are using. He used some simple PHP code to detect browser type exactly as any CSS hack.
Further Readings
Credits
Thanks to our friends 'Karim' and 'pacotole' for pointing out Dustin Diaz’ nice hack for min-height.
Thanks to our friend 'Narga' for creating a vietnamese translation page on http://www.narga.net/348