title: Using lesscss and browser hacks for Firefox
body: <p>I am converting a css file into less manually, and I'm trying to find a way to do browser specific css. I tried to escape it using the ~"" as mentioned on the site, but it doesn't seem to work for whole blocks of code.</p>
  
  <p>For IE, these work:</p>
  
  <pre><code>padding: ~"5px\9"; /* IE8 and below */ 
  *padding:4px;  /* IE7 and below */ 
  _padding:2px;  /* IE6 */
  </code></pre>
  
  <p>And for Chrome, this works:</p>
  
  <pre><code>/* This will apply the styling only to Chrome and Safari */
  @media screen and (-webkit-min-device-pixel-ratio:0) {
    #mySelector {
      color: red;
    }
  }
  </code></pre>
  
  <p>However, what about Firefox? How do I escape something like:</p>
  
  <pre><code>/* This will apply the styling only to Firefox */
  @-moz-document url-prefix() {
    #mySelector {
      color: red;
    }
  }
  </code></pre>