4

Is there an easy way to use "@-moz-document url-prefix()" to target Firefox in SCSS documents.

I have tried the following, but the parent reference "&" does not work in this context.

#nav li{
   display: table-cell;
   @-moz-document url-prefix(){
      & {
         display: inline-block;
      }
   }
}
christian
  • 2,279
  • 4
  • 31
  • 42
  • I'm curious why you'd need to do this? What could possibly be so different about Firefox's rendering engine that you'd need to change the display type for your elements specifically for Firefox? – Spudley Sep 04 '13 at 21:37
  • 1
    Firefox has an issue with using position relative on items with a display property of table-cell. I use the combination for a drop down nav and it works well in all browsers but Firefox. Changing the display property to inline-block works in Firefox and other browsers, but doesn't provide the spacing that table-cell will provide. – christian Sep 05 '13 at 13:42
  • You're out of luck for now. This may be a possibility in the future: https://github.com/nex3/sass/issues/286 – cimmanon Sep 05 '13 at 14:34

1 Answers1

0

I run into little issues like that from time to time. I mainly use this technique to fix IE8. Here's my fix:

First I install: https://github.com/rafaelp/css_browser_selector

This gives me browser and rendering classes for each browser:

<html class="gecko firefox firefox26 mac">

Then in my SCSS, I can do this:

.foo{ display: block; .firefox & { display; none; } }

This example hides .foo in Firefox. Using a & after the selector looks back up the tree. Isn't SASS awesome?!?!?

Alternatively, install the script and create a separate firefox.scss and just start it like so:

.firefox {
  // Do stuff here
}

As a rule, feature-detection using something like Modernizr is easier than playing to specific browsers, but sometimes you need to address various browser issues.

Dennis Best
  • 3,614
  • 3
  • 20
  • 31