Интересные -webkit CSS свойства

Если вы знаете о том, что WebKit умеет изменять вид тэга SPAN на кнопку, или на поле ввода, или если вы знаете каким свойством можно диктовать поведение элемента в момент тапа по нему, то вам не сюда.

И так, есть несколько очень интересных свойств, которые присущи движкам WebKit. Например, есть свойство

-webkit-touch-callout

Это свойство позволяет вам диктовать поведение браузера в момент тапа и удержания пальца на ссылке. По умолчанию в браузерах всплывает окно, содержащее информацию о ссылке. По умолчанию у этого свойства выставлено значение default, но установив значение none окошко с информацией всплывать не будет.

a.js-only {
  -webkit-touch-callout: none;
}

Это свойство полезно применять в тех случаях когда на ссылку повешен какой-либо JavaScript/AJAX.

-webkit-user-drag

Свойство указывает на то, что во время перетаскивания блока двигаться должен именно блок, а не содержимое внутри него.

/* ничего не перетаскивает */
.content p.noDrag {
  -webkit-user-drag: none;
}

/* перетаскивается весь элемент а не контент внутри */
.sidebar div.elDrag {
  -webkit-user-drag: element;
}

-webkit-appearance

Задавая это свойство элементу вы можете определять то, как будет выглядеть элемент SPAN. Например, как radio button:

span.lookLikeRadio {
  -webkit-appearance: radio;
}

Или как textarea:

span.lookLikeTextarea {
  -webkit-appearance: textarea;
}

Всего таких значений около 50. Весь список можно посмотреть тут.

-webkit-text-security

Оказывается, маску при вводе пароля можно изменять. Например, вместо кружков можно отображать квадраты.

input[type="password"] {
  -webkit-text-security: square;
}

-webkit-user-select

Определяет что пользователь может выбирать внутри элемента.

div {
  -webkit-user-select: none;
}

На этом все. Это был вольный перевод данной статьи.

UPD. Уточнение по свойству -webkit-touch-callout.