Firefox Specific CSS Causing Multiple Errors in Vi

Question

In Visual Studio 2012, I'm trying to use the following Firefox specific CSS in one of my external styling sheets:

@-moz-document url-prefix() {
    .span4 ul li a:focus { border: none; }

    .span12, #announcement.span4, #mainContent .span16 { box-shadow: 8px 4px 19px -2px #CFCFCF; }
}

But whenever I close the end of the @-moz-document url-prefix selector, I get a few errors in two lines of the CSS, as described further below:

On line 500, the errors I'm getting are in the order from left-to-right:

• Missing a property name before the colon "(:)" in the "(property) : "(value)" declaration - which can be found in the class selector
• The block is unclosed, '}' is expected - which is the space after the word focus
• Missing a selector in the style rule - which is with the '{' character

On line 503, I get: Unexpected character sequence. with the '}' character

I've found the same Firefox solution which seems to work everywhere else. I've commented out and deleted the following CSS from the style sheet. But, Visual Studio found no errors. Is there a way to make the following Firefox specific CSS work within Visual Studio without having it give me errors?

UPDATE: As @Leigh said in a comment in this following question, I tried to hit CTRL+D, CTRL+K but it still gives me the same errors as before. The only difference is it gives me a semicolon at the end of the first class .span4 ul li a:focus with the errors on line 500.

Answer 1

I found a few possible solutions - although I'm not extremely familiar with the @-moz-document selector, so I'm not sure if these will do the exact same thing. This link (http://perishablepress.com/css-hacks-for-different-versions-of-firefox/) or this (http://css-tricks.com/snippets/css/css-hacks-targeting-firefox/) may be some help.

/* Target Firefox 1.5 and newer [!] */
.selector, x:-moz-any-link, x:only-child { color: red; }

/* Target all Firefox */
#selector[id=selector] { color: red; }

/* Target all Firefox */ 
@-moz-document url-prefix() { .selector { color: red; } } 

/* Target all Gecko (includes Firefox) */
*>.selector { color: red; }

Good luck with your issue!