Объявление:
Наши контакты: +7 (928) 029 69 59, +7 (909) 493 69 59

Создание и продвижение сайтов в Пятигорске, Черкесске и Ставрополе WEB студия DigitalART предоставляет услуги по разработке и созданию сайтов в Черкесске, Пятигорске и Ставрополе. Так же Мы предоставляем услуги по поисковой оптимизации и продвижению сайтов Черкесска, Ставрополя и Пятигорска в поисковых системах. Более подробные условия заказа создания или продвижения сайта в Ставрополе, Пятигорске или Черкесске, Вы можете узнать по телефонам +7 (928) 029 69 59, +7 (909) 493 69 59 Разработка и раскрутка сайтов в Черкесске, Ставрополе и Пятигорске 

Последние работы по созданию и продвижению сайтов нашей WEB студии в Ставрополе, Черкесске и Пятигорске

Дизайн-студия DigitalART » WEB дизайн » Кроссбраузерность
20.12.2011

Кроссбраузерность

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

Кроссбраузерность. Правило хорошего тона HTML верстки.

Все пользователи сети интернет для просмотра страниц интернет сайтов используют специальные программы – браузеры. Браузер это программа, которая осуществляет связь пользователя с сервером. Браузер посылает запросы к серверу и получает ответы от него, и этот ответ преобразует в тот вид, который все привыкли называть интернет страницей со всем ее содержимым, текстом, изображениями, видео и т.д. Готовый вид страницы (расположение контента, размеры, цвет, шрифт и пр.) задается с помощью HTML верстки и каскадных таблиц стилей (CSS), которые были преобразованы из изображения нарисованным дизайнером, в вид понятный браузеру. Это и называется версткой. Простыми словами HTML верстка это расположение элементов интернет страницы, там, где они должны располагаться по замыслу дизайнера, который создавал макет будущей страницы.

Но каждый пользователь отдает предпочтение более привычному для себя браузеру. В наше время существует 5 самых популярных браузеров, о которых говорит статистика. Это Chrome, Safari, Opera, FireFox и Internet Explorer (IE). Эти браузеры той или иной версии чаще всего используют пользователи сети интернет, для просмотра «мировой паутины». Каждый из этих браузеров имеет свою функциональность и свои особенности отображения интернет страниц.

В большом разнообразии всех браузеров и их версий, и их особенностях отображения интернет страниц, появилось понятие коссбраузерность HTML верстки. Так что же такое кроссбраузерность?!

Кроссбраузерность – это свойство интернет страниц отображаться в разных версиях браузеров одинаково, без искажений и «расползания» элементов страницы, не зависимо от особенностей самого браузера.

Самым большим количеством этих особенностей обладают браузеры Internet Explorer от Microsoft, за что их и «не любят» большинство HTML верстальщиков, и придумывают для него разные способы приведения к правильному отображению страницы (данные способы верстальщики называют «костылями»). Лично наше мнение, что сверстать HTML страницу кроссбраузерной можно без применения этих самых «костылей», которые засоряют HTML код страницы.

Условные комментарии для Internet Explorer

<!--[if IE]>
Условный комментарий для всех версий IE
<![endif]-->

<!--[if IE 7]>
Условный комментарий для IE 7
<![endif]-->

<!--[if IE 6]>
Условный комментарий для IE 6
<![endif]-->

<!--[if IE 5]>
Условный комментарий для IE 5
<![endif]-->

<!--[if IE 5.5000]>
Условный комментарий для IE 5.5
<![endif]-->

<!--[if lte IE 6]>
Условный комментарий для IE младше 6 версии
<![endif]-->

<!--[if lt IE 7]>
Условный комментарий для IE младше 7 версии
<![endif]-->

<!--[if lt IE 8]>
Условный комментарий для IE младше 8 версии
<![endif]-->

<!--[if lt IE 9]>
Условный комментарий для IE младше 9 версии
<![endif]-->

<!--[if gte IE 6]>
Условный комментарий для IE старше 6 версии
<![endif]-->

<!--[if gte IE 7]>
Условный комментарий для IE старше 7 версии
<![endif]-->

<!--[if gte IE 8]>
Условный комментарий для IE старше 8 версии
<![endif]-->

Основные правила кроссбраузерной верстки:

Не секрет, то, что каждый браузер имеет свои стили оформления тех или иных элементов HTML кода, размер шрифта, размер отступов и т.д. что уже приведет к расползанию элементов страницы, и она не будет кроссбраузерной.
Отсюда можно сделать вывод, что все собственные стили разных браузеров нужно «отключить», точнее сбросить на одинаковые. Некоторые HTML верстальщики делают это непосредственно при задании CSS стилей к отдельным элементам, мы же используем другую практику. Мы сбрасываем все CSS стили браузеров в самом начале CSS документа. Для этого мы используем доработанный набор стилей CSS предложенный meyerweb.com

Сброс CSS стилей (Reset CSS)

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-weight:100;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a{
	text-decoration:none
}

Данный код, добавленный в стили CSS, сбрасывает все собственные стили браузеров на одинаковый. Это позволит сделать верстку HTML страницы идентичной во всех браузерах, не зависимо от их собственных стилей.

Валидность HTML документа

Второе правило кроссбраузерной HTML верстки это соблюдение стандартов HTML и XHTML, утвержденных W3C консорциумом. Каждый HTML документ (именно документ), имеет свой стандарт, и свои особенности написания.

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

Валидность HTML документа это соответствие утверждённым стандартам и нормам W3C консорциума.

По стандартам W3C каждый тег HTML документа должен иметь свою пару. Называются эти пары, открывающимся и закрывающимися тегами, но есть исключения из этого правила – это теги <img />, <br /> и т.д., эти теги не имеют закрывающейся пары.

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

Проверить валидность HTML документа можно на сайте W3C консорциума.

Пример валидного кода:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Валидный код</title>
</head>
<body>
<h1>Валидный код HTML</h1>
<p>
Данный HTML код соответствует стандартам XHTML 1.0 Strict и является валидным <br />
И содержит в себе как  парные (закрывающиеся) теги, так и не парный тег <br />
</p>
</body>
</html>

Пример не валидного кода:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<title>Не валидный код
<body>
<h1>Не валидный код HTML
<p></h1>
Данный HTML код не соответствует стандартам W3C и не является валидным <br />
</p>
</body>
</html>

Проверяем кроссбраузерность.

Существует много способов проверить кроссбраузерность верстаемого HTML документа, самый простой из них – это поставить все популярные браузеры себе на компьютер. Но как быть с разными версиями Internet Explorer?! — спросят многие.

Есть простой способ собрать все версии IE так сказать в одном флаконе. Вы можете скачать программу IE Tester, которая включает в себя все версии IE, начиная с IE 5.5.

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

Прокомментировать статью
Дата добавления: 20.12.2011
Эта запись опубликована 20.12.2011 в 01:10, автором DigitalART, и добавлена в рубрику WEB дизайн. Вы можете подписаться на обновления данной статьи по RSS 2.0

Об авторе

Студия WEB-Дизайна DigitalART предоставляет услуги по созданию и продвижению сайтов в поисковых системах в городе Черкесске и Карачаево-Черкесской Республике, а также в городе Ставрополе и Ставропольском крае.

WEB студия DigigtalART в интернете

6 комментариев на «Кроссбраузерность» Оставить свой

  1. Аркадий says:

    Интересная статья. А что Вы думаете о кроссбраузерности для IE6, стоит ли тратить время на поддержку кроссбраузерности в Internet Explorer 6?

    • Мы считаем, что надо частично ориентироваться и на IE6, и верстать, так что бы страница и в IE 6 «не расползлась». Но сам по себе этот браузер устарел, так как он не понимает прозрачность файлов .png, IE6 не понимает свойство «fixed» в CSS и т.д. Но эти все недостатки не мешают верстать так, что бы расположение элементов страницы оставалось таким же, как и в остальных браузерах. Мы используем такую практику: Мы предупреждаем пользователя с Internet Explorer 6 о том, что его браузер устарел, и предлагаем ссылки на обновления, но сайт остается полностью рабочим, но без поддержки прозрачности и всех остальных недостатков IE6. Более полную картину Вы можете увидеть, зайдя на наш сайт через IE6.

      • Lavon says:

        An asewnr from an expert! Thanks for contributing.

  2. Dayanara says:

    Grazi for mainkg it nice and EZ.

  3. djafar says:

    Хорошая, лаконичная статья.
    IETester был хорош, но увы не был избавлен от глюков и багов.
    К счастью, обнаружил для себя в IE9 Средства разработчика(аналог FireBug’а в FF и вызывается тоже по F12), в котором можно переключать режим отображения браузера с 7 версии включительно. Под проекты, в которых требуется поддержка IE6 стараюсь не подписываться.

    • Режим совместимости в IE 9 тоже наделен недостатками, и отображает не точно так же как и IE 7 (JavaScript и т.д.), а что использовать для тестирования кроссбраузерности IE – личное дело. IE Tester предоставляет возможность проверить кроссбраузерность сайта во всех популярных версиях IE, и самое главное он абсолютно бесплатен. И данный проект развивается, и все баги и ошибки в нем по возможности исправляются разработчиками.

Вверх