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

Ако имате съмнения, валидирайте

Когато в края на процеса по проектирането на сайта, започнете да откривате грешките си в програмния код, или т.нар. дебъгване, може от самото начало да си спестите много главоболия като просто валидирате своя код. Ако разполагате с неправилно форматиран XHTML/CSS, това може да е причина за многото проблеми по лейаута.

Нека CSS е разработен и тестван в най-новият и модерен браузер, но направете това преди да го тествате в другите, а не след това.
Когато създавате сайт и го тествате в развален браузер, кодът ви ще започне да разчита на погрешната интерпретация именно на този браузер. И когато дойде време да го тествате в друг, който е много по-добър, правилно поддържащ стандартите, може да се разочаровате от факта, че визуализира кода ви не, както сте очаквали. По-добре за вас ще бъде да започнете с перфектен код и после да добавяте хакове за по-развалените браузери. Днес синоним на най-използваните и модерни браузери са Mozilla, Safari, Opera.

Проверка на това, дали желаният от вас ефект наистина го има

Има редица специфични за даден браузер добавки към CSS, които обаче не са част от официалната специифкация. Ако например искате да ползвате filter или да форматирате цвета на скролбара, трябва да сте наясно, че така създадения код, няма да е достъпен за друг браузер освен за IE. Казва ли ви валидаторът, че кодът, който ползвате не е дефиниран, най-вероятно той е специфичен за някой браузер и няма да работи правилно при останалите.

Не разчитайте на min-width в IE.

Защото този браузер не го поддържа. До известна степен, обаче третира width като min-width и, ако приложите малко трикове, може да постигнете същия краен резултат.
Съмнявате ли се, намалявайте широчините.
Поради грешки в закръглянето, понякога сметки от сорта на 50% + 50% може да ви дадат резултат от 100.1%. А това може да доведе до срив в лейаута на някои браузери. Опитайте се да сбутате нещата на по-малко проценти, например от 50 на 49 или дори на 49.9%.

Когато съдържанието не се показва правилно в IE.

Най-вероятно сте се натъкнали на бъга Peekaboo. Това става ясно още повече, когато съдържанието се покаже, минавайки с курсора върху някоя връзка.
Внимавайте при оформянето на връзките, особено ако използвате котви.
Ползвайки класическа котва в кода си (<a name=”anchor”>), може да ви направи впечатление, че за нея също така работят и :hover и :active псевдо-класовете. За да заобиколите това, или ще трябва да сложите id на котвите, или да се оформят с малко по-странен синтаксис, като  :link:hover, :link:active.
Запомнете: Link, Visited, Hover, Active.
При указване на псевдо-класове за връзките винаги ползвайте следния ред: Link, Visited, Hover, Active. Всяка друга подобна подредба няма да е така добре работеща, като тази. Може да ползвате и :focus, обмислете го добре, при него последователността е Link, Visited, Hover, Focus, Active.
Запомнете: Top, Right, Bottom, Left (Горе, Дясно, Долу, Ляво).
Конкретна последователност по посока на часовниковата стрелка, предполага съкратеният запис на размерите на очертанията, полетата и отстъпите. Започва се от горе, дясно, долу и ляво. И ето какъв резултат се получава от код margin: 0 1px 3px 5px;  липса на поле отгоре, 1px поле отдясно и т.н.

За стойности, различни от нула винаги указвайте мерна единица.

CSS има изискване да се указват мерните единици за всяка измерима характеристика като например шрифт, полета и размери. Изключение прави само line-height, за което не се изисква мерна единица. За да не се получават изненади, в повечето случаи неприятни, при визуализация в различните браузери, е добре да слагате мерни единици на всякакви стойности, различни от нула. Нулата обаче все пак си е нула, без значение дали става въпрос за пиксели, em или нещо друго. Не е необходима никаква мерна единица за нея.

Пример: padding: 0 2px 0 1em.

Направете тестове при различи размери на шрифта.

Съвременните браузери като Мозила или Опера ви дават възможност да правите промени в размера на шрифта, без значение от мерната единица, в която е зададен. Има разбира се потребители с различни настройки на шрифта, но се опитайте да нагодите шрифта към широкия кръг потребители.

Направете регистъра между буквите HTML и CSS еднакъв.

Има браузери, които различават главни от малки букви. Използването на някои видове класове като ‘homePage’ е наред, но само ако сте постоянни при изписването на класовете. Ако приложите и стил към примерния клас може да причини проблеми при някои по-строги браузери като Мозила.
Направете тестове със стилове в кода на страницата, а когато публикувате в интернет, нека CSS файла да е отделен.
Ако в процеса на уеб дизайн работата ви използвате стилове, които директно са написани в HTML кода, то вие може да елеминирате някои потенцилани проблеми с кеширянето. Това е от голямо значение, ако работите с някои Мас браузери. Не забравяйте: преди да пуснете своя сайт в интернет, трябва да преместите стиловете в нов, отделен CSS файл, чрез функцията @import или <link>.
Помогнете си в отстраняването на грешките и добавете ясни очертания на елементите.
Когато възникне проблем с лейаута, може да ползвате някое универсално CSS правило, като например div {border: solid 1px #f00;). При идентифицирането на припокриване може да се използва очертание като добавка или пък празно пространство, които иначе не са очевидни.
Не правете грешката с единичните кавички
Задавайки фоново изображение, е необходимо да устоите на изкушението да заградите адреса с единични или каквито и да било кавички. Това изобщо не е необходимо, а и IE5/Mac ще създадат проблеми на потребителя.
Не поставяйте връзки към CSS файлове, които са празни или смятате да ползвате за в бъдеще.
Браузера за Mac IE5 дава грешка, когато попадне на празен CSS файл и поради тази причина времето за зареждане се увеличава. Вместо това, по-добре сложете поне един коментар или правило в празния файл, за да не въникнат проблеми.

Няма подобни статии