14. CSS3: różne urządzenia, różne arkusze

14. CSS3: różne urządzenia, różne arkusze

Adam Stępień
00:00
16.09.2011
0 komentarzy
16081 wyświetlenie

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;
    }

}


Spodobał Ci się ten artykuł? Podziel się z innymi!

Źródło:

Polecamy również w kategorii Kurs HTML5

Komentarze

Skomentuj

Autor