RootsWeb.com Mailing Lists
Total: 1/1
    1. [FreeHelp] CSS Targetting of Specific Browsers
    2. Barry Carlson
    3. Here's something for those of you finding a need to correct some CSS problem that appears in either the Firefox, Opera or Chrome and Safari browsers. It is well known that the Internet Explorer suite of browsers can be addressed using Conditional Comments, e.g. <!--[if ie 8]> <link rel="stylesheet" href="styles-for-ie8.css"> <![endif]--> With a little modification, the same Conditional Comments can be used to target all other browsers and exclude Internet Explorer, e.g. <!--[if !ie]><!--> <link rel="stylesheet" href="styles-for-not-ie.css"> <!--<![endif]--> The Internet Explorer developers have decided that as from the release of Internet Explorer 10, the support for Conditional Comments will end. The rationale behind that decision is that IE10 will be W3C compliant and the need for web designers to target it separately to all other browsers will therefore end. In my opinion, that decision is misplaced, or its an attempt to take back some of the market share that has been lost to the other browsers before IE's share drops below 50 percent. So how do you sort out problems that may exist between the Gecko (Firefox, SeaMonkey) or Opera and Webkit (Chrome, Safari) browsers? Well, I had a need to do so recently for Firefox when I found that a padding declaration in a <textarea> resulted in padding being applied top and bottom as well as to the outside of the vertical scrollbar. This is a known "bug" in Firefox - first reported in 2002, i.e. https://bugzilla.mozilla.org/show_bug.cgi?id=157846 Now Opera, Chrome and Webkit leave the scrollbars alone when padding is applied in the <textarea>, and as I could do without padding on the inside of the scrollbar, I then sought a means of targetting Firefox to remove the padding-right declaration and return the scrollbar to the border of the <textarea>. Luckily, Firefox has a CSS expression that is used for addressing Firefox Extensions and it is application is, e.g. @-moz-document url-prefix() {/* Firefox, SeaMonkey */ textarea {padding-right:0} } Likewise, I have found a similar expression that can be used for addressing the Webkit browsers (Chrome and Safari), e.g. @media screen and (-webkit-min-device-pixel-ratio:0) {/* Chrome & Safari */ #myDiv {display:none;} } and finally Opera, e.g. @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {/* Opera */ #myDiv {display:none;} } A page incorporating these CSS detection schemes for various browsers and a variation to the usage of Internet Explorer Conditional Comments is at:- http://freepages.rootsweb.ancestry.com/~bristowe/test/css-ie-target.html Barry

    01/07/2012 02:28:13