Въпреки, че 1024×768 си остава най-често срещаната разделителна способност сред потребителите на Интернет, все по-често ще срещаме резолюции над 1200 пиксела в ширина. Не съм сигурен каква част от потребителите с толкова колеми екрани си разпъват прозореца на браузъра до максималния размер на екрана, но предполагам, че не малка част от тях го правят. А и дори да не е до край поне моят браузър често е по-колям от 1200 пиксела. Ако на тези потребители им покажете сайт, широк 900 пиксела, почти половината екран остава празен. Какво разхищение на полезна територия! Защо да не я оползотворим с нещо полезно? Защо по-голямата част от информацията да остава под „скъвката“, като може да излезе наяве още при зареждане на страницата? Ще попитате как?

Още преди доста време писах за media queries, но примерът, който дадох, се отнасяше до нагаждане на изгледа за малки екрани. А защо да не добавим подходящ изглед и за големите? Все повече хора ще ползват големите си LCD телевизори или монитори за разглеждане на уеб-страници, нека да се възползваме.

Какво направих аз – добавих допълнителен набор със стилове, който да важи само за екрани, по-широки от 1300 пиксела. В този набор съм пренаредил блоковете така, че вместо да има две колони в съотношение 2/1, колоните са в съотношение 3/1, и основната колона е разделена на 3. На първа страница текста на най-новата публикация е в три колони, както и списъка с останалите публикации отдолу. На страницата на публикациите лявата половина е за текста на публикацията, а в дясната остават коментарите и страничната колона, заемажи по 1/4 от ширината на екрана. Не съм сигурен, дали извеждането на коментарите най-горе е най-добрия вариант, но докато измися нещо по-добро, ще остане така.

Но да говорим в код! За тези, които не са чели предишната публикация, ще обясня. Media queries позволяват да зададете не само видът медия, но и нейните характеристики, като критерий за използването на даден набор със стилове. По този начин можете да направите мобилна версия на сайта за браузърите на онези мобилни устройства, които за да впечатлят потребителя, не взимат в предвид стиловете за hendheld типа медия. Можете да направите различни стилове за устройства с по-малко цветове, за различна ориентация или размер на страницата при печат… И за големи екрани, нали за това говорим сега:

<style type="text/css">
@import url(hd.css) screen and (min-width:1290px);
</style>

Тази конструкция работи в Opera 10, Firefox 3.5, Сафари и Chrome. Ако още не сте разпънали прозореца на браузъра, сега е моментът да го направите. Ако ползвате по-малък монитор, идете до компютъра на колегата или съседа, вържете лаптопа към плазмата, пърдон LCD телевизора и се удивете от възможностите на съвремения уеб – Full HD Ready.

Етикети: CSS, CSS3, Full HD Ready, HD, media queries