Jump to content
  • 0

Опытные верстальщики, а как вы проверяете на крассбраузерность?

flagreit

Asked by flagreit,

 Share

Question

flagreit Explorer

flagreit

Posted
Posted

Не стал поднимать темы с бородой.

Какой лучший и удобный, с вашей точки зрения, способ проверки на кроссбраузерность? Стоит ли пихать всё в одну папочку? Будут ли они конфликтовать друг с другом? Или же стоит воспользоваться специальными программами и сервисами? Но стоит ли им доверять? Про случай с какой-то виртуальной машиной вообще не понятно..

В общем нуждаюсь в совете :(

Link to comment
Share on other sites

39 answers to this question

Recommended Posts

  • 0
swetlana Explorer

swetlana

Posted
Posted

А вот как раз случай с виртуальной машиной — это наиболее оптимальный вариант.

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

То есть, к примеру, предполагаем мы, что посетитель будет просматривать сайт в IE6 на Windows XP.

Кстати, ОС не менее важна, чем браузер.

В частности, практически вся работа со шрифтом — дело ОС.

Так открываем окошко виртуальной машины, в которой живёт практически настоящая винда с совсем настоящим IE — и видим сайт так, как его увидит посетитель:

s_1299096513_9edc231514.png

Тогда как любые другие имитации (хотя может в чём-то и более удобные) не дадут реальной картины.

Link to comment
Share on other sites
  • 0
swetlana Explorer

swetlana

Posted
Posted
…что именно посоветуете глянуть? То, что предложил klierik?

Да, конечно.

Основная разница в том, что VirtualBox бесплатный, а VMWare — платный.

По функционалу они весьма схожи.

Я пользую VirtualBox — для озвученных целей подходит абсолютно замечательно.

Link to comment
Share on other sites
  • 0
flagreit Explorer

flagreit

Posted
  • Author
Posted (edited)

klierik, проблема была в боязни их конфликтования друг с другом. С IEColllection за ослик я уже буду спокоен, спасибо!

swetlana, VirtualBox, так VirtualBox :( Мерси, изучим, посмотрим

Edited by flagreit
Link to comment
Share on other sites
  • 0
blaga Explorer

blaga

Posted
Posted

Светлана, со случаем когда нужен только ие6 ясно. а другие версии ИЕ? а другие версии оперы, мозилы, хрома? получается нужно минимум три виртуалки с ИЕ 6, ИЕ7, ИЕ8

Между ними нет проблемы переключатся?

Link to comment
Share on other sites
  • 0
c01nd01r Explorer

c01nd01r

Posted
Posted
Светлана, со случаем когда нужен только ие6 ясно. а другие версии ИЕ? а другие версии оперы, мозилы, хрома? получается нужно минимум три виртуалки с ИЕ 6, ИЕ7, ИЕ8

Между ними нет проблемы переключатся?

Можно одну виртуалку, но менять 3 виртуальных жестких диска :( Или 3 ХР на один vHDD.

Хотя вариант с 3мя независимыми виртуальными машинами самый гибкий.

Link to comment
Share on other sites
  • 0
swetlana Explorer

swetlana

Posted
Posted
Светлана, со случаем когда нужен только ие6 ясно. а другие версии ИЕ? а другие версии оперы, мозилы, хрома? получается нужно минимум три виртуалки с ИЕ 6, ИЕ7, ИЕ8

Между ними нет проблемы переключатся?

никаких проблем.

Элементарно можно зарядить несколько виртуальных машин.

У меня их пять как раз по озвученной вами причине.

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

Link to comment
Share on other sites
  • 0
Serlutin Explorer

Serlutin

Posted
Posted

Стоит заметить, что кроссбраузерность\кроссплатформенность начинается с разработки.

Даже самая первая строчка в коде уже должна быть правильной.

Что у нас в первой строчке? Правильно doctype!

Он должен быть. Обязательно. Причём либо strict, либо <!DOCTYPE HTML>

Далее, если сайт не сложный, берётся стандартный макет. По каждому макету можно найти список совместимостей. Правда вряд ли сейчас, кто-нибудь использует Opera 9.

Следующая проблема - шрифты. Вернее проблем даже две: установленные шрифты и их размеры. Чтобы сайт не зависел от шрифтов и размеров нужно просто делать с небольшим запасом. Делайте так, чтобы при увеличении в полтора (или два) раза ничего не ломалось.

Про Internet Explorer отдельная история. Хотя при некотором опыте уже знаешь, что и как будет себя вести. Ну и стоит заметить, что практически на все баги нашили решение.

Ну и стоит знать некоторые возможности браузеров. Если в Safari под Win поставить режим сглаживания "Средний", то можно получить примерное представление, как будет выглядеть сайт в Mac.

Также можно найти эмуляторы Opera Mobile и Opera Mini.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
а почему бы не запускать виртуалку по мере надобности?

Отладить страницу под ИЕ можно и после написания страницы.

Ну я бы не стал так рисковать. После завершения работы отладить вёрстку в ИЕ бывает далеко не просто. Т.е. я имею ввиду, что если вы изначально не проверяли каждый этап в этих браузерах, и уже запустили кучу косяков в надежде исправить их после, то тут есть риск перевёрстки заново.

Link to comment
Share on other sites
  • 0
swetlana Explorer

swetlana

Posted
Posted
…Если в Safari под Win поставить режим сглаживания "Средний", то можно получить примерное представление, как будет выглядеть сайт в Mac.…

ой не надо!

Была у нас с месяц назад проблема.

Коллега верстала под виндами, используя как раз этот совет. Даёт мне смотреть (а я на маке) — всё разваливается, шрифты не умещаются.

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

Современные версии виртуальных машин почти все позволяют макось зарядить — это куда более надёжный способ.

…виртуалка отпадает, ибо комп старенький, с одним гигом.

…

помню 2004 год :(

У меня комп не такой уж и старенький, но с 256Мб памяти. Тогда это даже нормальным считалось.

Сам KDE слабым аппетитом никогда не страдал, а тут ещё несколько браузеров одновременно, две виртуальные машины, в каждой из которых по винхр — и ничего, работало :)

Link to comment
Share on other sites
  • 0
klierik Middle Developer

klierik

Posted
Posted
Ну я бы не стал так рисковать. После завершения работы отладить вёрстку в ИЕ бывает далеко не просто. Т.е. я имею ввиду, что если вы изначально не проверяли каждый этап в этих браузерах, и уже запустили кучу косяков в надежде исправить их после, то тут есть риск перевёрстки заново.

единственное под что приходится править так это под ИЕ6/7 (в моём случае) и то не всегда так как фиксы, как правило, пишутся "на лету"

http://habrahabr.ru/blogs/webdev/114414/#comments

Образы дисков виртуальных машин с IE6, IE7, IE8

всё бы ничего если бы не:

По ссылке вы можете скачать образы дисков для Microsoft Virtual PC

ех. а мне бы тоже самое только под VMware :) :) :(

Link to comment
Share on other sites
  • 0
swetlana Explorer

swetlana

Posted
Posted
Ну я бы не стал так рисковать. После завершения работы отладить вёрстку в ИЕ бывает далеко не просто. Т.е. я имею ввиду, что если вы изначально не проверяли каждый этап в этих браузерах, и уже запустили кучу косяков в надежде исправить их после, то тут есть риск перевёрстки заново.

поведение IE чаще всего вполне предсказуемо.

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

И если делать вёрстку максимально просто, то скорее всего под IE потребуется лишь небольшая корректировка.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
psywalker, очень интересует, чем пользуешься именно ты. Тоже виртуальной машиной?

Я лично пользуюсь ИЕ-тестером. Чтобы не запускать виртуалку, лишняя нагрузка. Как правило это работает, но а в конце работы можно врубить виртуалочку и уже проверить в ней всё основательно.

поведение IE чаще всего вполне предсказуемо.

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

И если делать вёрстку максимально просто, то скорее всего под IE потребуется лишь небольшая корректировка.

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

Link to comment
Share on other sites
  • 0
flagreit Explorer

flagreit

Posted
  • Author
Posted
помню 2004 год :)

У меня комп не такой уж и старенький, но с 256Мб памяти. Тогда это даже нормальным считалось.

Сам KDE слабым аппетитом никогда не страдал, а тут ещё несколько браузеров одновременно, две виртуальные машины, в каждой из которых по винхр — и ничего, работало :)

То что работать у меня будет это понимаю, но, фотошоп+дрим+прожорливый касперский сделают своё дело, тормоза будут обеспечены, а я не перевариваю неудобства..про мелочь я уже молчу :(

Господа, что скажет про этот сервис? http://browsershots.org/

Кто-то хвалит, кто-то нет

Link to comment
Share on other sites
  • 0
sigma77 Explorer

sigma77

Posted
Posted
То что работать у меня будет это понимаю, но, фотошоп+дрим+прожорливый касперский сделают своё дело, тормоза будут обеспечены, а я не перевариваю неудобства..про мелочь я уже молчу :(

Господа, что скажет про этот сервис? http://browsershots.org/

Кто-то хвалит, кто-то нет

Тут название говорит само за себя. Ты получишь только скриншот — читай статичную картинку. Причем обрезанную. Как ведут себя элементы в динамике, например, при наведении, ты не узнаешь. Это первое.

Второе. Зачастую приходится слишком долго ждать для получения нужных скриншотов.

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

Поэтому использовать или нет, решайте сами. Исходя из своих запросов и потребностей.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept