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
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

  • By
    39 Shirts – Leaving Mozilla

    In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...

Incredible Demos

  • By
    CSS Background Animations

    Background animations are an awesome touch when used correctly.  In the past, I used MooTools to animate a background position.  Luckily these days CSS animations are widely supported enough to rely on them to take over JavaScript-based animation tasks.  The following simple CSS snippet animates...

  • By
    Add Styles to Console Statements

    I was recently checking out Google Plus because they implement some awesome effects.  I opened the console and same the following message: WARNING! Using this console may allow attackers to impersonate you and steal your information using an attack called Self-XSS. Do not enter or paste code that you...

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!