ZODIOS.net

Поиск и устранение ошибок верстки

09.4.2008  –  Рубрика: Мысли вслух

Ошибка верстки – критическое несоответствие результата верстки исходному дизайн-макету, или неадекватное поведение элементов html-документа. Я думаю, найдется мало верстальщиков, которым не приходилось тратить время и нервы на поиск неведомой ему ошибки верстки. Для того чтоб эффективно найти и исправить ошибку необходимо два условия: инструмент для поиска ошибок(о них можно узнать из статьи «Джентльменский набор верстальщика») и навыки поиска ошибок. О этапах поиска ошибок будет речь в этой заметке.

Факторы вызывающие ошибки:

Человеческие факторы:

• Фактические ошибки(пропущенный закрывающий тег, нарушение вложенности)
• Ошибки синтаксиса (опечатки, помарки)
• Плохое знание матчасти (неправильное использование элементов)

Особенности браузеров

• (например свойство hasLayout в IE)

Ошибки поддержки браузерами стандартов

• (псевдокласс :hover в IE6 применим только к ссылкам)

Алгоритм поиска ошибок

1. Идентификация проблемы – понять к чему приводит ошибка, и на какие элементы влияет.
2. Исключение ошибок валидаци – добиться валидности документа. Таким образом, устраняются ошибки нарушения вложенности или находятся незакрытые теги.
3. Локализация проблемы – поиск участка кода, который вызывает ошибку. Самый эффективный метод для этого – метод «Разделения кода». Делим код на структурные части и удаляем нижнюю половину всего кода (предварительно сделав копию кода). Дальше смотрим, соответствует ли результат ожиданиям. Если ошибка осталась, значит, дело в верхней части кода, а не в нижней. После этого опять делим оставшуюся часть кода на половину и смотрим где ошибка в той, что удалили, или в той, что осталась. Таким образом, находим непосредственный участок кода, который вызывает ошибку. Другой способ состоит в добавлении ярких цветов фона структурным элементам. Таким образом, можно понять с каким блоком что происходит или из какого блока что «вылазит».
4. Очистка кода – если предыдущий этап не дела результата переходим к созданию чистого макета с нуля. Убираем все декоративные визуальные элементы и оставляем только структурные и переходим к предыдущему пункту.
5. Звонок другу – поиск собеседника, который поможет решить проблему, поиск в Google, тематических ресурсах.

Как устранить ошибку и не сойти с ума

• Убедится, что правишь «ту страницу». Многие спотыкаются на том, что редактируют одну страницу, а ищут результат на другой, или правят не тот файл стилей.
• Убедится, что правильно подключен файл стилей.
• Не забывать очищать кэш.
• Писать чистый и аккуратный код, который хорошо структурирован.
• При внесении изменений не совершать больше одного изменения за раз.
• Выкинуть из головы весь лишний мусор, который мешает работать.
• Предварительно выспаться, покушать, отдохнуть.

Враг не пройдет

• Пишите чистый код
• «Фиксируйте» собственный опыт преодоления ошибок, делитесь им.
• Держите руку на пульсе. Следите за тематическими блогам, сайтами
• Будьте бдительны на минном поле, или «Не спите за рулем».

Да прибудет с вами сила и терпенье в борьбе с незнаниям и браузерами. Заметка написана с использованием материалов доклада Наталии Арефьевой «Debugging верстки».