Home / Articles / Programming languages / Markup languages / HTML & CSS / CSS hacks for Mozilla Firefox, Opera, Safari and Internet Explorer

CSS hacks for Mozilla Firefox, Opera, Safari and Internet Explorer

CSS hacks for Mozilla Firefox, Opera, Safari and Internet Explorer
 
  • Currently 3.5 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 3.5/5 (3 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


Most of the prominent browsers (Opera, Mozilla Firefox and Safari) don't have a method of targeting CSS for a particular browser. And despite, Internet Explorer having the most "bugs" of them all, it has absolutely safe and simple methods to connect CSS to itself.

Installation

To show that the hacks are working properly, we give 6 headings with the identifier of the browser and its version. This will enable you to understand whether the hacks are working properly.

<h1 id="opera">Opera 7.2 - 9.5</h1>
<h1 id="safari">Safari</h1>
<h1 id="mozilla-firefox">Firefox</h1>
<h1 id="mozilla-firefox12">Firefox 1 - 2</h1>
<h1 id="internet-explorer7">IE 7</h1>
<h1 id="internet-explorer6">IE 6</h1>

Then all the h1 tags were automatically hidden.

<style type="text/css">
  body h1
  {
    display: none;
  }
</style>

CSS hacks for Internet Explorer using conditional comments

The easiest way to fix layout in Internet Explorer - is to use so-called conditional comments. Microsoft created a convenient syntax that allows you to change the layout depending on the browser version. Let's not go into details as it has already been discussed many, many times.

<!--[if IE 7]>
  <style type="text/css">
    display: block;
  </style>
<![endif]-->

<!--[if IE 6]>
  <style type="text/css">
    display: block;
  </style>
<![endif]-->

CSS hacks for Internet Explorer using parser hacks

It's not the best idea to use these hacks since conditional comments are perfect for handling this task. But if you need to store all CSS in a single file, there is an alternative. Remember that hacks for Internet Explorer 7 will only work inside IE, because IE version 6 does not support the selector ">". Also it should be noted that no other browser will recognize this hack.

/* IE 7 */
html > body #internet-explorer7
{
  *display: block;
}

/* IE 6 */
body #internet-explorer6
{
  _display: block;
}

CSS hacks for Mozilla Firefox

The first hack which only works in Firefox 1 and 2 is realized using body: empty. The second hack works in all Firefox versions, and is realized using CSS built-in extensions, that begin with prefix "-moz". Prefix "-moz" combined with -document url-prefix() is used in particular when creating additions to Firefox. It was discovered that use of embedded CSS extensions is a very convenient way to fix something in one browser, and still have no worries about changes in other browsers.

/* Firefox 1 - 2 */
body:empty #mozilla-firefox12
{
  display: block;
}

/* Firefox */
@-moz-document url-prefix()
{
  #mozilla-firefox { display: block; }
}

CSS hacks for Safari

CSS hacks for safari work the same way as in Firefox, but Safari's own extensions are prefixed with -webkit.

/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
  #safari { display: block; }
}

CSS hacks for Opera

@media all and (resolution = 0dpi) {
  #opera { display: block; } /* Opera < 10.50, the minimum version it works with is unknown, for 9.27 runs perfectly fine* /
}

Putting everything together

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>CSS hacks for Mozilla Firefox, Opera, Safari and Internet Explorer</title>
    <style type="text/css">
      body h1
      {
        display: none;
      }
      /* IE 7 */
      html > body #internet-explorer7
      {
        *display: block;
      }
      /* IE 6 */
      body #internet-explorer6
      {
        _display: block;
      }
      /* Firefox 1 - 2 */
      body:empty #mozilla-firefox12
      {
        display: block;
      }
      /* Firefox */
      @-moz-document url-prefix()
      {
        #mozilla-firefox { display: block; }
      }
      /* Safari */
      @media screen and (-webkit-min-device-pixel-ratio:0)
      {
        #safari { display: block; }
      }
      /* Opera */
      @media all and (resolution = 0dpi) {
        #opera { display: block; } /* Opera < 10.50, the minimum version it works with is unknown, for 9.27 runs perfectly fine* /
      }
    </style>
  </head>
  <body>
    <h1 id="opera">Opera 7.2 - 9.5</h1>
    <h1 id="safari">Safari</h1>
    <h1 id="mozilla-firefox">Firefox</h1>
    <h1 id="mozilla-firefox12">Firefox 1 - 2</h1>
    <h1 id="internet-explorer7">IE 7</h1>
    <h1 id="internet-explorer6">IE 6</h1>
  </body>
</html>

Live demo


 

Read also

Conditional comments for IE

Conditional comments for IE

How to write in HTML

How to write in HTML

Discussion (total 1 comments)

Anand
July 23, 2014 at 05:23 am
CSS hack for Chrome browser????

http://kvijayanand.in

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation