CODEWITHSUNDEEP
css
Isius
Isius

Reputation: 6974

What is the "+" in "+filter"?

This tutorial shows a css blur example with

img {
    +filter: blur(30px);
}

then goes on to mention "Note: + stands for vendor prefix". Why is a plus sign used here instead of a vendor prefix such as "-webkit-"?

Upvotes: 2

Views: 143

Answers (1)

Niels Keurentjes
Niels Keurentjes

Reputation: 41968

It's shorthand copied from this authoritative tutorial site. On HTML5Rocks however they didn't neglect putting the correct hover on there, stating "Please apply relevant vendor prefix".

As such, +filter should indeed correctly be written as:

filter:blur(30px);
-o-filter:blur(30px); /* rather obsolete since Opera switched to Webkit */
-ms-filter:blur(30px);
-moz-filter:blur(30px);
-webkit-filter:blur(30px);

The origin is the Compass extension to SASS which allows this syntax as a real shorthand for vendor specific rules.

As you can see on this site however only Webkit currently supports filters. As such you can also ignore the -o- prefix for features that won't be added to Presto anymore anyway.

Upvotes: 6

Related Questions