Блогът на Гонзо

Избор на стилове според възможностите на браузъра чрез CSS3

С все по-голамото навлизане на джобните компютри на уеб разработчиците ни се налага да обръщаме все по-голямо внимание на устройствата с малки екрани. Как да направим така, че на малкия екран на телефон или PDA сайта да остане ползваем? Дълго време основния подход беше отделен вариант на сайта специално за преносими устройства, често на свой под-домейн (примерно mobile.example.com), което си е двойна работа. CSS позволява да направим отделен файл със стилове, като укажем типа медия, за който се отнася (screen, print, handheld, projection).

<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
<link rel="stylesheet" href="mobile.css" type="text/css" media="handheld" />

По този начин можем да направим страницата си удобна за разглеждане на PDA, изглеждаща добре отпечатана на хартия и ползваема на екрана на телевизор. Последните устройства, станали популярни обаче разбиват тази концепция на пух и прах. Както е известно, iPhone  използва screen, а не handheld стиловете, eeePC и другите ултрамобилни компютри също езползват screen дефинициите, но разделителната им способност е малка и се налага потребителя да скролва по хоризонталата.

Решението на проблема идва със CSS3 и media queries. Тази нова възможност, заложена в стандарта, позволява да прицелим дадена страница със стилове в устройство с определени възможности – цветен или черно-бял дисплей, размер на екрана – като комбинираме медията и условието към устройството в логически израз.

<link rel="stylesheet" href="mobile.css" type="text/css" media="screen and (max-width:800px)" />

Сега вече можем да направим така, че на малкия екран на преносимите устройства сайтът ни да изглежда добре и да е ползваем. Но както се сещате, CSS3 все още не се поддържа изцяло от нито един браузър. За наша радост media queries се поддържат частично от Опера и Сафари. Dustin Brewer дори предлага да се ползва тази възможност за подаване на стилове само на Сафари. Ако искате да видите как действат примерите по-горе, заредете този блог в Опера, след това намалете екрана до ширина под 800 пиксела и заредете пак. За екрани с малка разделителна способност съм поставил страничната лента под основното съдържание, което така може да се чете по-добре, без да пречат второстепенните елементи.

Спецификацията на този модул от CSS3 е тук, а подробна статия с повече примери за използването на media queries има тук.

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

<style type="text/css">
@import url(mobile.css) screen and (max-width:801px);
</style>

Етикети: ,

3 коментара

Leave a comment

XHTML: Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>