Zamknij komunikat

Nowy Office 2013
Do góry Skomentuj

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

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

Autor: Adam Stępień Opublikowano: 16 września 2011 Odsłon: 15 490

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.

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

}

Zobacz również

Komentarze

Nie napisano jeszcze ani jednego komentarza. Twój może być pierwszy.

Dodaj swój komentarz

Zasady publikacji komentarzyZasady publikacji komentarzy

Redakcja CentrumXP.pl nie odpowiada za treść komentarzy publikowanych na stronach Portalu
i zastrzega sobie prawo do usuwania wypowiedzi, które:

  • zawierają słowa wulgarne, obraźliwe, prowokujące i inne naruszające dobre obyczaje;
  • są jedynie próbami reklamowania stron internetowych (spamowanie poprzez umieszczanie linków);
  • przyczyniają się do złamania prawa bądź warunków licencyjnych oprogramowania (cracki, seriale, torrenty itp.);
  • zawierają dane osobowe, teleadresowe, adresy mailowe lub numery GG;
  • merytorycznie nie wnoszą nic do dyskusji lub nie mają związku z tematem komentowanego newsa, artykułu bądź pliku.