CSS3 pozwala zmienić wygląd witryny w zależności od wykorzystywanego urządzenia do przeglądania Internetu. Zasady działania tego mechanizmu opisuje specyfikacja w module CSS3 Media Queries wydana przez konsorcjum standaryzujące W3C. W niniejszym artykule przedstawimy sposoby dostosowywania witryn do różnych urządzeń, np.do netbooków z małymi wyświetlaczami i komputerów stacjonarnych z dużym monitorem.
Zacznijmy od prostego przykładu, w którym wymusimy użycie danych stylów CSS, o ile ekran Internauty będzie miał 1200 piksli szerokości.
@media screen and (width:1200px)
{
p
{
font-family: Arial;
}
}
Taka składnia wzorcowa arkusza CSS pozwoli zastosować style, jeżeli przeglądarka internetowa wykryje, że szerokość ekranu będzie miała 1200 piksli. Pojęcie szerokość ekranu należy tutaj rozumieć jako aktualną szerokość okna przeglądarki, a nie faktyczny wymiar fizyczny wyświetlacza. Tak czy inaczej zastosowanie tej reguły jest jednak mało praktyczne, ponieważ nie jest to powszechne, aby szerokość okna przeglądarki miała dokładnie 1200 piksli i ani jednego piksla więcej czy mniej. Dlatego też w kolejnym przykładzie rozszerzymy instrukcję o wszystkie wyświetlacze, których szerokość wynosi 1200 piksli lub więcej, a zarazem nie przekracza szerokości 1600 piksli.
@media screen and (min-width:1200px) and (max-width:1600px)
{
p
{
font-family: Arial;
}
}
Poznaliśmy dwie nowe funkcje medium, do którego będzie zastosowany kod CSS. Nie są to jednak jedyne nowości w CSS3. Rozważmy teraz przykład reguły, która będzie zastosowana wyłącznie dla małych urządzeń. Wykorzystamy w tym celu kolejną właściwość CSS3 Media Queries, mianowicie max-height.
@media screen and (max-width:400px) and (max-width:600px)
{
p
{
font-family: Arial;
}
}
Wszystkie style zawarte dla tej reguły (w tym przypadku formatowanie czcionki dla znacznika akapitów) będą stosowane tylko i wyłącznie wtedy, gdy przeglądarka użytkownika będzie otwarta w oknie o wymiarach maksymalnie 400 na 600 piksli.
Wykorzystanie CSS3 Media Queries nie ogranicza się do reguł zawieranych w samym pliku CSS. Zamiast jednego obszernego pliku CSS z zawartymi wszystkimi szczegółowymi instrukcjami dla różnego rodzaju urządzeń, można wewnątrz języka dokumentu HTML podlinkować kilka arkuszy CSS. Wówczas nie będą ładowane wszystkie pliki CSS, a jedynie ten, dla którego reguła została spełniona.
<link rel="stylesheet" media="screen and (min-width: 800px) and (min-height: 600px)" href="normalny.css">
<link rel="stylesheet" media="screen and (max-width: 600px) and (max-height: 400px)" href="male-ekrany.css">
<link rel="stylesheet" media="screen and (min-width: 1200px) and (min-height: 600px)" href="duze-ekrany.css">
Ten fragment kodu oczywiście umieszczamy w nagłówku <HEAD> witryny html. Pora poznać kolejne ciekawe właściwości CSS3 Media Queries.
@STRONA@Tak jak wspomnieliśmy, faktyczne wymiary fizyczne wyświetlacza nie zawsze pokrywają się z użyteczną powierzchnią przeglądarki. Dlatego też specyfikacja W3C uwzględnia również właściwości device-width, device-height i pokrewne właściwości z min-... i max-...
Kolejną ciekawą właściwością jest orientacja ekranu. Wobec narastającej popularności i dostępności urządzeń o różnej orientacji ekranu, taka funkcja jest strzałem w dziesiątkę dla twórców stron www. Mogą oni ustalić, z jakim urządzeniem mają do czynienia: czy to szerokim, jak komputer, laptop czy telewizor, czy też wysokim (telefony i podobne urządzenia mobilne). Do wyboru mamy dwie wartości właściwości orientation: porttrait (orientacja pionowa) i landscape (orientacja pozioma).
Powiązana z tym jest także nowa właściwość: aspect-ratio. Generalnie aspect-ratio jest rozpatrywany jako stosunek szerokości do wysokości. Przykładowa reguła dla wyświetlaczy o rozdzielczości 1280 na 720 piksli (tzw. 16:9) będzie wyglądała następująco:
@media screen and (device-aspect-ratio: 16/9)
{
p
{
font-family: Arial;
}
}
Naturalnie możemy uwzględnić wartości większe od podanego stosunku i mniejsze poprzez przedrostki min- i max-.
Kolejny ukłon w stronę projektantów witryn internetowych to instrukcje warunkowe stosowane w zależności od kolorów, które są obsługiwane przez urządzenie wykorzystywane do przeglądania strony.
@media screen and (min-color-index: 256)
{
p
{
font-family: Arial;
}
}
Powyższy kod będzie stosowany, gdy urządzenie będzie obsługiwało 256 barw.
Ostatnią wartą uwagi właściwością, którą omówimy jest rozdzielczość ekranu tym razem wyrażana w DPI (liczba punktów, które mogą być wyświetlone lub wydrukowane przez dane urządzenie na odcinku o długości jednego cala).
@media screen and (min-resolution: 300dpi)
{
p
{
font-family: Arial;
}
}
Jeszcze bardziej użyteczna będzie ta reguły, gdy odniesiemy ją do urządzenia drukującego.
@media print and (min-resolution: 300dpi)
{
p
{
font-family: Arial;
}
}
341f31d.png)