Add CSS custom to Firefox using jQuery

Question

I know stylesheets are the best place for CSS, but I was wondering if there was any way to add CSS specific to Firefox using jQuery.

The typical way to add CSS using jQuery uses this syntax:

$('select').css('margin', '1em');

The CSS query specific to Firefox is something like this:

@-moz-document url-prefix() {
  select {
    padding: 0.25em;
    margin-top: -0.2em;
  }
}

Is there a way to adapt the jQuery CSS command to use the Firefox media query?

I suppose if there was a way then it can be made to work for Chrome, Safari and IE as well.

Is there a way to adapt the jQuery CSS command to use the Firefox media query No. They rely on the selectors only available in a stylesheet, not on inline styling. You shouldn't really be doing this anyway. This may be caused by the slight differences in the browsers default styles, in which case I'd suggest you include a reset stylesheet before adding your own styles. — Rory McCrossan
– Rory McCrossan, Commented Nov 27, 2017 at 16:43
You may have your reasons for targeting Firefox specifically, but in general I would recommend feature detection over browser sniffing. Some good points are made in the answers to this question — agrm
– agrm, Commented Nov 27, 2017 at 17:01
@agrm, Rory: Thanks, these are good recommendations. I will look for an alternative. — pmagunia
– pmagunia, Commented Nov 27, 2017 at 17:19

LordAlpaca · Accepted Answer · 2017-11-27 16:46:45Z

0

As of jQuery 1.9, $.browser, which detects browser type is deprecated.

Check this SO question for more information and possible solution.

answered Nov 27, 2017 at 16:46

LordAlpaca

1765 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1