Замяна на шрифта – Font Replacement

Дойде ред на един похват, който направи уеб сайтовете много по-разнообразни от гледна точка на типографията им. До сега цялата текстова информация на страниците се представяше с някой от стандартните шрифтове, като Arial, Verdana, Georgia, Tahoma, Helvetica и т.н. , които за съжаление са прекалено ограничен брой и това правеше уеб пространството сравнително еднообразно. И тук на помощ идват новите похвати за заместване на стандартните шрифтове със избраните от дизайнера. Това може да се постигне по два основни начина – единият е чрез използване на “@font-face” правилото, което ни позволява да зададем шрифта през CSS. Но както може да се очаква радостта не е пълна и до момента се поддържат само някой шрифтови формати (TrueType , OpenType), и то само от последните версии на най-популярните браузъри, докато по-старите версии не поддържат  “@font-face”.  Другият вариант, който е по-универсален т.е. върши работа за почти всички браузъри е използването на техниката “Font replacement“. Read the rest of this entry »

Преди време един от блоговете, които следя редовно публикува интересна статия за тенденциите в уеб дизайна за 2009 година. В няколко поредни поста ще публикувам моите фаворити сред тях:

Прозрачни PNG графични елементи

През настоящата година се затвърди използването на прозрачността на PNG формата. Въпреки прословутия бъг на IE6, който не поддържа прозрачността на png изображения и фонове, същите се използват все по-масово от дизайнерите и разработчиците и предоставят все по-интересни решения от гледна точка на дизайна на съвременните сайтове. Една от причините за използването на PNG е наличието на няколко различни техники за преодоляването на проблема с по-старите версии на Internet Explorer. Най-доброто решение до момента е IE PNG Fix, във втората версия на който, вече се поддържа и прозрачност на фона с позициoниране и повтаряне (background-position, background-repeat).

Примери, демонстриращи използването на прозрачни PNG елементи в съвременния уеб дизайн: Read the rest of this entry »

Както всяка година от 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) за зареждане на алтернативни стилове за проблемните браузъри.