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
    How to Create a RetroPie on Raspberry Pi – Graphical Guide

    Today we get to play amazing games on our super powered game consoles, PCs, VR headsets, and even mobile devices.  While I enjoy playing new games these days, I do long for the retro gaming systems I had when I was a kid: the original Nintendo...

  • By
    CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

Incredible Demos

  • By
    Google Extension Effect with CSS or jQuery or MooTools JavaScript

    Both of the two great browser vendors, Google and Mozilla, have Extensions pages that utilize simple but classy animation effects to enhance the page. One of the extensions used by Google is a basic margin-top animation to switch between two panes: a graphic pane...

  • 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...

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!