Съвети за отстраняване на грешки в HTML и CSS

След като знаете точно как да се справите с рендирането на проблеми и да ги разрешите бързо, изграждането на уебсайтове става много по-приятно изживяване. Всеки проблем, с който се сблъскате, ще бъде уникален по някакъв начин, но повечето от тях могат да бъдат решени чрез придържане към няколко основни "контролни точки за коректност", които могат да ви помогнат да работите с кода си, а не да се борите с него.

Стъпките по-долу не са в определен ред. Процесът на отстраняване на грешки е отчасти техническа и отчасти интуитивна форма на изкуство, която научавате като правите. Докато правите повече проекти, ще откриете, че техниките за отстраняване на неизправности стават по-разбираеми в различни ситуации.

Проверка за синтаксични грешки

Практически курс за оформление на адаптивен уебсайт от нулата!

Вземете курс и научете как да подреждате модерни уебсайтове в HTML5 и CSS3

Въпреки това, когато работите по голям проект, инструмент за валидиране може да бъде полезен. Услугата за валидиране на маркиране W3C и валидаторът W3C CSS са идеални за това, тъй като предупрежденията за грешки ще ви покажат къде трябва да бъде проверен кодът ви. Понякога резултатите са трудни за четене, тъй като тези валидатори не са специално проектирани за подробно валидиране. Алтернатива е използването на инструмент за свързване като CSS Lint, който може да осигури анализ на вашия код и да ви помогне да намерите грешки.

Ако се интересувате от научаването на повече техники за решаване на HTML и CSS проблеми, прочетете последната стъпка от моя курс „Как да направя уебсайт“, озаглавен „Отстраняване на проблеми с HTML и CSS“.

Предотвратяване на проблеми с различни браузъри

Повечето проблеми с показването на информация в HTML и CSS започват с проблеми с различни браузъри. Сайтът изглежда страхотно в един браузър и лош в друг. Това е почти постоянен проблем във всеки уеб проект, но голям брой проблеми с различни браузъри могат да бъдат сведени до минимум чрез предотвратяването им от самото начало.

Първо, уверете се, че използвате добро CSS нулиране като нормализиране. Това ще „изглади“ конфликтите между браузърите и ще ги накара да се държат по-последователно. Дори ако правите бърз уебсайт с една страница и не използвате CSS рамката, пак трябва да приложите нулиране.

Второ, проверете и се уверете, че HTML елементите и CSS свойствата, които прилагате, действително се поддържат. HTML и CSS непрекъснато се развиват и доставчиците на браузъри правят всичко възможно, за да бъдат в крак с най-новите стандарти. Ако не сте сигурни в поддръжката на конкретен елемент или свойство, потърсете подробната му класификация на caniuse.com.

Маркирайте елементи с Web Developer

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

Разширението Web Developer ви позволява да маркирате елементи въз основа на различни критерии, като например вид на дисплея или тип елемент. На пръв поглед това изглежда очевидно, но в сложна мрежа от каскадни твърдения е лесно да се спре разбирането кой елемент в крайна сметка е получил кои свойства и стойности. Това ще бъде полезно за грубо монтиране на плаващи елементи или смесени видове дисплеи. Говорейки за типове дисплеи ...

Практически курс за оформление на адаптивен уебсайт от нулата!

Вземете курс и научете как да подреждате модерни уебсайтове в HTML5 и CSS3

Проверете видовете дисплеи

Всеки елемент на страница има тип на показване като вграден, блок, вграден блок, таблица, гъвкав, никакъв и много други. Вижте страницата за показване на MDN документация за пълен списък (дори ако сте сигурни, че ги знаете, пак ще бъдете изненадани).

CSS работи най-добре, когато работите в рамките на стандартите, определени от W3C. С толкова много комбинации обаче е невъзможно да се знае как точно един браузър ще се справи с различни елементи със смесени режими на показване. Смесването на типове дисплеи е напълно добре и всъщност е нещо добро, просто имайте това предвид при отстраняване на грешки. Ако имате възможност да се споразумеете за вида на братя и сестри, моля, опитайте и вижте дали това ще реши проблема ви.

Деактивирайте стиловете с Chrome DevTools

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

От дясната страна на Кутията с инструменти ще видите раздел Стилове с малко CSS вътре. Той ви показва кои CSS изрази са приложени към избрания елемент и ако задържите курсора на мишката върху всяко свойство на CSS, можете да ги махнете поотделно. Когато даден имот е маркиран с кръст, това обикновено означава, че някъде е отменен. За да премахнете отметката от свойството на даден елемент, може да се наложи да го премахнете на няколко места.

В началото може да изглежда малко досадно, но всъщност това е един от най-бързите начини за намиране на грешки в стила, които са несъвместими с CSS, който пишете (или поне CSS, който смятате, че сте написали). Инструментът е добър за решаване дали дадено свойство на CSS е проблематично и дали всъщност се прилага CSS, който сте написали (което може да е проблем със спецификите на селектора). Ако се приложи CSS, тогава все още можете да разберете дали има някакъв ефект изобщо.

Използвайте раздела „изчислено“ в Chrome DevTools

В лентата с инструменти на Chrome DevTools, точно до раздела Стилове, има още една, наречена Computed. Използвам го много, защото ви показва как точно браузърът изчислява вашите стилове. Когато работите по големи проекти, това е много важно за решаване на каскадни проблеми, проблеми със специфичността на селектора и други.
В горната част на раздела Изчисляване има много важна схема, която всеки уеб специалист трябва да използва. Това е презентация на кутиен модел, която показва колко място заема елемент в пиксели.

По-конкретно, той разделя пространството на елемента на съдържание, подложка, поле и граница. Когато елементите не са разположени правилно, това може да бъде изключително полезно, защото можете буквално да изчислите всичко и да видите кой елемент е проблемът. Например, ако имате три плаващи елемента, които трябва да са на един ред, а вместо това последният гравитира към следващия ред, тогава можете да проверите ширината на родителския контейнер и след това да сравните стойността му с ширината на три елемента.

Знам повече

Автор: Ник петит

Редакционен персонал: Команда Webformyself.

Практически курс за оформление на адаптивен уебсайт от нулата!

Вземете курс и научете как да подреждате модерни уебсайтове в HTML5 и CSS3