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
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

Incredible Demos

  • By
    Create Twitter-Style Dropdowns Using MooTools

    Twitter does some great stuff with JavaScript. What I really appreciate about what they do is that there aren't any epic JS functionalities -- they're all simple touches. One of those simple touches is the "Login" dropdown on their homepage. I've taken...

  • By
    Simple Image Lazy Load and Fade

    One of the quickest and easiest website performance optimizations is decreasing image loading.  That means a variety of things, including minifying images with tools like ImageOptim and TinyPNG, using data URIs and sprites, and lazy loading images.  It's a bit jarring when you're lazy loading images and they just...

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.

  12. is there any one to make a div class responsive?

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