rsboarder Jan 11 2012 at 20:28

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

2 min

65K

CSS*

+43

Comments 25

mikenerevarin Jan 11 2012 at 20:46

Я бы ещё в эту копилку добавил -webkit-overflow-scrolling: touch Позволяет сделать плавный скролл пальцем в блоке, жать работает только в iOS 5.0+

Night_Coder Jan 12 2012 at 04:24

Люблю эту фичу. Применял тут.

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

spmbt Jan 11 2012 at 20:57

Или как textarea: -webkit-appearance: textarea

Интересно, что выглядеть он может, но ничего туда не впишешь со страницы, и value=«abcd» не понимает. То же самое — с радиокнопками, не показывает состояние «checked» (проверялось в Linux).

Fedcomp Jan 11 2012 at 21:09

на win 7 x64 chrome 16 тоже самое.

k12th Jan 11 2012 at 21:49

Дык написано же — appearance. Вот если б было -webkit-behavior — вот тогда бы и value работало, и вписать было бы можно.

UFO just landed and posted this here

rsboarder Jan 11 2012 at 21:11

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

К тому же, речь здесь идет о многих свойствах, которые нужны в iOs, т.е. это узконаправленные правила.

trg Jan 12 2012 at 00:20

Всё что нужно в iOS нужно и на других мобильных ОС.

Grundiss Jan 12 2012 at 22:40

Ага. Все это напоминает моду на разукрашивание сколлбара в 90-х

Nico_izo Jan 11 2012 at 22:40

Неинтересно. Можно было бы написать про все уникальные вендорные свойства и селекторы, присущие только Webkit, Mozilla, Opera и IE (Например, -moz-calc или :-moz-placeholder).
Список Mozilla-специфичных свойств можно увидеть здесь.

Serator Jan 12 2012 at 00:18

А список *-специфичных свойств можно увидеть здесь: peter.sh/experiments/vendor-prefixed-css-property-overview/

mephisto Jan 12 2012 at 00:24

Спасибо за статью :)

-webkit-touch-callout это как раз то, что нужно в текущем проекте))
для андроидофонов.

mephisto Jan 12 2012 at 00:29

Правда, эффекта не возымело :(

maxvipon Jan 12 2012 at 09:49

На каком андроиде смотрели? Может просто нет поддержки в старых версиях движка.

mephisto Jan 12 2012 at 10:49

2.3

maxvipon Jan 12 2012 at 11:39

Я на 2.2 посмотрел и iOS4.2 и 5, заработало только на iOS5.

Markel Jan 12 2012 at 22:54

Вы ошибаетесь, поддержка webkit-touch-callout в iOS заявлена начания со второй версии

Я же проверял до версии 3.2, все работает исправно.
На адройдах это свойство не может работать в принципе, это расширение функционала вебкита для Safari и только для iOS.

mikenerevarin Jan 12 2012 at 14:44

А что именно нужно сделать?

mephisto Jan 12 2012 at 14:54

На самом деле исключительно косметический момент.
Есть картинки-стрелки, при маусовере должен скроллиться див.
На андроиде при таче по стрелкам начинается скролл, что в принципе ок, но хотелось бы, чтобы при таче и удержании не вылезало меню, а тоже просто был скролл.

mikenerevarin Jan 12 2012 at 15:44

Попробуйте сделать в событиях event.preventDefault();, прописать -webkit-user-select:none; и ссылке oncontextmenu=function(e){e.preventDefault();}

mephisto Jan 12 2012 at 15:50

Спасибо, попробую :)

maxvipon Jan 12 2012 at 11:42

rsboarder, внесите, пожалуйста дополнение в статью про свойство -webkit-touch-callout:
Работает на iOS5+, не работает на Android 2.3 и ниже.

Markel Jan 12 2012 at 23:02

habrahabr.ru/blogs/css/136037/#comment_4527216

@rsboarder прежде чем публиковать обновление статьи на основе комментариев, советую вам сначала проверять сказанное в них.

rsboarder Jan 13 2012 at 10:47

Спасибо, учту на будущее.

Rooc Jan 14 2012 at 03:27

-webkit-background-clip: text;

Show the best of all time