Что такое кроссбраузерность сайта?

← Как создать фавикон ? | Релевантность страниц →

Что такое кроссбраузерность сайта?

Меня часто спрашивают посетители в своих письмах - что это за загадочное слово "кроссбраузерность", так часто встречающееся в статьях по созданию и оптимизации сайтов.

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

В связи с этим и появилось понятие кроссбраузерности, отображающее свойство сайта одинаково работать во всех браузерах (обычно учитываются лишь наиболее распространенные, а их не так уж много - Opera, Internet Explorer, Мozilla, Google Chrome, Netscape и Safari). При просмотре сайта в этих браузерах не должно наблюдаться развалов верстки и подаваемый материал должен быть одинаково читабелен. Но почему это не всегда так?

Дело в том, что разные браузеры обязаны соблюдать общие правила и стандарты, но на деле оказывается все не так оптимистично. Зачастую случается так, что алгоритмы обработки html-кодов и каскадных таблиц css у них заметно различаются и поэтому не всегда один и тот же элемент функционирует одинаково в разных браузерах.

Так как же добиться кроссбраузерности своего сайта? Прежде всего, обычными средствами css. А если этого не достаточно, то придется воспользоваться помощью хаков - наборов специальных селекторов или правил, понимаемых только каким-то определенным браузером.

Говоря простым языком, хаки – это обыкновенное форматирование элемента страницы, но с точным указанием браузера, для которого это форматирование выполняется. И если необходимо корректно отображать сайт, скажем, в трех браузерах, то нужно написать по "хаку" для каждого из этих браузеров.

Сами хаки можно найти в Интернете. Ресурсов, посвященных хакам и их применению вполне достаточно.А если браузеров больше трех плюс еще их различные версии, то на "прописывание" хаков уйдет немало времени, а если допустить, что автор сайта является новичком и далек от программирования, то что делать в таком случае?

Ответ однозначен - просто использовать те элементы при верстке html-кода, которые во всех требуемых браузерах отображаются одинаково. Поверьте, это не так уж сложно - периодически проверять, как различные элементы дизайна сайта отображаются в разных браузерах. И если вы обнаружили в процессе верстки, что какие-то элементы страницы отображаются в одном из браузеров некорректно — принимайте меры, попробуйте подкорректировать css, применить другие теги, стили и т.д.

И если не удается добиться одинакового отображения какого-то элемента в основных браузерах, то еще раз подумайте, так уж необходим он вам на данной странице? Может стоит вовсе от него отказаться? Речь идет о случаях очевидной корявости, но если "дефект" отображения не столь очевиден и имеет "косметический" характер, то не стоит "заморачиваться"...

Ведь посетителям вашего ресурса наверняка более важна сама информация, размещенная на сайте, чем тот факт, что какие-то надписи или изображения в одном из браузеров смещены на несколько пикселей влево (вправо и т.д.)? Большинство пользователей даже не заметит этого ...

Для периодической проверки можно пользоваться теми браузерами, которые установлены на вашем компьютере. У многих в наличии браузеры Mozilla Firefox и Opera, а Internet Explorer идет в составе операционной системы Windows. Этих трех браузеров вполне достаточно для начинающих вебмастеров.

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

Один из таких сервисов - это Browsershots.org. Скажу сразу, это бесплатное онлайн-приложение, позволяющее увидеть отображение своего сайта в различных браузерах и операционных системах, выбранных из списка предложенных. А список там немаленький, более 80 позиций.

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

Не стоит ради любопытства отмечать галочками весь список, достаточно выбрать наиболее распространенные браузеры, иначе рискуете провести немало времени в длительном ожидании результатов. После выбора нажимаете кнопку "Отправить" и ваш ресурс будет добавлен в текущую очередь.

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

Распоряжаться дальнейшей судьбой снимков вы можете как угодно, на это никаких запретов нет, т.е. копируйте и используйте в любых целях. Обработанные сайты с готовыми скриншотами находятся в разделе "Недавние".

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

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

Полной кроссбраузерности вам, господа вебмастера! С ув. Светлана (SvetLana_TSV)

Добро пожаловать в проект "Сайт с нуля" !

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

Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.

Всем желаю удачи и смелых воплощений идей на вашем сайте !

Пошаговое руководство для новичков по созданию,

раскрутке и монетизации собственного сайта.

WebPageMaker, Wordpress, Joomla - инструкции для

новичков по установке CMS и шаблонов к ним.

Проект для новичков

2010 - 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla - русские версии.

Автор и администратор данного проекта - SvetLana_TSV. Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.