Веб-инспектор Safari
В браузер Safari включено несколько средств для разработчика, позволяющих упростить создание и отладку сайта. К примеру, через Safari можно просматривать, как сайт будет выглядеть на iPhone и iPad. Для этого всего лишь требуется указать соответствующий пользовательский агент через меню Разработка (рис. 1.52).
Рис. 1.52. Выбор пользовательского агента
Также в Safari имеется прекрасный инструмент для отладки HTML и CSS кода под названием вебинспектор. Для его вызова выберите меню Разработка > Показать веб-инспектор или воспользуйтесь комбинацией клавиш
Ctrl
+
Alt
+
I
. Если у вас нет этого пункта меню, зайдите в настройки браузера, выберите панель Дополнения и поставьте галочку в пункте «Показать меню Разработка в строке меню».
Веб-инспектор выводит список ресурсов, найденных на веб-странице — документы, таблицы стилей, изображения и скрипты. Позволяет увидеть и найти код веб-страницы и стилевые свойства элементов. Интерфейс веб-инспектора продемонстрирован на рис. 1.53. Из всего богатства возможностей программы для вёрстки нас интересует только меню Элементы.
Рис. 1.53. Веб-инспектор
По своему интерфейсу веб-инспектор напоминает Firebug — в левой панели показан HTML-код
текущего документа, в правой панели — стиль выбранного элемента. Любой элемент на странице можно выбирать не только через код, но и с помощью инструмента 
он позволяет выбирать элемент простым щелчком по нему.
Набор стилей в инспекторе представлен в виде раскрывающегося списка, это позволяет компактно включить большой объём информации. Первый пункт «Вычисленный стиль» (рис. 1.54) содержит стиль элемента, который устанавливает браузер на основе собственного стиля, учёта наследования и добавленных свойств.
Рис. 1.54. Вычисленный стиль
Эти стили приведены для информации, менять что-либо в этом пункте нельзя. По цвету, если он представлен, можно щёлкнуть и изменить его формат представления на шестнадцатеричный, RGB или
HSL.
Следующий пункт «Атрибут стиля» показывает встроенный стиль, т.е. тот, который задан через атрибут style. Пункт будет пустовать, если такого стиля нет.
Нижележащая группа пунктов показывает стиль текущего элемента и взаимосвязанных с ним элементов (рис. 1.55).
Рис. 1.55. Стиль элемента
Любое свойство в этом списке можно отредактировать, щёлкнув по нему. Универсальные свойства вроде padding или margin выводятся в виде раскрывающегося списка, в котором перечислены отдельные свойства, такие как padding-left, padding-top и др. Напротив каждого свойства стоит галочка, позволяющая быстро отключать свойство. Добавить новое правило можно с помощью меню скрытым за шестерёнкой в правом верхнем углу панели (рис. 1.56).
Рис. 1.56. Меню для добавления новых правил
Пункт «Размеры» демонстрирует блочную модель элемента — ширину и высоту элементов, а также значения отступов, границ, полей и позиционирования (рис. 1.57).
Рис. 1.57. Размеры элемента
Только надо учитывать, что отступами здесь называются свойства padding, а полями margin, т.е. наоборот, а не в привычном понимании.
Данный пункт можно применять не только для определения нужных значений, но и для их установки. Достаточно дважды щёлкнуть по нужному значению и ввести число. Указывать единицы измерения не нужно, по умолчанию принимаются пикселы.
Opera Dragonfly
Этот инструмент веб-разработчика встроен в браузер Opera и не требует отдельной установки. Вызывается через меню Инструменты > Дополнительно > Opera Dragonfly или комбинацией клавиш
Ctrl+Shift+I. На рис. 1.58 приведён интерфейс Dragonfly.
Рис. 1.58. Интерфейс Opera Dragonfly
Стрекоза, как переводится Dragonfly, по своим возможностям уступает Firebug и веб-инспектору Safari, но необходим, когда требуется отладить код под Оперу. Чтобы не повторяться, изучим Dragonfly на каком-нибудь конкретном примере и посмотрим на его возможности.
В примере 10.9 используется таблица с фоновыми рисунками для создания декоративной линии на всю ширину окна. Код HTML и CSS проверен, не содержит ошибок, но браузеры отображают пример неоднозначно.
Пример 10.9. Таблица с рисунками XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Таблица</title>
<style type="text/css">
table { border-collapse: collapse; width: 100%; } table td { border-spacing: 0; padding: 0; }
.top { height: 20px; background: url(images/top.gif) repeat-x; }
.topright { width: 30px;
background: url(images/topright.gif) no-repeat; }
.center { background: #c5b39f; }
.centerright { width: 30px;
background: url(images/center.gif) no-repeat; }
.bottom { height: 20px;
background: url(images/bottom.gif) repeat-x; }
.bottomright { width:30px;
}background: url(images/bottomright.gif) no-repeat;
</style>
</head>
<body>
<table class="tbl">
<tr>
<td class="top"></td><td class="topright"></td>
</tr>
<tr>
<td class="center"></td><td class="centerright"></td>
</tr>
<tr>
<td class="bottom"></td><td class="bottomright"></td>
</tr>
</table>
</body>
</html>
В браузере Opera фон таблицы отображается не на всю ширину (рис. 1.59), из-за чего теряется всяческий смысл затеи.
Рис. 1.59. Отображение таблицы в Опере
Открываем Dragonfly и проверяем, чтобы две кнопки на панели подсвечены:
— найти элемент на странице по щелчку мыши.
— подсветить элемент при наведении на него курсора.
Теперь выделяем таблицу, судя по подсвечивающемуся контуру, она занимает всю ширину страницы, это же подтверждает вкладка разметка, где приведена ширина и высота ячейки topright (рис. 10.60).
Рис. 10.60. Блочная модель
Похоже, проблема не в таблице, а в центральной ячейке center. Смотрим вкладку Разметка, так и есть, все размеры по нулям. Поэтому добавляем для этой ячейки ширину 100%, но при этом исчезнет правый фон нашей конструкции, так что таблицу надо ограничить через table-layout со значением fixed.
Добавить во вкладке Стили новое свойство нельзя, но можно пойти на хитрость и отредактировать элемент, добавив ему style с заданными свойствами. В примере 10.10 показан стиль, который необходимо включить.
Пример 10.10. Добавление в стили
table { table-layout: fixed; }
.center { width: 100%; }
Проверяем в других браузерах. Аллилуйя, всё работает!