Поради щодо налагодження HTML і CSS

19

Від автора: Усунення проблем з HTML і CSS здатне сильно охолодити ваші творчі пориви, але вони неминучі при побудові майже будь-якого веб-проекту. Це сильно дратує при створенні дизайну сторінки, коли ви раптом помічаєте щось, не вирівняна по правому краю або неправильно забарвлене.

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

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

Перевірка синтаксичних помилок

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

Поради щодо налагодження HTML і CSS

Однак при роботі над великим проектом корисним може виявитися інструмент валідації. Ідеально для цього підходить сервіс перевірки розмітки 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.

Поради щодо налагодження HTML і CSS

Розширення Web Developer дозволяє розмічати елементи на підставі різних критеріїв, таких як тип відображення або елемента. На перший погляд це здається очевидним, але в складній мережі каскадних заяв можна легко перестати розуміти те, який елемент в кінцевому рахунку отримав якісь властивості і значення. Він виявиться корисним для грубої прикидки плаваючих елементів або змішаних типів відображення. До речі, про типи відображення…

Перевірте типи відображення

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

CSS працює найкраще, коли ви працюєте в стандартах, визначених W3C. Однак при такій кількості поєднань неможливо знати в точності, як окремий браузер обробить різні елементи зі змішаними режимами відображення. Змішувати типи відображення абсолютно нормально і непогано по суті, тільки про це треба пам’ятати при усуненні помилок. Якщо вам видалася можливість узгодити тип відображення елементів одного рівня, випробуйте його і подивіться, не вирішить вашу проблему.

Вимикайте стилі за допомогою інструменту Chrome DevTools

Якщо вам цікаво, як CSS впливає на певний елемент сторінки, то інструмент Chrome DevTools полегшить перехід будь-якої властивості. Просто клацніть правою кнопкою миші в веб-браузері Google Chrome і виберіть з контекстного меню Перегляд коду елемента (Inspect Element). Так викликається інструмент Chrome DevTools.

Поради щодо налагодження HTML і CSS

Праворуч на панелі елементів ви побачите закладку Стилі (Styles) з деякою кількістю CSS всередині. Вона показує, які заяви CSS були застосовані до вибраного елемента, а якщо над кожним властивість CSS провести мишею, то можна окремо зняти з них «галочки». Там, де властивість зазначено хрестиком, це зазвичай означає, що десь воно було скасовано. Для скасування властивості елемента може знадобитися зняти позначки з нього в кількох місцях.

Спочатку може здаватися трохи нудним, але насправді це – один з найшвидших способів відшукати стильові помилки, несумісні з написаним вами CSS (або щонайменше, з CSS, який ви вважаєте написаним). Інструмент годиться для того, щоб вирішити, чи є певна властивість CSS проблемним, і чи насправді застосований написаний вами CSS (що може бути проблемою особливостей селектора). Якщо CSS застосований, то можна обчислити, виробляє чи він взагалі який-небудь ефект.

Користуйтеся закладкою «computed» («Розрахунок») в інструменті Chrome DevTools

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

Поради щодо налагодження HTML і CSS

Якщо більш конкретно, то вона розбиває простір елемента на вміст, відступ, поле і рамку. Коли елементи не розташовані належним чином, це може виявитися неймовірно корисним, тому що можна буквально все розрахувати і бачити, який з елементів являє собою проблему. Наприклад, якщо у вас є три плаваючих елемента, зобов’язаних перебувати на одній лінії, а замість цього останній з них тяжіє до наступної лінії, то можна перевірити ширину батьківського контейнера, а потім порівняти його значення з шириною трьох елементів.

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

Налагодження – це химерна форма мистецтва, яке пізнається з досвідом, тому написати вичерпно керівництво майже неможливо. Тим не менш, якщо хочете знати про нього більше, пошукайте на сайті Treehouse такі курси, як Основи Chrome DevTools. І, звичайно, якщо бажаєте поділитися своїми порадами, то я хотів би побачити їх в розділі коментарів!