Opera Dragonfly

09.10.2011

Влад Мержевич

Этот инструмент веб-разработчика встроен в браузер Opera и не требует отдельной установки. Вызывается через меню Инструменты > Дополнительно > Opera Dragonfly или комбинацией клавиш Ctrl+Shift+I. На рис. 7.57 приведён интерфейс Dragonfly.

Интерфейс Opera Dragonfly

Рис. 7.57. Интерфейс Opera Dragonfly

Стрекоза, как переводится Dragonfly, по своим возможностям уступает Firebug и веб-инспектору Safari, но необходим, когда требуется отладить код под Оперу. Чтобы не повторяться, изучим Dragonfly на каком-нибудь конкретном примере и посмотрим на его возможности.

В примере 7.9 используется таблица с фоновыми рисунками для создания декоративной линии на всю ширину окна. Код HTML и CSS проверен, не содержит ошибок, но браузеры отображают пример неоднозначно.

Пример 7.9. Таблица с рисунками

XHTML 1.0CSS 2.1IE 7IE 8+CrOpSaFx

<!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 фон таблицы отображается не на всю ширину (рис. 7.58), из-за чего теряется всяческий смысл затеи.

Отображение таблицы в Опере

Рис. 7.58. Отображение таблицы в Опере

Открываем Dragonfly и проверяем, чтобы две кнопки на панели подсвечены:

— найти элемент на странице по щелчку мыши.

— подсветить элемент при наведении на него курсора.

Теперь выделяем таблицу, судя по подсвечивающемуся контуру, она занимает всю ширину страницы, это же подтверждает вкладка разметка, где приведена ширина и высота ячейки topright (рис. 7.59).

Блочная модель

Рис. 7.59. Блочная модель

Похоже, проблема не в таблице, а в центральной ячейке center. Смотрим вкладку Разметка, так и есть, все размеры по нулям. Поэтому добавляем для этой ячейки ширину 100%, но при этом исчезнет правый фон нашей конструкции, так что таблицу надо ограничить через table-layout со значением fixed. В примере 7.10 показан стиль, который необходимо включить.

Пример 7.10. Добавление в стили

table { table-layout: fixed; }
.center { width: 100%; }

Проверяем в других браузерах. Аллилуйя, всё работает!

Opera