5

On this blog post I found the following CSS snippet:

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Although I took some basic CSS courses, I never saw hyphens as in -webkit-... in CSS before. In this case they seem to refer to the layout engines of the main browsers but what do they mean in general?

When Googling this, all results target text hyphenation in the browser :-/

2

6 Answers 6

9

They are vendor specific CSS properties.

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover; /* WEBKIT - Chrome, Safari */
  -moz-background-size: cover; /* MOZILLA - Firefox */
  -o-background-size: cover; /* OPERA */
  background-size: cover;
}

Hypens are used to introduce vendor specific CSS properties, which are used by the browsers but not yet recognized as standard for CSS.

Prefixes often used in CSS are:

Android: -webkit-
Chrome: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
iOS: -webkit-
Opera: -o-
Safari: -webkit-
4
  • @Ragnaokkr: thx! But then they are completely redundant in this example, right? Do they normally override non vendor specific properties (such as the final background-size: cover;)?
    – RubenGeert
    Jan 17, 2013 at 16:23
  • 2
    @pythonforspss.org Yes, they are redundant, but you have to look at them with a different eye. When a browser read the CSS and find a property it doesn't recognize, simply ignore it, but will use the one it supports. For example, if I use your example and load the CSS in Firefox, the prefixed -webkit-, and -o- won't be recognized, but -moz yes and will be used. If I specify these prefixed version, browsers that not support the standard version can fallback to its own custom version.
    – Ragnarokkr
    Jan 17, 2013 at 16:27
  • It's kinda strange that the least complying browser, IE is the only one missing in this example!
    – RubenGeert
    Jan 17, 2013 at 16:28
  • Not all the properties supported by the other browsers are supported by IE (it uses filters instead), then it's not so hard to find missing properties for IE and not for the others.
    – Ragnarokkr
    Jan 17, 2013 at 16:29
7

The answer can be found in the CSS specifications:

Keywords and property names beginning with -' or '_' are reserved for vendor-specific extensions. Such vendor-specific extensions should have one of the following formats:

'-' + vendor identifier + '-' + meaningful name
'_' + vendor identifier + '-' + meaningful name

and:

An initial dash or underscore is guaranteed never to be used in a property or keyword by any current or future level of CSS. Thus typical CSS implementations may not recognize such properties and may ignore them according to the rules for handling parsing errors. However, because the initial dash or underscore is part of the grammar, CSS 2.1 implementers should always be able to use a CSS-conforming parser, whether or not they support any vendor-specific extensions.

To sum up, a property name with an initial dash is not considered valid, so they can be used by vendor-specific CSS rules.

4

The hyphen is used in place of a space to break up joining words. Other languages use CamelCase/snake case/et al.. for this.

Note: This is not specific or limited to browser prefixes...

Edit: OP clarified - He want't to know what the leading hyphen indicated... See Mathieu's answer it pretty much covers it.

6
  • I see that goes for something like border-width. But what about -webkit- or -o-? What about those hyphens?
    – RubenGeert
    Jan 17, 2013 at 16:19
  • The question asked about hyphens in general not leading hyphens (explicitly). Those are syntax sugars if you ask me. but I'm sure someone will have a better answer to why browser prefixes lead with a hyphen
    – rlemon
    Jan 17, 2013 at 16:20
  • 1
    Hypens are for true coders because there’s no shift key involved. And everyone knows that true coders are the laziest people alive. Hyphens cut work by 50%! Jan 17, 2013 at 16:21
  • wow-they-really-really-do!-thanks-null-pointer!
    – rlemon
    Jan 17, 2013 at 16:22
  • @rlemon: good catch btw, I'll edit the question title.
    – RubenGeert
    Jan 17, 2013 at 16:25
0

The dash means it is specific to a particular browser and considered an non-standard extension.

0

The - prefix means its not part of the official CSS specification, but is a vendor specific tag. It's usually there to let people start to play with features that are eventually be in the CSS spec, but isn't ready yet. You should avoid relying on them for anything important.

So -moz- for example means it's specific to Gecko based browser (like Mozilla Firefox)

0

Those are what are called "vendor prefixes". The hyphen leading to a browser name simply targets those browsers. This is used for experimental CSS properties.

Not the answer you're looking for? Browse other questions tagged or ask your own question.