Interesting -webkit CSS Properties

By  on  
WebKit CSS

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!

Cloudinary

Recent Features

Incredible Demos

Discussion

  1. THanks! Never heard about the webkit-touch-callout property!

  2. Binyamin

    Use user-select: none; beside of -webkit-user-select: none;.

  3. Krystian

    Thanks! -webkit-user-drag is great.

  4. CODEFREAK

    This one is cool: -webkit-tap-highlight-color: transparent; it removes the highlighting of the links in Mobile Safari.

  5. If you apply -webkit-user-select: none; to an input element. It stops working.
    Has anyone tried this?

  6. rtpHarry

    There are moz and ms versions of the user-select as well (http://css-tricks.com/almanac/properties/u/user-select/)

  7. Ocean

    can anyone tell me how do you check an email sent with a link ,for infectious elements without clicking link ? ultimately learning the hard way,infected…?spyware, Trojan all this stuff I cannot fathom! I don’t understand the computer language ,but do believe I am correct when I say “links sent within your emails may be harmful to your computer,which now days is your life in the hands of millions upon millions ! Am I wrong , Is it okay to push the link and scan page after? or is that not possible either. What do I do to assure the safety of my computer outside of virus protection called Microsoft security essentials, which seems to not keep my computer good. It always runs slow and I pay for supposedly perfect for in home high speed needs. So how do i prove otherwise?

  8. hey, you forgot ::webkit-scrollbar

  9. Thanks for very interesting article!
    But I did not work the following properties:

    -webkit-text-security: square
    

    * The characters still round

     -webkit-appearance: scrollbartrack-horizontal
    

    * Element I never saw

  10. John Motyl Jr

    @Oleg

    I got the same for the text-security but i didn’t really try to research much after that. As far as the scrollbar is concerned check out this demo {{ http://codepen.io/johnmotyljr/pen/GLmKo }}. The original information can be found in the description or below.

    http://css-tricks.com/custom-scrollbars-in-webkit/

  11. Great article! Maybe you could add -webkit-overflow-scrolling? It allows to have momentum scrolling within elements.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!