Советы по отладке HTML и CSS

Советы по отладке HTML и CSS

От автора: Устранение проблем с HTML и CSS способно сильно охладить ваши творческие порывы, но они неизбежны при построении почти любого веб-проекта. Это сильно раздражает при создании дизайна страницы, когда вы вдруг замечаете что-то, не выровненное по правому краю или неправильно окрашенное.

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

Описанные ниже шаги не имеют определенного порядка. Процесс отладки – это частично технический, а частично интуитивный вид искусства, учатся которому на практике. Сделав побольше проектов, вы поймете, что методы устранения ошибок становятся более понятными в различных ситуациях.

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

Несмотря на отсутствие определенного порядка, в первую очередь мои отладочные инстинкты обычно советуют мне начать с синтаксиса. Я спрашиваю себя: «Я что, пропустил точку с запятой? Забыл закрыть элемент HTML?». Неважно, сколько у вас опыта, вы все равно делаете опечатки и ошибки. Зачастую можно просто переключиться на текстовый редактор, посмотреть последние написанные строки и исправить ошибку.

Однако при работе над большим проектом полезным может оказаться инструмент валидации. Идеально для этого подходит сервис проверки разметки W3C и валидатор CSS от W3C, так как предупреждения об ошибке покажут те места, где код следует проверить. Иногда результаты сложно прочесть, так как эти валидаторы не созданы специально для подробной проверки. Альтернативный вариант – использование инструмента линтинга, подобного CSS Lint, который способен предоставить анализ вашего кода и помочь отыскать ошибки.

Если вы заинтересованы в изучении дополнительных приемов решения проблем с HTML и CSS, прочтите последний этап моего курса «Как сделать веб-сайт» под названием Решение проблем HTML и CSS.

Предупредите проблемы кроссбраузерности

Большая часть проблем отображения информации в HTML и CSS начинается с вопросов кроссбраузерности. Сайт отлично смотрится в одном браузере и плохо в другом. Это почти постоянная проблема в любом веб-проекте, но большое количество вопросов кроссбраузерности можно минимизировать, с самого начала предупредив их появление.

Во-первых, убедитесь, что пользуетесь хорошим сбросом настроек CSS, таким как normalize. Он «сгладит» противоречия между браузерами и заставит их вести себя в более единообразном стиле. Даже если вы делаете одностраничный веб-сайт «на скорую руку» и не пользуетесь каркасом CSS, все равно нужно применять сброс.

Во-вторых, проверьте и убедитесь, что применяемые вами элементы HTML и свойства CSS поддерживаются на самом деле. HTML и CSS постоянно развиваются, и браузерные вендоры делают все возможное для того, чтобы угнаться за последними стандартами. Если не уверены в поддержке определенного элемента или свойства, поищите его подробную классификацию на caniuse.com.

Разметьте элементы с помощью Web Developer

При отладке может пригодиться привычка размечать элементы страницы для того, чтобы выяснить, как они будут отображаться относительно друг друга. Можно написать CSS и сделать это самому, но лучше воспользоваться расширением браузера для Chrome, Firefox и Opera Web Developer.

Расширение Web Developer позволяет размечать элементы на основании различных критериев, таких как тип отображения или элемента. На первый взгляд это кажется очевидным, но в сложной сети каскадных заявлений можно легко перестать понимать то, какой элемент в конечном счете получил какие свойства и значения. Он окажется полезен для грубой прикидки плавающих элементов или смешанных типов отображения. Кстати, о типах отображения…

Проверьте типы отображения

У каждого элемент страницы имеется тип отображения, такой как inline, block, inline-block, table, flex, none и множество прочих. Полный список смотрите на странице отображения документации MDN (даже если вы уверены, что знаете их все, все равно удивитесь).

CSS работает лучше всего, когда вы работаете в стандартах, определенных W3C. Однако при таком количестве сочетаний невозможно знать в точности, как отдельный браузер обработает различные элементы со смешанными режимами отображения. Смешивать типы отображения совершенно нормально и неплохо по сути, только об этом нужно помнить при устранении ошибок. Если вам выдалась возможность согласовать тип отображения элементов одного уровня, по опробуйте его и посмотрите, не решит ли это вашу проблему.

Отключайте стили с помощью инструмента Chrome DevTools

Если вам интересно, как CSS влияет на определенный элемент страницы, то инструмент Chrome DevTools облегчит переключение любого свойства. Просто щелкните правой кнопкой мыши в веб-браузере Google Chrome и выберите из контекстного меню Просмотр кода элемента (Inspect Element). Так вызывается инструмент Chrome DevTools.

Справа на панели элементов вы увидите закладку Стили (Styles) с некоторым количеством CSS внутри. Она показывает, какие заявления CSS были применены к выбранному элементу, а если над каждым свойством CSS провести мышью, то можно по отдельности снять с них «галочки». Там, где свойство отмечено крестиком, это обычно значит, что где-то оно было отменено. Для отмены свойства элемента может понадобиться снять отметки с него в нескольких местах.

Поначалу может казаться немного утомительным, но на самом деле это – один из быстрейших способов отыскать стилевые ошибки, несовместимые с написанным вами CSS (или по меньшей мере, с CSS, который вы считаете написанным). Инструмент годится для того, чтобы решить, является ли определенное свойство CSS проблемным, и на самом ли деле применен написанный вами CSS (что может быть проблемой особенностей селектора). Если CSS применен, то можно еще вычислить, производит ли он вообще какой-либо эффект.

Пользуйтесь закладкой «computed» («Расчет») в инструменте Chrome DevTools

В панели элементов Chrome DevTools, прямо рядом с закладкой Стили есть еще одна – с названием Расчет (Computed). Я часто ею пользуюсь, потому что она показывает, как в точности браузер вычисляет ваши стили. При работе над большими проектами это очень существенно для решения проблем каскадирования, проблем селекторной специфичности и прочих.
Вверху закладки Расчет есть очень важная схема, которой следует пользоваться каждому веб-профессионалу. Это презентация блочной модели, которая показывает, сколько места занимает элемент в пикселях.

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

Знайте больше

Отладка – это мудреная форма искусства, которое познается с опытом, поэтому написать исчерпывающе руководство почти невозможно. Тем не менее, если хотите знать о нем больше, поищите на сайте Treehouse такие курсы, как Основы Chrome DevTools. И, конечно, если желаете поделиться своими советами, то я хотел бы увидеть их в разделе комментариев!

Автор: Nick Pettit

Источник: //blog.teamtreehouse.com/

Редакция: Команда webformyself.

Метки: , ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии (1)