Банк различий браузеров

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

Часто возникает вопрос: Какой браузер лучше? Попробуем получить ответ на него.

Лично я делю браузеры на две группы:
1. Нормальные браузеры;
2. Internet Explorer, он же IE, он же осел/ослик.

Проблема в том, что по статистике львиная доля пользователей интернета пользуется разными версиями IE. Конкретнее: 15% юзеров пользуются IE8, 12.5% – IE7 и 10% – IE6 (по последним данным от SpyLog). Итого больше трети “населения” рунета пользуется браузерами, которые мешают как верстальщикам, так и самим пользователям.

Вторая проблема – в нежелании обновлять браузер до последней версии. По статистике все того же SpyLog около 47% пользователей браузера Opera и около 45% пользователей FireFox используют последнюю версию браузера.

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

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

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

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

Поддержка “новых технологий” в новых версиях браузеров – тоже важная причина. Сейчас получает все большее распространение CSS3, но по причине того, что поддерживаются они (css – это таблицы, потому они :) ) только последними браузерами, использование их в творениях верстальщиках находится под сомнением. С одной стороны, СSS3 позволяет существенно уменьшать вес страницы при создании разнообразных эффектов (Таких как тени, свечение, скругление краев). Ранее для них было необходимо использовать кучу графики, при этом требовалось часто использовать не один десяток строк стилей для эффектов. В CSS3 же это делается парой строчек кода. Помимо этого они позволяют делать анимированные эффекты на страницах различного плана (Тут я предлагаю погуглить).
С другой стороны, для пользователей старых браузеров и IE всей этой красоты не будет. Хотя, если постараться, то можно сделать такой дизайн, который несмотря на отсутствие эффектов будет тоже красиво смотреться, при этом в браузерах с поддержкой CSS3 он будет смотреться еще лучше. Но это уже дело вкуса и профессионализма.

Третья причина – быстродействие. Чем новее браузер, тем быстрее он обрабатывает графику, выполняет скрипты и другие задачи.

Согласитесь, все как бы намекает на то, что нужно срочно обновить все браузеры.

Теперь пару слов о популярности и качестве браузеров.

Internet Explorer, на мой взгляд, так популярен в рунете лишь из-за того, что Windows – самая распространенная у нас операционная система, а ослик идет с ней в комплекте. Большинство юзеров просто не хочет/не умеет ставить другие браузеры или вовсе не знает о их существовании.

После IE по популярности идут FireFox, Opera, а дальше с огромным отрывом Google Chrome и Safari.
Последние два имеют низкое распространение в связи со сравнительной новизной.
CSS3 полностью понимается последними версиями FF, Хрома и Сафари. Также сейчас существует пре-альфа Opera 10.5 (последняя готовая сборка – 10.10), в которой также поддерживается CSS3.

По быстродействию, качеству и стабильности с огромным отрывом лидирует Google Chrome. После него идут Safari и FireFox, далее Opera, а замыкают ряды браузеров унылые версии IE.
Кстати говоря, Пре-альфа оперы 10.5 почти не уступает Хрому в показателях, поэтому жду релиза данной версии с нетерпением.

Какие можно сделать выводы из всего вышесказанного?

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

Во-вторых, выбирайте браузер с умом. Максимальной производительности и качества отображения сайта можно добиться от Google Chrome. Для тех, кому не интересно что-то новое, могу посоветовать ждать релиза Opera 10.5, либо пользоваться FireFox. Safari – тоже неплохой браузер, он первый стал отображать максимально правильно страницы, написанные с использованием CSS3. Остальные подтягивались за ним. 

Различия между IE6, IE7 и IE8

До сих пор в просторах интернета широко распространен Internet Explorer 6, 7 и 8 версий.

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

Конечно, благодаря различным JavaScript-библиотекам, кроссбраузерное тестирование сейчас стало настолько хорошим, насколько данная ситуация вообще позволяет это сделать. Также есть возможность сделать скриншоты в разных браузерах, IE Collection и тому подобное. Необходимостью кроссбраузерного тестирования является результат рендеринга трех использующихся версий IE.

Чтобы успешно заниматься версткой сайтов, веб-разработчики должны понять различия в обработке CSS между IE6, IE7 и IE8. Здесь собраны краткие описания для свойств, поддерживаемых одним или двумя браузерами, но не всеми тремя сразу. Здесь не рассматриваются свойства, не выполняемые ни одним из IE, а также специфичные только им. Таким образом, акцент стоит именно на различиях между браузерами майкрософтовского семейства, а не на недостатке поддержки ими тех или иных CSS-свойств.

Селекторы и наследование

Дочерние селекторы

Пример:

body>p { color: #fff; }

Описание:
Дочерний селектор выбирает все элементы, которые являются непосредственно дочерними для указанного родителя. В указанном выше примере body является родителем, а p — дочерним. (От перев. Для IE7+ нужно также указывать верный Doctype для правильной работы.)
Поддержка: IE7, IE8

Ошибки: В IE7 дочерний селектор не будет работать, если между ним и родительским элементом будет HTML-комментарий.

Связные классы

Пример: .class1.class2.class3 { background: #fff; } Описание: Связные классы используются, когда один элемент имеет несколько классов, например так: <dіv> <р>Какой-то текст.</р> </dіv>
Поддержка: IE7, IE8 Ошибки: IE6 это свойство не поддерживает, потому что он применяет это CSS-свойство для элементов последнего класса (От перев. в примере класс class3), а не только для тех, которые отмечены сразу всеми классами.
Селекторы с атрибутами

Пример:

a[href] {
color: #0f0;
}



Описание:
Это свойство позволяет элементу быть отмеченным только в том случае, если у него присутствует указанный аттрибут. Например, в вышеприведенном примере отмечены будут все ссылки с аттрибутом href, тогда как для всех остальных данное свойство применено не будет.
Поддержка: IE7, IE8

Смежные соседние селекторы

Пример:

h1+p {
color: #f00;
}



Описание:
Этот селектор определяет свойства элементов, смежных и следующих сразу определенным селектором. Например, в коде ниже

<Н1>Заголовок</Н1> <р>Какой-нибудь текст.</р> <р>Какой-нибудь другой текст.</р> свойства CSS будут применены только к первому абзацу. Поддержка: IE7, IE8 Ошибки: В IE7 дочерний селектор не будет работать, если между ним и родительским элементом будет HTML-комментарий.
Общие соседние селекторы

Пример:
h1~p {
color: #f00;
}

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

Псевдоклассы и псевдоэлементы

Дочерние селекторы после псевдокласса :hover

Пример:
a:hover span {
color: #0f0;
}

Описание:
Элемент может быть отмечен как дочерний аналогично любому другому селектору. В приведенном примере элемент span внутри ссылки будет менять цвет текста на зеленый.
Поддержка: IE7, IE8

Связные псевдоклассы :hover

Пример:
a:first-child:hover {
color: #0f0;
}

Описание:
Псевдокласс может быть связан с соседним элементом. В примере выше, отмечается каждая ссылка, являющаяся первым дочерним элементом своего родителя и применяющая пседокласс :hover к нему.
Поддержка: IE7, IE8

Связные псевдоклассы :hover

Пример:
a:first-child:hover {
color: #0f0;
}

Описание:
Псевдокласс может быть связан с соседним элементом. В примере выше, отмечается каждая ссылка, являющаяся первым дочерним элементом своего родителя и применяющая пседокласс :hover к нему. (От перев. Не понял, прошу поправить, если неверно.)
Поддержка: IE7, IE8

Псевдокласс :hover для других селекторов

Пример:
div:hover {
color: #f00;
}

Описание:
Псевдокласс :hover можно применять для любых селекторов, а не только для a.
Поддержка: IE7, IE8

Псевдокласс :first-child

Пример:
div li:first-child {
background: blue;
}

Описание:
Определяет свойства для первичных дочерних селекторов выбранного класса.
Поддержка: IE7, IE8
Ошибки: В IE7 селектор не будет работать, если между родительским и дочерним элементами будет HTML-комментарий.

Псевдокласс :focus

Пример:
a:focus {
border: solid 1px red;
}

Описание:
Определяет свойства для элементов в фокусе.
Поддержка: IE8

Псевдоклассы :before и :after

Пример:
#box:before {
content: "Этот текст расположен перед блоком.";
}

#box:after {
content: «Этот текст расположен после блока.»;
}

Описание:
Генерирует текст, располагаемый до и после данного блока.
Поддержка: IE8

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

Вам надо войти, чтобы написать комментарий.