Кроссбраузерная верстка в современных условиях — общее понимание необходимого принципа

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

Именно поэтому я дам определение данному термину и подробно опишу, что это такое, объясню, почему возникает проблема разного отображения одного и того же сайта на html и css в различных браузерах и дам несколько полезных советов. Давайте начнем разбор полетов!

Кроссбраузерность, покажи свое лицо!

Все из вас знают английское название термина «кроссбраузерность»: cross-browser. В дословном переводе это означает: «работающий во всех браузерах». Вот по сути и была названа главная цель кроссбраузерности: способствовать идентичному отображению веб-сайта в любом существующем браузере.

Это означает, что независимо от того, в каком ППО для просмотра html-страничек вы откроете сервис, его стилевая разметка не должна измениться.

Почему же все такие проблемные?

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

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

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

Второй проблемой некорректного отображения объектов на страницах веб-сервисов могут стать браузерные стандартные значения. Так, в каждом продукте, будь то Chrome, Safari, Opera или другие, для большинства свойств и атрибутов установлены некие значения по умолчанию. В качестве примера можно назвать разные отступы от края экрана для тега body.

И к третьей проблеме можно отнести в некотором роде халатность самих разработчиков. Что я подразумеваю под этим? Всего лишь несоблюдение стандартизированных правил, которые были установлены специальной организацией W3C (официальный сайт расположен по ссылке [urlspan] https://www.w3.org[/urlspan]).

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

Рецепты для решения проблем с идентичностью отображения

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

1. Запомните, верстать юзабилити сайта нужно сразу для всех указанных заказчиком браузеров. Невозможно написать ресурс только, например, для Chrome и не столкнуться впоследствии с проблемами в других браузерах. Вы потратите больше времени на исправление кода. Чтоб этого избежать поэтапно проверяйте проделанную работу сразу во всех браузерах. Для этого существуют специальные программы-помощники:
   - для IE был разработан Explorer Tester, в котором можно проверять сразу все версии,
   - для Opera стоит использовать официальный сайт http://www.opera.com/dragonfly/,
   - для названного выше Google Chrome приложение Firebug (http://getfirebug.com/releases/lite/chrome/),
   - для Mozilla Firefox — [urlspan]https://addons.mozilla.org/ru/firefox/addon/firebug/[/urlspan].

   При этом есть свои определенные хитрости. Каждый раз тестить сервис во всех указанных системах затратно по времени. Для этого начните верстать сайт для Firefox или Chrome (однако я бы советовал первый), периодически проверяя его в IE седьмой версии (она самая проблемная).

   Реже стоит проверять в IE девятой версии, Safari и Opera. Ну и напоследок в Firefox или Chrome в зависимости от того, что вы выбрали вначале.

   Почему же так? Движок Gecko близок к оперовскому и WebKit-у, который используют продукты Google и Apple. Большинство фейлов случается в старых версиях Explorer, поэтому внешний вид веб-сервиса в них нужно проверять чаще всего.

2. Со второй выше описанной проблемой поможет справится ручной сброс параметров css или CSS Reset. Если вы хотите подробнее ознакомиться с названным подходом – что я вам настоятельно рекомендую, – то прочтите один из предыдущих уроков, касающийся очистки css-стилей. Благодаря данному подходу базовые значения в ППО для просмотра веб-страниц будут обнуляться.
3. Чтобы справиться с приведением программного кода к утвержденным стандартам, я советую вам перейти по ссылке на сайт W3C и внимательно ознакомиться с документацией. Данная организация также создала свой собственный валидатор для проверки приложений в онлайн-режиме тремя способами: по ссылке на ресурс, по загруженному файлу и непосредственно сам код, внесенный в диалоговое окно. Кстати, ранее этой теме я посвятил целую статью. Так что можете детальнее познакомиться с программами-валидаторами и узнать, для чего они нужны. Конечно фанатично увлекаться подгонкой кода под стандарты не надо, стоит обратить внимание только на важные правила.
4. Не поленитесь установить наиболее популярные браузеры последних версий у себя на компьютере для оптимизации своей работы.

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

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

А я прощаюсь с вами. Обязательно подписывайтесь на мой канал, ведь далее я расскажу вам об адаптивной верстке! И не забудьте поделиться ссылкой на мой блог с друзьями. Пока-пока!

С уважением, Роман Чуешов