Interesting -webkit CSS Properties

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-callout

The -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-drag

The -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-appearance

Using 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-security

Who 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-select

The -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!