4

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.

ShellZero
  • 4,415
  • 12
  • 38
  • 56
  • Try JS console.log(navigator.userAgent); – T04435 Jun 11 '16 at 00:23
  • I'm trying to do it only with Sass. I don't want to incorporate JavaScript here. With JS, its quite straight forward, I am trying to find a way or to find out if it is possible with Sass. :) – ShellZero Jun 11 '16 at 00:27
  • Possible duplicate of [Targeting only Firefox with CSS](http://stackoverflow.com/questions/952861/targeting-only-firefox-with-css) – warkentien2 Jun 11 '16 at 05:06
  • and http://stackoverflow.com/questions/9328832/how-to-apply-specific-css-rules-to-chrome-only – warkentien2 Jun 11 '16 at 05:11
  • first find the way how browsers you need has to be targeted (like @moz-document) and then create a mixin, so you can call it for example as `@include browser(firefox) { ruleset }` – moped Jun 11 '16 at 11:26
  • Can you post an example snippet that demonstrates the problem? – Mr Lister Jun 11 '16 at 15:01

2 Answers2

2

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;
}
BaconBitz
  • 21
  • 2
2

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);
 }
}
jamesthemullet
  • 443
  • 4
  • 18