2

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: the area(s) of code causing error

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.

Community
  • 1
  • 1
Abriel
  • 583
  • 1
  • 10
  • 33
  • And the weird thing is, the VS does recognise the @-moz-document directive as "a Gecko-specific at-rule that restricts the style rules contained within it based on the URL of the document". So it's not like it thinks the whole @-rule is an ordinary selector. – Mr Lister Aug 01 '13 at 07:58
  • @MrLister I agree. It recognizes the rule _and_ somehow accepts the second selector within the `@-moz-document` selector itself. – Abriel Aug 01 '13 at 13:26

1 Answers1

0

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!

james
  • 5,006
  • 8
  • 39
  • 64
  • I definitely found these to be the only solutions that worked for me using VS2012. I don't know why it recognizes the other syntax but gives errors. Hope others figure out this issue and find this useful. – Abriel Aug 13 '13 at 01:23