0

I am looking for a way to only target chrome browsers within a mixin in scss. 

@mixin {
 &:after {
 border-bottom:black; 

  @media screen and (-webkit-min-device-pixel-ratio:0) { border-bottom: red; }

  }

}

This targets both safari and chrome at the moment.

A_city
  • 1
  • 2
  • Note that you should not add declarations directly into `@media` block, you have to use a CSS selector at first. – Hashem Qolami Sep 10 '14 at 13:44
  • Why do you need to target Chrome and not Safari? Needing to target specific browsers is almost certainly a sign of a poor design/implementation. – cimmanon Sep 10 '14 at 14:45

3 Answers3

0

There is no particular hack for css alone whereas you can override the css of the safari

FOR WEBKIT 

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .class{color:red;}
}

Safari only override

::i-block-chrome,.class {
 color:blue;
}}
Benjamin
  • 2,612
  • 2
  • 20
  • 32
  • not sure how that would work with the mixin since I'm not using it yet on a particular class – A_city Sep 10 '14 at 13:41
0

If you are looking for a media query, Chrome versions can be separated now. A while back I created this from research of combinations until I found a method that would work. I posted it months ago to browserhacks.com (I do testing for them). Chrome 29+ is targetable via media query. At this time, it is tested working in all modern versions of Chrome even development and Canary versions up to version 40.

Try this instead of the Chrome + Safari media query embedded in your mixin:

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
   border-bottom: red;
}

There are live tests I have posted as well for this and others that I have worked on or created here:

http://browserstrangeness.bitbucket.org/css_hacks.html

Jeff Clayton
  • 7,053
  • 1
  • 31
  • 36
0

Try this:

@supports (-webkit-appearance:none) {}

The CSS within the curly brackets will only run if your browser supports webkit (Chrome).

Browserhacks is a great resource for 'browser specific CSS and JavaScript hacks'

Peter Rhodes
  • 698
  • 6
  • 14