Why There Is -Moz-Xxx and -Webkit-Xxx in The CSS3

Why put the non prefixed css3 property last?

With the W3C propriety as last, new versions of browsers use this version instead of the vendor version. In this way your CSS is read as a normal CSS without vendor prefixes.

In this way new browsers will use the W3C version, updated to the latest specs, if supported by browser.

Is CSS3 part of HTML5?

HTML5 and CSS3 are completely separate things, so browser support for one does not always mean the other, especially considering that HTML5 is still a working draft (CSS3 is currently a recommendation).

That being said, with todays modern browsers, most will support the common HTML5 and CSS3 features. Internet Explorer 9 still requires a little help in regards to HTML5, you can use what is known as a HTML Shiv (or shim) to 'polyfill' support. Here is a guide to what IE9 supports: http://www.impressivewebs.com/html5-support-ie9/

Why do browsers create vendor prefixes for CSS properties?

It's because the features were implemented by vendors before the specification reached its final release stage.

The vendor prefixes ensure that there are no clashes with changing functionality etc.

Originally, the point of vendor prefixes was to allow browser makers
to start supporting experimental CSS declarations.

Let’s say a W3C working group is discussing a grid declaration (which,
incidentally, wouldn’t be such a bad idea). Let’s furthermore say that
some people create a draft specification, but others disagree with
some of the details. As we know, this process may take ages.

Let’s furthermore say that Microsoft as an experiment decides to
implement the proposed grid. At this point in time, Microsoft cannot
be certain that the specification will not change. Therefore, instead
of adding grid to its CSS, it adds -ms-grid.

The vendor prefix kind of says “this is the Microsoft interpretation
of an ongoing proposal.” Thus, if the final definition of grid is
different, Microsoft can add a new CSS property grid without breaking
pages that depend on -ms-grid

Source.

Is there any good fallbacks for HTML5 and CSS3?

When talking about HTML5 or CSS3, you should head over to:

When can I use...

As can be seen, we are still far far away from using that.

Also, since old versions of the browsers won't support HTML5 or CSS3, however, you can do what is known as:

Progressive Enhancement and Graceful Degradation

Here are some resources also:

• Gallery of HTML5 Sites (You can learn and get the idea from them)
• Create modern Web sites using HTML5 and CSS3

Is there a CSS not equals selector?

In CSS3, you can use the :not() filter, but not all browsers fully support CSS3 yet, so be sure you know what you're doing which is now
supported by all major browsers (and has been for quite some time; this is an old answer...).

Example:

<input type="text" value="will be matched" />
<input type="text" value="will not be matched" class="avoidme" />
<input type="text" value="will be matched" />

and the CSS

input:not(.avoidme) { background-color: green; }

---

Note: this workaround shouldn't be necessary any more; I'm leaving it here for context.

If you don't want to use CSS3, you can set the style on all elements, and then reset it with a class.

input { background-color: green; }
input.avoidme { background-color: white; }

Is there user-select for Opera 10.62 and IE9?

Did you try using ::selection {color:currentColor;background:transparent}?

For Firefox you can use ::-moz-selection.

https://developer.mozilla.org/En/CSS/::selection

http://msdn.microsoft.com/en-us/library/ff974109(v=VS.85).aspx

http://reference.sitepoint.com/css/pseudoelement-selection

---

// update //

There's also the unselectable property.

Is it possible to target CSS3 columns individually with selectors?

Unfortunately you cannot change the color of the columns:

It is not possible to set properties/values on column boxes. For example, the background of a certain column box cannot be set and a column box has no concept of padding, margin or borders.

From w3.org: 2. The multi-column model

What is WebKit and how is it related to CSS?

Update: So apparently, WebKit is a HTML/CSS web browser rendering engine for Safari/Chrome. Are there such engines for IE/Opera/Firefox and what are the differences, pros and cons of using one over the other? Can I use WebKit features in Firefox for example?

Every browser is backed by a rendering engine to draw the HTML/CSS web page.

• IE → Trident (discontinued)
• Edge → EdgeHTML (clean-up fork of Trident) (Edge switched to Blink in 2019)
• Firefox → Gecko
• Opera → Presto (no longer uses Presto since Feb 2013, consider Opera = Chrome, therefore Blink nowadays)
• Safari → WebKit
• Chrome → Blink (a fork of Webkit).

See Comparison of web browser engines for a list of comparisons in different areas.

The ultimate question... is WebKit supported by IE?

Not natively.

---

Related Topics