Кроссбраузерность сайтов — одинаковое отображение во всех браузерах или разное?
Что выбрать?

 

Создавая сайт borisov-quality.com, естественно, я задумываюсь над тем, чтобы сайт отображался одинаково во всех браузерах.

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

Ну а как же быть с MS Internet Explorer? Попробуем разобраться...

 

Современные браузеры Google ChromeMozilla FireFoxOperaSafari, Internet Explorer 10

В первую очередь я делаю ставку на визуальный эффект сайта borisov-quality.com. Почти все элементы сайта анимированны. Об этом я писал в предыдущем посте.

Отображение сайта во всех выше обозначенных браузерах почти одинаковое. Есть правда исключения. Например, тег <audio> и, соответственно, его отображение в виде плеера у каждого браузера своё. Отличие заключается в размере аудио-плеера. Но и оно незначительное. Поэтому на внешний вид сайта в целом размер плеера особо не влияет.

Все тени элементов, созданные при помощи CSS3, одинаково анимированы при помощи JavaScript и jQuery, и одинаково отображаются и меняют своё положение во всех браузерах.

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

Отдельно отмечу браузер Safari 4. Для него отображается версия сайта без начальной анимации. Об этом чуть ниже.

 

Браузер MS Internet Explorer 9

Что ж. Казалось бы, вот Microsoft сделал браузер, который может конкурировать с другими современными браузерами. И поддержка CSS3, и HTML5. Да вот загвоздка... Делали, делали да не доделали. Размеры плеера тега <audio> настолько отличаются в большую сторону, что выходят за рамки дозволенного на сайте. Такое положение дел не совпадает с каким-либо логичным объяснением. НУ НАФИГА?

Далее. Для анимации я использую jQuery-плагин jQuery.Transit, который не работает в Internet Explorer вплоть до версии 9 включительно. Из-за этого начальная анимация сайта фактически отсутствует. Т.е. вместо плавных переходов происходят перескоки. Ну да ладно. С этим я смирился. Надеюсь, веб-разработчики (или те, кто ими хочет стать) сайтов используют правильные браузеры.

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

 

Браузеры MS Internet Explorer 7, 8

А вот с этим браузерами приходится немножко «попотеть». Ни 7-й, ни 8-й не поддерживаются плагином jQuery.Transit. Поэтому принято решение отображение сайта сделать без начальной анимации. И при загрузке сайта в одном из этих браузеров, посетитель увидит сразу знак качества, меню, форму подписки, социальные кнопки, кнопки «Комментарии» и «Проекты» и лампу.

Анимация тоже не такая, как в правильных браузерах. Точнее, её нет, т.к. эти браузеры... Правильно! Не поддерживаются плагином jQuery.Transit.

Кроссбраузерность сайта в данном случае «низкая», если можно так выразиться. Т.е. только внешний вид развёрнутого сайта — точно такой же. А вот круглой кнопки Вкл./Выкл., анимации, CSS3-теней — нет.

Вообще, откровенно говоря, в своё время, когда вышел IE5.5Microsoft был «на коне» со своими filter-ами. Они первые тогда предложили прозрачность, тени, градиент и многое другое. Тогда не было ещё стандарта CSS3. Но и веб-мастера не спешили делать сайты с использованием фильтров, т.к. существовали и другие браузеры, типа Netscape Navigator, которые не поддерживали эти фильтры. Есть и другая причина: сами фильтры в свою очередь съедали очень много ресурсов ПЭВМ, что, естественно, сказывалось на общей производительности не только браузера, но и компьютера в целом.

Хоть сейчас фильтры и поддерживаются даже в новой версии IE9, к примеру, я их применяю очень редко. Лучше уж использовать PIE (Progressive Internet Explorer) — специальный javascript-плагин для CSS3PIE делает Internet Explorer 6-9 способными обрабатывать наиболее полезные функции CSS3. Такие как border-radiusbox-shadowlinear-gradient.

Так что нынче фильтры уже почти не нужны. Особенно с выходом IE10. И, вскоре, тратить время на кроссбраузерность придётся меньше, чем сейчас.

 

Две версии сайта: для современных и старых браузеров

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

Во-первых, при помощи JavaScript я определяю браузер и его версию. Для этого использую jQuery-функций  $.browser и метод навигатора. Функцию $.browser.version для определения версии браузера я не стал использовать, поскольку версия определяется не верно, в частности у FireFox. Из-за неверно определённой версии выполнение следующих скриптов не имело смысла.

Метод навигатора. Среди объектов javascript есть объект navigator, у которого доступен метод UserAgent. Этот метод вернёт строку, в которой содержится информация о браузере, его версии, ядре, операционной системе, в которой он запущен, а так же некоторых агентах и службах, встроенных в него.

Во-вторых, после определения браузера и его версии, в зависимости от результата, выполняется одна из функций:

  • Для современных браузеров (Chrome (webkit), Firefox (mozilla), Opera, Safari (webkit), IE9 (msie), IE10 (msie)). В результате выполнения функции загружается полноценная версия сайта borisov-quality.com со всем функционалом (начальная анимация, кнопки, звуки, тени и др.);
  • Для устаревших браузеров (IE6, IE7, IE8, Safari 4 и ниже, все остальные браузеры, которые не поддерживаются плагином jQuery.Transit). В результате выполнения функции загружается версия сайта с немного сокращённым функционалом (нет начальной анимации, CSS3-теней, звуков). В зависимости от браузера, что-то есть на сайте, а чего-то нет. Например в Safari 4 — есть тени и анимация объектов, но нет звуков. В IE7, IE8 — нет вообще чего бы то ни было сверх простой навигации и юзабилити. А для IE6 сайт предлагает скачать более новый современный браузер, указывая ссылки на закачку.

 

Быстродействие и производительность браузеров

JavaScript, как известно выполняется браузером. И браузер выполняет скрипты настолько быстро и правильно насколько позволяет процессор и оперативная память компьютера.

Для новых мощных ПК в разных браузерах сайт borisov-quality.com работает одинаково быстро, и скрипты выполняются слажено.

Но вот возьмём, к примеру, неттоп с Atom-ным процессором и одним-двумя гигами ОЗУ, и, если Вы откроете сайт в каком-либо браузере, то сразу заметите, как тормозит анимация. Особенно это заметно в Firefox, Opera и IE.

Такое поведение характерно не только для сайта borisov-quality.com (и кроссбраузерность здесь не причем), а для всех сайтов, если их открывать в выше обозначенных браузерах. Да и сами браузеры съедают памяти столько и тормозят так, что «Пойдём-ка, покурим-ка...» (© Масяня).

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

Об этом на сайте borisov-quality.com также выводится сообщение сразу после загрузки.

 

Итак, с кроссбраузерностью и производительностью сайта разобрались. Идём дальше...

Оцените материал:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звёзд   (голосов: 3, средняя оценка: 5,00 из 5, сумма: 15)

Loading...

Понравилось? Поделитесь с друзьями:





Другие материалы по теме:

Борисов - Качество
HTML и CSS - бесплатные видеокурсы
«HTML» и «CSS»
Изучите Видеокурсы
Бесплатно!
Станьте хозяином своих сайтов прямо сейчас! Введите Ваше Имя и Ваш E-Mail:

Ваш E-Mail в безопасности