CODEWITHSUNDEEP
htmlcss
anand
anand

Reputation: 1751

Difference between -webkit , -khtml ,-moz ,-o property in css?

what is the difference between -webkit-box-shadow , -khtml-box-shadow , -moz-box-shadow , -o-box-shadow in CSS?

My CSS is like this:

button:hover {
    -webkit-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px;
    -khtml-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px;
    -moz-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px;
    -o-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px;

Upvotes: 1

Views: 1792

Answers (7)

Rafid Al Mahmud Personal
Rafid Al Mahmud Personal

Reputation: 47

Vendor Prefix

Browser vendors sometimes add prefixes to experimental or nonstandard CSS properties and JavaScript APIs, so developers can experiment with new ideas while—in theory—preventing their experiments from being relied upon and then breaking web developers' code during the standardization process. Developers should wait to include the unprefixed property until browser behavior is standardized.

Note: Browser vendors are working to stop using vendor prefixes for experimental features. Web developers have been using them on production Web sites, despite their experimental nature. This has made it more difficult for browser vendors to ensure compatibility and to work on new features; it's also been harmful to smaller browsers who wind up forced to add other browsers' prefixes in order to load popular web sites.

Lately, the trend is to add experimental features behind user-controlled flags or preferences, and to create smaller specifications which can reach a stable state much more quickly.

CSS prefixes

The major browsers use the following prefixes:

  • -webkit- (Chrome, Safari, newer versions of Opera, almost all iOS browsers including Firefox for iOS; basically, any WebKit based browser)
  • -moz- (Firefox)
  • -o- (old pre-WebKit versions of Opera)
  • -ms- (Internet Explorer and Microsoft Edge)

Sample usage:

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;

API prefixes

Historically, vendors have also used prefixes for experimental APIs. If an entire interface is experimental, then the interface's name is prefixed (but not the properties or methods within). If an experimental property or method is added to a standardized interface, then the individual method or property is prefixed.

Interface prefixes

Prefixes for interface names are upper-cased:

  • WebKit (Chrome, Safari, newer versions of Opera, almost all iOS browsers (including Firefox for iOS); basically, any WebKit based browser)
  • Moz (Firefox)
  • O (Older, pre-WebKit, versions of Opera)
  • MS (Internet Explorer and Microsoft Edge)

Property and method prefixes

The prefixes for properties and methods are lower-case:

  • webkit (Chrome, Safari, newer versions of Opera, almost all iOS browsers (including Firefox for iOS); basically, any WebKit based browser)
  • moz (Firefox)
  • o (Old, pre-WebKit, versions of Opera)
  • ms (Internet Explorer and Microsoft Edge)

Sample usage:

var requestAnimationFrame = window.requestAnimationFrame ||
                            window.mozRequestAnimationFrame ||
                            window.webkitRequestAnimationFrame ||
                            window.oRequestAnimationFrame ||
                            window.msRequestAnimationFrame;

The documentation took from this RESOURCE: https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix

Upvotes: 0

Rafid Al Mahmud Personal
Rafid Al Mahmud Personal

Reputation: 47

Default: (none) Android: -webkit- Chrome: -webkit- Firefox: -moz- || -webkit- Internet Explorer: -ms- || -webkit- iOS: -webkit- Opera: -webkit- || -o- Safari: -webkit- Konqueror: -khtml-

Upvotes: -1

Ishan Jain
Ishan Jain

Reputation: 8161

There is no difference. These are CSS vendor prefixes or CSS browser prefixe

It's a way for browser makers to add support for new CSS features in a sort of testing and experimentation period. Browser prefixes are used to add new features that may not be part of a formal specification and to implement features in a specification that hasn’t been finalized.

Android: -webkit-
Chrome: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
iOS: -webkit-
Opera: -o-
Safari: -webkit-

Reference

Upvotes: 2

bjb568
bjb568

Reputation: 11488

There is no difference. These are vendor prefixes, used for support.

When the CSS spec isn't finalized, vendors (browser makers) add prefixes to the CSS rules. It's supposed to prevent problems with the spec changing and incompatibility issues. (not that it actually does, it's just an annoyance)

Caniuse (a great resource) has compatibility tables on CSS features. For box-shadow, old Safari and Chrome use -webkit-, while old FF uses -moz-. The -o- and -khtml- prefixes don't seem to be necessary.

BTW, even if there is no browser support (there is in your case), you should add the standards-compliant rule:

button:hover {
    -webkit-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px;
    -moz-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px;
    box-shadow: rgba(0,0,0,0.5) 0px 2px 5px;
}

Upvotes: 1

Yooz
Yooz

Reputation: 2518

-webkit -khtml -moz -o- are vendor prefix for :

  • webkit(safari,browser)
  • moz(firefox)
  • o(opera)
  • khtml(konqueror)

Mainly used for CSS3 features, they sometimes allow to use or change the browser behaviour with "modern" properties.

http://css-tricks.com/how-to-deal-with-vendor-prefixes/

Upvotes: 0

Petroff
Petroff

Reputation: 828

That are prefix for older versions of browsers. o for opera, moz for mozilla, etc. You can read more here.

Upvotes: 0

Henrik Andersson
Henrik Andersson

Reputation: 47172

There are no immediate differences, it's a vendor prefix in order to tell the different browsers how to interpret, in this case, the property box-shadow. This is done since the different browsers could possibly implement it differently.

The vendor prefixes also allows you to use experimental features or not finalised features.

Upvotes: 3

Related Questions