Different reality

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

Я занимаюсь клиентской разработкой уже 8 лет и за это время браузеры совершили гигантский скачок вперед. Во-первых их стало очень много. В зоопарке разработчика на данный момент 10(!) основных браузеров — IE6/7/8/9, Fx 3.6/4/5, Opera, Chrome, Safari плюс мобильные и специфические. К счастью, ветеран IE6 уже вскоре окончательно умрет, да и IE7 уже сдает позиции. Firefox поменял свой подход к версионности вслед за Chrome и будем надеяться что в скором времени мы будем работать только с последним релизом, не оглядываясь на цифры. Opera тоже заматерела и движется в сторону автообновления.

Почему в первую очередь я заговорил именно о браузерах, а не о стандартах? Да потому что компании разработчики браузеров и являются основными разработчиками и евангелистами современных стандартов веб-разработки. Все они являются активными членами W3C и помогают разрабатывать стандарты и внедряют их, зачастую не дожидаясь утверждения спецификации. Это порождает нагромождение избыточного синтаксиса с вендор префиксами, но это временное явление.

Внедрение стандартов в браузерах похоже на гонку вооружений. Кто быстрее, кто сильнее, кто больше и тд. На самом деле, мы, разработчики от этого только выигрываем. Но как всегда и во всем, иногда происходят перегибы. Когда видишь ссылку на тот или иной showcase с охами и ахами, заходишь на страничку, а там написано “Best viewed at latest Chrome” — сразу вспоминаешь про времена IE6 и начинает подташнивать. Стандарты это отлично, продвижение стандартов — еще лучше, но не таким же способом.

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

Иногда это абсолютно незаменимая вещь, которая спасает от красных глаз, многочасовой писанины кода и угроз расправы со стороны менеджеров, а иногда заводит в дебри и вылезает боком с совершенно неожиданного направления. Для примера скажу, что такой либой является CSS3PIE, которая эмулирует такие CSS3 свойства как border-radius, box-shadow, RGBA и поддержку градиентов в background для IE6-8. Для простых статических страничек и страничек с маленьким количеством элементов все работает чудесно и разработчики в восторге, но стоит применить PIE к элементам участвующим в анимации либо генерируемым с помощью Javascript, и начинаются танцы с бубном.

Но это относится к вещам, используемым as is. Modernizr например, использует другой подход. Изначально вы проверяете, поддерживает ли браузер тот или иной стандарт, и уже в зависимости от этого решаете что ему выдавать. На выходе, вам в любом случае надо будет либо восполнять недостающую функциональность с помощью JavaScript, либо использовать избыточный код и картинки. И в том и в другом случае вы платите за это производительностью.

Что мы имеем в итоге? Часть браузеров получают красивый, семантичный код и все плюшки, а часть браузеров затыкаются и загружают процессор, либо жрут траффик. За все, как известно, надо платить, но я предлагаю подумать за что именно и стоит ли платить. Старые добрые и проверенные решения еще никто не отменял.

Кстати, если уж припомнили всякие красивости, такие как закругленные уголки, тени и градиенты, то стоит отметить, что производители браузеров в первую очередь реализовали именно их, частично из-за того что их реализация была не слишком сложной и частично из-за маркетинга. Реализация новой box-model, взамен откровенно устаревшей существующей до сих пор плетется в хвосте. Так же отстают такие части стандартов как local storage, indexed database api, page visibility, Cross-Origin Resource Sharing и еще много других, которые реально важны для разработчиков, но не являются Eye Candy. что напоминает известную фразу о том, что народ требует хлеба и зрелищ. Главное чтоб было красиво.

В связи с предыдущим пассажем о наглядности и свистелках-перделках, хотелось бы упомянуть и о предназначении. Из ниоткуда, как грибы после дождя, стали появляться всевозможные игры, сделаные на HTML5 и CSS3. Их разработчики очень гордятся своими творениями и их можно понять. Ведь они так мучались чтобы сделать приложение с помощью технологий, которые для этого не предназначены. Но зачем? HTML был и остался языком разметки гипертекста, хоть и расширился и развился в соответствии с реалиями.

В заключение. Уважаемые разработчики, помните что стандарты и технологии лишь средства, которые не обязательно могут быть использованы во благо. А наша работа заключается в том, чтобы создавать хорошие и работающие интерфейсы, которыми будут пользоваться другие люди и совсем не обязательно что наши пользователи будут гиками и примут наши оговорки. Используйте технологии и подходы с умом, не забывая о главной цели. Думайте, думайте, думайте.

Internet Explorer 9. Test Drive

Internet Explorer 9 Сегодня компания Microsoft представила на всеобщее обозрение первую публичную сборку Интернет Эксплорер 9. Собственно это даже не сборка как таковая, а голые рендерный и js-движки. Интерфейс пока что отсутствует, но возможности браузера посмотреть уже можно.

Скачать и установить Internet Explorer 9 Platform Preview можно на специальной странице. На ней же можно посмотреть на демки поддержки HTML5, CSS3 и SVG(!).

Устaнавливать эту сборку можно не опасаясь, она не имеет никакого отношения к Интернет Эксплореру, установленому на вашей системе. Минимальные требования для установки — Windows Vista SP2 и выше. Видимо и с релизом будет так же.

Из интересных вещей стоит отметить высокую скорость рендеринга и поддержку некоторых аспектов CSS3 и HTML5. Поддерживается свойство border-radius и CSS3 селекторы. Поддерживается тег video на http://youtube.com. Фильтры из предыдущих версий IE не поддерживаются.

Поддержка CSS3 пока что на невысоком уровне, по крайней мере если смотреть на http://css3please.com. Более того, замечены глюки с некоторыми свойствами и псевдоклассами из CSS2, например :first-letter. Тем не менее, мне кажется что направление выбрано правильное и результаты не заставят себя ждать. Уже то, что в Microsoft поняли, что цикл разработки продукта не может продолжаться 6 лет, уже о чем-то да говорит.

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

IE 6/7/8/9, Firefox 3.6, Opera 10.5, Safari 4, Chrome 4 – уже 8 браузеров, это не говоря о мобильных. У верстальщиков всегда будет хлеб. С маслом.

IE со льдом, пожалуйста

IE on the rocksНе смотря на то, что в последний год наблюдается постоянная тенденция снижения количества посетителей на сайтах с браузером Internet Explorer 6 и даже принимая во внимание тот факт, что Майкрософт внесла Internet Explorer 8 в список важных обновлений в Windows Update, ни одна компания, уважающая себя и посетителей своих сайтов, а тем более желающая зарабатывать деньги, не откажется от поддержки 6-ого Интернет Эксплорера.

Это детище мелкомягких, срок выдержки которого поболее чем у лучших коньяков, не желает становиться лучше с годами (видимо надо было хранить в дубовых бочках). И нам, веб-разработчикам, приходится с этим мириться. Количество версий Интернет Эксплорера, которые надо поддерживать – растет, и эпопея эта затянулась. Со времени выхода 7-ой и 8-ой версии Интернет Эксплорера появилось несколько утилит, позволяющих тестировать верстку в нескольких версиях IE одновременно.

Вот скромный список вариантов “борьбы” с Интернет Эксплорером:

  • Multiple IE
  • IE Tester
  • IE Collection
  • Виртуальные машины
  • Выйти на пенсию Continue reading

Safari под Windows

Да, да. Я не ошибся. Вышла публичная бета версия Safari 3 для Windows. Для меня это стало приятной неожиданностью.

Safari

Теперь у разработчиков есть реальная возможность тестировать свои творения под Safari, да и просто попользоваться этим браузером. А у MSIE в очередной раз отбирают долю пользователей. Качаем.

А для тех из вас, кто уже озадачился описанием специфических стилей предлагаю вариант, найденый мной на просторах Сети:

::root p { color: red; }

Этот стиль будет читаться только в Safari. Если знаете другие варианты – вэлкам в комменты.

P.S. Для тех, у кого проблемы со шрифтами в Safari под Windows в продолжении способ лечения. Continue reading

Web developer toolbar для Интернет Эксплорера

Все вы наверняка знаете о мега-расширении для Файрфокс – Web developer toolbar. Помимо него существует похожее расширение для браузера Opera.

Но мало кто знает что существует аналог этого незаменимого (не побоюсь этого слова) для разработчиков решения для Интернет Эксплорера.

Web developer toolbar Интенрет Эксплорер

Continue reading

Флэш детектор или Не бросим юзера в трудную минуту

Adobe flash detectionСтолкнулся я недавно по работе с такой темой – есть некая менюшка, сделаная на флэше, и вставленая в html-документ. Все просто, но есть один момент. Заказчик ну никак не желает терять ее функционал, вне зависимости от того, есть ли на машине клиента флэш/javascript или нет. И он в принципе прав, не смотря на то что делать меню на флэше – изначально не верный подход.

Итак, что же нам нужно? Нужно создать еще одно меню, естественно XHTML/CSS, с картинками, которое будет загружаться в браузер клиента при отсутствии на его машине flash/javascript. Да хотя бы даже заменить флэшевый баннер на обычный, чтобы не терять рекламу. Я подготовил два простых решения, которые помогли мне и надеюсь, помогут вам. Continue reading

Заменяем user-agent

User Agent screenshotВремя от времени нужно зайти на сайт под видом Googlebot или например MAC Safari. Делается это очень просто. Для этого есть хорошее расширение под Firefox, которое называется User-agent Switcher.

Устанавливаем, заходим в настройки, импортируем список большинства известных user-agent’ов, который можно скачать отсюда в формате XML и все готово.

После этого идем в Tools – User Agent Switcher, выбираем “овечью шкуру” и идем тестить :)

6-ой и 7-ой Интернет Эксплореры одновременно – легко

IE 7 with IE 6

В Сети уже довольно давно проскакивали всевозможные утилитки, позволяющие устанавливать одновременно несколько версий Internet Explorer’а на одну операционную систему.

Большинство из тех, которые мне довелось тестировать страдают глюкавостью или не поддерживают Conditional comments.

Но вот сегодня я наконец то нашел решение проблемы. Утилитка, быстрая в инсталяции, которая позволяет IE 7 комфортно чувствовать себя в stand-alone инсталяции, в любой папке, которую вы укажете.

Все до смешного просто: Continue reading

Web Developer Toolbar для Opera 8/9

Opera toolbar

Тулбар для Оперы, похожий на известное расширение для Firefox. Думаю будет полезен тем, кто верстает под Оперу.

Для установки достаточно открыть эту страницу в Опере, выбрать версию и нажать на ссылку. Файл .ini распознается Оперой автоматически. Более подробные инструкции на страничке автора, по-английски.