Архив на категория: CSS

Най-доброто от седмицата (26.01.2015-01.02.2015)

webdesign.tutsplus.com/css-level-4-selectors-to-watch-out-for – CSS Level 4 Selectors to Watch Out For

css-tricks.com/tour-performant-responsive-css-site – Tour of a Performant and Responsive CSS Only Site

premium.wpmudev.org/removing-category-base-urls-wordpress – Removing the Category Base from Your URLs in WordPress

wordpress.stackexchange.com/remove-the-blog-slug-from-wordpress-multisite-root-node – Remove the blog slug from WordPress Multisite root node

www.humavox.com – site inspiration

fontfabric.com/perfograma-free-font – Perfograma free font

www.behance.net/desonanz-free-font – desonanz – free font

web-advice.net/bg/ux – Потребителско преживяване и скорост на сайт

CSS Naked Day 2009

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

CSS файлове само за IE

Използването на условни коментари (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

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