CSS Platform Specific Hacks

How Do I Make a Trickless, Cross-Platform CSS-Based Same Column Height?

This approach is relatively "trickless" -- and it's the only approach I've found that works correctly, and doesn't involve any big-time hacks. (also, no tables - only divs and css).

You can see the following example in action: here (jsFiddle)

HTML:

<div class="colwrap">
    <div class="col1 content">
        <div class="col1 bg"></div>
        unde omnis iste natus error 
        sit voluptatem accusantium 
        doloremque laudantium
    </div>
    <div class="col2 content">
        <div class="col2 bg"></div>
        abcdefg hijklmnop
    </div>
</div>

CSS:

.colwrap {
    position: relative;
    overflow: hidden;
}
.colwrap .content {
    float:left;
    overflow: hidden;
}
.colwrap .bg {
    position: absolute;
    height: 100%;
    z-index: -1;
}
.colwrap .col1 { width: 50px; }
.colwrap .col1.bg { background: blue; }

.colwrap .col2 { width: 50px; }
.colwrap .col2.bg { background: red; }

Notes

The only trick here, is that you have to split your background (or border) -- whatever visual element you want to fill the column with--into a separate div from the content.
Your columns must be fixed-width. percentage widths usually won't work out very well.
The content divs float within the wrapper, which is set to overflow:hidden. This way the content divs "push out" the wrapper to the full height of the largest content.
Then the background divs are position:absolute; height:100%;. They automatically inherit the position (top,left) of their floating parents, but the height is computed based on the next positioned parent (not the floating content div, but the wrapper, with position:relative;). So the background divs end up right where we want.
The bg divs also use z-index:-1; to force them behind the content. This works in webkit, and FF, but may not work correctly in IE (esp. older versions). If it doesn't work, the problem is likely the negative number. To fix it all you have to do, is add an additional wrapper around the text within the content div, then set z-index on bg and on your content wrapper, so that things stack the way you want. (of course, you should test it -- because it may not be a problem at all).
Finally, I'll note that this same approach will work for as many columns as you want -- just add more (.col3, .col4, and so on.), just like col1 and col2 shown above.

How to write a CSS hack for IE 11?

Use a combination of Microsoft specific CSS rules to filter IE11:

<!doctype html>
<html>
 <head>
  <title>IE10/11 Media Query Test</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <style>
    @media all and (-ms-high-contrast:none)
     {
     .foo { color: green } /* IE10 */
     *::-ms-backdrop, .foo { color: red } /* IE11 */
     }
  </style>
 </head>
 <body>
  <div class="foo">Hi There!!!</div>
 </body>
</html>

Filters such as this work because of the following:

When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1), it must ignore the selector and the following declaration block (if any) as well.

<!doctype html><html> <head>  <title>IE10/11 Media Query Test</title>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <style>    @media all and (-ms-high-contrast:none)     {     .foo { color: green } /* IE10 */     *::-ms-backdrop, .foo { color: red } /* IE11 */     }  </style> </head> <body>  <div class="foo">Hi There!!!</div> </body></html>

Is there a way to set any style for a specific browser in CSS?

For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS

No, that isn't how it works.

Vendor prefixed properties are used for experimental features. Either because the specification for the property hasn't been locked down or because the browser implementor knows their are problems with the implementation.

In general, you shouldn't use them in production code because they are experimental.

Support for the vendor prefixed versions is removed as support stabilises.

Is there a way to set any style for a specific browser in CSS?

There are several methods that have been used for that effect.

Parser bugs

By exploiting bugs or unsupported features in specific CSS engines (e.g. some versions of IE will ignore a * character on the front of a property name while other browsers will (correctly) discard the entire rule).

Conditional comments

Older versions of Internet Explorer supported an extended HTML comment syntax that could be used to add <link> or <style> elements specifically for certain versions of IE.

Support for this has been dropped.

JavaScript

Classes can be added to elements (typically the body element) using JavaScript after doing browser detection in JS.

Is it possible to create a Mac OS specific CSS to fix font difference?

If setting an explicit line-height doesn't fix the problem, you can serve different stylesheets to each browser using your backend and detecting the OS in your application (via the user agent). You can also do something in JS doing the same thing, but there will likely be a FOUC while JS loads the relevant styles.

CSS/HTML compatibility issues across the same browser

The only times I have seen this happen was between different operating systems as well. In that case, it worked on Windows and Linux but not on Mac. The only common trait between the various occurrences was that the rendered menu font appeared different. And, yes, it cause me some headaches too.

You may also want to reset the page zoom by doing CTRL-0 just in case someone zoomed in and that screwing things up.

What did work is to adjust the padding of menu items until the one incorrect showed up properly and that reached both. Unfortunately, I could only do it by trial and error since the system in question did not have access to the development server.

Is there a way to do browser specific conditional CSS inside a *.css file?

There is a way to do it in IE by taking advantage of bugs in the browser and @import. The best method I've seen is here, courtesy of bobince (and definitely beat out my answer, heh).

In general though, no. Even conditional comments are browser-specific to IE.

CSS Platform Specific Hacks

How Do I Make a Trickless, Cross-Platform CSS-Based Same Column Height?

How to write a CSS hack for IE 11?

Is there a way to set any style for a specific browser in CSS?

Is it possible to create a Mac OS specific CSS to fix font difference?

CSS/HTML compatibility issues across the same browser

Is there a way to do browser specific conditional CSS inside a *.css file?

Related Topics

Leave a reply