Методы разработки кроссбраузерной вёрстки
Каждый практикующий верстальщик, особенно если он работает с заказами, старается верстать кроссбраузерно. Тем более, если заказчик проверяет работоспособность сайта в 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.
Поделиться ссылкой:
Комментарии:
Я сам всегда верстаю под FF по стандартам, потом открываю под IE и вношу хаки, и только после этого показываю заказчику, не беспокоясь том, что же он там увидит.
Т.е. как бы верстаю-то я под нормальный браузер, но прежде чем показывать клиенту довожу и под «остальные».
Кстати это более оптимальный вариант, потому что опыт показывает, что если весь проект готов и утвержден заказчиком, который не видел его в ИЕ, то потом наводить кроссбраузерность это уже дело чести и совести, но таааак влом))) что лучше уж сразу.
мне нравится ваш блог.. эффекты правда необычные немного.. или непривычные :)
p.s.долго соображал что без превью отправить не работает..
p.s. кстати, думаю записатся на курсы верстки - может и у меня что получиться :)
Кто про что, а лысый-про расческу(это про себя). Лекс, а в какой версии Форточек у тебя постоянно мрет эта тулза? В частности,, в 7-ке пробовал ее запускать?
Интересуюсь в плане, что где-то встречал такие терки, мол 7-ерка суперустойчивая к всякому софту, работает супернадежно и быстро...
Я верстаю сразу с учётом кроссбраузерности - со временем в голове выработались некие «свойства».
Ишак как обычно подкидывает проблем и ,думаю, в ближайшее время никуда от этого не дется. Будем ждать когда все люди на планете от него откажутся.Дизайн ничто, наполнение все (:
Кросбраузерность - это дело практики... Если писать под ie стандарты, то в других точно будет все ок, а вот если наоборот, то вероятности меньше :)
Только постигаю вёрстку... А тут ещё и кросбраузерность необходима...
Вообще,необходимо держать дефолтный IE 6 на XP.У меня на компе и XP c IE6 и Seven с IE8 стоит.
А IETester я вообще впервые вижу.Посмотрим,потестим.
Я сам также верстаю под FF, потом проверяю в Опере и Сафари, после этого можно показать и без хаков, если заказчик продвинутый и знает что такое IE6 (хотя скорее наоборот - знает что есть альтернатива).
Если «непродвинутый» - то костыли фотомодели леплю сразу.
Я верстаю в FireFox и одновременно проверяю в других новых браузерах, которые поддерживают веб-стандарты. Потом с помощью условных комментариев (http://www.fortress-design.com/layout/conditional-comments/) адаптирую под ИЕ6-7.
Юзаю для верстки dreamweaver и кроссбраузерность обеспечена..
Изредка проверяю в IE, хотя непризнаю этот браузер
А вот тут и не соглашусь. Я нашел наиболее оптимальный способ - верстать под ИЕ6 и тестить в ИЕ8, т.к. восьмой - это пипец в квадрате.
Так вот, если в этих двух говнобраузерах сайт будет работать хорошо, очень вероятно, что и ФФ и опера его скушают.
П.С. Это все имхо
Оперяюсь в основном на Firefox, а о такой фигне как IE даже вспоминать не хочу, ну не стоит оно того. На счет 7-ки, сравнительно с ХР она действительно более устойчива и надежна.
Dezm, IE конечно может и фигня, но и под него подстраиваться нужно, так как им тоже много пользователей интерета пользуется, не хотелось бы чтобы они уходили, из-за того что сайт криво отображается.
Для теста в IE6-8 пользуюсь сервисом ipinfo.info/netrenderer (здесь вроде этот сервис не упоминался, может кому-то будет полезен).
Несмотря на глючность и всеобщее «презрение» верстальщиков (да и javascript-кодеры на него зуб точат..), от поддержки IE отказываться нельзя.. всё-таки он пока «в лидерах».. (Надо отдать должное, со временем многие сайты в шестой версии уже не тестируются...)
> Есть надежда, что ие9 будет поддерживать css.
Эм... А ранние версии не поддерживают?
По методике верстки - если всё выровнять-вылизать в FF (с оглядкой даже на IE 7-8), то открыв сайт в IE6 можно сиииильно удивиться =) Условные комментарии в этом случае неплохо выручают....
Прежде всего огромное спасибо автору за линк на IE-Tester. Супер вещь.
Раньше мучился, использовал _browsershots.org, не удобно.
Сам верстаю под FF, параллельно проверяю в Opera. Потом уже смотрю в Chrome и IE. Хотя старюсь это дело совсем на потом не откладывать, а быть в курсе вылезающих недоработок.
IE, хоть как мы его и не любим, выкидывать нельзя (разве что 6ку), ведь все же, он стоит у большинства рядовых пользователей.
Для кроссбраузерной верстки еще в самом начале нужно установить несколько браузеров: IE, Opera, Firefox, Chrome и тестировать свое творчество поочередно, просматривая результаты верстки в них :)
Верстаю под файэрфокс, и с Эксплоурером всегда проблемы и в растяжке странице и в цветах, я уже не говорю о некорректном отображении. Поэтому только и остается, что пользоваться хаками да уловками, и то, не всегда срабатывает.
Вот вы пишете что взяли за правило показывать в адекватных броузерах. Когда вам делают заказ, вы спрашиваете какой у заказчика броузер? Есть же дотошные люди, которые все равно проверят на каком-нибудь старом ноутбуке с IE6.
IE 6 - это просто шедевр. Этот браузер заставляет процентов 90 всех проектов подстраиваться отдельно под него. Жуть. Лично я, сначала строю проект, а потом css’кой или if-else подгоняю под эксплоер.
при разработке сайта, сразу смотрится предположительная аудитория, если нет такой необходимости под 6-го иака, то ложу на него, хотя изредка подкидывает приколов опера и фф:(
Я лично первым для теста верстки открываю firefox и вертсаю в нем, параллельно ему открываю еще три версии оперы, гуглхром и три последних эксплорера. Походу верстки тестирую что во всех них получается и сразу исправляю баги. Конечно самые большие проблемы преподносит старенькая опера и ие6, но что касается ие6, последнее время я тупо создаю несколько классов чисто для ие6, используя *html и забиваю на то, что «мощные кодеры», называют хаками и неправильным.
сам тестировал с IE Tester. Глюкнутый очень. Много чего не отображает нормально. Только если png картинки прозрачные может показать что плохо стоят... а вот с кодировкой проблемы возникают, скрипты не правильно обрабатывает. Специально три ноута поставил и тестировал в них от 6 до 8 версии IE. Если серьезный проект со множеством скриптов и блоков, то IE Tester не самый лучший вариант. Сам занимаюсь версткой...
IE Tester - отличная фича, мне ее друг программист посоветовал в свое время, но нужна она была только для того, чтобы править шаблоны джумлы. Слава богу, с WP такого пока не возникало.
Пользуюсь этой вещью давно, но вот проблема у меня с ним. IE7 при открытии выдает ошибку. Пробовал даже ХР переставить - не помогло. Шестой ослик открывается как часы, в качестве основного ослика установлен восьмой. Аналогичная ситуация и на ноуте. Может быть кто нибудь подскажет, в чем трабл?
Изготовленный мною сайт врукопашную (без движков) на статическом html. Работал с Оперой, Файерфокс, ослика использовал 6, 7 и 8. IE-Tester очень не понравился. Много глюков.
Тоже раньше пользовался IE-тестером, но нашел более лучший вариант это IECollection, там есть все версии 6,7 и 8-го.При установке указываешь что ставить а что Вам не нужно.Скажу честно, (не посчитайте за пиар)-это вещь.
Так что проблем с тестированием нет,и на десерт. В шестом, есть свой Developer Toolbar.Работает так же как Opera Dragonfly,в Opere или Firebug в Mozilla
Блочная верстка превосходит табличну верстку и отображается, на загрузке сайта.
Я раньше пользовался browsershots, а потом вручную стал проверять на нескольких браузерах. может попробую и этот вариант.
Когда же вымрут эти майкрософтовские говнобраузеры? Сколько же проблем они создают! Ненавижууу!
Вечная проблема с разными браузерами. Хочешь использовать какой нибудь скрипт, а потом оказывается он криво работает в другом браузере
изначально верстаю под оперу, потом только подгоняю под всякое гамно вроде ИЕ...ИМХО давно пора отказаться от этих браузеров сообществу веб мастеров и верстать только под адекватные браузеры....но это мечта, походу, не скоро сбудеться
надеялся что пост будет весьма глобальнее и проблема будет раскрыта, тут написаны общие фразы и слишком мало конкретики. программку скачал щас буду тестить. на счет этого спасибо несмотря на отрицательные отзывы.
Привет. Верстаю около 5ти лет и как бы не изощрялся ie6 всеравно где-нибудь да ломает, хотя Лиса или Опера всегда работают стабильно. Советую всем делать 2 template.css один общий, второй для ie only, и тогда все будет нормально, правда времени займет немного больше, зато дядя из крутого офиса, который знает только ие 6 претензий не предъявит.
Соглашусь с elise, спасибо за програмку, но для достижения хорошего качества верстки все таки лучше держать коллекцию браузеров на своем ПК.
Нащет темы поста «Методов кроссбраузерной верстки», вот нарыл статейку, вам будет полезна
http://sitear.ru/material/krossbrauzernaya-verstka-css
В даной статейке розсматривается предложения r1pley, только чуть грамотнее... вообщем грузить не буду, поймете когда прочтите...
Что-то ссылка не работает. Я понимаю, что сто лет прошло, но мб у кого-то есть еще линк?
Пару лет занимаюсь кроссбраузерной версткой. Имеется хороший опыт. Люблю блочную верстку, пару статей о ней сам писал. Да, IE6 - тот еще гад. Скоро его поддержку мелкомягкие прекратят уже. Кстати, вордпресс 3.2 уже не поддерживает его, а таке старые версии php & mysql.
единственнуй вернуй путь, как и у автора, сверстать под нормальные браузеры, а затем по необходимости добавить отдельные стили для ie6бббили просто забить на него
ужос, сижу верстаю свой 1ый Гпроект и офигеваю от всего вообще что Майкрософт натворил !!! ие6 вообще неадекватная вещь, руки им за такое поотрывать !!!
ИЕ6 тупо глотает 1 окошко в слайдере, вместе него нечего не выводит, тупо БГ (((
Я бы вообще монополизировал браузеры и оставил только два три самых продвинутых. Чтоб геморроя меньше было
Присоединяюсь к мнению, что верстать нужно под самого вредного, а остальные покажут как надо и так! При верстке прогоняю сначала через CSE.HTML. Validator, он сразу выдает ошибки и методы устранения (в настройках можно мелочи отключить, иначе список будет на трех страницах), потом у меня есть сборка ie6_ie7_ie8. portable. После этого Оперы с Фоксами не страшны. Да, я заранее запасся скриптами и всякими примочками, авторы которых гарантируют их работу в ie6_ie7_ie8.
Я бы оставил только оперу потому как все остальные ее копии а от хрома то току мало по функциям то
поскорее бы explorer выкинули все и каждый тогда все отлично будет, практически =)
как то раз на работе делали сайт для какого то предприятия. и как на зло забыли протестить сайта на IE6. в результате через неделю звонит нам заказчик и говорит что у него сайт не корректно отображается,из - за того что у них на предприятии пользуются только IE6, и им главное было что бы в этом браузере хорошо отображался, а на другие все равно. что же, пришлось доделывать))
а так спасибо за статью, и за тестер спасибо))
свой сайт разработал в джумле и он мне очень нравится и там много полезного для пользователей телефонов на винфоне.
Я использую сначала «адекватные» браузеры, а если у заказчика большая и лютая любовь к шестому «ослику» и прочим раритетам - то да, приходится выкручиваться и немного допиливать верстку
Вы тут все такие крутые.., а как (и чем) шаблон после Артистера дорабатывать? Просто ответьте, а не говорите, что с этой программой работают только.., ну и так далее. Спасибо.
Я обычно верстаю под хром, мазилу и оперу. Потом подгоняю, на сколько возможно под IE. Артистера вполне достаточно, что там дорабатывать? Хотя,если сайт мега супер наворочен)))
Я читал где то, что после Артистера надо корректировать код шаблона и ФШ картинки дорабатывать...
Спасибо за статью, как раз надо разобраться, что же IE8 не по вкусу...
IE 6 по прежнему очень часто нужен на корп. порталах: многие крупные компании используют заточенную под IE6 старую, но эффективную систему, и им такая верстка бывает жизненно необходима
для всего остального нынче большинству хватает 7 ослика, который, кстати, тоже с огромным количеством «отличий» от нормального браузера
полезная статья, узнал про ietester - нужная вещь. А на этом блоге upsata.ru читаю про ремонт компьютеров - тоже полезный материал
Хорошая статья, автор.
Иногда складывается впечатление, что чем новее IE, тем больше у него всяких «отличий». то png непрозрачными делает, то форматирование сдвигает...
Кроссбраузерная верстка необходима - это факт, но она однозначно затрачивает больше времени. Быть или не быть - зависит от пожеланий заказчика и ответственности верстальщика. Да, может про 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 картинки. Выбор за вами, для заказчика зачастую главное – результат!
Ребята, осваивайте bootstrap, и все будет ок) это фрейм ворк css и js
Во-первых, привожу цитату, которая как-то была сказана на Хабре, и текст которой я сохранил себе на память:
«Господа, тема с 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»
А во-вторых, тема кросбраузерности не раскрыта, имхо )