Навигация по статье:
Сегодня поговорим об одном из очень важных требований к вёрстке. Речь пойдёт о кроссбраузерности.
Что такое кроссбраузерная вёрстка?
Кроссбраузерность вёрстки предполагает что вёрстка страницы должна одинаково выглядеть во всех популярных браузерах. А именно Opera, Mozilla Firefox, Google Chrome, Safari, Internet Explorer, Яндекс браузер и другие. При этом особое внимание необходимо уделить такому браузеру как Internet Explorer (IE). Дело в том, что этот браузер портит жизнь веб-разработчикам уже много лет подряд. Так как он не понимает многих современных HTML тегов, CSS стилей и у него специфический подход к отображению некоторых CSS свойств, отличающийся от всех остальных браузеров.
Мало того, разные версии этого браузера могут по разному отображать одну и ту же страницу. Тут конечно всё зависит от сложность вёрстки и наличия в ней сложных элементов дизайна.
Если Вы планируете заказать вёрстку сайта у верстальщика, то обязательно уточняйте момент кроссбраузерности. И указывайте начиная с какой версии браузера IE должна поддерживаться вёрстка. Это позволит Вам избежать недопонимания и проблем в будущем.
На сегодняшний день актуальными являются версии 8, 9, 10
Для того чтобы Вам сделали вёрстку, которая будет нормально отображаться в IE начиная с версии 7 и выше, обычно указывают так «поддержка IE7+»
Будьте готовы к тому что за создание вёрстки, которая будет поддерживаться начиная с IE7 у Вас могут просить дополнительную плату, так как если вёрстка сложная, то такое требование значительно увеличит объём работы верстальщику.
Как добиться кроссбраузерности?
Если же Вы взялись верстать сайт самостоятельно и хотите чтобы он был кроссбраузерным и нормально поддерживался IE разных версий, то вот Вам несколько советов:
- Постарайтесь не использовать теги HTML5 так как IE старых версий их не понимает и отображает непонятно что, а если используете, то не забудьте подключить специальный плагин, который научит IE понимать теги HTML5.
Вот ссылка на скачивание этого плагина: плагин HTML5 для Internet Explorer
- Избегайте использования псевдоклассов. Большую часть псевдоклассов CSS3 IE не поймёт и искусственно научить его понимать их (как в случае с тегами HTML5) у Вас не получится.
Особенно это касается псевдоклассов :first-child, :last-child и им подобных.
- Не используйте псевдоэлементы CSS3 (:before, :after). Причина та же что и в случае с псевдоклассами. Мало того, тут к «любимому» браузеру веб-разработчиков IE присоединяется браузер Safari, который используется на устройствах Apple, и у которого тоже проблемы с корректным отображением псевдоэлементов.
- Тестируйте вёрстку не отходя от кассы. Делайте кроссбраузерное тестирование не в конце вёрстки, а на каждом этапе. Например, сверстали шапку сайта – сразу проверили во всех браузерах, потом блок контента и так далее. Иначе в конце вёрстки Вас может ждать неприятный сюрприз, который Вам скорее всего преподнесёт всеми любимый Internet Explorer, а может и не только он.
- Табличная вёрстка в помощь. Если вёрстка не сложная и адаптивность не нужна, то есть смысл сделать её табличной. Так как это значительно упростит процесс создания кроссбраузерной вёрстки.
Более подробно о блочной и табличной вёрстках написано здесь. - Используйте css хаки для разных браузеров. Будьте готовы к тому, что разные браузеры по разному отображают шрифты и рассчитывают размеры блоков. Особенно это касается браузера Mozilla Firefox, который за счёт иного способа отображения шрифтов делает блоки на несколько пикселей шире чем другие браузеры.
Для решения данной проблемы используются CSS хаки, которые дают возможность прописать стили для каждого браузера по отдельности.
К их использованию следует прибегать только в крайнем случае, так как есть риск что в следующей версии браузера для которого вы прописываете CSS хак этот хак может не поддерживаться.
На этом у меня всё. Если у Вас есть вопросы или уточнения по данной статье я буду рада если Вы напишите их в комментариях.
Желаю Вам удачной вёрстки, качественных сайтов и высокой посещаемости.
До встречи в моих новых статьях.
С уважением Юлия Гусарь
Здравствуйте Юлия, подскажите пожалуйста если перед обновлением темы WordPress скопировать файл style ssс. Потом обновить тему и вставить скопированный файл style ssс.(вместо нового) Не будет ли потом проблем с темой так как тема обновлена, а файл style ssс со старой версии темы? (просто очень много уже изменений внесены в тему «»»шрифт, убраны ссылки с подвала, изменения по contact form 7 …..)
Здравствуйте, Вячеслав!
Каждая тема уникальна. При обновлении темы файл стилей может вообще существенно отличаться от предыдущей версии темы.
Поэтому сказать однозначно нельзя.
Советую вам полностью скопировать с сервера папку с Вашей темой и на всякий случай сделать резервную копию базы данных сайта, а только потом уже обновлять.
Дальше алгоритм Ваших действий будет примерно следующим:
1) После обновления можно будет попробовать просто заменить содержимое файла style.css со старого на новый (при этом у Вас обязательно должен быть резерв того файла стилей который Вы заменяете!). Если всё получилось — отлично! Если нет, то переходим к шагу 2
2) Снова заменяем файл стилей на тот, который использует обновлённая тема. А затем копируем содержимое файла стилей старой версии темы и просто вставляем в файл стилей новой версии обязательно в самом конце! Это позволит Вам сохранить стили новой темы и добавить к ней те изменения, которые были внесены позже.
Можно воспользоваться этим вариантом сразу но в этом случае у Вас получится очень длинный CSS файл.
А ещё лучше для обновляемых тем использовать дочерние темы. В этом случае при обновлении все внесённые в тему изменения будут сохраняться.
Если Вам интересна эта тема, то могу написать статью о том как это делать и снять небольшой видеоурок.
А вообще если нет острой необходимости в обновлении темы, то можно спокойно её оставить так как есть. Ничего страшного при этом не произойдёт.
Исключение составляют те случаи когда старая тема начинает конфликтовать с новыми версиями WordPress (что бывает крайне редко) или в новой версии есть интересный новый и нужный Вам функционал.
Надеюсь у Вас всё получится!