Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli.

Transkrypt

1

2 Tytuł oryginału: Responsive Web Design with HTML5 and CSS3 Tłumaczenie: Maciej Reszotnik ISBN: Helion All rights reserved. Copyright Packt Publishing First published in the English language under the title Responsive Web Design with HTML5 and CSS3 All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Wydawnictwo HELION dołożyło wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie bierze jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Wydawnictwo HELION nie ponosi również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, GLIWICE tel , helion@helion.pl WWW: (księgarnia internetowa, katalog książek) Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/resweb.zip Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. Oceń książkę Księgarnia internetowa Lubię to!» Nasza społeczność

3 Spis tre ci O autorze 9 O recenzentach 11 Przedmowa 13 Rozdzia 1. Podstawy HTML5, CSS3 i projektowania elastycznych uk adów stron 19 Czemu smartfony s tak wa ne (a stary Internet Explorer nie)? 20 Czy zdarzaj si sytuacje, w których uk ad elastyczny nie jest dobrym rozwi zaniem? 22 Uk ad skalowalny definicja 22 Czemu ogranicza si tylko do skalowalnych projektów? 23 Przyk ady skalowalnych projektów witryn 23 Gdzie znajdziesz narz dzia testowe obszaru operacyjnego? 24 ród a inspiracji w sieci 30 HTML5 zalety stosowania 32 Oszcz dno czasu i kodu w HTML5 33 Nowe elementy semantyczne HTML5 34 CSS3 a wra liwy projekt witryn i dodatkowe mo liwo ci arkuszy 35 Wniosek jest prosty CSS3 niczego nie zepsuje! 36 Jak CSS3 rozwi zuje codzienne problemy projektantów witryn? 36 Patrz, mamo! bez obrazów!...39 Co jeszcze CSS3 ma do zaoferowania?...39 Czy standardy HTML5 i CSS3 dzia aj poprawnie ju dzi?...42 RWD nie jest lekarstwem na wszystko...43 U wiadomienie klientom, e witryna nie powinna prezentowa si tak samo w ka dej przegl darce...44 Podsumowanie...45

4 Spis tre ci Rozdzia 2. Zapytania medialne: obs uga zró nicowanych obszarów operacyjnych 47 Zapyta medialnych mo esz u ywa ju dzi 48 Skalowalne projekty a zapytania medialne 48 Sk adnia zapyta medialnych 49 Zapytania medialne i porównywanie parametrów urz dze 51 U ywanie zapyta medialnych do zmodyfikowania projektu witryny 52 Najlepszy sposób adowania zapyta medialnych w metodologii RWD 52 Nasz pierwszy skalowalny projekt 53 Mo e Ci zaskoczy, e nasz pierwszy uk ad b dzie mia sta szeroko 53 Projekt wra liwy ograniczanie wielko ci obrazów 57 Przycinanie tre ci w mniejszych obszarach operacyjnych 59 Wy czanie mechanizmu automatycznego skalowania strony 60 Dopasowanie projektu witryny do ró nych szeroko ci obszaru operacyjnego 63 W metodologii RWD tre ci zawsze stoj na pierwszym miejscu 65 Zapytania medialne tylko cz rozwi zania 69 Potrzebny nam uk ad p ynny 69 Podsumowanie 69 Rozdzia 3. Opanowanie uk adów p ynnych 71 Uk ady sta e nie s przystosowane do nowych wyzwa 72 Czemu uk ady proporcjonalne s tak wa ne w metodologii RWD? 72 Transformacja sta ego uk adu w projekt proporcjonalny 73 Wa ne równanie 73 Definiowanie kontekstu w elementach proporcjonalnych 75 Zawsze nale y pami ta o kontek cie 82 Wykorzystywanie jednostek em zamiast pikseli w kontek cie typografii 85 P ynne obrazy 87 Skalowanie obrazów w obr bie obszaru operacyjnego 87 W a ciwe regu y dla w a ciwych obrazów 89 Nak adanie hamulców na uk ad p ynny 91 Wszechstronna w asno max-width 92 Wczytywanie ró nych obrazów dla ró nych ekranów 93 Konfigurowanie us ugi Adaptive Images 94 P ynne siatki i zapytania medialne tworz jedno 98 System siatek CSS 99 B yskawiczne konstruowanie strony w systemie siatek 100 Podsumowanie 105 Rozdzia 4. HTML5 i projekty elastyczne 107 Z jakich cz ci standardu HTML5 mo emy korzysta ju dzi? 108 Wi kszo witryn mo e by konstruowana w oparciu o HTML5 108 Wype nienia, skrypty i Modernizr 108 W jaki sposób pisa strony w standardzie HTML5? 109 Oszcz dno ci wynikaj ce z wykorzystania HTML5 110 Rozs dne podej cie do pisania kodu 111 Oddajmy cze wszechmocnemu elementowi <a> 111 Elementy j zyka HTML, które uleg y dezaktualizacji 112 4

5 Spis tre ci Nowe elementy semantyczne HTML5 112 Element <section> 113 Element <nav> 114 Element <article> 114 Element <aside> 114 Element <hgroup> 115 Element <header> 116 Element <footer> 117 Element <address> 117 Praktyczne wykorzystanie elementów strukturalnych HTML5 117 A co z g ówn zawarto ci strony? 123 HTML5 i semantyka na poziomie tekstu 123 Element <b> 124 Element <em> 124 Element <i> 125 Zasady semantyki na poziomie tekstu w kodzie 125 Poprawienie dost pno ci strony za pomoc standardu WAI-ARIA 127 Punkty orientacyjne w standardzie ARIA 127 Zagnie d anie elementów multimedialnych w HTML5 130 Zagnie d anie multimediów wed ug HTML5 131 Alternatywne ród a plików 132 Awaryjna obs uga w starszych przegl darkach 133 Znaczniki audio i video dzia aj niemal identycznie 133 Skalowalne odtwarzacze filmów 134 Aplikacje sieciowe w trybie offline 137 Aplikacje offline od podszewki 137 Wdra anie trybu offline 137 Sk adnia pliku manifestu 139 Automatyczne wczytywanie stron w manife cie 139 Komentarze wersji 140 Odczytywanie strony w trybie offline 140 Rozwi zywanie problemów z aplikacjami offline 141 Podsumowanie 142 Rozdzia 5. CSS3: selektory, typografia i tryby barw 143 Co CSS3 oferuje projektantom stron? 144 Obs uga CSS3 w Internet Explorerze 6, 7 i Wykorzystanie CSS3 do projektowania i formatowania stron w przegl darce 145 Struktura regu CSS 145 Przedrostki autorskie i sposób ich wykorzystania 145 Przydatne triki w CSS3 148 Uk ad wielokolumnowy w CSS3 dla projektu skalowalnego 148 Zawijanie tekstu 151 Nowe selektory CSS3 i sposób ich wykorzystania 152 Selektory atrybutów w CSS3 152 Strukturalne pseudoklasy CSS3 155 Poprawki wprowadzane w pseudoelementach 164 5

6 Spis tre ci W asna typografia sieciowa 166 Regu 166 Odwo anie do fontów w 167 Pomocy moje nag CSS3 wygl daj okropnie! 170 Uwagi na temat elementów i elastycznego projektu strony 173 Nowe formaty barw CSS3 i kana alfa 173 Tryb RGB 174 Tryb HSL 175 Awaryjne tryby barw dla Internet Explorera 6, 7 i Kana y alfa 176 Podsumowanie 178 Rozdzia 6. Spektakularny wygl d i CSS3 179 Cieniowanie tekstu w CSS3 180 Obs ugiwane tryby barw: HEX, HSL i RGB 180 Jednostki: piksele, em i rem 181 Blokowanie w a ciwo ci text-shadow 182 Tworzenie efektu uwypuklenia za pomoc w asno ci text-shadow 184 Nak adanie wielu efektów cienia na tekst 184 Cieniowanie komponentów 185 Cieniowanie do wewn trz elementu 185 Nak adanie wielu cieni na element 187 Gradienty t a 188 Liniowe gradienty t a 189 Gradienty ko owe 193 Powtarzanie gradientu 196 Wzorce t a gradientu 198 Projektowanie elastyczne a CSS3 200 Korzystanie z wielu w a ciwo ci CSS3 naraz 202 Wiele obrazów t a naraz 206 Wymiary t a 208 W a ciwo background position 208 Skrócona deklaracja w a ciwo ci background 209 Wi cej w a ciwo ci CSS3 209 Elastyczne ikony doskona e dla projektu skalowalnego 209 Podsumowanie 210 Rozdzia 7. Przej cia, transformacje i animacje w CSS3 213 Czym s przej cia CSS3 i jak mo emy z nich korzysta? 214 Typy w a ciwo ci przej 215 Ciekawe typy przej dla elastycznych stron 218 Transformacje dwuwymiarowe a CSS3 219 Co mo emy podda transformacji? 220 Zabawa transformacjami trójwymiarowymi 224 Sk adnia transformacji trójwymiarowych 226 Transformacje trójwymiarowe wci raczkuj 230 6

7 Spis tre ci Animacje w CSS3 231 czenie animacji i transformacji CSS3 234 Podsumowanie 237 Rozdzia 8. Opanowanie formularzy w HTML5 i CSS3 239 Formularze a HTML5 240 Komponenty w formularzach HTML5 242 placeholder 242 required 243 autofocus 244 autocomplete 244 list (i powi zane elementy listy) 245 Rodzaje kontrolek HTML5 246 Kontrolki daty i godziny 252 Wype nienia dla starszych przegl darek 257 Formatowanie formularzy HTML5 za pomoc arkuszy CSS3 258 Selektory pseudoklas CSS3 dla formularzy 262 Podsumowanie 265 Rozdzia 9. Rozwi zywanie problemów kompatybilno ci uk adów wra liwych z przegl darkami 267 Ulepszenie post powe a agodna degradacja 272 Praktyka 272 Czy powiniene naprawia problemy we wszystkich wersjach Internet Explorera? 273 Dane statystyczne (znowu) 274 Kwestia w asnego wyboru 274 Modernizr scyzoryk projektanta stron 275 Rozwi zywanie problemów z formatowaniem 277 Obs uga elementów HTML5 w starszych Internet Explorerach a Modernizr 279 Implementacja obs ugi zapyta medialnych w Internet Explorerze 6, 7 i Modernizr i wczytywanie warunkowe 282 Transformacja nawigacji menu pionowe 284 Urz dzenia z ekranami o wysokiej rozdzielczo ci (rzut okiem w przysz o ) 288 Podsumowanie 291 Skorowidz 293 7

8 Spis tre ci 8

9 3 Opanowanie uk adów p ynnych Gdy w latach 90. ubieg ego wieku zacz em konstruowa witryny, ich uk ad powstawa na bazie tabeli. Najcz ciej wymiary pojedynczych sekcji ka dej strony by y wyra ane w procentach. Przyk adowo, lewa kolumna nawigacji mog a wype nia 20 procent strony, podczas gdy obszar tre ci 80 procent. W przesz o ci nie by o tak wielkich ró nic mi dzy obszarami operacyjnymi przegl darek jak obecnie, wi c te uk ady by y dobrze skalowane w w skim wyborze ekranów. Nikogo nie obchodzi o, e pojedyncze zdania wygl da y odrobin inaczej na ró nych ekranach. Jednak e z biegiem czasu uk ady CSS sta y si norm, bo pozwala y na odzwierciedlenie zasad typograficznych stosowanych w materia ach drukowanych. Zmiana ta oznacza a znaczne zmniejszenie liczby uk adów konstruowanych na podstawie proporcji zamiast nich powstawa y ich sztywne odpowiedniki, których wymiary definiowano w pikselach. Podobnie jak inne wa ne osi gni cia, aktualnie ten rodzaj projektowania prze ywa renesans. W przeci gu ostatnich lat miniaturowe samochody, trwa a fryzura (chcia oby si ) oraz jeansy dzwony powróci y do ask. Nadszed czas, by równie uk ady proporcjonalne zosta y odkryte na nowo. W tym rozdziale: dowiesz si, czemu uk ady proporcjonalne s tak wa ne w filozofii RWD, nauczysz si wyra a elementy zbudowane w sta ej szeroko ci warto ciami procentowymi, nauczysz si definiowa elementy typografii wyra one w pikselach w jednostkach em, zrozumiesz, jak umie ci elementy we w a ciwych kontekstach, nauczysz si p ynnie przeskalowywa obrazy, dowiesz si, jak dopasowa wielko grafik do wymiarów ekranu,

10 Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3 zrozumiesz, w jaki sposób uzupe niaj si zapytania medialne i p ynne uk ady stron oraz grafik, stworzysz uk ad skalowalny od podstaw w oparciu o system siatek CSS. Uk ady sta e nie s przystosowane do nowych wyzwa Jak ju wspomnia em, od czasów uk adów tabelarycznych nie mia em zbyt wielu okazji, by wykorzystywa projekty proporcjonalne. Zwykle klienci prosz mnie o stworzenie uk adu najbli ej odzwierciedlaj cego graficzny model w obr bie pikseli. Je eli zbudowa bym projekt w oparciu o proporcjonalne warto ci (np. 90%), szybko dosta bym skarg : Ale to wygl da inaczej na moim monitorze!. Witryny skonstruowane na bazie sta ych wymiarów wyra onych w pikselach pozwala y na atwe dopasowanie uk adu do prototypu. Nawet w dzisiejszych czasach, gdy u ywa o si zapyta medialnych celem stworzenia ulepszonej wersji uk adu, dopasowuj cej si do szeroko ci popularnych urz dze, np. ipada lub iphone a (o czym przekona e si w rozdziale 2., Zapytania medialne: obs uga zró nicowanych obszarów operacyjnych ), wymiary uk adu w dalszym ci gu mog y by wyra one w pikselach, poniewa znali my wielko obszaru operacyjnego. Cho znajd si tacy, którzy ch tnie wy l klientowi rachunek za ka dym razem, gdy najdzie go ochota, by doda nowy bajer do strony, nie jest to podej cie dobrze przygotuj ce witryn na przysz o. Na rynku pojawiaj si coraz to nowsze typy obszarów operacyjnych, wi c musimy znale jaki sposób, by przygotowa si na nadej cie nieznanego. Czemu uk ady proporcjonalne s tak wa ne w metodologii RWD? Mimo e zapytania medialne s bardzo przydatne, maj pewne ograniczenia. Dowolny sta y projekt witryny korzystaj cy z zapyta medialnych do dopasowania si do ró nych obszarów operacyjnych b dzie po prostu przechodzi z jednego zestawu regu do drugiego, bez adnej animacji pomi dzy stanami. Jak pami tasz, w przyk adzie z rozdzia u 2., Zapytania medialne: obs uga zró nicowanych obszarów operacyjnych, obszar operacyjny zmienia si w obr bie sta ych zakresów zapyta i wymaga przewijania strony w poziomie dla niestandardowych rozdzielczo ci (które mog obowi zywa w nowych, nieznanych dot d urz dzeniach). My jednak chcemy, by nasz uk ad przewija si i wygl da dobrze we wszystkich obszarach operacyjnych, a nie tylko tych zdefiniowanych w zapytaniu medialnym. Ci cie! (Rozumiesz? Ci cie! Takie filmowe powiedzenie w sam raz dla naszej filmowej witryny Prawda? Nie? Ju id po swój p aszcz ). Musimy przemieni nasz sta y uk ad wyra ony w pikselach w uk ad p ynny zbu- 72

11 Rozdzia 3. Opanowanie uk adów p ynnych dowany w oparciu o proporcjonalne jednostki. Pozwoli to elementom dynamicznie dopasowywa si wzgl dem obszaru operacyjnego do momentu, gdy do akcji wkroczy zapytanie medialne i zmodyfikuje uk ad. Symbioza uk adu proporcjonalnego i zapyta medialnych Wspomnia em wcze niej artyku autorstwa Ethana Marcotte a na temat metodologii RWD, który opublikowano w witrynie A List Apart ( Cho narz dzia, których u y w omawianym przyk adzie (p ynny uk ad, obrazy i zapytania medialne), nie by y wcale nowe, prawdziw sensacj by o nowatorskie wykorzystanie wszystkich tych technik do stworzenia spójnej ca o ci. Dla wielu projektantów witryn ten artyku by kluczem do wiata nowych mo liwo- ci. Przedstawia sposób, który czerpie to, co najlepsze, z dwóch wiatów: stworzenie p ynnego uk adu bazuj cego na projekcie proporcjonalnym przy jednoczesnym ograniczeniu rozstawienia elementów za pomoc zapytania medialnego. Wykorzystanie tych aspektów razem jest fundamentem metodologii RWD, dzi ki której powstaje co znacznie wi kszego ni suma cz ci sk adowych. Transformacja sta ego uk adu w projekt proporcjonalny W najbli szej przysz o ci wszystkie gotowe kompozyty, które otrzymasz lub stworzysz, b d mia y sta szeroko. Aktualnie w oprogramowaniu w rodzaju Adobe Photoshop i Fireworks wymiary elementów, wielko marginesów itp. wyra amy w pikselach. Dane te wprowadzamy pó niej w arkuszach stylów CSS. To samo dotyczy rozmiarów tekstu. W naszym ulubionym programie graficznym klikamy fragment tekstu, zapisujemy wielko fontu (te wyra on w pikselach) i przenosimy j do odpowiednich regu CSS. W jaki wi c sposób mo emy przemieni nasz uk ad sta y w proporcjonalny? Wa ne równanie By mo e w Twoich oczach jestem zbyt wielkim fanem Ethana Marcotte a, lecz czuj, e musz po raz kolejny uchyli mu kapelusza (lub odda kolejny uk on w jego stron albo pa przed nim na kolana). W ksi ce autorstwa Dana Cederholma Handcrafted CSS Ethan Marcotte wspó tworzy rozdzia po wi cony p ynnym siatkom projektowym. W nim opisa prosty i niezawodny wzór s u cy do transformacji warto ci pikselowych w uk adzie sta ym na warto ci procentowe w projekcie proporcjonalnym: element docelowy : kontekst = wynik Równanie to jest niepozorne, czy nie? Szybko jednak oka e si, e jest ono Twoim najlepszym przyjacielem. Zamiast rozprawia o teoriach, wykorzystajmy ten wzór w praktyce, zamieniaj c jednostki wymiarów witryny Zwyci zc nie jest na procenty. 73

12 Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3 Jak pami tasz, w rozdziale 2., Zapytania medialne: obs uga zró nicowanych obszarów operacyjnych, ustanowili my struktur kodu naszej strony: <div id="wrapper"> <!-- nag ówek i nawigacja --> <div id="header"> <div id="navigation"> <ul> <li><a href="#">nawigacja1</a></li> <li><a href="#">nawigacja2</a></li> </ul> <!-- pasek boczny --> <div id="sidebar"> <p>obszar paska bocznego</p> <!-- tre ci --> <div id="content"> <p>obszar g ównej zawarto ci strony</p> <!-- stopka --> <div id="footer"> <p>stopka</p> W dalszej cz ci dodali my tre ci, ale tym, co nas interesuje w tej chwili, s wymiary elementów strukturalnych (nag ówka, nawigacji, paska bocznego, tre ci i stopki) w arkuszach CSS. Ni ej pomin em wiele regu formatowania, by my mogli skupi nasz uwag na strukturze: #wrapper { margin-right: auto; margin-left: auto; width: 960px; #header { margin-right: 10px; margin-left: 10px; width: 940px; #navigation { padding-bottom: 25px; margin-top: 26px; margin-left: -10px; padding-right: 10px; padding-left: 10px; width: 940px; #navigation ul li { 74

13 Rozdzia 3. Opanowanie uk adów p ynnych display: inline-block; #content { margin-top: 58px; margin-right: 10px; float: right; width: 698px; #sidebar { border-right-color: #e8e8e8; border-right-style: solid; border-right-width: 2px; margin-top: 58px; padding-right: 10px; margin-right: 10px; margin-left: 10px; float: left; width: 220px; #footer { float: left; margin-top: 20px; margin-right: 10px; margin-left: 10px; clear: both; width: 940px; Wszystkie wymiary s obecnie wyra one w pikselach. Zacznijmy od elementu po o onego najbardziej na zewn trz struktury uk adu i zmie my jednostki jego wymiarów na procenty, korzystaj c ze wzoru element docelowy : kontekst = wynik. Wszystkie nasze tre ci s zawarte w elemencie div, oznaczonym identyfikatorem #wrapper. Z kodu CSS atwo odczyta, e jego marginesy s ustawione automatycznie i sam element ma 960 pikseli. Jak zdefiniowa, jak wielk cz obszaru operacyjnego powinien zajmowa taki zewn trzny komponent div? Definiowanie kontekstu w elementach proporcjonalnych Potrzebujemy czego, co pomie ci wszystkie proporcjonalne elementy (tre ci, pasek boczny, stopk itd.), staj c si dla nich kontekstem, który zawrzemy w naszym projekcie. Z tego powodu musimy wyznaczy proporcjonaln warto szeroko ci komponentu #wrapper w stosunku do wymiarów obszaru operacyjnego. Na razie przeprowad my eksperyment, ustawiaj c szeroko na 96 procent, i zobaczmy, co si stanie. Oto poprawiona regu a komponentu #wrapper: 75

14 Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3 #wrapper { margin-right: auto; margin-left: auto; width: 96%; /* Dotyczy po o onego najbardziej na zewn trz elementu DIV */ A oto jak nasza strona prezentuje si w oknie przegl darki: Na razie nie jest le! Warto 96 procent sprawdza si ca kiem dobrze, cho mogliby my wybra 100 albo 90 procent dowoln wielko, która wyznaczy aby wygodne granice w obszarze operacyjnym. 76

15 Rozdzia 3. Opanowanie uk adów p ynnych Schodz c w dó struktury witryny, szybko zauwa ymy, e zmiana uk adu na proporcjonalny staje si coraz bardziej skomplikowana. Najpierw przyjrzyjmy si strukturze nag ówka. Przypomnij sobie wzór: element docelowy : kontekst = wynik. Nasz element docelowy (#header div) znajduje si wewn trz elementu div #wrapper (kontekstu). Dlatego ustalamy, e #header (element docelowy) ma szeroko 940 pikseli, po czym dzielimy t warto przez szeroko kontekstu (komponentu #wrapper), która mia a warto 960 pikseli, i otrzymujemy wynik 0, Warto t wyra amy w procentach, przesuwaj c dwie pierwsze cyfry u amka przed przecinek dziesi tny, i otrzymujemy warto procentow 97, Zapiszmy j w regule CSS: #header { margin-right: 10px; margin-left: 10px; width: 97, %; /* 940 : 960 */ Zauwa my, e elementy #navigation i #footer maj t sam szeroko, wi c bez problemu mo- emy zamieni warto ci wyra one w pikselach na procenty. Na koniec, zanim otworzymy stron w przegl darce, zajmijmy si elementami #content i #wrapper. Z uwagi na fakt, i kontekst pozosta ten sam (960 pikseli), wystarczy, e podzielimy szeroko elementu docelowego przez jego rozpi to. Nasz element #content ma aktualnie 698 pikseli, wi c podzielmy to przez 960, a otrzymamy wynik równy 0, Przesu my przecinek dziesi tny o dwa miejsca, a otrzymamy 72, procenta jest to nowa, procentowa szeroko komponentu div z identyfikatorem #content. Z kolei nasz panel boczny ma szeroko 220 pikseli, lecz musimy te pami ta o szerokiej na 2 piksele kraw dzi. Nie chcemy, by grubo prawej kraw dzi rozszerza a si lub zw a a, wi c w dalszym ci gu b dzie ona mia a 2 piksele. Z tego wzgl du nale y uj odrobin z szeroko ci paska bocznego. Odj em wi c 2 piksele i przeprowadzi em obliczenia wed ug naszego równania. Podzieli em szeroko elementu docelowego (czyli po poprawce 218 pikseli) przez rozpi to kontekstu (960 pikseli) otrzyma em wynik 0, Przenosz przecinek dziesi tny o dwa miejsca i dostaj 22, procenta szeroko ci paska bocznego. Po zmodyfikowaniu wszystkich warto ci nasz arkusz CSS prezentuje si w nast puj cy sposób: #wrapper { margin-right: auto; margin-left: auto; width: 96%; /* Dotyczy po o onego najbardziej na zewn trz elementu DIV */ #header { margin-right: 10px; margin-left: 10px; width: %; /* 940 : 960 */ #navigation { padding-bottom: 25px; 77

16 Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3 margin-top: 26px; margin-left: -10px; padding-right: 10px; padding-left: 10px; width: %; /* 698 : 960 */ #navigation ul li { display: inline-block; #content { margin-top: 58px; margin-right: 10px; float: right; width: %; /* 698 : 960 */ #sidebar { border-right-color: #e8e8e8; border-right-style: solid; border-right-width: 2px; margin-top: 58px; margin-right: 10px; margin-left: 10px; float: left; width: %; /* 218 : 960 */ #footer { float: left; margin-top: 20px; margin-right: 10px; margin-left: 10px; clear: both; width: %; /* 940 : 960 */ Poni szy zrzut ekranu przedstawia wygl d strony w oknie przegl darki Firefox, którego obszar operacyjny ma szeroko powy ej 1000 pikseli: Dobrze nam idzie. Zast pmy teraz wszystkie deklaracje 10 px w a ciwo ci padding i margin w arkuszu warto ciami wzi tymi ze wzoru element docelowy : kontekst = wynik. Wszystkie komponenty o szeroko ci 10 pikseli maj ten sam kontekst, a ich rozpi to wyra ona w procentach wynosi 1,

17 Rozdzia 3. Opanowanie uk adów p ynnych A tych liczb to nie mo na zaokr gli? Niektórzy krytycy metodologii RWD (np. autor artyku u twierdz, e wprowadzanie liczb w rodzaju em wewn trz arkusza stylów jest mieszne. Mo esz sam si zastanawia, czy nie warto by oby ich zaokr gli? Odpowied brzmi: przegl dark nale y informowa z jak najwi ksz dok adno ci. Dzi ki temu b dzie ona w stanie precyzyjniej wy wietla wszystkie elementy. Tak na marginesie, je li w szkole nie zasypia e zbyt cz sto na lekcjach matematyki, z pewno ci s ysza e o z otej proporcji ( wikipedia.org/wiki/z oty_podzia ). Ta matematyczna proporcja charakteryzuje ka d dyscyplin naukow i wynosi 1:1, (je li chcesz pozna jej miejsce po przecinku, zajrzyj na stron Nie jest to równa liczba, lecz ma ona wielkie znaczenie. Je li z ota proporcja mo e by wyra ona w taki sposób, czemu nie nasze projekty witryn? 79

18 Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3 Wszystkie elementy w dalszym ci gu prezentuj si bardzo dobrze w tym samym rozmiarze obszaru operacyjnego. Jedyny problem stanowi nawigacja. Je li odrobin zmniejsz szeroko obszaru operacyjnego, linki rozwin si w dwóch wierszach: Co wi cej, je li rozszerz okno, margines pomi dzy linkami nie b dzie zwi ksza si proporcjonalnie. Rzu my okiem na regu y CSS definiuj ce nawigacj i spróbujmy ustali, czemu tak si dzieje: #navigation { padding-bottom: 25px; margin-top: 26px; 80

19 Rozdzia 3. Opanowanie uk adów p ynnych margin-left: %; /* 10 : 960 */ padding-right: %; /* 10 : 960 */ padding-left: %; /* 10 : 960 */ width: %; /* 940 : 960 */ background-repeat: repeat-x; background-image: url(../img/atwinavbg.png); border-bottom-color: #bfbfbf; border-bottom-style: double; border-bottom-width: 4px; #navigation ul li { display: inline-block; #navigation ul li a { height: 42px; line-height: 42px; margin-right: 25px; text-decoration: none; text-transform: uppercase; font-family: Arial, "Lucida Grande", Verdana, sans-serif; font-size: 27px; color: black; Na pierwszy rzut oka wydaje si, e za ca y chaos jest odpowiedzialna trzecia regu a dla selektora #navigation ul li a, który ma margines równy 25 pikseli. Naprawmy to, stosuj c nasze równanie. Element #navigation mia szeroko 940 pikseli, wi c ostateczny wynik procentowy jest równy 2, Zmie my wi c nasz regu w nast puj cy sposób: #navigation ul li a { height: 42px; line-height: 42px; margin-right: %; /* 25 : 940 */ text-decoration: none; text-transform: uppercase; font-family: Arial, "Lucida Grande", Verdana, sans-serif; font-size: 27px; color: black; To nie by o takie trudne! Sprawd my, co pokazuje nam nasza przegl darka A niech to! Nie o to nam chodzi o. Linki nie rozchodz si ju w dwóch wierszach, lecz nie znamy w a ciwej proporcji marginesów. Linki nawigacyjne zlewaj si w jedno d ugie s owo, którego pró no szuka w s owniku. 81

20 Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3 Zawsze nale y pami ta o kontek cie Analizuj c uwa nie nasz wzór (element docelowy : kontekst = wynik), atwo zrozumie, czemu tak si dzieje. Naszym problemem w tym miejscu jest kontekst. Rzu okiem na kod: <div id="navigation"> <ul> <li><a href="#">o witrynie</a></li> <li><a href="#">streszczenie</a></li> <li><a href="#">fotosy</a></li> <li><a href="#">wideo</a></li> 82

21 Rozdzia 3. Opanowanie uk adów p ynnych <li><a href="#">cytaty</a></li> <li><a href="#">quiz</a></li> </ul> Jak zauwa ysz, elementy <a href="#"> znajduj si wewn trz znacznika <li>. To one s kontekstem dla naszego proporcjonalnego marginesu. Gdy przyjrzymy si regule CSS tych znaczników, oka e si, e nie zdefiniowali my dla nich szeroko ci: #navigation ul li { display: inline-block; Jak wi kszo problemów, tak i ten mo na rozwi za na wiele sposobów. Mogliby my zadeklarowa pewn szeroko dla elementu <li>, ale musieliby my wyrazi j w pikselach lub w procentach nadrz dnego komponentu (#navigation) adne z tych rozwi za nie jest do elastyczne, by odpowiednio sformatowa tekst, który pojawia si w nawigacji. Zamiast tego mogliby my poprawi znacznik <li>, zmieniaj c w a ciwo display na inline. #navigation ul li { display: inline; Wybór opcji display: inline; (która sprawia, e elementy <li> trac swój blokowy status) powoduje, e komponenty nawigacji s wy wietlane w poziomie nawet we wcze niejszych wersjach Internet Explorera (6 i 7), które mia y problemy ze zinterpretowaniem w a ciwo ci inlineblock. Musz jednak przyzna, e jestem wielkim zwolennikiem w asno ci inline-block, poniewa daje ona wi ksz kontrol nad marginesami i wype nieniem w nowych przegl darkach, wi c na razie zostawi j bez zmian (by mo e pó niej dodam style dla IE 6 i 7), a zamiast tego przenios regu marginesu ze znacznika <a> (który nie ma jasnego kontekstu) do bloku <li>. Oto jak prezentuj si regu y po poprawkach: #navigation ul li { display: inline-block; margin-right: %; /* 25 : 940 */ #navigation ul li a { height: 42px; line-height: 42px; text-decoration: none; text-transform: uppercase; font-family: Arial, "Lucida Grande", Verdana, sans-serif; font-size: 27px; color: black; 83

22 Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3 Poni szy zrzut ekranu pokazuje, jak strona wygl da w przegl darce o obszarze operacyjnym szerokim na 1200 pikseli: Nawigacja jest ju prawie gotowa, lecz nadal mamy problem z jej zawijaniem si do dwóch linijek, w momencie zmniejszenia si obszaru operacyjnego do wielko ci 768 pikseli, gdy zapytanie medialne, które przygotowali my w rozdziale 2., Zapytania medialne: obs uga zró nicowanych obszarów operacyjnych, nadpisze aktualne style nawigacji. Nim przejdziemy do jej naprawienia, zmieni wszystkie jednostki wielko ci elementów typografii z pikseli na em. Gdy to si nam powiedzie, przyjrzymy si kolejnemu s oniowi w sk adzie porcelany, czyli kwestii skalowania obrazów wraz z projektem. 84

23 Rozdzia 3. Opanowanie uk adów p ynnych Wykorzystywanie jednostek em zamiast pikseli w kontek cie typografii Dawno, dawno temu projektanci witryn wykorzystywali g ównie jednostki em zamiast pikseli do definiowania elementów typograficznych, poniewa wczesne wersje Internet Explorera nie by y w stanie przybli a tekstu zdefiniowanego w pikselach. Od jakiego czasu nowoczesne przegl darki potrafi omin t niedogodno. Czemu wi c u ywanie jednostek em jest lepszym, je li nie wymaganym rozwi zaniem? S ku temu dwa oczywiste powody: po pierwsze, wszystkie osoby u ywaj ce Internet Explorera 6 (tak, te dwa indywidua) automatycznie otrzymuj opcj przybli ania tekstu; po drugie, znacznie u atwia to Twoj prac. Warto jednostki em zale y od rozmiarów jej kontekstu. Je li zdefiniujemy wielko fontu w ca ym elemencie body i ustalimy regu y typograficzne, u ywaj c jednostek em, nasza pierwsza deklaracja b dzie mia a wp yw na wszystkie style. Zalet jest fakt, e przy prawid owych ustawieniach, je li klient poprosi Ci o powi kszenie fontów, wystarczy zmieni parametry deklaracji dla elementu body, by typografia w ca ej witrynie uleg a modyfikacji. U ywaj c znanego nam równania element docelowy : kontekst = wynik, zamierzam zamieni ka d warto wyra on w pikselach na warto em. Warto zauwa y, e we wszystkich nowoczesnych przegl darkach warto font-size domy lnie jest równa 16 pikseli (chyba e j sam nadpisa e ). Z tego powodu wykorzystanie dowolnej z poni szych regu do znacznika body zaowocuje takim samym wynikiem: font-size: 100%; font-size: 16px; font-size: 1em; Aby lepiej zrozumie ten mechanizm, zwró uwag na definicj wielko ci fontu w tytule witryny ZWYCI ZC NIE JEST u góry po lewej stronie: #logo { display: block; padding-top: 75px; color: #0d0c0c; text-transform: uppercase; font-family: Arial, "Lucida Grande", Verdana, sans-serif; font-size: 48px; #logo span { color: #dfdada; Podzielmy wi c: 48 : 16 = 3. Nasze style maj wi c nast puj c posta : #logo { display: block; padding-top: 75px; color: #0d0c0c; 85