ISSN 1312-0379
За сайта | Карта на сайта | Контакт | F.A.Q.

Главна > Статии > Код

Пищови по CSS. От Дейв Шеа.

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

Ако имате нещо да добавите, коментирайте тук.

Тази статия е преведена на френски, немски, испански, италиански, унгарски, финландски, руски, японски и китайски. Добавяйте и други без задръжки.

Когато се съмнявате, валидирайте
Когато дебъгвате (дебъгване - процес по откриване на грешки в програмен код), можете да си спестите много главоболия като от начало просто валидирате своя код. Неправилно форматираният XHTML/CSS е причина за много проблеми с лейаута.
Разработвайте и тествайте своя CSS с най-модерния браузър преди да го тествате в другите, а не след това.
Ако създавате сайт, тествайки в развален браузър, вашият код започва да разчита на погрешната интерпретация на този браузър. Когато дойде време да тествате в браузър, който поддържа стандартите по-добре, ще бъдете разочаровани от факта, че показва кода ви не както очаквате. Вместо това, започнете с перфектен код и добавяйте хакове за по-развалените браузъри. Вашият код ще отговаря далеч повече на стандартите още от самото начало и няма да ви се налага да използвате прекалено много хакове, за да поддържате други браузъри. Днес това означава Mozilla, Safari или Opera.
Проверете дали желаният от вас ефект наистина съществува.
Съществуват специфични за даден браузър добавки към CSS, които не са част от официалната спецификация. Ако се опитвате да използвате filter или да форматирате цвета на скролбара, вие създавате код, който няма да работи никъде другаде освен в IE. Ако валидаторът ви казва, че кодът, който използвате не е дефиниран, има вероятност той да е специфичен за някой браузър и да не работи коректно при всички останали.
Когато разчитате на плаващи блокове (float) за лейаут, се уверете, че няма проблеми с околните елементи.
Плаващите блокове (бел.прев. при оформянето на които се използва float: left | right) правят номера и не винаги се държат както очаквате. Ако се сблъскате със ситуация, при която плаващ блок се разпростира извън края на съдържащия го елемент или просто не се държи правилно, то се уверете, че онова, което искате да постигнете е правилно. Вижте урока на Ерик Майер по този въпрос.
Изчезващи margin (полета); за да избегнете това, добавете padding (отстъп) или border (очертание).
Може да се сблъскате с повече празно пространство, където то съвсем не ви трябва или пък никакво празно пространство, където ви трябва. Ако използвате margin, припокриването е най-вероятната причина. Енди Бъд обяснява какво можете да очаквате.
Опитвайте се да избягвате задаването на padding/border и едновременно с това фиксиран размер на елемента.
IE5 разбира box model (блоковия модел) по погрешен начин, което наистина обърква нещата. Има начини за справяне с проблема, но винаги е по-добре проблемът да бъде заобиколен като padding.ът се прилага на родителски елемент вместо на наследяващ елемент, който е с фиксиран размер.
Избягвайте мигновеното показване на неоформен HTML в IE.
Ако разчитате само на @import, за да заредите външен CSS файл, рано или късно ще забележите, че в IE, когато веднъж e зареден чистият, неформатиран HTML следва съвсем кратко забавяне при прилагането на CSS. Това може да бъде избегнато.
Не разчитайте на min-width в IE.
IE не го поддържа. Но до известна степен третира width като min-width и с малко трикове може да се постигне същият краен резултат.
Когато се съмнявате, намалявайте широчините.
Понякога грешки в закръглянето ще са причина сметки от сорта на 50% + 50% да дават резултат 100.1%, което разрушава лейаута в някои браузъри. Опитайте да сбутате нещата от 50% на 49% или дори до 49.9%.
Съдържанието не се показва правилно в IE?
Може би сте се натъкнали на бъга Peekaboo, особено ако съдържанието се покаже, когато минете с курсора върху някоя връзка. Вижте Position is Everything за решение.
Внимавайте, когато оформяте връзки ако използвате котви.
Ако използвате класическа котва в кода си (<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 (Горе, Дясно, Долу, Ляво).
Съкратеният запис на размерите на очертанията, полетата и отстъпите (border, margin, padding) предполага конкретна последователност: по посока на часовниковата стрелка от горе, дясно, долу и ляво. И затова резултатът от код margin: 0 1px 3px 5px; е липса на поле отгоре, 1px поле отдясно и т.н.
Указвайте мерна единица за стойностите различни от нула.
CSS изисква от вас да указвате мерните единици за всички измерими характеристики като шрифтове, полета и размери. (Единственото изключение е line-height, за което не се изисква мерна единица.) Поведението на различните браузъри, когато размерите не са указани е твърде различно. Нулата, обаче, си е нула, независимо дали се измерва в px, em или друго. За нея не е необходимо указването на мерна единица въобще. Пример: padding: 0 2px 0 1em;
Тествайте при различни размери на шрифта.
Модерните браузъри като Mozilla и Opera ви позволяват да променяте размера на шрифта независимо в каква мерна единица е зададен. Някои потребители със сигурност имат по-голям или по-малък размер на шрифта зададен по подразбиране; опитайте се да нагодите стила си за възможно най-широк кръг.
Уеднаквете регистъра на буквите между HTML и CSS.
Някои браузъри правят разлика между главни и малки букви. Използването на клас като 'homePage' е OK, но само ако проявявате постоянство при изписването на класовете. Прилагането на стил към 'homepage' ще причини проблеми в някои по-строги браузъри (като Mozilla).
Тествайте със стилове в кода на страницата; при публикуване в интернет, използвайте отделен CSS файл.
Ако работите със стилове, директно написани в HTML кода, вие елиминирате някои потенциални проблеми с кеширането. Това е особено важно когато се работи с някои Mac браузъри. Но преди да пуснете своя сайт, преместете стиловете в отделен CSS файл чрез @import или <link>.
За да си помогнете при отстраняването на грешки, добавете ясни очертания на елементите.
Едно универсално CSS правило като div {border: solid 1px #f00;} може да свърши доста работа, когато възникне проблем с лейаута. Добавянето на очертание към някои елементи може да помогне при идентифицирането на припокриване или излишно празно пространством, които иначе не са очевидни.
Не използвайте единични кавички около адреси на изображения.
Когато задавате фоново изображение, трябва да устоите на желанието да обградите адреса на картинката с кавички. Това не е необходимо, а IE5/Mac ще се сгърчи.
Mac IE5 се сгърчва, когато срещне празен CSS и времето за зареждане на страницата се увеличава. Вместо това, сложете поне едно правило или дори само един коментар в CSS.a, за да няма проблем с MacIE.

Освен горните препоръки, тук има няколко интересни теоретични забележки, които нямат пряко отношение към функционалната част на нещата, но трябва да бъдат вземани под внимание при разработката:

Организирайте своя CSS файл
Коментирайте различните части от CSS кода правилно, групирайте подобните селектори и използвайте постоянна конвенция за именуването, форматирането (препоръка: единичен спейс вместо табулация за съмвестимост с различни платформи) и подреждане на стойностите.
Именувайте класовете / ID-тата според тяхната функция, а не според външния им вид.
Ако създадете клас .smallblue и по-късно получите молба да промените размера на шрифта в по-голям или цвета - на червен, този клас престава да носи всякакъв смисъл. Вместо това използвайте описателни класове като .copyright и .pullquote.
Разчитайте на филтрите на CSS само в краен случай.
CSS хакове и филтри могат да ви помогнат избирателно да прилагате CSS (или да не прилагате - в зависимост от случая) към различни елементи. Вместо да ги използвате всеки път, когато ударите на камък, опитайте се да намерите по-стандартен и работещ в различни браузъри начин да постигнете желания ефект. Когато се съмнявате, това може да ви спаси живота. Ето един огромен списък с CSS филтри.
Комбинирайте селектори.
За да оптимизирате времето за зареждане, трябва да се стремите към малки CSS файлове; опитвайте се колкото се може повече да групирате селектори, разчитайте на наследяването и намалявайте излишните повторения като използвате съкратен (shorthand) запис.
Обърнете внимание на достъпността, когато замествате изображения с текст
Класическият метод FIR (Farhner Image Replace) създава проблеми с екранните четци и за хората, които са изключили изображенията в браузъра си. Съществуват алтернативи; използвайте ги внимателно.

Да поговорим за това

Ако изпитвате нужда да поговорите за тази статия с някой, да кажете колко (не) ви харесва или въобще - форумът е отворен непрекъснато. Заповядайте »