Pull to refresh

Comments 51

Кстати в webkit есть свойство box-reflect для создания эффекта отражения. Пример использования:

-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));

Довольно удобно использовать при написании расширений под Chrome.
Я вчера собирался-собирался перевести, но так и не собрался. Как чувствовал, что не только мне понравится :)
Ох как же меня радует, когда не нужно использовать сторонние библиотеки (jquery corner). А все просто и легко.
Спасибо больше, замечательная статья.
PS: В IE как всегда есть проблемы: плавная трансформация не работает, объект мгновенно принимает другую форму при наведении мышки, но и это уже прогресс.
>> Чтобы все свойства работали корректно и во всех браузерах, необходимо использовать изображение в качества фона.

Еще можно для img прописать display:block — тогда скругления и тень тоже работают.
За исключением Оперы, к сожалению (проверял в 11.51).
Firefox не хочет делать углы скругленными...

Видимо на момент написания статьи это и было справедливо, но в Firefox 6.0.2 всё отображается правильно.
Вы не путаете пример, где всё исправлено, с собственно неисправленной версией?
Ну там ведь собственно написанно где не исравленная версия. Вот что у меня показывает FF:
image
А в хроме почему-то анимации «дрожат». Забавно кстати сравнивать
Эти примеры работают во всех браузерах (Chrome, Firefox и Safari), с поддержкой свойств border-radius, box-shadow и псевдоэлементами :before и :after. В остальных браузерах мы просто увидим картинки, без каких либо эффектов.


А как же Opera? В ней всё тоже работает.
Там, где живёт и работает автор, Opera — это мобильный браузер ).
Кстати, что не так с этими свойствами в мобильной Опере?
К сожалению, пока есть ИЕ7-8, все эти замечательные красоты остаются лишь демонстрацией возможностей css3.
Вот как раз эти красоты можно использовать для оформления всяких мелочей. Люди с нормальными браузерами их увидят, рабы IE — увидят просто картинки, но смысл не потеряется.
Согласен, но только если речь идёт о своём хоумпейдже для кота. Для реальных проектов не годится. И что есть мелочь?..
Мелочь — это, например, картинка в тексте какой-нибудь внутренней страницы. Она нормально выглядит и со скругленными краями, и без, но сегодня скругленные края это модно в определенных кругах. Верстать уголки вручную в этом случае бред, подтягивать какие-нибудь скрипты для старых ослов, которые этого осла ещё и тормознут — а зачем? Мягкая регрессия в старых версиях — это наилучший вариант обратной совместимости.
*Для реальных проектов не всегда годится.
они есть пока есть такие как ты — кто их поддерживает.
Так и представляю, приходит верстальщик с менеджером к клиенту, и говорит: «Такие-то браузеры мы поддерживать не будем, потому что они старые». Извините, господа, это смешно. Заговнокодить по-быстрому на фрилансе 10 страниц — это одно, а когда вы работаете над проектом, которым пользуется миллион человек и столько же он приносит прибыли — все эти техники стоят по рублю за пучок. И если в таком случае разработчик говорит, что он этого делать не будет — он не профессионал, и гнать его нужно в шею. Если ты специалист — будь добр, сделай то, что от тебя требуют в наилучшем виде, чтобы качественно решить поставленную задачу.
Я работаю в проекте которым пользуется с десяток миллионов пользователей:

ie6 — no
ie7-8 — уголки не скруглены, градиентов нет.
Это значит лишь, что ваша работа не подразумевает идентичного отображения во всех популярных браузерах, видимо, потому что ваш клиент не требует этого. Но клиенты бывают разные, и, скажем, приходит к вам мобильный оператор, и слушать он не будет ничего о gracefull degradation. На что имеет полное право. И как профессионал, вы обязаны удовлетворить его требования.
Я сам с удовольствием использую техники и методы, которые возможны с помощью CSS3, когда задача позволяет такое решение.
Что касается конкретно всех этих вкусностей, было бы неплохо просто описать, какие есть варианты решения задачи для ие7-8, тогда метод можно считать целостным.
Полностью поддерживаю. Часто клиента вобще не волнует браузер, он и сам не проверяет ничего, главное чтоб QAи сказали что проблем нет.
Может бразуер и не волнует, но затраты на разработку волнуют очень даже.
Тут основной нюанс в том, что разница во времени реализации тех или иных фич для IE6 и для всех остальных нередко может быть в десятки раз. Если у заказчика бюджет не резиновый — он чаще всего от IE6 в итоге отказывается.
К сожалению IE 7 тоже достаточно уебищен. Но от него сейчас редко отказываются
Не вижу ничего смешного. У каждого есть выбор. У верстальщика поддерживать корявый IE или нет. А у заказчика выбор верстальщиков которые поддерживают IE или нет, а так-же выбор нужны ли ему такие консервативные и недалекие пользователи юзающие древние браузеры.
И если разработчик говорит что он этого поддерживать не будет это не значит что он не профессионал, это значит то что он этого поддерживать не будет и все. Он не обязан поддерживать IE(если он конечно на это не подписался).
Если ты специалист — будь добр, сделай то, что от тебя требуют в наилучшем виде, чтобы качественно решить поставленную задачу.
Я им не слуга и не робот и могу выбирать за что мне браться а за что не браться. Если фигурирует поддержка IE то я принципиально не берусь пусть костыли пишут те кто это любит или кто ради денег сделает что угодно. К счастью, в последнее время для «поддержки IE» порой достаточно уведомить юзера что у него браузер устарел и показать ссылки для скачивания нового — и заказчикам этого достаточно.
То-же самое но короче — у всех есть выбор как у заказчиков так и у верстальщиков: кататься на велосипедах с костылями под мышками, либо не оглядываться назад и идти вперед и осваивать\продвигать новые технологии.
Идея про обновление браузера конечно супер, но я уверен, что большая часть потенциальных клиентов отсеится на этом этапе, а как следствие и прибыль.
Поддержание устаревших браузеров стоит дороже, как в разработке, так и в сопровождении. А теперь еще раз поговорим про прибыль. Стоит ли овчина выделенки?
Все зависит от предполагаемой аудитории. Конечно, если у вас ресурс типа Хабра, то вероятность встретить тут пользователя IE6/7 близка к нулю. А если вы делаете Одноклассники, то мне вас жаль, но большинство клиентов будет приходить именно с IE
Ну и сколько вы предлагаете поддерживать IE6? Это же порочный круг. Пока его будут поддерживать, его нужно будет поддерживать. Не похоже ли это на дармовой хлеб верстальщиков? Т.е. пока проблема существует, суперпрофессионалы имеющие опыт в общении с IE6 будут нужны. Вот они и цепляются…
И ничего страшного в том, чтобы с прискорбием сообщить посетителю на IE6, что пора обновляться. Если посетителю интересен сайт, он обновится, а если нет, то и смысла его удерживать нет.
Даже ВКонтакте с его куда большей аудиторией более не поддерживает IE6/IE7. Какие уж тут Одноклассники…
Аудитория Вконтакте в основном прогрессивная школота, а у Одноклассников люди, для которых интернет — это синяя буквочка «е»
Разве подавляющее большинство владельцев аккаунта на Одноклассниках не имеет аккаунта ВКонтакте?
А вобще я ведь не спорю. Я бы вобще запретил все браузеры которые не умеют обновляться самостоятельно в фоне и на стандарты не обращают внимания. Порой под оперу верстать куда сложнее чем под ие
Загонять изображение в background-image — та ещё идейка. С одной стороны это предохраняет изображения от воровства тупыми секретаршами, которым тупой босс дал команду «воруй». Но с другой — ваши картинки, например, не попадут в поиск по картинкам, так же их по-дефолту не будет видно при печати страницы. Кроме того, background изображения сложно ресайзить.
Картинки в индекс попадут. Они есть в коде демо-примера, нужно только добавить alt.
UFO landed and left these words here
Все это конечно няшно, но в массы это войдет как минимум верез год-два, проще сейчас сделать через imagemagic. Это при условии что вы заботитесь о своих посетителях, некоторые из которых еще сидят на ие 6.
И что, отсутствие круглых няшных уголков у картинок не позволит этим посетителям почитать ваши статьи/купить у вас товар/...?
Актуальная тема. Сегодня как раз использовал именно это решение для закругления.
Попросили добавить этот коммент:

===
$(function (){
var avaTar = $(«img»);
$(window).load(function() {
avaTar.wrap(function(){
return '<span class=«img_rounted» style=«position:relative; display:inline-block; background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;» />';
});
avaTar.css(«opacity»,«0»);
});
});

Cмысл в том, что опера почему то не всегда исполняет приведённый там скрипт, погуглил немного — это её баг, особо не разбирался. но решение именно в $(window).load(function()
может конечно можно ещё оптимизировать это дело, но мне было лень — не настолько я силён в js.
===
Only those users with full accounts are able to leave comments. Log in, please.