Posted By

svnlto on 08/15/10


Tagged


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

roli000
wazdesign


only target google chrome and safari


 / Published in: CSS
 

  1. @media screen and (-webkit-min-device-pixel-ratio:0) {
  2. /* put webkit CSS here*/
  3. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: upadam on February 5, 2011

I'm not sure how you make this code work for you. In order to target both Safari & the Chrome browsers. I had to place a copy of the targeted selector down at the bottom of my css page so as not to blow apart my page setup. More explanations given after you view a copy of my code for the selector I wanted to target in Chrome & Safari below.

I was displaying all the borders in a green color of my three column div layout as one of the means of styling my page. I had one wider gap bewteen my second and third column divs in Chrome and Safari, and wanted to close up that gap, and change the width of the second div.hpcol2 by about another almost half of a percent.

@media screen and (-webkit-min-device-pixel-ratio:0) { div.hpcol2{

margin-top: .4em;
margin-bottom: .4em;
margin-left: auto;
margin-right: auto;
width: 39.45%;
height: 45em;
float: left;
border-top: .15em solid #42542f;
border-right: .15em solid #42542f;
border-bottom: .15em solid #42542f;
border-left: .15em solid #42542f;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;

}*/

div.hpcol2{

margin-top: .4em;
margin-bottom: .4em;
margin-left: auto;
margin-right: auto;
width: 39%;
height: 45em;
float: left;
border-top: .15em solid #42542f;
border-right: .15em solid #42542f;
border-bottom: .15em solid #42542f;
border-left: .15em solid #42542f;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;

}

You will notice at the end of the @media screen statement I placed one extra left pointing curly bracket { without this the Chrome and Safari browsers would not respond. Also at the end of the rules for my div class .hpcol2 where you have your right pointing closing curly braket I placed the star and forward slash ( */ ) just to the right of this bracket. It seemed any more star and forward slashes ( */ ) placed anywhere else and the browsers would not respond either.

I also had to have this second normally written selector and rules copy just underneath the targeted selector for all this to work. If these two selectors were left in the page cascade where my selector was originally placed then the extra curly bracket placed after the @media screen statement would blow all the selectors down the css page that came after it, except for the targeted selector. As you are aware any extra lose brackets in your css page, and your layout will not render correctly.

Also If you removed your normally written selector in the page casade. Thinking that the second copy at the bottom of the page would suffice. Then things would not work properly for Firefox.

It also seemed to me at this point that you can only target one selector, and fix only one problem using CSS. I tried targeting two selectors at the bottom of my CSS page this way, and only the bottom most placed selector seemed to render any changes. However doing what I did gave me the hack that I've been searching for, for weeks.

You need to login to post a comment.