Както всяка година от 2006 насам, така и тази отбелязваме CSS Naked Day! За 2009-а днес е денят “Х”. Целта на мероприятието — популяризиране на уеб стандартите. За да докажете подкрепата си е достатъчно да изключите стиловете, които се използват за форматирането на Вашия сайт.
Аз като уеб разработчик подкрепям това събитие с две ръце!

Използването на условни коментари (conditional comments) за зареждане на специфични стилове за различните версии на браузъра Internet Explorer e алтернатива на по-често прилагания вариант с употребата на т.нар. хакове (CSS hacks). Ето как изглежда и самия метод:

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

Този код се слага в хедъра на HTML документа, като е важно той да бъде след основния CSS файл. Всички стилове в него ще засягат само форматирането в IE, докато останалите браузъри ще “виждат” единствено стиловете, които са извън тези условни коментари.

Също така е възможно да се зареждат различни стилове за различните версии на IE. Това става, чрез използването на следните възможности на условните коментари:

Само за IE 7:

<!--[if IE 7]>
	<link href="ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->

Само за IE 6:

<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

Допълнителни възможности:

<!--[if lt IE 7]> - за версии на IE по-малки от 7
<!--[if lte IE 6]> - за версии на IE по-малки или равни на 6
<!--[if gt IE 6]> - за версии на IE по-големи от 6

Алтернатива на условните коментари – CSS хаковете (CSS hacks)
Още по темата от сайта на Microsoft: http://msdn.microsoft.com/en-us/library/ms537512.aspx

Има поне два варианта да се справим с различното интерпретиране на стиловете(CSS) от страна на все още най-разпространения браузър – Internet Explorer. Единият е да се използват хакове, които да водят до приемането на различни стойности в стиловете за различните браузъри или техни версии. За целта се използва похват, при който се въвеждат 2 или 3  стойности за едно и също свойство:

div {
margin: 10px;
*margin: 9px; /* for IE 7 */
_margin: 8px; /* for IE6 or less*/
}

Този начин на изписване ще доведе до следния резултат: в по-добрите браузъри(Firefox, Opera, Safari) свойството “MARGIN” на тагът “DIV” ще приеме стойност 10px и ще игнорира следващите стойности, тъй като те не са изписани правилно. Версия 7 на IE ще приеме стойност 9px, тъй като по неведоми причини приема символа “*” преди свойството на HTML елемента за коректно изписване, а същия елемент за верия 6 и по-ниска на IE ще присвои стойност 8px, поради това, че приема изписването със “_” за правилно.

В следващия пост ще опиша и по-доброто решение – употребата на така наречените условни коментари (conditional comments) за зареждане на алтернативни стилове за проблемните браузъри.

Дисплеят на една колежка в работата ми е настроен на сив фон на приложенията по подразбиране и когато седна при нея да обсъждаме текущи проекти, вече на два пъти установявам елементарен пропуск в работата си, който е описан и от CSS гурото Джефри Зелдман. Става въпрос за това, че досега не съм обръщал внимание дали поставям задължително фон на тялото на HTML документа (body {background: #fff;}). Това се отнася основно за дизайните, които са с бял фон и дори и да не е зададен в стиловете, това не прави впечатление, докато не застанеш пред монитор с променени фонови настройки. Тогава обаче картинката става “интересна” – дори може да не познаеш работата си.

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

още по темата:
Is your websites underwear showing – статията на Зелдман
Underwear showing (web design) – група във Flickr, споделяща как изглеждат сайтове без зададен фон на документа при променен фон на приложенията

В този пример ще демонстрирам как с помощта на CSS и прозрачни PNG изображения, да се постигне ефект на избледняване в долната и горната част на уеб страницата или на даден блоков елемент от нея. За постигането на желания ефект се използват DIV елементи с фиксирана позиция (position: fixed;) спрямо рамката на браузъра или на елемента, в които са вложени . На фиксираните DIV-вове, като фон(background) се задават PNG файлове с градиент – в случая от бяло(#FFF) към празрачно(transparent).

Основен минус е факта, че ако има хипервръзки в текста и те са в зоната на елемента с фиксирана позиция, тогава линковете не са активни.

Оригиналният пример е взет от CSS-Tricks. При него проблем беше, че не работи под IE6. Причината е в неправилното изобразяване на position:fixed от страна на браузъра, а също и това, че не поддържа 24 каналната прозрачност на PNG формата. Решението на проблема е използването на допълнителни стилове само за IE6, които да са в отделен CSS файл или в самия HTML документ, като за прилагането им се използва проверка за версията и типа на браузъра.

За отстраняване на проблема с position: fixed; се използва position:absolute и на обграждащия елемент се задават стойности height:100%; и overflow: auto;.

За прозрачността на PNG изображението се прибягва до употребата на филтърът AlphaImageLoader, който е един от най-използваните за фиксиране на този бъг.

Настоящият пример е тестван и работи в следните версии на най-популярните уеб браузъри:

• Mozilla Firefox 2.0.0.12
• Internet Explorer 7
• Opera 9.23
• Safari 3.0.4 (Windows)
• Netscape Navigator 9.0
• Internet Explorer 6

Mоже да видите работещ пример тук, a също и примерния код в текстови файлове съответно за HTML документа и CSS документа.

Постове от същата категория:

• Колекции от икони за социални мрежи
• Уеб дизайн тенденциите за 2009 – част 5
• Уеб дизайн тенденциите за 2009 – част 4
• Уеб дизайн тенденциите за 2009 – част 3
• Уеб дизайн тенденциите за 2009 - част 1