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!

Recent Features

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

  • By
    I’m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

Incredible Demos

  • By
    Using jQuery and MooTools Together

    There's yet another reason to master more than one JavaScript library: you can use some of them together! Since MooTools is prototype-based and jQuery is not, jQuery and MooTools may be used together on the same page. The XHTML and JavaScript jQuery is namespaced so the...

  • By
    “Top” Watermark Using MooTools

    Whenever you have a long page worth of content, you generally want to add a "top" anchor link at the bottom of the page so that your user doesn't have to scroll forever to get to the top. The only problem with this method is...

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!