Курси веброзробки

15. Налагодження CSS

Прокрутити вниз

Іноді при написанні коду CSS у вас може виникнути проблема, коли CSS не виконує функції, які ви очікуєте від нього. Наприклад, ви очікуєте, що певний селектор повинен відповідати елементу, але нічого не відбувається. Ця стаття має на меті допомогти вам розібратися, як налагодити CSS проблеми та покаже вам як DevTools (інструменти розробника), включені у всі сучасні браузери, можуть допомогти розібратися з тим, що відбувається. Курси веброзробки – серія безплатних статей, які мають на меті дати основи програмування. Якщо ви хочете навчитися програмування, ви можете пройти курси HTML/CSS.

Курси веброзробки: налагодження проблем CSS

DevTools – це програми, які дозволяють створювати, тестувати та налагоджувати (debug) програмне забезпечення. Сучасні браузери мають вбудовані інструменти розробника, що дають змогу переглянути вихідний код сайту. Може допомогти при розв’язанні проблем CSS, отже, коли ви опинитеся в ситуації, де CSS поводиться не так, як ви хотіли, що слід зробити, що б це вирішити? Далі ми описали деякі кроки, які можуть допомогти.

Зробіть крок назад

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

Чи важливі ваші HTML і CSS?

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

  • CSS Validator
  • HTML validator

Чи підтримуються властивість та значення браузером у якому ви тестуєте?

Браузери просто ігнорують CSS що вони не розуміють. Якщо властивість або значення, яке ви використовуєте, не підтримується браузером, в якому ви тестуєте, то нічого не “зламається”, крім того, що той CSS не буде застосований. Зазвичай DevTools виділяє непідтримувані властивості та значення будь-яким чином. На скріншоті нижче браузер не підтримує значення “підсвічування” (subgrid) grid-template-columns.

Чи не перевизначається ваш CSS ще чимось?

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

Зробіть скорочений контрольний приклад проблеми

Якщо проблема не вирішена кроками, описаними вище, тоді вам потрібно буде зробити своєрідне розслідування. Найкраще, що можна зробити в цьому випадку, це створити щось відоме як скорочений контрольний приклад. Можливість “зменшити проблему” – дійсно корисна навичка. Він допоможе вам знайти проблеми як у вашому власному коді, так і у коді ваших колег, а також дозволить вам повідомляти про помилки та більш ефективно звертатися за допомогою.

Скорочений контрольний приклад – це приклад коду, який демонструє проблему найпростішим способом з видаленням незв’язаного навколишнього контенту та стилю. Це часто означатиме видалення проблемного коду з вашого макета (layout), щоб зробити невеликий приклад, який показує лише цей код або функцію.

Створення скороченого контрольного прикладу:

  1. Якщо ваша розмітка генерується динамічно, наприклад, через CMS, зробіть статичну версію виводу, яка показує проблему. Сайти обміну кодами, як CodePen, є корисними для розміщення скорочених контрольних прикладів, оскільки вони доступні онлайн, і ви легко можете поділитися з колегами. Ви можете почати переглядати сторінку у View Source і скопіювати HTML у CodePen, потім взяти релевантний CSS та JavaScript і включити їх також. Після цього ви можете перевірити чи очевидна проблема.
  2. Якщо видалення JavaScript не розв’язуває проблему, не вмикайте JavaScript. Якщо ж видалення JavaScript усуває проблему, тоді видаліть стільки JavaScript, скільки зможете, залишаючи все, що викликає проблему.
  3. Видаліть весь HTML, який не впливає на проблему. Видаліть компоненти або навіть основні елементи макету. Знову ж таки постарайтеся досягти найменшої кількості коду, який все ще показує проблему.
  4. Видаліть весь CSS, який не впливає на проблему.

У процесі ви можете виявити, що завдає проблеми або, хоча б, зможете включати або вимикати її шляхом видалення чогось конкретного. Варто додавати якісь коментарі до вашого коду під час вивчення речей. Курси веброзробки – читайте більше про програмування на інших уроках.
Щоб перевірити свої знання – перевірити знання ви можете пройшовши тест на початку статті. Якщо ви не розібралися, що саме не так у вашому коді – запрошуємо вас на повноцінний курс програмування HTML/CSS.