Откриване на проблеми с CSS

В настоящият пост ще представя един вариант за откриване на потенциални пропуски и проблемни зони в HTML документите ни, чрез използване на специални стилове за диагностика и откриване на проблемните елементи. Техниката е описана от Ерик Майер – един от водещите световни уеб разработчици, автор на някои от най-ценните книги в областта на уеб дизайна и ползваемостта.

Решението, което предлага той засяга някои по-рядко търсени грешки в сайтовете, които остават скрити от погледа на разработчика. Дори и с напълно валиден код на страницата има вероятност да са направени някои пропуски, които в определени моменти да се отразят на цялостната структура на документа. Tехниките работят под Firefox, Opera и Safari, а за Internet Explorer 7 има добавен допълнителен фикс, но едва ли някой ще го използва при положение, че разполага с някой от другите браузъри.

За прилагането на тази техника се използва специално създадения за случая CSS файл който се добавя в хедъра на HTML документа след останалите стилове, които ползваме. Файлът може да бъде свален от тук icon link CSS файл за по-добрите браузъри и от тук icon link CSS файл за лошия Internet Explorer. А какъв е резултата може да видите тук icon link демо (за по-добрите браузъри) и тук icon link демо2 (за IE7).

Кратко пояснение:

Използват се стилове, които в зависимост от състоянието на дадения елемент или негов атрибут, го изобразяват с различни стойности на някои негови CSS свойства /предимно рамка (border) и фон (background)/.

diagnostic of image

css diagnostics

Основните цели, за които се използва тази техника са:

  • Откриване на елементи с празни стойности за class и id (<span class=““ id=““>);
  • Хипервръзки (<а>), на които е забравено да се добави стойност на атрибута href, или пък е със стойност“#“, която обикновено използваме в процеса на разработка и сме пропуснали да актуализираме(<a href=“#“>). В случая синтаксиса ще е правилен, но няма да получим резултата, който сме заложили в следствие на действие от страна на посетителите.
  • Линкове без атрибут „title“ или с празни стойности на атрибута title (<a href title=““ … >).
  • Откриване на графични елементи без атрибути alt и title или с празни стойности на атрибутите alt и title (<img src=“xxx.png“ alt=““ title=““/>).

Оригинална статия и допълнителна информация:
icon link http://meyerweb.com/eric/tools/css/diagnostics/index.html
icon link http://meyerweb.com/eric/thoughts/2007/09/07/diagnostic-styling/
icon link http://24ways.org/2007/diagnostic-styling

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *