What does @-moz-document url-prefix() do?

css firefox browser
Charles Roper picture Charles Roper · Jun 26, 2010 · Viewed 65.2k times · Source

In Simon Collison's new old Responsive Web Design, in the CSS, there are several declarations like this:

@-moz-document url-prefix() {
  .fl { float:left; margin:12px 4px 0 0; padding:0; font-size:65px;  line-height:62%;  color:#ba1820; }
  .fs { float:left; margin:12px 4px 10px 0; padding:0; font-size:65px; line-height:62%; color:#ba1820; }
}

What does this actually do? I've googled for @-moz-document url-prefix() and have found references for its use within userchrome but not standard site stylesheets.

It usually has a URL passed in as an argument which then restricts the content of the declaration to that URL. However, on Colly's site, there is no argument being passed in. This would indicate that the declaration is operating on the current URL, or any URL, no? So is what we're seeing here a way of targeting Mozilla-only browsers with certain rules?

Answer

Oded picture Oded · Jun 26, 2010

Any CSS at-rule that starts with @-moz- is a Gecko-engine-specific rule, not a standard rule. That is, it is a Mozilla-specific extension.

The url-prefix rule applies the contained style rules to any page whose URL starts with it. When used with no URL argument like @-moz-document url-prefix() it applies to ALL pages. That's effectively a CSS hack used to only target Gecko (Mozilla Firefox). All other browsers will ignore the styles.

See here for a list of other Mozilla-specific extensions.

Related questions

filter: blur(1px); doesn't work in Firefox, Internet Explorer, and Opera

I have a problem with CSS. When I try to do -webkit-filter: blur(1px); -moz-filter: blur(1px); -ms-filter: blur(1px); -o-filter: blur(1px); filter: blur(1px); it looks perfect in Safari and Chrome, but the blur doesn't show up at …

Read More
Using JavaScript to edit CSS gradient

I am working on editing CSS gradients through JavaScript in Firefox. I have input boxes where the user can put 1. Orientation 2. 1st Color 3. 2nd Color Here is the html <html> <head> <title>Linear Gradient …

Read More
How can I override the minimum-font-size in Firefox?

My site displays just like in need in IE and Opera, but in Firefox I can't get (via CSS) to have font sizes smaller than Firefox' default minimum-font-size. Of course I can go to Tools>Options and remove this …

Read More