Ignoring Webkit-Specific CSS Selector in Firefox

Ignoring Webkit-specific CSS selector in Firefox

Unfortunately, it's not possible without duplicating the declaration blocks, as the CSS spec stipulates that browsers must behave this way when encountering unrecognized selectors in CSS rules:

The selector consists of everything up to (but not including) the first left curly brace ({). A selector always goes together with a {}-block. When a user agent can't parse the selector (i.e., it is not valid CSS3), it must ignore the {}-block as well.

In this case, it's one vendor's browser being unable to recognize another vendor's prefixes, so it has to ignore the rule.

Targeting only Firefox with CSS

OK, I've found it. This is probably the cleanest and easiest solution out there and does not rely on JavaScript being turned on.

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}

<h1>This should be red in FF</h1>

Why can I not group browser-specific CSS-selectors for different browsers?

If one selector in a group of selectors is invalid, the browser must treat the entire rule as invalid. Or at least so says the W3C.

I'm not sure why this behaviour is mandated, but at a push, I'd guess it's because an invalid selector could break general CSS syntax, making it impossible for a browser to reliably guess where the invalid selector ends and valid elements begin.

Can I group Firefox and Webkit style selectors? If not, why?

If a selector is unrecognised, then a browser is required to treat it as an error and ignore it: The whole selector, not just the group. So you can't group them.

Why is chrome and firefox ignoring this multiple selector CSS rule?

See MDN's article on :not:

The ability to list more than one selector is experimental and not yet widely supported.

It looks like only Safari 9+ supports it (no other browsers do). Once non-Safari browsers see that rule, they choke up.

Change the line:

#et-boc .et-l div:not(.woocommerce-message, .star-rating),

to two :nots instead:

#et-boc .et-l div:not(.woocommerce-message):not(.star-rating),

so that they only contain a simple selector.

#et-boc .et-l .hentry,

#et-boc .et-l a,

#et-boc .et-l a:active,

#et-boc .et-l blockquote,

#et-boc .et-l div:not(.woocommerce-message):not(.star-rating),

#et-boc .et-l em,

#et-boc .et-l form,

#et-boc .et-l h1,

#et-boc .et-l h2,

#et-boc .et-l h3,

#et-boc .et-l h4,

#et-boc .et-l h5,

#et-boc .et-l h6,

#et-boc .et-l hr,

#et-boc .et-l iframe,

#et-boc .et-l img,

#et-boc .et-l input,

#et-boc .et-l label,

#et-boc .et-l li,

#et-boc .et-l object,

#et-boc .et-l ol,

#et-boc .et-l p,

#et-boc .et-l span,

#et-boc .et-l strong,

#et-boc .et-l textarea,

#et-boc .et-l ul,

#et-boc .et-l video {

  text-align: inherit;

  margin: 0;

  padding: 0;

  border: none;

  outline: 0;

  vertical-align: baseline;

  background: 0 0;

  letter-spacing: normal;

  color: inherit;

  box-shadow: none;

  -webkit-box-shadow: none;

  -moz-box-shadow: none;

  text-shadow: inherit;

  border-radius: 0;

  -moz-border-radius: 0;

  -webkit-border-radius: 0;

  -moz-transition: none;

  -o-transition: none;

  -webkit-transition: none;

  transition: none;

  background-color: yellow;

}

<div id="et-boc">

  <div class="et-l">

    <p>Foobar</p>

  </div>

</div>

Firefox ignores CSS comma separated classes

This behaviour is correct and intentional. Your selector is:

.Control-field::-webkit-calendar-picker-indicator,
.Control-fakeSelect::after

As Firefox cannot (will not) parse the first one, since it's vendor specific, it considers the whole rule atomically invalid, as it doesn't know how to fully apply it. IE and Edge will do the same.

So your observation is wrong, it's not related to the :after or the comma, it's related to the -webkit prefix, and it's intentional and by specs correct behaviour. Split the rule in 2 and it will work fine.

Firebug kills -webkit Settings in CSS File - Why?

I don't think you can - the correct behaviour for browsers is to ignore style rules they don't understand. Firefox sees -webkit-xxx and effectively removes it from the style set, so it can't ever be applied to .box.

Safari's inspector will show the -webkit- rules but ignore the -moz- rules for the same reason.

Is there a way to set any style for a specific browser in CSS?

For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS

No, that isn't how it works.

Vendor prefixed properties are used for experimental features. Either because the specification for the property hasn't been locked down or because the browser implementor knows their are problems with the implementation.

In general, you shouldn't use them in production code because they are experimental.

Support for the vendor prefixed versions is removed as support stabilises.

Is there a way to set any style for a specific browser in CSS?

There are several methods that have been used for that effect.

Parser bugs

By exploiting bugs or unsupported features in specific CSS engines (e.g. some versions of IE will ignore a * character on the front of a property name while other browsers will (correctly) discard the entire rule).

Conditional comments

Older versions of Internet Explorer supported an extended HTML comment syntax that could be used to add <link> or <style> elements specifically for certain versions of IE.

Support for this has been dropped.

JavaScript

Classes can be added to elements (typically the body element) using JavaScript after doing browser detection in JS.

---

Related Topics