Съвети за отстраняване на грешки в 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 ви позволява да маркирате елементи въз основа на различни критерии, като например вид на дисплея или тип елемент. На пръв поглед това изглежда очевидно, но в сложна мрежа от каскадни твърдения е лесно да се спре разбирането кой елемент в крайна сметка е получил кои свойства и стойности. Това ще бъде полезно за грубо монтиране на плаващи елементи или смесени видове дисплеи. Говорейки за типове дисплеи ...