Методы разработки кроссбраузерной вёрстки

Каждый практикующий верстальщик, особенно если он работает с заказами, старается верстать кроссбраузерно. Тем более, если заказчик проверяет работоспособность сайта в IE6. Ну нет другого браузера у директора солидной конторы и всё.

После одной такой разработки я взял за правило показывать начальный макет только в адекватных браузерах (OPERA или FIREFOX).

Давайте теперь поразмыслим о разработке этого самого кроссбраузерного макета сайта. По сути есть всего два подхода. Либо верстать сразу красиво либо вначале делать вёрстку для адекватных браузеров, а затем подгонять под всякие Эксплореры и прочие чудеса браузеростроения.

Кстати на счёт Эксплореров. Недавно (на момент написания данной заметки. Писал в блокноте, поэтому точной даты не скажу) набрёл в сети на чудесатый инструмент верстальщика IE-Tester. Сея тулза очень пригодится, если у вас нет желания держать на компе все версии Internet Explorer.

Она в точности эмулирует отображение браузером разрабатываемого сайта, а также его поведение при всяческих эффектах (наведение курсора, клик и т.д), что выгодно отличает её от известного сервиса browsershots.org и подобных ему. Ведь они предоставляют только снимок экрана.

Заметьте, реклама этого инструмента мне нисколько не выгодна. Я не гонюсь за процентом от его продаж (она бесплатна) и не получаю денежки от всяких Блогунов за сей пиар.

Мне действительно понравилось работать с IE-Tester'ом и я его активно использую при разработке. Скачать тестер можно совершенно бесплатно по этому линку.

Кстати очень позитивно, что программа эмулирует только отображение, а не все глюки Эксплореров (торможение, зависание, неожиданную смерть). Вылетает прога у меня довольно часто (только отвернёшься, а она уже сдохла), но возможно это моя Винда (да я пользуюсь Windows осью, не бейте) глючит.

Итак продолжим. Есть два пути верстальщика. Какой из них выберете вы? Какой наиболее эффективен с вашей токи зрения?

Я пользуюсь вторым методом, так как держать в голове все возможные вариации поведения браузеров, имхо, нереально. Хотя... возможно настоящие профессионалы на это способны. А вы как думаете?

Я искренне надеюсь, что смогу достигнуть такого уровня.

Кстати, немного ссылочек. Так вот. Rising Blog зарабатывает на мечту. Сейчас автор в основном зарабатывает на сплогах, построенных Кисточкой, для слива трафика на vsemayki.ru.

Семён Бруква продолжает обмен постовыми. Кстати Семён тоже решил удариться в PHP. Уважаю.

Также очень хороший блог Code Is Art тоже меняется ссылками. Давно подписан на его RSS. Чего и вам советую. Особенно интересуют посты на тему CSS, PHP и JavaScript. Да и на тему SEO много информации. Кстати, один из авторов блога разработал свой JavaScript framework – js-core.

Подпишитесь на обновления блога

Получить в подарок мини-книги и 21-дневный тренинг по личностному росту.

Подписаться на рассылку «Инструменты Интернет для онлайн бизнеса»

Поделиться ссылкой:


Комментарии:

03.11.2009 04:42:43
#1 g0ff

Во-первых, привожу цитату, которая как-то была сказана на Хабре, и текст которой я сохранил себе на память:
«Господа, тема с IETester и Multiple_IE всплывает не первый раз. Повторяю снова:
Забудьте вы про них навсегда. Глюков вагон и самое неприятное, что попадаются нестабильные глюки в рендеринге html и vml. Нафига такие инструменты, которые основную функцию не выполняют? Это shittols. Забудьте.
Единственная гарантия настоящего стабильного результата — тестирование в виртуальной машине.
На сайте майкрософта лежат готовые бесплатные образы под VirtualPC для тестирования IE6 и IE7.
www.microsoft.com/downloads/details.aspx?FamilyId=21EABB90-958F-4B64-B5F1-73D0A413C8EF&displaylang=en
www.microsoft.com/downloads/details.aspx?familyid=28C97D22-6EB8-4A09-A7F7-F6C7A1F000B5&displaylang=en»

А во-вторых, тема кросбраузерности не раскрыта, имхо )

03.11.2009 09:18:47

Странно. Глюков не заметил. Специально проверял отображение на ноуте на настоящем ИЕ6. За образы спасибо.

А тема кроссбраузерности... В чём она? :) Во всяческих хаках и уловках? Мне интересен сам подход. Верстать сразу под разные браузеры или же вначале делать для адекватных.

03.11.2009 10:32:14
#3 g0ff

Я сам всегда верстаю под FF по стандартам, потом открываю под IE и вношу хаки, и только после этого показываю заказчику, не беспокоясь том, что же он там увидит.
Т.е. как бы верстаю-то я под нормальный браузер, но прежде чем показывать клиенту довожу и под «остальные».
Кстати это более оптимальный вариант, потому что опыт показывает, что если весь проект готов и утвержден заказчиком, который не видел его в ИЕ, то потом наводить кроссбраузерность это уже дело чести и совести, но таааак влом))) что лучше уж сразу.

03.11.2009 10:37:26

Согласен. Ломает жутко, но делать то обязательно надо :)

22.12.2009 14:46:46
#5 vredin

мне нравится ваш блог.. эффекты правда необычные немного.. или непривычные :)

p.s.долго соображал что без превью отправить не работает..
p.s. кстати, думаю записатся на курсы верстки - может и у меня что получиться :)

22.12.2009 14:54:45

Спасибо на добром слове. Вполне привычно должно быть. Наверно вы блоги не так давно читаете.

Где такие курсы ведут? :) В столицах наверно.

20.01.2010 11:01:01
#7 Шико27

Кто про что, а лысый-про расческу(это про себя). Лекс, а в какой версии Форточек у тебя постоянно мрет эта тулза? В частности,, в 7-ке пробовал ее запускать?
Интересуюсь в плане, что где-то встречал такие терки, мол 7-ерка суперустойчивая к всякому софту, работает супернадежно и быстро...

20.01.2010 11:23:02

Нет, семёрку не ставил. Да и не планирую пока. Пусть её оттестят нормально. Винда ХП, третий сервис пак.

Где-то месяц назад её кстати обновили, и она перестала падать. Падала какая-то из версий.

31.01.2010 16:59:10

Я верстаю сразу с учётом кроссбраузерности - со временем в голове выработались некие «свойства».

11.02.2010 06:49:01

Ишак как обычно подкидывает проблем и ,думаю, в ближайшее время никуда от этого не дется. Будем ждать когда все люди на планете от него откажутся.Дизайн ничто, наполнение все (:

23.02.2010 10:25:07
#11 создание сайтов

Кросбраузерность - это дело практики... Если писать под ie стандарты, то в других точно будет все ок, а вот если наоборот, то вероятности меньше :)

13.03.2010 20:35:58

Только постигаю вёрстку... А тут ещё и кросбраузерность необходима...

21.04.2010 20:39:59

Вообще,необходимо держать дефолтный IE 6 на XP.У меня на компе и XP c IE6 и Seven с IE8 стоит.
А IETester я вообще впервые вижу.Посмотрим,потестим.

23.04.2010 16:16:27
#14 Дмитрий

Попробую что за IE тестер, за ссылку спасибо.

28.04.2010 17:58:43

Я сам также верстаю под FF, потом проверяю в Опере и Сафари, после этого можно показать и без хаков, если заказчик продвинутый и знает что такое IE6 (хотя скорее наоборот - знает что есть альтернатива).
Если «непродвинутый» - то костыли фотомодели леплю сразу.

30.04.2010 19:32:52
#16 olinet

Лучшая верстка- это собственная фантазия

08.05.2010 08:16:44
#17 Павел

Надо испробывать такую методику

17.06.2010 20:14:05

Я верстаю в FireFox и одновременно проверяю в других новых браузерах, которые поддерживают веб-стандарты. Потом с помощью условных комментариев (http://www.fortress-design.com/layout/conditional-comments/) адаптирую под ИЕ6-7.

01.07.2010 20:05:51
#19 Андрей

мне тоже ближе второй подход. изначально делаю под оперу.

07.07.2010 12:12:06

Юзаю для верстки dreamweaver и кроссбраузерность обеспечена..
Изредка проверяю в IE, хотя непризнаю этот браузер

29.07.2010 22:36:06
#21 ivan

А вот тут и не соглашусь. Я нашел наиболее оптимальный способ - верстать под ИЕ6 и тестить в ИЕ8, т.к. восьмой - это пипец в квадрате.
Так вот, если в этих двух говнобраузерах сайт будет работать хорошо, очень вероятно, что и ФФ и опера его скушают.

П.С. Это все имхо

30.07.2010 18:10:18

Оперяюсь в основном на Firefox, а о такой фигне как IE даже вспоминать не хочу, ну не стоит оно того. На счет 7-ки, сравнительно с ХР она действительно более устойчива и надежна.

07.08.2010 12:03:05

Dezm, IE конечно может и фигня, но и под него подстраиваться нужно, так как им тоже много пользователей интерета пользуется, не хотелось бы чтобы они уходили, из-за того что сайт криво отображается.
Для теста в IE6-8 пользуюсь сервисом ipinfo.info/netrenderer (здесь вроде этот сервис не упоминался, может кому-то будет полезен).

11.08.2010 04:46:53

Есть надежда, что ие9 будет поддерживать css.

19.08.2010 15:34:53

Несмотря на глючность и всеобщее «презрение» верстальщиков (да и javascript-кодеры на него зуб точат..), от поддержки IE отказываться нельзя.. всё-таки он пока «в лидерах».. (Надо отдать должное, со временем многие сайты в шестой версии уже не тестируются...)

> Есть надежда, что ие9 будет поддерживать css.
Эм... А ранние версии не поддерживают?

По методике верстки - если всё выровнять-вылизать в FF (с оглядкой даже на IE 7-8), то открыв сайт в IE6 можно сиииильно удивиться =) Условные комментарии в этом случае неплохо выручают....

26.08.2010 12:13:36

Прежде всего огромное спасибо автору за линк на IE-Tester. Супер вещь.
Раньше мучился, использовал _browsershots.org, не удобно.

Сам верстаю под FF, параллельно проверяю в Opera. Потом уже смотрю в Chrome и IE. Хотя старюсь это дело совсем на потом не откладывать, а быть в курсе вылезающих недоработок.
IE, хоть как мы его и не любим, выкидывать нельзя (разве что 6ку), ведь все же, он стоит у большинства рядовых пользователей.

27.08.2010 04:52:29
#27 Марина

Для кроссбраузерной верстки еще в самом начале нужно установить несколько браузеров: IE, Opera, Firefox, Chrome и тестировать свое творчество поочередно, просматривая результаты верстки в них :)

14.09.2010 07:36:58
#28 Оксана

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

07.10.2010 04:03:09

Вот вы пишете что взяли за правило показывать в адекватных броузерах. Когда вам делают заказ, вы спрашиваете какой у заказчика броузер? Есть же дотошные люди, которые все равно проверят на каком-нибудь старом ноутбуке с IE6.

07.10.2010 07:12:30

Semm, пусть проверяют. Это их проблема. Я показываю первоначальный макет в адекватном браузере. Затем подгоняю под все остальные.

18.10.2010 06:16:10
#31 profdesigner

IE 6 - это просто шедевр. Этот браузер заставляет процентов 90 всех проектов подстраиваться отдельно под него. Жуть. Лично я, сначала строю проект, а потом css’кой или if-else подгоняю под эксплоер.

31.10.2010 11:49:30

при разработке сайта, сразу смотрится предположительная аудитория, если нет такой необходимости под 6-го иака, то ложу на него, хотя изредка подкидывает приколов опера и фф:(

03.11.2010 18:21:55
#33 Алексей

Я лично первым для теста верстки открываю firefox и вертсаю в нем, параллельно ему открываю еще три версии оперы, гуглхром и три последних эксплорера. Походу верстки тестирую что во всех них получается и сразу исправляю баги. Конечно самые большие проблемы преподносит старенькая опера и ие6, но что касается ие6, последнее время я тупо создаю несколько классов чисто для ие6, используя *html и забиваю на то, что «мощные кодеры», называют хаками и неправильным.

07.11.2010 20:06:19
#34 Sherzod

сам тестировал с IE Tester. Глюкнутый очень. Много чего не отображает нормально. Только если png картинки прозрачные может показать что плохо стоят... а вот с кодировкой проблемы возникают, скрипты не правильно обрабатывает. Специально три ноута поставил и тестировал в них от 6 до 8 версии IE. Если серьезный проект со множеством скриптов и блоков, то IE Tester не самый лучший вариант. Сам занимаюсь версткой...

21.11.2010 17:12:57
#35 olga

IE Tester - отличная фича, мне ее друг программист посоветовал в свое время, но нужна она была только для того, чтобы править шаблоны джумлы. Слава богу, с WP такого пока не возникало.

28.11.2010 22:20:12

Пользуюсь этой вещью давно, но вот проблема у меня с ним. IE7 при открытии выдает ошибку. Пробовал даже ХР переставить - не помогло. Шестой ослик открывается как часы, в качестве основного ослика установлен восьмой. Аналогичная ситуация и на ноуте. Может быть кто нибудь подскажет, в чем трабл?

21.12.2010 18:59:15
#37 Dmitriy

Изготовленный мною сайт врукопашную (без движков) на статическом html. Работал с Оперой, Файерфокс, ослика использовал 6, 7 и 8. IE-Tester очень не понравился. Много глюков.

01.01.2011 08:25:51
#38 creativo

Тоже раньше пользовался IE-тестером, но нашел более лучший вариант это IECollection, там есть все версии 6,7 и 8-го.При установке указываешь что ставить а что Вам не нужно.Скажу честно, (не посчитайте за пиар)-это вещь.
Так что проблем с тестированием нет,и на десерт. В шестом, есть свой Developer Toolbar.Работает так же как Opera Dragonfly,в Opere или Firebug в Mozilla

05.01.2011 12:21:01
#39 Alex

Блочная верстка превосходит табличну верстку и отображается, на загрузке сайта.

14.01.2011 12:11:02

Я раньше пользовался browsershots, а потом вручную стал проверять на нескольких браузерах. может попробую и этот вариант.

15.01.2011 20:16:15
#41 serotonine

Когда же вымрут эти майкрософтовские говнобраузеры? Сколько же проблем они создают! Ненавижууу!

10.02.2011 11:40:00
#42 sergm87

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

27.02.2011 14:48:23

изначально верстаю под оперу, потом только подгоняю под всякое гамно вроде ИЕ...ИМХО давно пора отказаться от этих браузеров сообществу веб мастеров и верстать только под адекватные браузеры....но это мечта, походу, не скоро сбудеться

02.04.2011 18:32:46
#44 elise

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

07.06.2011 07:23:43

Привет. Верстаю около 5ти лет и как бы не изощрялся ie6 всеравно где-нибудь да ломает, хотя Лиса или Опера всегда работают стабильно. Советую всем делать 2 template.css один общий, второй для ie only, и тогда все будет нормально, правда времени займет немного больше, зато дядя из крутого офиса, который знает только ие 6 претензий не предъявит.

23.06.2011 11:12:34
#46 Тарас

Соглашусь с elise, спасибо за програмку, но для достижения хорошего качества верстки все таки лучше держать коллекцию браузеров на своем ПК.
Нащет темы поста «Методов кроссбраузерной верстки», вот нарыл статейку, вам будет полезна

http://sitear.ru/material/krossbrauzernaya-verstka-css

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

28.06.2011 06:00:12
#47 SuperMario Vodoprovodchik

Что-то ссылка не работает. Я понимаю, что сто лет прошло, но мб у кого-то есть еще линк?

12.07.2011 14:48:05

g0ff,
Вы под ff, а я под хром)
Потом проверяю работу страницы в лисе и опере)
позже в IE, да и вообще....этот IE такой IE...порой он меня просто бесит.

16.09.2011 13:37:42
#49 Володя

Пару лет занимаюсь кроссбраузерной версткой. Имеется хороший опыт. Люблю блочную верстку, пару статей о ней сам писал. Да, IE6 - тот еще гад. Скоро его поддержку мелкомягкие прекратят уже. Кстати, вордпресс 3.2 уже не поддерживает его, а таке старые версии php & mysql.

25.09.2011 08:04:54

единственнуй вернуй путь, как и у автора, сверстать под нормальные браузеры, а затем по необходимости добавить отдельные стили для ie6бббили просто забить на него

10.11.2011 08:58:42
#51 Игорь

ужос, сижу верстаю свой 1ый Гпроект и офигеваю от всего вообще что Майкрософт натворил !!! ие6 вообще неадекватная вещь, руки им за такое поотрывать !!!

ИЕ6 тупо глотает 1 окошко в слайдере, вместе него нечего не выводит, тупо БГ (((

11.11.2011 14:30:47
#52 Артем

Я бы вообще монополизировал браузеры и оставил только два три самых продвинутых. Чтоб геморроя меньше было

19.11.2011 19:18:47
#53 Sorokin Vladimir

Присоединяюсь к мнению, что верстать нужно под самого вредного, а остальные покажут как надо и так! При верстке прогоняю сначала через CSE.HTML. Validator, он сразу выдает ошибки и методы устранения (в настройках можно мелочи отключить, иначе список будет на трех страницах), потом у меня есть сборка ie6_ie7_ie8. portable. После этого Оперы с Фоксами не страшны. Да, я заранее запасся скриптами и всякими примочками, авторы которых гарантируют их работу в ie6_ie7_ie8.

02.12.2011 16:00:28
#54 Вадик

Regent,
Можно подробнее?

08.12.2011 02:17:42

Я бы оставил только оперу потому как все остальные ее копии а от хрома то току мало по функциям то

19.12.2011 16:20:07
#56 Alex

поскорее бы explorer выкинули все и каждый тогда все отлично будет, практически =)

26.06.2012 13:21:21

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

а так спасибо за статью, и за тестер спасибо))

19.08.2012 13:50:33

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

08.09.2012 22:06:51

Я использую сначала «адекватные» браузеры, а если у заказчика большая и лютая любовь к шестому «ослику» и прочим раритетам - то да, приходится выкручиваться и немного допиливать верстку

04.10.2012 04:35:10
#60 Георгий

Вы тут все такие крутые.., а как (и чем) шаблон после Артистера дорабатывать? Просто ответьте, а не говорите, что с этой программой работают только.., ну и так далее. Спасибо.

05.10.2012 06:57:12
#61 Gnom

Я обычно верстаю под хром, мазилу и оперу. Потом подгоняю, на сколько возможно под IE. Артистера вполне достаточно, что там дорабатывать? Хотя,если сайт мега супер наворочен)))

05.10.2012 07:08:26
#62 Георгий

Я читал где то, что после Артистера надо корректировать код шаблона и ФШ картинки дорабатывать...

05.12.2012 15:23:11

Спасибо за статью, как раз надо разобраться, что же IE8 не по вкусу...

12.12.2012 20:39:30
#64 Михаил

IE 6 по прежнему очень часто нужен на корп. порталах: многие крупные компании используют заточенную под IE6 старую, но эффективную систему, и им такая верстка бывает жизненно необходима
для всего остального нынче большинству хватает 7 ослика, который, кстати, тоже с огромным количеством «отличий» от нормального браузера

23.01.2013 10:11:38

полезная статья, узнал про ietester - нужная вещь. А на этом блоге upsata.ru читаю про ремонт компьютеров - тоже полезный материал

28.02.2013 19:26:07

Хорошая статья, автор.
Иногда складывается впечатление, что чем новее IE, тем больше у него всяких «отличий». то png непрозрачными делает, то форматирование сдвигает...

20.03.2013 09:22:37
#67 tebyk

Совершенно правильно заметили.

24.05.2013 06:42:27

Кроссбраузерная верстка необходима - это факт, но она однозначно затрачивает больше времени. Быть или не быть - зависит от пожеланий заказчика и ответственности верстальщика. Да, может про IE 6 пора забывать, но IE 7 проверять на корректность верстки стоит. Chrome, Mozilla, Opera в целом «ведут себя прилично». Могут быть небольшие расхождения, но они на самом деле малы и устраняются либо интуитивно, либо путем поиска решения по интернету. А вот с IE надо немного повозиться. Сейчас многие целеустремленно смотрят в сторону CSS 3, словно IE больше не существует. Возможно, такой резкий переход рановато делать, но что-то почерпнуть можно. К примеру, вы хотите использовать тень вокруг блока box-shadow. Chrome, Mozilla, Opera - все ок. А вот с IE проблемы. Но отказываться не стоит - используйте js PIE (progressive internet explorer). Он позволяет также делать скругление блоков. Но можно пойти и по старинке. Пример Вы можете увидеть на видеосервисе Knfilm.ru. Там тень где-то реализована за счет box-shadow, а где-то используются просто png картинки. Выбор за вами, для заказчика зачастую главное – результат!

24.05.2013 07:06:20
#69 Алексей

Ребята, осваивайте bootstrap, и все будет ок) это фрейм ворк css и js

24.05.2013 07:28:53

Алексей, согласен :) Но во время написания статьи, бутстрапа не было и в проекте.

03.11.2014 11:50:56

На IE7 уже никто не обращает внимание при вёрстке.

Оставьте комментарий [форматирование]

Пожалуйста, воздержитесь от спама и идиотских высказываний. Жёсткая модерация. Ссылки закрыты атрибутом nofollow, а значит не несут пользы для продвижения!
Ссылки на всё кроме личных блогов и тематических блогов, сходных по тематике с данным, вырезаются.



Мой Telegram канал
Мой RSS фид