A few weeks back I touched on a handful of Mozilla-specific CSS properties that I found to be interesting. This week I’d like to share a few WebKit-specific CSS properties that make me all tingly inside.-webkit-touch-calloutThe -webkit-touch-callout property allows you to dictate what does or doesn’t happen when a user taps and holds on a link on iOS. The default value is default and tap-holding on a link brings up the link bubble dialog; by using the value of none, that bubble never comes up.
a.js-only {
-webkit-touch-callout: none;
}
This would be very useful on apps that use A elements which aren’t traditional links, but simply trigger AJAX / JavaScript functions.-webkit-user-dragThe -webkit-user-drag property specifies that an entire element should be draggable instead of its contents:
/* no dragging at all */
.content p.noDrag {
-webkit-user-drag: none;
}
/* drags entire element, not the text/selection */
.sidebar div.elDrag {
-webkit-user-drag: element;
}
-webkit-appearanceUsing the -webkit-appearance property, you can make a SPAN tag look like a radio button, or textarea, or SELECT dropdown, or any of the other 50 supported properties.
span.lookLikeRadio {
-webkit-appearance: radio;
}
span.lookLikeTextarea {
-webkit-appearance: textarea;
}
span.lookLikeScrollbar {
-webkit-appearance: scrollbartrack-horizontal;
}
Wanna see this one in action? Check out my post: WebKit-Specific Style: -webkit-appearance.-webkit-text-securityWho knew you could customize the character which hides password characters?
input[type="password"] {
-webkit-text-security: square;
}
Not necessarily useful but interesting that WebKit gives us this ability.-webkit-user-selectThe -webkit-user-select property allows us to prevent users from selecting text within a given element:
div {
-webkit-user-select: none;
}
Preventing selection within a node can be helpful when on nodes which you prefer only be clicked.I disliked browser-specific functionality when I was younger because I had the wrong mentality; you use them as enhancers, not for core functionality. Have a favorite WebKit-specific CSS property? Share it!Interesting -webkit CSS Properties is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.
