В процессе разработки сайта мы использовали один браузер Google Сhrome. Вариант серверной части проекта работает и имеет внешний вид в соответствии с задуманным вариантом.
Проблема заключается в том, что разные браузеры могут по-разному отображать один и тот же сайт!
Программный код PHP выполняется на веб-сервере, а браузер, как клиентское приложение, получает результат его деятельности. Поэтому работа PHP-кода, так же как и запросы к базе данных MySQLне зависят от браузера пользователя. Совершенно иначе дело обстоит в HTML, CSS, JavaScript, Flash–все эти составляющие передаются пользователю. Браузер - это специальное приложение,которое "воспроизводит" полученный HTML, CSS, JavaScript, Flash. Стоит отметить,что Flash-браузер воспроизводит при помощи виртуальной машины Flash Player.Разные браузеры создаются различными компаниями –поэтому есть отличия в их работе.Технологии HTML, CSS, JavaScriptразвиваются и новые возможности не могут поддерживаться старыми версиями браузеров. Кроме того,любое приложение может содержать недоработки или ошибки. Адаптация сайта к правильной работе в различных браузерах называется кросс-браузерной отладкой. Перед размещением сайта на веб-сервере и открытии его для всех пользователей - необходимо провести первичное тестирование. Разработка нашего сайта велась под операционной системойWindows. В настоящий момент большинство пользователей используют браузеры операционной системы Windows.
Задачи первичного тестирования заключаются в следующем:
1. Проверить сайт как минимум в пяти основных браузерах. Это браузеры:
Internet Explorer,Google Chrome, Opera, Mozilla Firefox, AppleSafari.
2. Посмотреть сайт на различных разрешениях экрана. Для этого необходимо изменять текущее разрешение экрана.
Начнем с проверки в разных браузерах. Для этого нужно установить отсутствующие из указанных пяти браузеров. Обратите внимание, что браузер Internet Explorerдолжен быть установлен по умолчанию в операционной системе Windows.
После установки браузеров нужно их все открыть и в адресной строке ввести http://puh- для запуска нашего проекта. Проверка требует переходов по всем разделам сайта и анализа отклонений от необходимого внешнего вида и работы сайта.
Первая проблема, которая выявилась –это отступы в виде "щелей" сверху и снизу от верхнего горизонтального меню (см. рис. 12.1):
Рис. 12.1
При подобных отступах проблема может быть из-за ненулевых значений свойств CSS: margin, padding для каких-нибудь тегов.
Но мы уже обнулили эти свойства для всех тегов, устанавливая нужные значения только при необходимости!
/* Обнуление отступов и полей для всех тегов*/
body, table, tr, td, div, ul, li, img, a, h1, th, input, form
{
margin: 0px;
padding: 0px;
}
Проблема может возникнуть при ошибочных значениях ширины и высоты в атрибутах тегов или свойствахCSS. Например,если изображение с тегом imgне помещается в ячейку таблицы, то она растянется до размеров изображения:
Есть еще один момент -теги имеют выравнивание по вертикали.Выравнивание может быть по верхней,средней или нижней части. За это отвечает свойство vertical-align. Разные браузеры могут использовать разные значения по умолчанию. Для решения проблемы нужно в верхней части файлаpuh.css, где обнуляются margin иpadding, добавить вертикальное выравнивание для всех тегов – по верхней части:
/* Обнуление отступов и полей для всех тегов*/
/* Выравнивание всех тегов по верхней части*/
body, table, tr, td, div, ul, li, img, a, h1, th, input, form
{
margin: 0px;
padding: 0px;
/*Вертикальное выравнивание по верхней части*/
vertical-align: top;
}
В этом случае все теги веб-страницы начнут прижиматься к верхней части браузера. Сохраним проект и посмотрим на получившийся результат в браузере. Отступы должны исчезнуть (см. рис. 12.2):
Рис. 12.2
Важно!!!Не забывайте после изменения CSS и сохранения изменений в проекте – выполнять обновление загрузки CSS в браузере нажатием клавиши F5.
Вторая проблема выявилась в браузере Internet Explorer –это разрыв белого фона над заголовком центральной части страницы (см. рис. 12.3)
Рис. 12.3
Проблема проявилась только в браузерах Internet Explorer. При помощи JavaScript и HTMLможно определить вид и версию браузера. Некоторые сайты блокируют вход с использованием старых версий браузеров Internet Explorer6и Internet Explorer 7. В нашем случае этот вариант не подойдет, потому что проблема возникает во всех версиях Internet Explorer.
Внимание!!!Сайты с высокой посещаемостью необходимо адаптировать для максимального количества браузеров. К таким сайтам относятся популярные социальные сети. Для отдельных сайтов можно сделать ограничение для поддерживаемых браузеров.
Для браузера Internet Explorerимеется специальная конструкция, которая размещается внутри тегов head:
<!--[if IE]> < ![endif]-->
IE –это сокращение отInternet Explorer. Если браузер IE, то выполнится фрагмент кода, вставленного внутрь этой конструкции. Возможен вариант этой конструкции только для конкретной версии Internet Explorer:
<!--[if IE 6]> < ![endif]-->
В данном случае конструкция выполнится для Internet Explorer 6. Но наша проблема проявляется во всех IE, поэтому воспользуемся вариантом без указания отдельной версии. Внутри такой конструкции подключается дополнительный CSS-файл, который исправляет проблему.
Добавим к проекту новыйCSS-файл с названием ie.css (см. рис.12.4):
Рис. 12.4
Файл добавляется аналогично файлу puh.css. После подключения файла puh.cssдобавим специальную конструкцию для Internet Explorer и внутри нее подключим файл ie.css:
При использовании браузера Internet Explorer кроме основного файла-CSSбудет подключаться дополнительный CSS-файл. Обратите внимание, что файл для IEбудет подключаться именно после основногоCSS-файла! В этом случае он будет заменять (перекрывать)некоторые свойства.
Фон центральной белой части строится при помощи трех изображений: верхнее, высотой 10 пикселей,многократно повторяющееся среднее и нижнее, высотой 10пикселей. Эти изображения вложены в блоки div с идентификаторами: sheet1, sheet2, sheet3. В файлеpuh.cssдля них прописаны следующие свойства:
/*Верхняя часть поля с белым фоном*/
#sheet1
{
width: 550px;
height: 10px;
background: url('img/sheet1.png') left top no-repeat;
}
/*Средняя часть поля с белым фоном*/
#sheet2
{
width: 550px;
height: auto;
background: url('img/sheet2.png') left top repeat-y;
padding: 0px 10px;
}
/*Нижняя часть поля с белым фоном*/
#sheet3
{
width: 550px;
height: 10px;
background: url('img/sheet3.png') left top no-repeat;
}
Чтобы избавиться от нашей проблемы, уберем верхний и нижний блоки. Для этого в файле ie.css запишем:
@CHARSET "UTF-8";
/*Верхняя и нижняя часть поля с белым фоном*/
#sheet1, #sheet3
{
width: 0px;
height: 0px;
background: none;
}
Мы сделали ширину и высоту нулевыми, а фон убрали. Теперь эти блоки не отобразятся на веб-странице.
Но эти фрагменты создавали тонкую рамку сверху и снизу,поэтому добавим верхнюю и нижнюю рамку к центральному блоку. Для этого в файлеie.css, в самом низу запишем:
/*Средняя часть поля с белым фоном*/
#sheet2
{
border-top: #000066 1px solid;
border-bottom: #000066 1px solid;
}
Мы создали верхнюю и нижнюю рамку толщиной в 1пиксель темно-синего цвета,со сплошной линией. Сохраним проект и посмотрим на результат в браузере Internet Explorer. Проблема решена (см. рис. 12.5):
Рис. 12.5
В самом низу разделовГлавная иЗаказать –нижняя часть сайта стала слишком плотно прижиматься к тексту (см. рис. 12.6)и таблице(см. рис. 12.7):
Рис. 12.6
Рис. 12.7
Для исправления этой ситуации добавим тег перевода строки<br/> в самую нижнюю часть кода этих разделов. Для этого перейдем в PHPMyAdmin, в таблицу razmetka. К разметке строк с id=6и id=10–в самом низу добавим тег <br/> (см. рис. 12.8):
Рис. 12.8
Посмотрим на получившийся результат в браузере Internet Explorer -теперь все в порядке!
Говоря о первичном кросс-браузерном тестировании, сайта мы упоминали о необходимости проверить сайт при различных разрешениях экрана. Если перейти на Рабочий столи в свободном от ярлыков месте нажать правую клавишу мыши, то откроется меню (см. рис.12.9):
Рис. 12.9
Через это меню можно перейти к изменению текущего разрешения экрана (см. рис. 12.10):
Рис. 12.10
Устанавливая различные разрешения экрана, посмотрим наш сайт.
Начнем с разрешения800x600.Появляются горизонтальные линии прокрутки и сайт не умещается по ширине. Сдвигая ползунки прокрутки по горизонтали и вертикали –нужно убедиться, что все отображается правильно.
После первичного тестирования, сайт необходимо перенести на веб-сервер, чтобы он стал доступен с других компьютеров. После переноса сайта нужно выполнить вторичное тестирование.
Задачи вторичного тестирования заключается в следующем:
1. Посмотреть сайт как минимум в двух других операционных системах для настольных компьютеров: Linux, Mac OS. Один и тот же браузер, напримерApple Safari, может по-разному работать для разных операционных систем.
2. Проверить сайт с мобильных телефонов и планшетных устройств.
3. Протестировать сайт с других типов компьютеров: ноутбук, нетбук.
4. Посмотреть сайт на других типах мониторов.
5. Проверить сайт на разных версиях браузеров. При проверке сайта на последней версии браузера нельзя быть уверенным, что сайт правильно отображается на более старых версиях.
Только после вторичного тестирования можно быть уверенным, что сайт будет качественно отображаться для различных пользователей. Как вспомогательный инструмент вторичного тестирования можно использовать специальные сервисы проверки сайтов. Один из популярных и бесплатных сервисов находится по адресу: http://browsershots.org.На этом сайте нужно зарегистрироваться,выбрать необходимые операционные системы и версии браузеров, ввести адрес сайта для проверки. Через некоторое время можно будет получить скриншоты. По полученным скриншотам можно увидеть некоторые проблемы.
Важно!!!Язык JavaScript также не всегда одинаково работает в разных браузерах!
