CODEWITHSUNDEEP
cssfirefoxsass
ShellZero
ShellZero

Reputation: 4661

How to target firefox or any other browser in SCSS?

The glyphicon is misaligned and is not behaving properly in Firefox whereas it looks perfect in Chrome and Safari. To solve this, I am trying to write a rule which would just apply if it is a Mozilla's browser.

Is there any way to detect a browser in SCSS by using directives like @if. Something like following:

@if $browser === mozilla {
    //apply this CSS
   .pull-right.glyphicon.glyphicon-chevron-right {
    top: -13px;
    line-height: 0.5 !important;
}

Do we have any simple way to detect? I tried using the @moz-document url-prefix() which isn't working in SCSS.

A similar question was asked here but there is no correct solution to the problem.

Any help or guidance is greatly appreciated. Thank you.

Upvotes: 4

Views: 5894

Answers (2)

jamesthemullet
jamesthemullet

Reputation: 501

I used the following to fix an issue I had with text-indent on Firefox being applied for double the width.

select {
 text-indent: calc(50% - 16px);

 @supports (-moz-appearance:none) {
  text-indent: calc(25% - 8px);
 }
}

Upvotes: 2

BaconBitz
BaconBitz

Reputation: 21

Managed to get scss to compile when the prefix rule was used a mixin, but not otherwise:

@mixin firefox-only {
  @at-root {
    @-moz-document url-prefix() {
      & {
        @content;
      }
    }
  }
}

then 

@include firefox-only {
  prop: val;
}

Upvotes: 2

Related Questions