SlideShare a Scribd company logo
1 of 2
Controversial : CSS Vendor Prefix
The World Wide Web Consortium (W3C) was formed to synthesize and standardize web
technologies for various series of specifications that were widely supported by the web
development industry.
W3C is an independent standards body, which evaluate different proposals, create forums for
discussions between industries, Professionals, developers; negotiate and settle disagreements; and
find out final specifications that everyone can agree to follow.
The CSSWG extended CSS to provide greater control over more aspects of web page content. At the
same time, browser developers continued to innovate new technology.
This led to a problem: developers wanted their browsers to support these cool technologies today,
without having to wait for W3C recommendation, and final approval.
To allow CSS3 innovation by browser developers, the web development community agreed that
each browser would have its own unique prefix for proposed or experimental CSS properties.
Prefix Browser
-moz- Firefox
-o- Opera
-webkit- Safari/Chrome/Konqueror
-ms- Internet Explorer 9+
Every browser intended to support an experimental CSS property can do so by placing its own
vendor prefix in front of it. Note that these properties are nonstandard until they achieve final
approval by the W3C. Until that time, they are open to modification and interpretation both by
vendors and the W3C itself. Both the property name and the way its value is specified may change
rapidly, even in the same browser, as different approaches are considered and standards worked
out.
For example, up until the release of Safari 5.1/iOS 5.0, the Webkit development team proposed the
following as the way to do linear gradients in CSS:
body {
background-image: -o-linear-gradient(bottom, rgb(167,9,246) 11%,
rgb(194,242,242) 56%);
background-image: -moz-linear-gradient(bottom, rgb(167,9,246) 11%,
rgb(194,242,242) 56%);
background-image: -webkit-linear-gradient(bottom, rgb(167,9,246) 11%,
rgb(194,242,242) 56%);
background-image: -ms-linear-gradient(bottom, rgb(167,9,246) 11%, rgb(194,242,242) 56
%);
background-image: -webkit-gradient(linear, left bottom, left top,
color-stop(0.11, rgb(167,9,246)),
color-stop(0.56, rgb(194,242,242)) );
background-image: linear-gradient(to top, rgb(167,9,246) 11%, rgb(194,242,242)
56%);
}
These two approaches produced the same result in each browser; under contention was which was
the
better way to code. In the case of gradients, the W3C took a third way, more closely related to the
Firefox method:
Table 1-1. Unique Browser Prefixes
Safari/Chrome/Konqueror
Internet Explorer 9+

More Related Content

Similar to Controversial

CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlChristian Heilmann
 
A Complete Guide to Frontend - UI Developer
A Complete Guide to Frontend - UI DeveloperA Complete Guide to Frontend - UI Developer
A Complete Guide to Frontend - UI Developernariyaravi
 
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdf
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdfBest 5 CSS Frameworks You Should Know To Design Attractive Websites .pdf
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdfAppdeveloper10
 
Application Development with HTML5 (Microsoft TechDays 2011 - DEV302)
Application Development with HTML5 (Microsoft TechDays 2011 - DEV302)Application Development with HTML5 (Microsoft TechDays 2011 - DEV302)
Application Development with HTML5 (Microsoft TechDays 2011 - DEV302)Nathaniel Bagnell
 
G0373049057
G0373049057G0373049057
G0373049057theijes
 
Word press with react – implementing headless wordpress with reactjs converted
Word press with react – implementing headless wordpress with reactjs convertedWord press with react – implementing headless wordpress with reactjs converted
Word press with react – implementing headless wordpress with reactjs convertedDaljeetSingh210
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebGeorge Kanellopoulos
 
Vskills certified css designer Notes
Vskills certified css designer NotesVskills certified css designer Notes
Vskills certified css designer NotesVskills
 
20111129 modernizr
20111129 modernizr20111129 modernizr
20111129 modernizrbrooky-yen
 
Why Choose Vue.js For Web Development Projects.pptx
Why Choose Vue.js For Web Development Projects.pptxWhy Choose Vue.js For Web Development Projects.pptx
Why Choose Vue.js For Web Development Projects.pptxScala Code
 
Web 2 0 Fullfeatures
Web 2 0 FullfeaturesWeb 2 0 Fullfeatures
Web 2 0 Fullfeaturesvsnmurthy
 
Web 2 0 Fullfeatures
Web 2 0 FullfeaturesWeb 2 0 Fullfeatures
Web 2 0 Fullfeaturesguest9b7f4753
 
Web Development Course in Chandigarh Join Now
Web Development Course in Chandigarh Join NowWeb Development Course in Chandigarh Join Now
Web Development Course in Chandigarh Join Nowasmeerana605
 

Similar to Controversial (20)

Web design
Web designWeb design
Web design
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
 
A Complete Guide to Frontend - UI Developer
A Complete Guide to Frontend - UI DeveloperA Complete Guide to Frontend - UI Developer
A Complete Guide to Frontend - UI Developer
 
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdf
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdfBest 5 CSS Frameworks You Should Know To Design Attractive Websites .pdf
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdf
 
Application Development with HTML5 (Microsoft TechDays 2011 - DEV302)
Application Development with HTML5 (Microsoft TechDays 2011 - DEV302)Application Development with HTML5 (Microsoft TechDays 2011 - DEV302)
Application Development with HTML5 (Microsoft TechDays 2011 - DEV302)
 
G0373049057
G0373049057G0373049057
G0373049057
 
Web design
Web designWeb design
Web design
 
Web design
Web designWeb design
Web design
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
Word press with react – implementing headless wordpress with reactjs converted
Word press with react – implementing headless wordpress with reactjs convertedWord press with react – implementing headless wordpress with reactjs converted
Word press with react – implementing headless wordpress with reactjs converted
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
 
Vskills certified css designer Notes
Vskills certified css designer NotesVskills certified css designer Notes
Vskills certified css designer Notes
 
20111129 modernizr
20111129 modernizr20111129 modernizr
20111129 modernizr
 
Html5
Html5Html5
Html5
 
Tech Stack - Angular
Tech Stack - AngularTech Stack - Angular
Tech Stack - Angular
 
Why Choose Vue.js For Web Development Projects.pptx
Why Choose Vue.js For Web Development Projects.pptxWhy Choose Vue.js For Web Development Projects.pptx
Why Choose Vue.js For Web Development Projects.pptx
 
Web 2 0 Fullfeatures
Web 2 0 FullfeaturesWeb 2 0 Fullfeatures
Web 2 0 Fullfeatures
 
Web 2 0 Fullfeatures
Web 2 0 FullfeaturesWeb 2 0 Fullfeatures
Web 2 0 Fullfeatures
 
Web Development Course in Chandigarh Join Now
Web Development Course in Chandigarh Join NowWeb Development Course in Chandigarh Join Now
Web Development Course in Chandigarh Join Now
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 

Controversial

  • 1. Controversial : CSS Vendor Prefix The World Wide Web Consortium (W3C) was formed to synthesize and standardize web technologies for various series of specifications that were widely supported by the web development industry. W3C is an independent standards body, which evaluate different proposals, create forums for discussions between industries, Professionals, developers; negotiate and settle disagreements; and find out final specifications that everyone can agree to follow. The CSSWG extended CSS to provide greater control over more aspects of web page content. At the same time, browser developers continued to innovate new technology. This led to a problem: developers wanted their browsers to support these cool technologies today, without having to wait for W3C recommendation, and final approval. To allow CSS3 innovation by browser developers, the web development community agreed that each browser would have its own unique prefix for proposed or experimental CSS properties. Prefix Browser -moz- Firefox -o- Opera -webkit- Safari/Chrome/Konqueror -ms- Internet Explorer 9+ Every browser intended to support an experimental CSS property can do so by placing its own vendor prefix in front of it. Note that these properties are nonstandard until they achieve final approval by the W3C. Until that time, they are open to modification and interpretation both by vendors and the W3C itself. Both the property name and the way its value is specified may change rapidly, even in the same browser, as different approaches are considered and standards worked out. For example, up until the release of Safari 5.1/iOS 5.0, the Webkit development team proposed the following as the way to do linear gradients in CSS: body { background-image: -o-linear-gradient(bottom, rgb(167,9,246) 11%, rgb(194,242,242) 56%); background-image: -moz-linear-gradient(bottom, rgb(167,9,246) 11%, rgb(194,242,242) 56%); background-image: -webkit-linear-gradient(bottom, rgb(167,9,246) 11%, rgb(194,242,242) 56%); background-image: -ms-linear-gradient(bottom, rgb(167,9,246) 11%, rgb(194,242,242) 56 %); background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.11, rgb(167,9,246)), color-stop(0.56, rgb(194,242,242)) ); background-image: linear-gradient(to top, rgb(167,9,246) 11%, rgb(194,242,242) 56%); }
  • 2. These two approaches produced the same result in each browser; under contention was which was the better way to code. In the case of gradients, the W3C took a third way, more closely related to the Firefox method: Table 1-1. Unique Browser Prefixes Safari/Chrome/Konqueror Internet Explorer 9+