Кросссбраузерная верстка

Жирный шрифт и курсив в html
Дата: 2012-03-01
Автор: admin

Как добавить сайт в поисковики
Дата: 2010-11-26
Автор: Олег Каминский

Кроссбраузерная верстка. Полезные советы
Дата: 2011-08-31
Автор: Олег Каминский

Как вставить видео с youtube на сайт
Дата: 2011-02-16
Автор: Олег Каминский

Как раскрутить интернет-магазин бесплатно
Дата: 2012-01-16
Автор: Олег Каминский

Кроссбраузерная верстка. Полезные советы



Кроссбраузерная версткаИ так, в данной статье я попытаюсь объяснить, что такое кроссбраузерная верстка, в чем ее важность, и дам несколько советов по поводу того, как можно научиться верстать кроссбраузерно.

На сегодняшний день существует достаточное количество разнообразных браузеров: это и Internet Explorer, и Mozilla FireFox, и Opera, и Safari, и Chrome. Кроме того у каждого из этих браузеров, как и у любого программного обеспечения, есть много версий. То есть одна версия браузера устаревает, выходит следующая, в которую внедряются современные возможности и т.п., но об этом чуть подробнее дальше.

Так вот, один и тот же сайт, с тем же самым шаблоном, стилями и движком может отображаться в разных браузерах по-разному. То есть вы верстали макет сайта и проверяли его, используя лишь  Mozilla FireFox, после решили запустить и проверить в Internet Explorer, а там – кошмар: блоки разъехались, меню отображается некорректно и все формы не на своем месте.

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

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

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

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

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

В-третьих, это выходки Internet Explorer, который играет по своим каким-то правилам. Лично я до сих пор не могу понять, почему людей никак не стащить с этого браузера. Особенно весело было раньше, когда многие пользовались IE6. Этот браузер половину правил не понимает, прозрачности картинок не воспроизводит и т.д. Вот и приходилось и приходится верстальщикам использовать всякие хаки, чтобы обойти IE.

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

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

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

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 14px;
font-family: inherit;
vertical-align: top;
background: transparent;
font: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
background-color : white;
}

2. Необходимо чтобы на вашем компьютере были установлены все самые популярные браузеры. Желательно также установить все версии IE, начиная от 6. Установить на один компьютер множество версий IE не получится просто так: необходимо либо ставить их на разные операционный системы по одной версии, либо пользоваться виртуальной машиной.

Можно так же воспользоваться программой IE Tester, которая позволяет проверять сайт во всем множестве версий IE. Лично я пользуюсь, но некоторым не нравится, говорят, что некие из проектов эта программа отображает некорректно.

3. Необходимо определить для себя стратегию верстки. Как вам будет удобнее: верстать сразу весь сайт под один браузер, а после погонять его под остальные либо же верстать постепенно и каждый элемент проверять во всех браузерах, при необходимости корректируя.

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

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

https://addons.mozil.../addon/firebug/ - плагин для Мозиллы;
http://getfirebug.co...es/lite/chrome/ - плагин для Хрома;
http://www.opera.com/dragonfly/  - плагин для Оперы.
http://www.microsoft.com/download/en/details.aspx?id=18359  - Internet Explorer Developer Toolbar. Это надстройка для IE.

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



Поделитесь статьёй с друзьями:


Автор: Олег Каминский| Дата: 2011-08-31| Просмотров:(44911)| Комментов:(6)



Комментарии:

Автор: Георгий
Дата: (2014-02-14)

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

Автор: СМ
Дата: (2014-02-11)

Хоть бы орфографию проверил =)

Автор: genyfild
Дата: (2012-04-25)

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

Автор: cyberlex404
Дата: (2012-03-05)

Да пускай хоть 1000 выдаёт W3 - главное что бы пользователи видели сайт везде одинаково и правильно!

Автор: Admin
Дата: (2012-01-23)

to Norb. Вы за своими ошибками следите, а про все свои я и сам знаю - никаких последствий они за собой не влекут.

Автор: Norb
Дата: (2012-01-23)

Да у вас ошибок 53 w3 выдает!

Добавить Ваш комментарий:

Введите сумму чисел с картинки: