@ -moz-document and @media together

Question

How can I combine the above prefixes? This does not work:

@media screen and (max-width: 991px) and (min-width: 768px) { @-moz-document url-prefix() { .navbar-default .navbar-brand {margin-left:30%;} } } 

And @media inside @-moz-document url-prefix() doesn't work either.

Answer 1

It works great for me, using @-moz-document first and @-moz-document @media query:

 @-moz-document url-prefix() { @media screen and (max-width: 991px) and (min-width: 768px) { .navbar-default .navbar-brand {margin-left:30%;} } } 

Demo: JSFiddle

Answer 2

Each pseudo-element must be valid within the rule, otherwise the whole rule will be deleted.

Refer to: https://developer.mozilla.org/en-US/docs/Web/CSS/@document and http://www.w3.org/TR/css3-syntax/#rule-sets