New Webkit CSS Properties
There are several vendor specific prefixes and features depending on your browser. Webkit properties allows you to enhance the look of your web pages where possible. These properties change according to the browser where it is same in case of Safari and Google Chrome, because both are -webkit based web browser. However, to get it working in other browsers like Mozilla Firefox you have to use -moz property. There are several new addition to the existing list of proprietary of WebKit property. Let’s have a quick look on some new properties.
-webkit-user-drag
-webkit-user-drag property specifies whether an entire element should be draggable instead of its contents.
Syntax:
-webkit-user-drag: auto | element | none; The default value of this syntax is set to auto, setting it to element will drag entire element instead of dragging its contents only and if you set it to none, any element cannot be dragged.
-webkit-appearance
This property allows you to change the appearance of any simple element like span to look alike button, checkout, list-item etc. There are approximately 50 appearance options available for this property. You may use it based on the following syntax:
Syntax:
-webkit-appearance: <appearance>; -webkit-touch-callout
Using this property lets you disable a callout on -webkit enabled browsers.
Syntax:
-webkit-touch-callout: default | none | inherit; For examples, on iPhone when you hold your finger on a link a popup comes with information of the link, you may disable that pop up using this property.
-webkit-user-select
The -webkit-user-select property prevents users from selecting any text within the specified element.
Syntax:
-webkit-user-select: auto | none | text; It accepts three properties auto in which a user can select contents in the element, none which prevents user from selecting any element and text which lets user select text only.
Make sure that these properties will work only in webkit enabled browsers like Google Chrome and Safari. Properties above are very few from -webkit property family, there are still much more which gives you the freedom to enhance your web pages. Keep in mind that, these properties has nothing to do CSS2.1 or CSS3, these are browser specified prefixes which works different in different browsers. If you just came to know about any new -webkit property, share it!
