Interesting -webkit CSS Properties

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.

copya.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:

copy/* 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.

copyspan.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?

copyinput[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:

copydiv {
  -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!