Tytuł oryginału Responsive Web Design with HTML5 and CSS3

Tłumaczenie Maciej Reszotnik

ISBN 978-83-246-6901-1

copy Helion 2014All rights reserved

Copyright copy Packt Publishing 2012

First published in the English language under the title lsquoResponsive Web Design with HTML5 and CSS3rsquo

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 kompletnei 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 roacutewnież żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce

Wydawnictwo HELIONul Kościuszki 1c 44-100 GLIWICEtel 32 231 22 19 32 230 98 63e-mail helionhelionplWWW httphelionpl (księgarnia internetowa katalog książek)

Pliki z przykładami omawianymi w książce można znaleźć pod adresem ftpftphelionplprzykladyreswebzip

Drogi CzytelnikuJeżeli chcesz ocenić tę książkę zajrzyj pod adres httphelionpluseropiniereswebMożesz tam wpisać swoje uwagi spostrzeżenia recenzję

Printed in Poland

bull Kup książkębull Poleć książkę bull Oceń książkę

bull Księgarnia internetowabull Lubię to raquo Nasza społeczność

Spis tre ci

O autorze 9

O recenzentach 11

Przedmowa 13

Rozdzia 1 Podstawy HTML5 CSS3 i projektowania elastycznych uk adoacutew stron 19

Czemu smartfony s tak wa ne (a stary Internet Explorer nie) 20Czy zdarzaj si sytuacje w ktoacuterych uk ad elastyczny nie jest dobrym rozwi zaniem 22Uk ad skalowalny mdash definicja 22Czemu ogranicza si tylko do skalowalnych projektoacutew 23Przyk ady skalowalnych projektoacutew witryn 23

Gdzie znajdziesz narz dzia testowe obszaru operacyjnego 24roacuted a inspiracji w sieci 30

HTML5 mdash zalety stosowania 32Oszcz dno czasu i kodu w HTML5 33Nowe elementy semantyczne HTML5 34

CSS3 a wra liwy projekt witryn i dodatkowe mo liwo ci arkuszy 35Wniosek jest prosty mdash CSS3 niczego nie zepsuje 36Jak CSS3 rozwi zuje codzienne problemy projektantoacutew witryn 36

Patrz mamo mdash bez obrazoacutew 39Co jeszcze CSS3 ma do zaoferowania 39

Czy standardy HTML5 i CSS3 dzia aj poprawnie ju dzi 42RWD nie jest lekarstwem na wszystko 43U wiadomienie klientom e witryna nie powinna prezentowa si tak samow ka dej przegl darce 44Podsumowanie 45

Kup książkę Poleć książkę

Spis tre ci

4

Rozdzia 2 Zapytania medialne obs uga zroacute nicowanych obszaroacutew operacyjnych 47

Zapyta medialnych mo esz u ywa ju dzi 48Skalowalne projekty a zapytania medialne 48

Sk adnia zapyta medialnych 49Zapytania medialne i poroacutewnywanie parametroacutew urz dze 51U ywanie zapyta medialnych do zmodyfikowania projektu witryny 52Najlepszy sposoacuteb adowania zapyta medialnych w metodologii RWD 52

Nasz pierwszy skalowalny projekt 53Mo e Ci zaskoczy e nasz pierwszy uk ad b dzie mia sta szeroko 53Projekt wra liwy mdash ograniczanie wielko ci obrazoacutew 57Przycinanie tre ci w mniejszych obszarach operacyjnych 59

Wy czanie mechanizmu automatycznego skalowania strony 60Dopasowanie projektu witryny do roacute nych szeroko ci obszaru operacyjnego 63W metodologii RWD tre ci zawsze stoj na pierwszym miejscu 65Zapytania medialne mdash tylko cz rozwi zania 69

Potrzebny nam uk ad p ynny 69Podsumowanie 69

Rozdzia 3 Opanowanie uk adoacutew p ynnych 71

Uk ady sta e nie s przystosowane do nowych wyzwa 72Czemu uk ady proporcjonalne s tak wa ne w metodologii RWD 72Transformacja sta ego uk adu w projekt proporcjonalny 73

Wa ne roacutewnanie 73Definiowanie kontekstu w elementach proporcjonalnych 75Zawsze nale y pami ta o kontek cie 82

Wykorzystywanie jednostek em zamiast pikseli w kontek cie typografii 85P ynne obrazy 87

Skalowanie obrazoacutew w obr bie obszaru operacyjnego 87W a ciwe regu y dla w a ciwych obrazoacutew 89Nak adanie hamulcoacutew na uk ad p ynny 91Wszechstronna w asno max-width 92

Wczytywanie roacute nych obrazoacutew dla roacute nych ekranoacutew 93Konfigurowanie us ugi Adaptive Images 94

P ynne siatki i zapytania medialne tworz jedno 98System siatek CSS 99

B yskawiczne konstruowanie strony w systemie siatek 100Podsumowanie 105

Rozdzia 4 HTML5 i projekty elastyczne 107

Z jakich cz ci standardu HTML5 mo emy korzysta ju dzi 108Wi kszo witryn mo e by konstruowana w oparciu o HTML5 108Wype nienia skrypty i Modernizr 108

W jaki sposoacuteb pisa strony w standardzie HTML5 109Oszcz dno ci wynikaj ce z wykorzystania HTML5 110Rozs dne podej cie do pisania kodu 111Oddajmy cze wszechmocnemu elementowi ltagt 111Elementy j zyka HTML ktoacutere uleg y dezaktualizacji 112

Kup książkę Poleć książkę

Spis tre ci

5

Nowe elementy semantyczne HTML5 112Element ltsectiongt 113Element ltnavgt 114Element ltarticlegt 114Element ltasidegt 114Element lthgroupgt 115Element ltheadergt 116Element ltfootergt 117Element ltaddressgt 117

Praktyczne wykorzystanie elementoacutew strukturalnych HTML5 117A co z g oacutewn zawarto ci strony 123

HTML5 i semantyka na poziomie tekstu 123Element ltbgt 124Element ltemgt 124Element ltigt 125Zasady semantyki na poziomie tekstu w kodzie 125

Poprawienie dost pno ci strony za pomoc standardu WAI-ARIA 127Punkty orientacyjne w standardzie ARIA 127

Zagnie d anie elementoacutew multimedialnych w HTML5 130Zagnie d anie multimedioacutew wed ug HTML5 131

Alternatywne roacuted a plikoacutew 132Awaryjna obs uga w starszych przegl darkach 133Znaczniki audio i video dzia aj niemal identycznie 133

Skalowalne odtwarzacze filmoacutew 134Aplikacje sieciowe w trybie offline 137

Aplikacje offline od podszewki 137Wdra anie trybu offline 137Sk adnia pliku manifestu 139Automatyczne wczytywanie stron w manife cie 139Komentarze wersji 140Odczytywanie strony w trybie offline 140Rozwi zywanie problemoacutew z aplikacjami offline 141

Podsumowanie 142

Rozdzia 5 CSS3 selektory typografia i tryby barw 143

Co CSS3 oferuje projektantom stron 144Obs uga CSS3 w Internet Explorerze 6 7 i 8 144Wykorzystanie CSS3 do projektowania i formatowania stron w przegl darce 145

Struktura regu CSS 145Przedrostki autorskie i sposoacuteb ich wykorzystania 145Przydatne triki w CSS3 148

Uk ad wielokolumnowy w CSS3 dla projektu skalowalnego 148Zawijanie tekstu 151

Nowe selektory CSS3 i sposoacuteb ich wykorzystania 152Selektory atrybutoacutew w CSS3 152Strukturalne pseudoklasy CSS3 155Poprawki wprowadzane w pseudoelementach 164

Kup książkę Poleć książkę

Spis tre ci

6

W asna typografia sieciowa 166Regu a font-face 166Odwo anie do fontoacutew w regule font-face 167

Pomocy mdash moje nag oacutewki font-face CSS3 wygl daj okropnie 170Uwagi na temat elementoacutew typograficznych font-face

i elastycznego projektu strony 173Nowe formaty barw CSS3 i kana alfa 173

Tryb RGB 174Tryb HSL 175Awaryjne tryby barw dla Internet Explorera 6 7 i 8 176Kana y alfa 176

Podsumowanie 178

Rozdzia 6 Spektakularny wygl d i CSS3 179

Cieniowanie tekstu w CSS3 180Obs ugiwane tryby barw HEX HSL i RGB 180Jednostki piksele em i rem 181Blokowanie w a ciwo ci text-shadow 182Tworzenie efektu uwypuklenia za pomoc w asno ci text-shadow 184Nak adanie wielu efektoacutew cienia na tekst 184

Cieniowanie komponentoacutew 185Cieniowanie do wewn trz elementu 185Nak adanie wielu cieni na element 187

Gradienty t a 188Liniowe gradienty t a 189Gradienty ko owe 193Powtarzanie gradientu 196

Wzorce t a gradientu 198Projektowanie elastyczne a CSS3 200Korzystanie z wielu w a ciwo ci CSS3 naraz 202Wiele obrazoacutew t a naraz 206

Wymiary t a 208W a ciwo background position 208Skroacutecona deklaracja w a ciwo ci background 209

Wi cej w a ciwo ci CSS3 209Elastyczne ikony doskona e dla projektu skalowalnego 209Podsumowanie 210

Rozdzia 7 Przej cia transformacje i animacje w CSS3 213

Czym s przej cia CSS3 i jak mo emy z nich korzysta 214Typy w a ciwo ci przej 215Ciekawe typy przej dla elastycznych stron 218

Transformacje dwuwymiarowe a CSS3 219Co mo emy podda transformacji 220

Zabawa transformacjami troacutejwymiarowymi 224Sk adnia transformacji troacutejwymiarowych 226Transformacje troacutejwymiarowe wci raczkuj 230

Kup książkę Poleć książkę

Spis tre ci

7

Animacje w CSS3 231czenie animacji i transformacji CSS3 234

Podsumowanie 237

Rozdzia 8 Opanowanie formularzy w HTML5 i CSS3 239

Formularze a HTML5 240Komponenty w formularzach HTML5 242placeholder 242required 243autofocus 244autocomplete 244list (i powi zane elementy listy) 245Rodzaje kontrolek HTML5 246Kontrolki daty i godziny 252

Wype nienia dla starszych przegl darek 257Formatowanie formularzy HTML5 za pomoc arkuszy CSS3 258

Selektory pseudoklas CSS3 dla formularzy 262Podsumowanie 265

Rozdzia 9 Rozwi zywanie problemoacutew kompatybilno ci uk adoacutew wra liwychz przegl darkami 267

Ulepszenie post powe a agodna degradacja 272Praktyka 272

Czy powiniene naprawia problemy we wszystkich wersjach Internet Explorera 273Dane statystyczne (znowu) 274Kwestia w asnego wyboru 274

Modernizr mdash scyzoryk projektanta stron 275Rozwi zywanie problemoacutew z formatowaniem 277Obs uga elementoacutew HTML5 w starszych Internet Explorerach a Modernizr 279Implementacja obs ugi zapyta medialnych w Internet Explorerze 6 7 i 8 280Modernizr i wczytywanie warunkowe 282

Transformacja nawigacji mdash menu pionowe 284Urz dzenia z ekranami o wysokiej rozdzielczo ci (rzut okiem w przysz o ) 288Podsumowanie 291

Skorowidz 293

Kup książkę Poleć książkę

Spis tre ci

8

Kup książkę Poleć książkę

3

Opanowanieuk adoacutew p ynnych

Gdy w latach 90 ubieg ego wieku zacz em konstruowa witryny ich uk ad powstawa na ba-zie tabeli Najcz ciej wymiary pojedynczych sekcji ka dej strony by y wyra ane w procen-tach Przyk adowo lewa kolumna nawigacji mog a wype nia 20 procent strony podczas gdyobszar tre ci 80 procent W przesz o ci nie by o tak wielkich roacute nic mi dzy obszarami opera-cyjnymi przegl darek jak obecnie wi c te uk ady by y dobrze skalowane w w skim wyborzeekranoacutew Nikogo nie obchodzi o e pojedyncze zdania wygl da y odrobin inaczej na roacute -nych ekranach Jednak e z biegiem czasu uk ady CSS sta y si norm bo pozwala y na od-zwierciedlenie zasad typograficznych stosowanych w materia ach drukowanych Zmiana taoznacza a znaczne zmniejszenie liczby uk adoacutew konstruowanych na podstawie proporcji mdash za-miast nich powstawa y ich sztywne odpowiedniki ktoacuterych wymiary definiowano w pikselach

Podobnie jak inne wa ne osi gni cia aktualnie ten rodzaj projektowania prze ywa renesansW przeci gu ostatnich lat miniaturowe samochody trwa a fryzura (chcia oby si hellip) oraz jeansydzwony powroacuteci y do ask Nadszed czas by roacutewnie uk ady proporcjonalne zosta y odkrytena 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 wymiaroacutew ekranu

Kup książkę Poleć książkę

Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3

72

zrozumiesz w jaki sposoacuteb uzupe niaj si zapytania medialne i p ynne uk ady stronoraz grafik

stworzysz uk ad skalowalny od podstaw w oparciu o system siatek CSS

Uk ady sta e nie s przystosowanedo nowych wyzwaJak ju wspomnia em od czasoacutew uk adoacutew tabelarycznych nie mia em zbyt wielu okazji bywykorzystywa projekty proporcjonalne Zwykle klienci prosz mnie o stworzenie uk adunajbli ej odzwierciedlaj cego graficzny model w obr bie 950 ndash 1000 pikseli Je eli zbudowa -bym projekt w oparciu o proporcjonalne warto ci (np 90) szybko dosta bym skarg bdquoAle towygl da inaczej na moim monitorzerdquo Witryny skonstruowane na bazie sta ych wymiaroacutewwyra 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 ulep-szonej wersji uk adu dopasowuj cej si do szeroko ci popularnych urz dze np iPada lubiPhonersquoa (o czym przekona e si w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo) wymiary uk adu w dalszym ci gu mog y by wyra one w pik-selach poniewa znali my wielko obszaru operacyjnego Cho znajd si tacy ktoacuterzy ch t-nie wy l klientowi rachunek za ka dym razem gdy najdzie go ochota by doda nowy bajer dostrony nie jest to podej cie dobrze przygotuj ce witryn na przysz o Na rynku pojawiaj sicoraz to nowsze typy obszaroacutew operacyjnych wi c musimy znale jaki sposoacuteb by przygoto-wa si na nadej cie nieznanego

Czemu uk ady proporcjonalne s tak wa new metodologii RWDMimo e zapytania medialne s bardzo przydatne maj pewne ograniczenia Dowolny sta yprojekt witryny korzystaj cy z zapyta medialnych do dopasowania si do roacute nych obszaroacutewoperacyjnych b dzie po prostu przechodzi z jednego zestawu regu do drugiego bez adnejanimacji pomi dzy stanami Jak pami tasz w przyk adzie z rozdzia u 2 bdquoZapytania medialneobs uga zroacute nicowanych obszaroacutew operacyjnychrdquo obszar operacyjny zmienia si w obr biesta ych zakresoacutew zapyta i wymaga przewijania strony w poziomie dla niestandardowychrozdzielczo ci (ktoacutere mog obowi zywa w nowych nieznanych dot d urz dzeniach) Myjednak chcemy by nasz uk ad przewija si i wygl da dobrze we wszystkich obszarach opera-cyjnych a nie tylko tych zdefiniowanych w zapytaniu medialnym Ci cie (Rozumiesz Ci cieTakie filmowe powiedzenie w sam raz dla naszej filmowej witrynyhellip Prawda Nie Ju id poswoacutej p aszczhellip) Musimy przemieni nasz sta y uk ad wyra ony w pikselach w uk ad p ynny zbu-

Kup książkę Poleć książkę

Rozdzia 3 bull Opanowanie uk adoacutew p ynnych

73

dowany w oparciu o proporcjonalne jednostki Pozwoli to elementom dynamicznie dopasowywasi wzgl dem obszaru operacyjnego do momentu gdy do akcji wkroczy zapytanie medialnei zmodyfikuje uk ad

Symbioza uk adu proporcjonalnego i zapyta medialnych

Wspomnia em wcze niej artyku autorstwa Ethana Marcottersquoa na temat metodologii RWD ktoacutery opubli-kowano w witrynie A List Apart (httpwwwalistapartcomarticlesresponsive-web-design) Cho na-rz dzia ktoacuterych u y w omawianym przyk adzie (p ynny uk ad obrazy i zapytania medialne) nie by ywcale nowe prawdziw sensacj by o nowatorskie wykorzystanie wszystkich tych technik do stworze-nia spoacutejnej ca o ci Dla wielu projektantoacutew witryn ten artyku by kluczem do wiata nowych mo liwo-ci Przedstawia sposoacuteb ktoacutery czerpie to co najlepsze z dwoacutech wiatoacutew stworzenie p ynnego uk adu

bazuj cego na projekcie proporcjonalnym przy jednoczesnym ograniczeniu rozstawienia elementoacutew zapomoc zapytania medialnego Wykorzystanie tych aspektoacutew razem jest fundamentem metodologii RWDdzi ki ktoacuterej powstaje co znacznie wi kszego ni suma cz ci sk adowych

Transformacja sta ego uk aduw projekt proporcjonalnyW najbli szej przysz o ci wszystkie gotowe kompozyty ktoacutere otrzymasz lub stworzysz b dmia y sta szeroko Aktualnie w oprogramowaniu w rodzaju Adobe Photoshop i Fireworkswymiary elementoacutew wielko marginesoacutew itp wyra amy w pikselach Dane te wprowadza-my poacute niej w arkuszach styloacutew CSS To samo dotyczy rozmiaroacutew tekstu W naszym ulubio-nym programie graficznym klikamy fragment tekstu zapisujemy wielko fontu (te wyra onw pikselach) i przenosimy j do odpowiednich regu CSS W jaki wi c sposoacuteb mo emy prze-mieni nasz uk ad sta y w proporcjonalny

Wa ne roacutewnanieBy mo e w Twoich oczach jestem zbyt wielkim fanem Ethana Marcottersquoa lecz czuj e mu-sz po raz kolejny uchyli mu kapelusza (lub odda kolejny uk on w jego stron albo paprzed nim na kolana) W ksi ce autorstwa Dana Cederholma mdash Handcrafted CSS mdash EthanMarcotte wspoacute tworzy rozdzia po wi cony p ynnym siatkom projektowym W nim opisaprosty i niezawodny wzoacuter s u cy do transformacji warto ci pikselowych w uk adzie sta ym nawarto ci procentowe w projekcie proporcjonalnym

element docelowy kontekst = wynik

Roacutewnanie to jest niepozorne czy nie Szybko jednak oka e si e jest ono Twoim najlepszymprzyjacielem Zamiast rozprawia o teoriach wykorzystajmy ten wzoacuter w praktyce zamieniaj cjednostki wymiaroacutew witryny Zwyci zc nie jesthellip na procenty

Kup książkę Poleć książkę

Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3

74

Jak pami tasz w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowanych obszaroacutew opera-cyjnychrdquo ustanowili my struktur kodu naszej strony

ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gt ltdiv id=headergt ltdiv id=navigationgt ltulgt ltligtlta href=gtnawigacja1ltagtltligt ltligtlta href=gtnawigacja2ltagtltligt ltulgt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltpgtobszar paska bocznegoltpgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltpgtobszar g oacutewnej zawarto ci stronyltpgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtstopkaltpgt ltdivgtltdivgt

W dalszej cz ci dodali my tre ci ale tym co nas interesuje w tej chwili s wymiary elemen-toacutew strukturalnych (nag oacutewka nawigacji paska bocznego tre ci i stopki) w arkuszach CSSNi ej pomin em wiele regu formatowania by my mogli skupi nasz uwag na strukturze

wrapper margin-right auto margin-left auto width 960pxheader margin-right 10px margin-left 10px width 940pxnavigation padding-bottom 25px margin-top 26px margin-left -10px padding-right 10px padding-left 10px width 940pxnavigation ul li

Kup książkę Poleć książkę

Rozdzia 3 bull Opanowanie uk adoacutew p ynnych

75

display inline-block content margin-top 58px margin-right 10px float right width 698pxsidebar 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 220pxfooter 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 naj-bardziej na zewn trz struktury uk adu i zmie my jednostki jego wymiaroacutew na procenty korzy-staj c ze wzoru element docelowy kontekst = wynik

Wszystkie nasze tre ci s zawarte w elemencie div oznaczonym identyfikatorem wrapperZ kodu CSS atwo odczyta e jego marginesy s ustawione automatycznie i sam element ma960 pikseli Jak zdefiniowa jak wielk cz obszaru operacyjnego powinien zajmowa takizewn trzny komponent div

Definiowanie kontekstu w elementach proporcjonalnychPotrzebujemy czego co pomie ci wszystkie proporcjonalne elementy (tre ci pasek bocznystopk itd) staj c si dla nich kontekstem ktoacutery zawrzemy w naszym projekcie Z tego powodumusimy wyznaczy proporcjonaln warto szeroko ci komponentu wrapper w stosunku dowymiaroacutew obszaru operacyjnego Na razie przeprowad my eksperyment ustawiaj c szerokona 96 procent i zobaczmy co si stanie Oto poprawiona regu a komponentu wrapper

Kup książkę Poleć książkę

Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3

76

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 wy-bra 100 albo 90 procent mdash dowoln wielko ktoacutera wyznaczy aby wygodne granice w obsza-rze operacyjnym

Kup książkę Poleć książkę

Rozdzia 3 bull Opanowanie uk adoacutew p ynnych

77

Schodz c w doacute struktury witryny szybko zauwa ymy e zmiana uk adu na proporcjonalnystaje si coraz bardziej skomplikowana Najpierw przyjrzyjmy si strukturze nag oacutewka Przy-pomnij sobie wzoacuter element docelowy kontekst = wynik Nasz element docelowy (headerdiv) 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 kontek-stu (komponentu wrapper) ktoacutera mia a warto 960 pikseli i otrzymujemy wynik 0979166667Warto t wyra amy w procentach przesuwaj c dwie pierwsze cyfry u amka przed przecinekdziesi tny i otrzymujemy warto procentow 979166667 Zapiszmy j w regule CSS

header margin-right 10px margin-left 10px width 979166667 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 wrapperZ uwagi na fakt i kontekst pozosta ten sam (960 pikseli) wystarczy e podzielimy szerokoelementu docelowego przez jego rozpi to Nasz element content ma aktualnie 698 pikseliwi c podzielmy to przez 960 a otrzymamy wynik roacutewny 0727083333 Przesu my przecinekdziesi tny o dwa miejsca a otrzymamy 727083333 procenta mdash jest to nowa procentowa szero-ko komponentu div z identyfikatorem content Z kolei nasz panel boczny ma szeroko 220pikseli lecz musimy te pami ta o szerokiej na 2 piksele kraw dzi Nie chcemy by gruboprawej kraw dzi rozszerza a si lub zw a a wi c w dalszym ci gu b dzie ona mia a 2 pikse-le Z tego wzgl du nale y uj odrobin z szeroko ci paska bocznego Odj em wi c 2 piksele iprzeprowadzi em obliczenia wed ug naszego roacutewnania Podzieli em szeroko elementu docelo-wego (czyli po poprawce 218 pikseli) przez rozpi to kontekstu (960 pikseli) mdash otrzyma em wy-nik 0227083333 Przenosz przecinek dziesi tny o dwa miejsca i dostaj 227083333 procentaszeroko ci paska bocznego Po zmodyfikowaniu wszystkich warto ci nasz arkusz CSS prezen-tuje si w nast puj cy sposoacuteb

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 979166667 940 960 navigation padding-bottom 25px

Kup książkę Poleć książkę

Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3

78

margin-top 26px margin-left -10px padding-right 10px padding-left 10px width 727083333 698 960 navigation ul li display inline-blockcontent margin-top 58px margin-right 10px float right width 727083333 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 227083333 218 960 footer float left margin-top 20px margin-right 10px margin-left 10px clear both width 979166667 940 960

Poni szy zrzut ekranu przedstawia wygl d strony w oknie przegl darki Firefox ktoacuterego obszaroperacyjny ma szeroko powy ej 1000 pikseli

Dobrze nam idzie Zast pmy teraz wszystkie deklaracje 10 px w a ciwo ci padding i marginw arkuszu warto ciami wzi tymi ze wzoru element docelowy kontekst = wynik Wszystkie kom-ponenty o szeroko ci 10 pikseli maj ten sam kontekst a ich rozpi to wyra ona w procentachwynosi 10416667

Kup książkę Poleć książkę

Rozdzia 3 bull Opanowanie uk adoacutew p ynnych

79

A tych liczb to nie mo na zaokr gli

Niektoacuterzy krytycy metodologii RWD (np autor artyku u httptripleodeoncom201010not-a-mobile-web-merely-a-320px-wide-one) twierdz e wprowadzanie liczb w rodzaju 0550724638 em we-wn trz arkusza styloacutew 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 temub dzie ona w stanie precyzyjniej wy wietla wszystkie elementy Tak na marginesie je li w szkole niezasypia e zbyt cz sto na lekcjach matematyki z pewno ci s ysza e o z otej proporcji (httpplwikipediaorgwikiZ oty_podzia ) Ta matematyczna proporcja charakteryzuje ka d dyscyplin naukowi wynosi 1161803398874989 (je li chcesz pozna jej 10 000 miejsce po przecinku zajrzyj na stronhttpwwwmathssurreyacukhosted-sitesRKnottFibonacciphi10000dpstxt) Nie jest to roacutewna liczbalecz ma ona wielkie znaczenie Je li z ota proporcja mo e by wyra ona w taki sposoacuteb czemu nie naszeprojekty witryn

Kup książkę Poleć książkę

Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3

80

Wszystkie elementy w dalszym ci gu prezentuj si bardzo dobrze w tym samym rozmiarzeobszaru operacyjnego Jedyny problem stanowi nawigacja Je li odrobin zmniejsz szerokoobszaru operacyjnego linki rozwin si w dwoacutech wierszach

Co wi cej je li rozszerz okno margines pomi dzy linkami nie b dzie zwi ksza si propor-cjonalnie Rzu my okiem na regu y CSS definiuj ce nawigacj i sproacutebujmy ustali czemu taksi dzieje

navigation padding-bottom 25px margin-top 26px

Kup książkę Poleć książkę

Rozdzia 3 bull Opanowanie uk adoacutew p ynnych

81

margin-left -10416667 10 960 padding-right 10416667 10 960 padding-left 10416667 10 960 width 979166667 940 960 background-repeat repeat-x background-image url(imgatwiNavBgpng) border-bottom-color bfbfbf border-bottom-style double border-bottom-width 4pxnavigation ul li display inline-blocknavigation 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 se-lektora navigation ul li a ktoacutery ma margines roacutewny 25 pikseli Naprawmy to stosuj c na-sze roacutewnanie Element navigation mia szeroko 940 pikseli wi c ostateczny wynik pro-centowy jest roacutewny 26595745 Zmie my wi c nasz regu w nast puj cy sposoacuteb

navigation ul li a height 42px line-height 42px margin-right 26595745 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 darkahellip

A niech to Nie o to nam chodzi o Linki nie rozchodz si ju w dwoacutech wierszach lecz nieznamy w a ciwej proporcji marginesoacutew Linki nawigacyjne zlewaj si w jedno d ugie s owoktoacuterego proacute no szuka w s owniku

Kup książkę Poleć książkę

Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3

82

Zawsze nale y pami ta o kontek cieAnalizuj c uwa nie nasz wzoacuter (element docelowy kontekst = wynik) atwo zrozumie cze-mu tak si dzieje Naszym problemem w tym miejscu jest kontekst Rzu okiem na kod

ltdiv id=navigationgt ltulgt ltligtlta href=gtO witrynieltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt

Kup książkę Poleć książkę

Rozdzia 3 bull Opanowanie uk adoacutew p ynnych

83

ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgtltdivgt

Jak zauwa ysz elementy lta href=gt znajduj si wewn trz znacznika ltligt To one s kon-tekstem dla naszego proporcjonalnego marginesu Gdy przyjrzymy si regule CSS tychznacznikoacutew oka e si e nie zdefiniowali my dla nich szeroko ci

navigation ul li display inline-block

Jak wi kszo problemoacutew tak i ten mo na rozwi za na wiele sposoboacutew Mogliby my zade-klarowa pewn szeroko dla elementu ltligt ale musieliby my wyrazi j w pikselach lubw procentach nadrz dnego komponentu (navigation) mdash adne z tych rozwi za nie jest doelastyczne by odpowiednio sformatowa tekst ktoacutery pojawia si w nawigacji

Zamiast tego mogliby my poprawi znacznik ltligt zmieniaj c w a ciwo display na inline

navigation ul li display inline

Wyboacuter opcji display inline (ktoacutera sprawia e elementy ltligt trac swoacutej blokowy status) powodu-je e komponenty nawigacji s wy wietlane w poziomie nawet we wcze niejszych wersjach In-ternet Explorera (6 i 7) ktoacutere mia y problemy ze zinterpretowaniem w a ciwo ci inline-block Musz jednak przyzna e jestem wielkim zwolennikiem w asno ci inline-block po-niewa daje ona wi ksz kontrol nad marginesami i wype nieniem w nowych przegl dar-kach wi c na razie zostawi j bez zmian (by mo e poacute niej dodam style dla IE 6 i 7) a zamiasttego przenios regu marginesu ze znacznika ltagt (ktoacutery nie ma jasnego kontekstu) do blokultligt Oto jak prezentuj si regu y po poprawkach

navigation ul li display inline-block margin-right 26595745 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

Kup książkę Poleć książkę

Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3

84

Poni szy zrzut ekranu pokazuje jak strona wygl da w przegl darce o obszarze operacyjnymszerokim na 1200 pikseli

Nawigacja jest ju prawie gotowa lecz nadal mamy problem z jej zawijaniem si do dwoacutech linijekw momencie zmniejszenia si obszaru operacyjnego do wielko ci 768 pikseli gdy zapytaniemedialne ktoacutere przygotowali my w rozdziale 2 bdquoZapytania medialne obs uga zroacute nicowa-nych obszaroacutew operacyjnychrdquo nadpisze aktualne style nawigacji Nim przejdziemy do jej na-prawienia zmieni wszystkie jednostki wielko ci elementoacutew typografii z pikseli na em Gdy to sinam powiedzie przyjrzymy si kolejnemu s oniowi w sk adzie porcelany czyli kwestii skalo-wania obrazoacutew wraz z projektem

Kup książkę Poleć książkę

Rozdzia 3 bull Opanowanie uk adoacutew p ynnych

85

Wykorzystywanie jednostek emzamiast pikseli w kontek cie typografiiDawno dawno temu projektanci witryn wykorzystywali g oacutewnie jednostki em zamiast pikselido definiowania elementoacutew typograficznych poniewa wczesne wersje Internet Exploreranie by y w stanie przybli a tekstu zdefiniowanego w pikselach Od jakiego czasu nowocze-sne przegl darki potrafi omin t niedogodno Czemu wi c u ywanie jednostek em jestlepszym je li nie wymaganym rozwi zaniem S ku temu dwa oczywiste powody po pierw-sze wszystkie osoby u ywaj ce Internet Explorera 6 (tak te dwa indywidua) automatycznieotrzymuj opcj przybli ania tekstu po drugie znacznie u atwia to Twoj prac Warto jed-nostki em zale y od rozmiaroacutew jej kontekstu Je li zdefiniujemy wielko fontu w ca ym ele-mencie body i ustalimy regu y typograficzne u ywaj c jednostek em nasza pierwsza deklara-cja b dzie mia a wp yw na wszystkie style Zalet jest fakt e przy prawid owychustawieniach je li klient poprosi Ci o powi kszenie fontoacutew wystarczy zmieni parametrydeklaracji dla elementu body by typografia w ca ej witrynie uleg a modyfikacji

U ywaj c znanego nam roacutewnania element docelowy kontekst = wynik zamierzam zamienika d warto wyra on w pikselach na warto em Warto zauwa y e we wszystkich nowo-czesnych przegl darkach warto font-size domy lnie jest roacutewna 16 pikseli (chyba e j samnadpisa e ) Z tego powodu wykorzystanie dowolnej z poni szych regu do znacznika body za-owocuje takim samym wynikiem

font-size 100font-size 16pxfont-size 1em

Aby lepiej zrozumie ten mechanizm zwroacute uwag na definicj wielko ci fontu w tytule wi-tryny ZWYCI ZC NIE JESThellip u goacutery po lewej stronie

logo display block padding-top 75px color 0d0c0c text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 48pxlogo 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

Kup książkę Poleć książkę

Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3

86

text-transform uppercase font-family Arial Lucida Grande Verdana sans-serif font-size 3em 48 16 = 3

Ten sam mechanizm sprawdzi si w ka dym przypadku Je li w ktoacuterym momencie na stroniezapanuje chaos mo e to wynika ze zmiany w kontek cie Dla przyk adu spoacutejrz na ten otofragment strony

lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutewprzepe nia mnie goryczltspangtlth1gt

Nasz nowy uk ad bazuj cy na jednostkach em zosta zdefiniowany w CSS nast puj co

content h1 font-family Arial Helvetica Verdana sans-serif text-transform uppercase font-size 43125em 69 16 content h1 span display block line-height 1052631579em 40 38 color 757474 font-size 550724638em 38 69

Zwroacute uwag na zadeklarowan wielko fontu elementu ltspangt (38 px) w stosunku do dekla-racji w elemencie rodzica (69 px) Zauwa te e w a ciwo line-height (roacutewna tu 40 px)zale y od wielko ci samego fontu (czyli 38 px)

em mdash co to takiego

Jednostka em wzi a si ze sposobu wymawiania litery bdquoMrdquo ktoacutery zosta przeniesiony na form pisem-n Dawniej litera bdquoMrdquo by a wykorzystywana do ustalenia wielko ci danego fontu poniewa jest naj-wi ksz (i najszersz ) z liter Obecnie jednostka em oznacza proporcj szeroko ci i wysoko ci danej literyw odniesieniu do wielko ci danego fontu

Struktura naszej strony jest ju elastyczna i uda o nam si zmieni wszystkie jednostki wiel-ko ci kroju pisma na em W dalszym ci gu jednak nie wiemy jak przeskalowa obrazy wraz zezmian wielko ci obszaru operacyjnego wi c warto si tym teraz zaj

Kup książkę Poleć książkę

Rozdzia 3 bull Opanowanie uk adoacutew p ynnych

87

P ynne obrazyatwo dokona przeskalowania obrazoacutew w p ynnym uk adzie strony w nowoczesnych prze-

gl darkach (w tym w IE 7+) Wystarczy tylko zadeklarowa nast puj c regu CSS

img max-width 100

W rezultacie wszystkie obrazy wype ni 100 procent zawieraj cego je elementu Co wi cejten sam atrybut i w a ciwo sprawdz si w skalowaniu innych typoacutew medialnych

imgobjectvideoembed max-width 100

Wi kszo z nich stanie si skalowalna z pewnymi istotnymi wyj tkami jak filmy zagnie -d one w elemencie ltiframegt lecz zajmiemy si nimi poacute niej w rozdziale 4 bdquoHTML5 i pro-jekty elastycznerdquo Na razie skupimy si na obrazach mdash mechanizm pozostaje ten sam niezale nieod typu multimedioacutew

Nim przyst pimy do dzia ania zastanoacutewmy si nad kolejnymi krokami Musimy zaplanowadzia ania z wyprzedzeniem mdash wstawiane obrazy powinny by do du e by zmie ci siw obr bie szerokiego obszaru operacyjnego To zmusza nas do rozwa enia jeszcze jednej kwe-stii Niezale nie od szeroko ci obszaru operacyjnego u ytkownicy b d musieli ci gn du yobraz nawet je li ekran b dzie w stanie pomie ci jedynie 25 procent grafiki Jest to wa ne za-gadnienie z punktu widzenia przepustowo ci cza wi c wkroacutetce po wi cimy mu wi cejuwagi Na razie skoncentrujmy si na skalowaniu obrazoacutew

Skalowanie obrazoacutew w obr bie obszaru operacyjnegoSpoacutejrz na nasz pasek boczny zawieraj cy plakaty dwoacutech fantastycznych filmoacutew i dwoacutech ki-czowatych szmir (nawet nie proacutebuj o tym dyskutowa ) Kod struktury paska aktualnie pre-zentuje si nast puj co

lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt

Kup książkę Poleć książkę

Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3

88

lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgtltdivgt

Cho doda em deklaracj max-width 100 dla elementu img w obszarze operacyjnym nic sinie zmieni o mdash obrazy nie s przeskalowywane gdy powi kszam obszar operacyjny

Jest tak dlatego e w kodzie HTML zadeklarowa em szeroko i wysoko danego obrazu

ltimg src=imgwyattEarpjpg alt=Wyatt Earp width=99 height=135 gt

Kolejny szkolny b d Poprawiam wi c kod usuwaj c ze znacznika obrazoacutew atrybuty heighti width

ltimg src=imgwyattEarpjpg alt=Wyatt Earp gt

Kup książkę Poleć książkę

Rozdzia 3 bull Opanowanie uk adoacutew p ynnych

89

Zobaczmy co si stanie gdy od wie ymy okno

To dzia a Pojawia si jednak kolejny problem Obrazy s przeskalowywane tak aby wype ni100 szeroko ci elementu rodzica wi c wype niaj sob ca szeroko paska bocznego Jakzawsze jest wiele metod eby to naprawi

W a ciwe regu y dla w a ciwych obrazoacutewMoacuteg bym doda do ka dego elementu obrazu dodatkow klas co ma miejsce w poni szymfragmencie

ltimg class=sidemage src=imgwyattEarpjpg alt=Wyatt Earp gt

Teraz wystarczy oby ustali w tej klasie okre lon szeroko Zamiast tego wol pozostawikod witryny w spokoju i wykorzysta CSS aby nadpisa ju zdefiniowan w asno max-widthregu dotycz c obrazoacutew w pasku bocznym

Kup książkę Poleć książkę

Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3

90

img max-width 100sideBlock img max-width 45

Poni szy rysunek prezentuje wygl d naszej strony po zmianach

Wykorzystanie tego mechanizmu CSS pozwala uzyska dodatkow kontrol nad szeroko ciobrazoacutew i innych typoacutew multimedioacutew W rozdziale 5 bdquoCSS3 selektory typografia i trybybarwrdquo dowiesz si w jaki sposoacuteb nowe selektory CSS3 pozwalaj nam odwo a si do dowolne-go elementu bez potrzeby stosowania dodatkowego kodu czy korzystania z biblioteki jQuerydo wykonania niewdzi cznej roboty

Postanowi em e obrazy w panelu bocznym b d mia y 45 procent szeroko ci elementu rodzi-ca poniewa wiem e pomi dzy nimi powinienem wstawi drobny margines mdash je li oba ob-razy zajm 90 procent ca kowitej rozpi to ci b d mia wystarczaj co du o miejsca (10 procent)by wykona zadanie

Kup książkę Poleć książkę

Rozdzia 3 bull Opanowanie uk adoacutew p ynnych

91

Obrazy w pasku bocznym prezentuj si znakomicie wi c usu my atrybuty width i height zestatuetki Oscara Jednak e je li nie zdefiniujemy proporcjonalnej warto ci parametru width ob-raz nie b dzie si skalowa wi c nale y ustawi odpowiednie w a ciwo ci w arkuszu CSSwed ug dobrze nam znanej formu y element docelowy kontekst = wynik

oscarMain float left margin-top -28px width 289398281 698 202

Nak adanie hamulcoacutew na uk ad p ynnyNasze obrazy skaluj si dobrze w odpowiedzi na rozszerzanie i zw anie obszaru operacyj-nego Je li jednak rozszerzymy okno zbyt mocno naszym oczom uka e si niezbyt przyjemnywidok Rzu okiem na statuetk Oscara w rozdzielczo ci 1600 px

Obraz w pliku oscarpng ma szeroko 202 pikseli Je li jednak rozszerzymy okno do rozpi to-ci 1600 pikseli wy wietlana grafika b dzie mia a szeroko ponad 270 pikseli Mo emy jed-

nak atwo bdquona o y hamulcerdquo na obraz ustanawiaj c kolejn regu

Kup książkę Poleć książkę

Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3

92

oscarMain float left margin-top -28px width 289398281 698 202 max-width 202px

Regu a ta pozwoli grafice rozszerza si lecz nigdy nie przekroczy ona szeroko ci zdefinio-wanej w znaczniku max-width Gdy zdefiniujemy t warto strona b dzie prezentowa sipodobnie jak na poni szym zrzucie ekranu

Wszechstronna w asno max-widthKolejnym hamulcem dla nieograniczonego rozszerzania si strony jest na o enie w asno cimax-width na element wrapper

wrapper margin-right auto margin-left auto width 96 Dotyczy po o onego najbardziej na zewn trz elementu DIV max-width 1414px

Kup książkę Poleć książkę

Rozdzia 3 bull Opanowanie uk adoacutew p ynnych

93

W rezultacie uk ad witryny b dzie zajmowa 96 procent obszaru operacyjnego lecz nigdy nieprzekroczy granicy 1414 pikseli (zdecydowa em si ustawi j w tym miejscu poniewa w wi k-szo ci przegl darek ko czy to szereg chor giewek we w a ciwym momencie tak e adnaz nich nie jest przeci ta w rodku) Nast puj cy zrzut ekranu pokazuje jak nasza strona pre-zentuje si w obszarze operacyjnym szerokim na 1600pikseli

Naturalnie to zaledwie kilka opcji Dowodz one jednak wszechstronno ci p ynnego uk adui pokazuj jak atwo mo na kontrolowa przep yw strony przy u yciu kilku deklaracji

Wczytywanie roacute nych obrazoacutewdla roacute nych ekranoacutewNasze obrazy s skalowane w oknie przegl darki i kontrolujemy dok adnie ich wielko dlarozpi to ci okna Wcze niej w tym rozdziale zauwa yli my podstawowy problem zwi zany zeskalowaniem grafik Wielko ich plikoacutew musi by du a aby by y dobrze wy wietlane nastronach Je li nie s b d wygl da szkaradnie Z tego wzgl du pliki obrazoacutew s zwyklewi ksze ni jest to konieczne by zosta y wczytane w oknie przegl darki

Kup książkę Poleć książkę

Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3

94

Wiele osoacuteb proacutebowa o rozwi za ten problem poprzez wczytanie mniejszych obrazoacutew pasuj -cych do mniejszych wy wietlaczy Pierwszym wartym uwagi rozwi zaniem jest us uga oferowanaprzez zespoacute Filament Group zwana bdquoResponsive Imagesrdquo (httpfilamentgroupcomlabresponsive_images_experimenting_with_context_aware_image_sizing) Ostatnio jednak zacz emu ywa udost pnianego przez Matta Wilcoxa narz dzia bdquoAdaptive Imagesrdquo(httpadaptive-imagescom) Rozwi zanie zespo u Filament Group wymaga o dokonania zmian w kodzieHTML strony Rozwi zanie Matta jest bardziej wszechstronne i dodatkowo automatycznietworzy mniejsze wersje obrazoacutew na podstawie wymiaroacutew zdefiniowanych w kodzie HTMLPozwala ono na zmniejszenie wielko ci obrazoacutew i przes anie w a ciwej grafiki w zale no ci odliczby punktoacutew kontrolnych wymuszaj cych zmian uk adu strony Sprawd my wi c ile jestwarta us uga Adaptive Images

Konfigurowanie us ugi Adaptive ImagesRozwi zanie Adaptive Images wymaga serwera Apache 2 z zainstalowanym rodowiskiemPHP 5x oraz bibliotek GD Lib Musisz wi c dysponowa odpowiednim serwerem by sko-rzysta z oferowanych przez nie funkcji Pobierz plik zip i przyst pmy do dzia ania

Kup książkę Poleć książkę

Rozdzia 3 bull Opanowanie uk adoacutew p ynnych

95

Rozpakuj archiwum i umie skrypt adaptive-imagesphp wraz z plikiem htaccess w katalogug oacutewnym witryny Je li ju masz plik htaccess w katalogu g oacutewnym nie nadpisuj go Zamiasttego post puj zgodnie z instrukcjami z pliku instructionshtm ktoacutery dodano do archiwum

Teraz w katalogu g oacutewnym stwoacuterz folder i nadaj mu nazw ai-cache

U yj funkcji swojego ulubionego klienta FTP i ustaw prawa dost pu do pliku na 777

Teraz umie poni szy fragment kodu JavaScript w komponencie ltheadgt wszystkich stron naktoacuterych skorzystasz z funkcji adaptacyjnych obrazoacutew

ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+path=ltscriptgt

Kup książkę Poleć książkę

Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3

96

Zwroacute uwag e je eli nie u ywasz HTML5 (standard ten wykorzystamy w nast pnym roz-dziale) i je eli chcesz by strona by a automatycznie poddawana walidacji musisz doda atry-but type Dlatego te nasz kod powinien prezentowa si nast puj co

ltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt

Kod JavaScript musi znajdowa si w elemencie head (najlepiej je li jest to pierwszy elementltscriptgt w dokumencie) poniewa powinien zadzia a zanim strona zostanie w pe ni wczy-tana przed wys aniem da o przes anie obrazoacutew Poni szy przyk ad pokazuje jego pozycjw komponencie ltheadgt strony

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt

ltlink href=cssmaincss rel=stylesheet type=textcss gt

ltheadgt

Kup książkę Poleć książkę

Rozdzia 3 bull Opanowanie uk adoacutew p ynnych

97

Przenoszenie obrazoacutew t a do innej lokalizacjiW przesz o ci zwykle umieszcza em wszystkie swoje obrazy (zaroacutewno te u ywane do defi-niowania t a w CSS jak i grafiki zagnie d ane w kodzie HTML) w tym samym folderze ktoacuterynazywa em images lub img Jednak w przypadku narz dzia Adaptive Images lepiej jest je liobrazy t a na ktoacutere powo ujesz si w CSS (lub inne grafiki ktoacuterych wielko ci nie chcesz mo-dyfikowa ) zostan przeniesione do innego katalogu Narz dzie Adaptive Images domy lniedefiniuje odr bny folder assets przeznaczony do przechowywania obrazoacutew ktoacutere nie powin-ny zosta zmniejszone Je eli nie chcesz by Twoje grafiki zosta y zmienione przenie je dotego folderu Aby zdefiniowa inny folder docelowy w pliku htaccess wprowad nast puj cmodyfikacj

ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI assets RewriteCond REQUEST_URI bkg Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt

W tym przyk adzie zadeklarowali my e nie chcemy by nasze skalowalne obrazy by y od-czytywane z katalogoacutew assets lub bkg W odwrotnym przypadku je li chcesz otwarcie zadekla-rowa e skalowalne obrazy znajduj si w danym katalogu usu z regu y wykrzyknik Przy-k adowo je li chcia bym by moje obrazy znajdowa y si w podfolderze zwyciezca_nie_jestw pliku htaccess nale y wprowadzi tak oto zmian

ltIfModule mod_rewritecgt Options +FollowSymlinks RewriteEngine On Adaptive-Images -------------------------------------------------- RewriteCond REQUEST_URI zwyciezca_nie_jest Wy lij danie o przes anie dowolnego pliku GIF JPG lub PNG ktoacutery NIE ZOSTA zachowany w wymienionych wy ej katalogach do skryptu adaptive-imagesphp aby wybra jego wersj maj c w a ciwy rozmiar RewriteRule (jpeg|gif|png)$ adaptive-imagesphp END Adaptive-Images ----------------------------------------------ltIfModulegt

Tyle wystarczy To czy narz dzie dzia a sprawdzisz umieszczaj c du y obraz na stronie i uru-chamiaj c j na smartfonie Gdy otworzysz folder ai-cache w swoim ulubionym kliencie FTPpowiniene zauwa y pliki i foldery z nazwami wzi tymi od punktoacutew kontrolnych transformacjiTwojego uk adu np 480 (patrz zrzut poni ej)

Kup książkę Poleć książkę

Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3

98

Narz dzie Adaptive Images dzia a nie tylko w statycznych witrynach Mo na go u ywa roacutew-nie w po czeniu z systemami zarz dzania tre ci istnieje sposoacuteb na w czenie tego mechani-zmu nawet w sytuacji gdy przegl darka u ytkownika nie uruchomi kodu JavaScript Korzy-staj c z rozwi zania Adaptive Images mo esz przes a roacute ne grafiki w zale no ci od wielko ciekranu urz dzenia klienta i zaoszcz dzi na transferze danych w urz dzeniach ktoacutere nie od-nosz korzy ci z wczytywania domy lnych du ych obrazoacutew

P ynne siatki i zapytania medialnetworz jednoJak pami tasz wcze niej w tym rozdziale poruszyli my problem rozchodzenia si elementoacutewnawigacji pomi dzy wiele wierszy gdy obszar operacyjny osi gn pewn szeroko Problemzostanie rozwi zany je eli pos u ymy si zapytaniem medialnym Nasze linki rozpadaj si

Kup książkę Poleć książkę

Rozdzia 3 bull Opanowanie uk adoacutew p ynnych

99

na szeroko ci 1060 pikseli i wygl daj znoacutew dobrze w szeroko ci 768 pikseli (w miejscu gdzienasze wcze niej zdefiniowane zapytanie medialne wesz o do akcji) wi c czemu nie mieliby myzdefiniowa dodatkowych styloacutew fontoacutew w zakresie

media screen and (min-width 1001px) and (max-width 1080px) navigation ul li a font-size 14em media screen and (min-width 805px) and (max-width 1000px) navigation ul li a font-size 125em media screen and (min-width 769px) and (max-width 804px) navigation ul li a font-size 11em

Jak wida zmieniamy wielko fontu w zale no ci od szeroko ci obszaru operacyjnego i w re-zultacie wszystkie elementy naszej nawigacji zawsze pozostaj na swoim miejscu od rozpi to-ci 769 pikseli po niesko czono Jest to oczywisty dowoacuted silnej symbiozy mi dzy zapytaniami

medialnymi a projektami p ynnymi mdash zapytania medialne ograniczaj niedostatki uk adoacutewp ynnych a projekty p ynne u atwiaj przej cie z jednego uk adu witryny do innego

System siatek CSSRozwi zania siatek CSS stanowi kontrowersyjny temat Niektoacuterzy projektanci je uwielbiaj inni ich nienawidz Nim zostan zasypany goacuter emaili z pogroacute kami przyznam e sam je-stem niezdecydowany Cho rozumiem deweloperoacutew ktoacuterzy twierdz e s one zb dne i ge-neruj niepotrzebny kod doceniam ich warto gdy znacznie u atwiaj tworzenie prototy-poacutew uk adoacutew

Istnieje kilka rozwi za generowania arkusza siatek CSS ktoacutere charakteryzuj si roacute nym po-ziomem wsparcia dla idei RWD

Semantic (httpsemanticgs) Skeleton (httpgetskeletoncom) Less Framework (httplessframeworkcom) 1140 CSS Grid (httpcssgridnet) Columnal (httpwwwcolumnalcom)

Z tych wszystkich rozwi za wed ug mnie najlepszym jest system siatek Columnal poniewageneruje on p ynn siatk oraz zapytania medialne i wykorzystuje podobne zestawy klas do960gs bardzo popularnego sta ego systemu siatek ktoacutery jest znany wi kszo ci deweloperoacutew

Kup książkę Poleć książkę

Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3

100

Alpha Omega i inne powszechnie spotykane klasy siatekWiele systemoacutew siatek u ywa pewnych wspoacutelnych nazw klas wykorzystywanych w definiowaniu uk a-doacutew atwo odgadn funkcj klas row (rz d szereg) i container (kontener pojemnik) lecz istnieje wieleinnych ich wariantoacutew Dlatego te warto zaznajomi si bli ej z dokumentacj systemu siatek mdash mo eto znacznie u atwi Ci ycie Jednymi z najcz ciej wykorzystywanych nazw klas w systemach siatek CSSs alpha i omega mdash opisuj one odpowiednio pierwszy i ostatni element w szeregu (klasy alpha i omegausuwaj wype nienie i margines) Cz sto spotyka si te klas col_x gdzie x oznacza liczb kolumnuk adu ktoacutere dany element powinien zajmowa (np col_6 oznacza 6 kolumn)

B yskawiczne konstruowanie strony w systemie siatekZa oacute my e nie skonstruowali my jeszcze p ynnej siatki ani nie napisali my adnych zapytamedialnych Dostali my do r k oryginalny plik PSD z projektem uk adu strony g oacutewnej Zwyci zcnie jesthellip i powiedziano nam e mamy jak najszybciej odwzorowa jego struktur w HTML i CSSSprawd my czy system siatek Columnal pomo e nam sprosta temu wyzwaniu

W naszym oryginalnym pliku PSD atwo zauwa ymy e uk ad opiera si na 16 kolumnachNiestety system siatek Columnal obs uguje tylko 12 kolumn wi c sproacutebujmy na o y 12 ko-lumn na plik PSD zamiast oryginalnych 16

Po pobraniu archiwum ZIP i wypakowaniu jego zawarto ci stworzymy duplikat naszej witry-ny i w sekcji ltheadgt strony odwo amy si do pliku columnalcss zamiast do maincss Abystworzy wizualn struktur przy u yciu uk adu Columnal nale y odnie si do odpowied-nich klas w kodzie HTML Oto pe ny kod naszej strony przed wprowadzeniem tych zmian

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt

ltlink href=cssmaincss rel=stylesheet type=textcss gt

ltheadgt

ltbodygt

ltdiv id=wrappergt lt-- nag oacutewek i nawigacja --gtltdiv id=headergt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt

Kup książkę Poleć książkę

Rozdzia 3 bull Opanowanie uk adoacutew p ynnych

101

ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt lt-- tre ci --gt ltdiv id=contentgt ltimg class=oscarMain src=imgoscarpng alt=atwi_oscar width=202 height=531 gt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj

Kup książkę Poleć książkę

Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3

102

Typowe dla HollywoodltpgtltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebargt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=midnight_run width=99 height=135 gtltagt lta href=gtltimg src=imgwyattEarpjpg alt=wyatt-earp width=99 height=135 gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=MoulinRouge width=99 height=135 gtltagt lta href=gtltimg src=imgkingKongjpg alt=kingkong width=99 height=135 gtltagt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footergt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt

ltdivgtltbodygtlthtmlgt

Na pocz tek musimy potwierdzi e nasz kontener wrapper ma zawiera wszystkie inne ele-menty wi c dodajemy mu klas container

ltdiv id=wrapper class=containergt

Schodzimy troch ni ej a dotrzemy do frazy ZWYCI ZC NIE JESThellip w pierwszym rz dzieDo czmy wi c klas row do mieszcz cego j elementu

ltdiv id=header class=rowgt

Nasze logo cho ma tylko form tekstow mie ci si w rz dzie ktoacutery wype nia wszystkie12 kolumn Dlatego te dodajmy do jego komponentu deklaracj col_12

ltdiv id=logo class=col_12gtZwyci zc ltspangtnieltspangt jesthelliplt divgt

W nast pnym rz dzie widzimy nawigacj mdash tutaj wstawmy klas row

ltdiv id=navigation class=rowgt

Kup książkę Poleć książkę

Rozdzia 3 bull Opanowanie uk adoacutew p ynnych

103

Ca y proces nale y powtoacuterzy dla kolejnych elementoacutew dodaj c w odpowiednich miejscachklasy row i col_x Przeskoczymy kawa ek dalej bo boj si e u niesz gdy ja b d w koacute kopowtarza ten proces W zamian za to rzu okiem na pe ny kod po zmianach Zauwa e musie-li my przesun obraz statuetki Oscara i umie ci go w innej kolumnie Doda em te dodatko-wy element row wokoacute komponentoacutew content i sidebar

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=UTF-8 gtltmeta name=viewport content=width=device-widthinitial-scale=10 gtlttitlegtZwyci zc nie jesthelliplttitlegtltscript type=textjavascriptgtdocumentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path=ltscriptgt

ltlink href=csscolumnalcss rel=stylesheet type=textcss gtltlink href=csscustomcss rel=stylesheet type=textcss gt

ltheadgt

ltbodygt

ltdiv id=wrapper class=containergt lt-- nag oacutewek i nawigacja --gt ltdiv id=header class=rowgt ltdiv id=logogtZwyci zc ltspangtnieltspangt jestltdivgt ltdiv id=navigationgt ltulgt ltligtlta href=gtWitrynaltagtltligt ltligtlta href=gtStreszczenieltagtltligt ltligtlta href=gtFotosyltagtltligt ltligtlta href=gtWideoltagtltligt ltligtlta href=gtCytatyltagtltligt ltligtlta href=gtQuizltagtltligt ltulgt ltdivgt ltdivgt ltdiv class=rowgt

lt-- tre ci --gt ltdiv id=content class=col_9 alpha omegagt ltimg class=oscarMain col_3 src=imgoscarpng alt=atwi_oscar gt ltdiv class=col_6 omegagt lth1gtRok w rok ltspangtkiedy ogl dam ceremoni rozdania Oscaroacutew przepe nia mnie goryczltspangtlth1gt ltpgthellipna my l e takie filmy jak King Kong Moulin Rouge czy Monachium otrzymuj statuetk a prawdziwe fenomeny kina przegrywaj Typowe dla Hollywoodltpgt

Kup książkę Poleć książkę

Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3

104

ltpgtPoka emy ktoacutere filmy s warte zachodu ltpgt lta href=gtte filmy powinny wygra ampraquoltagt ltdivgt ltdivgt lt-- pasek boczny --gt ltdiv id=sidebar class=col_3gt ltdiv class=sideBlock unSunggt lth4gtZapomniani bohaterowielth4gt lta href=gtltimg src=imgmidnightRunjpg alt=Midnight Run gtltagt lta href=gtltimg class=sideImage src=imgwyattEarpjpg alt=Wyatt Earp gtltagt ltdivgt ltdiv class=sideBlock overHypedgt lth4gtPrzereklamowane badziewielth4gt lta href=gtltimg src=imgmoulinRougejpg alt=Moulin Rouge gtltagt lta href=gtltimg src=imgkingKongjpg alt=King Kong gtltagt ltdivgt ltdivgt ltdivgt lt-- stopka --gt ltdiv id=footer class=rowgt ltpgtUwaga liczy si tylko nasza opinia Ty si mylisz nawet je li wydaje Ci si e masz racj Takie s fakty Pogoacuted si z tymltpgt ltdivgt

ltdivgtltbodygtlthtmlgt

Konieczne okaza o si te dodanie dodatkowych regu CSS w pliku customcss Jego trewygl da nast puj co

navigation ul li display inline-blockcontent float rightsidebar float leftsideBlock width 100sideBlock img max-width 45 floatleftfooter float left

Kup książkę Poleć książkę

Rozdzia 3 bull Opanowanie uk adoacutew p ynnych

105

Po wprowadzeniu modyfikacji rzu my okiem na nasz stron by upewni si e naszastruktura dzia a poprawnie i dopasowuje si do obszaru operacyjnego przegl darki

Jasne jest e nad naszym uk adem trzeba b dzie jeszcze troch popracowa (wiem e jest towi cej ni niedopowiedzenie) lecz je li musisz szybko stworzy struktur dokumentu sys-tem siatek CSS w rodzaju Columnal jest wart Twojej uwagi

PodsumowanieW tym rozdziale dowiedzia e si jak mo na zmieni struktur uk adu ze sta ej opartej napikselach na bardziej elastyczn wyra on w procentach Nauczy e si te u ywa jedno-stek em zamiast pikseli do definiowania wielko ci kroju tekstu Wiesz roacutewnie jak sprawi by ob-razy by y skalowane w odpowiedzi na zmian wielko ci obszaru operacyjnego oraz potrafisz u y-wa serwerowego narz dzia s u cego do wysy ania obrazoacutew na urz dzenie klienta w zale no ciod wymiaroacutew jego ekranu Eksperymentowali my te z systemem siatek CSS zgodnym z filozofiRWD ktoacutery umo liwi nam stworzenie prototypu struktury strony przy minimalnym wysi ku

Kup książkę Poleć książkę

Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3

106

Do tej pory na drodze ku udoskonaleniu umiej tno ci stosowania zasad RWD u ywali mystandardu HTML 401 W rozdziale 1 bdquoPodstawy HTML5 CSS3 i projektowania elastycznychuk adoacutew stronrdquo wspomnia em o oszcz dno ciach jakie wyp ywaj z korzystania ze standarduHTML5 Oszcz dno ci te s szczegoacutelnie wa ne w przypadku uk adoacutew elastycznych ktoacutere sta-wiaj urz dzenia mobilne na piedestale poniewa pozwalaj na u ywanie przejrzystego szybkie-go we wczytywaniu i najbardziej semantycznego kodu z mo liwych W nast pnym rozdzialenauczysz si pos ugiwa si kodem HTML5 i wspoacutelnie zmodyfikujemy kod strony aby mog awzi to co najlepsze z najnowszej i najlepszej wersji tego standardu

Kup książkę Poleć książkę

Skorowidz

col_x 103

htaccess 95 97

Qcontainer 228

row 103not 163font-face 167 170 173ltagt 111ltaddressgt 117ltarticlegt 114ltasidegt 114ltbgt 124ltemgt 124ltfootergt 117ltheadergt 116lthgroupgt 115ltigt 125 126ltnavgt 114ltsectiongt 113

AAdaptive Images 94 97adaptive-imagesphp 95algorytm konspektu HTML5 115Android Software Development Kit 61animacje 231animacje CSS3 234animation-fill-mode 233animation-play-state 233aplikacje offline 137 141arkusz styloacutew 63arkusze CSS3 258aside 122atrybut

autobuffer 131autofocus 244

autoplay 131border 112controls 131lang 112media 49placeholder 242preload 131required 243step 256

autocomplete 244awaryjne tryby barw 176

Bbackground-image 39barwa strony 49biblioteka jQuery 24 44border-radius 38 260box-shadow 260

CChrome 37 40 41 44color 251Columnal 99 100Content Delivery Network CDN 135CSS 35 36 39 63 225CSS3 35 36 38 39 40 42 144 145 148 219

Ddane statystyczne 274datalist 245date 252datetime i datetime-local 254

Kup książkę Poleć książkę

Skorowidz

293

deklaracjaimport 51keyframes 232DOCTYPE 33 Patrz deklaracja typu

dokumentuHSL 176typu dokumentu 33

device-aspect-ratio 51domy lne style CSS 69

Eease 217elastyczny projekt witryny 20 45elastyczny uk ad 279element

footer 77navigation 77

ltheadgt 49elementy

HTML5 272semantyczne 34 112strukturalne 117

em 24 85email 246Embedded Open TypeEOT 166ems 24estetyczny rozk ad elementoacutew 68etap oficjalnej rekomendacji konsorcjum W3C 48etap proponowanej rekomendacji 48etap rekomendacji kandydata 48Ethan Marcotte 9 268extracss 283

Ffieldset 242filozofia RWD 53Firefox 38 41 44 274Flash 40font-weight 172format UTC 255formatowanie

formularzy 258linkoacutew 214punktoacutew orientacyjnych ARIA 130stron w przegl darce 145

formaty barw 173formularz 240 242funkcja czasu 217

GGoogle Fonts 168gradient 260

HHSB 175HTML 54HTML5 32 33 34 35 42 107 108HTML5 Boilerplate 109

Iinput 242Internet Explorer 20 36 41 42 44 49 53 144

274

JJavaScript 33 40 48 144jednostka 86

Kkana alfa 173 176kaskadowe arkusze styloacutew Patrz CSSkatalog

assets 97bkg 97

klasa back 228komentarze warunkowe 282kontekst 82kontrolka daty i godziny 252

Llink 110list 245lista 245lista pseudoklas 163

agodna degradacja 272czenie animacji i transformacji 234

Kup książkę Poleć książkę

Skorowidz

294

MMac App Store 61matrix 220 222mechanizm automatycznego

dopasowania 60skalowania strony 60

menu pionowe 284Microsoft Internet Explorer Developer Toolbar

24Microsoft Internet Explorera Patrz Internet

Explorermodel WAI-ARIA 14Modernizr 108 275 277 278modu y CSS 47month 253moz 39Mozilla 39ms 39

Nnag oacutewek 55narz dzia testowe obszaru operacyjnego 24narz dzie NonVisual Desktop Access NVDA

130number 247

Oobrazy t a 58obs uga zapyta medialnych 280obsza operacyjny 25 57 63 268Odnajdywanie emulatoroacutew 61opcja display 83Opera 38orientacja portretowa 50

Ppakietu Xcode 61parametr device-width 61parametr width 62pasek boczny 75pattern 251piksele 24plik png 57

Plik manifestu 139plik phonecss 52pliki graficzne 59p ynne obrazy 87p ynne siatki 98post powe ulepszanie 285procenty 24projekt

elastyczny 22wra liwy 22

projekt proporcjonalny 73projekt roboczy 48projekt wra liwy 57projektowanie elastycznych uk adoacutew 218projektowanie skalowalnych witryn 43projekty skalowalne 48przedrostki 147przedrostki autorskie 145przedrostki CSS3 146przej cia CSS3 214przenoszenie obrazoacutew t a 97pseudoklasy strukturalne 163pseudoselektory 263

Rrange 256regu a font-face 166regu y CSS 104regu y CSS3 45Respondjs 53 280rotate 220 221rozmiar ekranu 25rozszerzenie Firesizer 24rozszerzenie Resize 24RWD 40 43 53 64 65 Patrz elastyczny projekt

witrynyrzeczywisto rozszerzona 22

SSafari 24 38 40 41 44 274Samsung Galaxy Ace GT 60Scalable Vector Graphics SVG 166scale 220script 110 112search 250sekcja ltheadgtltheadgt 50

Kup książkę Poleć książkę

Skorowidz

295

selektorfirst-line 164atrybutoacutew 152CSS3 152fragmentu ko cowego w atrybucie 154fragmentu pocz tkowego w atrybucie 153fragmentu zawartego w atrybucie 153last-child 156negacji 163n-tego potomka 159pseudoklas CSS3 262

semantyka 123siatki CSS 99sidebar 122sIFR 166silnik WebKit 41skalowalne

projekty 23skalowalne odtwarzacze filmoacutew 134skalowalne projekty witryn 23skalowalny

kroacutej 173projekt 53projekt witryny Patrz elastyczny projekt

witrynyuk ad witryny 23grafiki wektorowe 290

skalowanie obrazoacutew 87skew 220 221skroacutetowa w a ciwo przej cia 216sprite 37standard WAI-ARIA 127stopka 55stopniowe usprawnianie 41struktura regu CSS 145strukturalne pseudoklasy 155style resetuj ce 56symbioza uk adu proporcjonalnego i zapyta

medialnych 73system walidacji po stronie klienta 241szczegoacute owe selektory atrybutoacutew 153

Ttel 249testy witryny 275text-indent 166time 254t o 36

transformacja 220transformacja 3D 41transformacja CSS3 40 41transformacje

dwuwymiarowe 219macierzowe 222troacutejwymiarowe 224 226 230

transform-origin 223transition-delay 216transition-duration 215transition-property 215 217transition-timing-function 215translate 220 221TrueType TTF 166tryb barw 38tryb HSL 175tryb RGB 174typografia sieciowa 166typy w a ciwo ci przej 215

Uuk ad

adaptacyjny 22elastycznej siatki 22elastyczny 22elastycznych obrazoacutew i zapyta medialnych

22gumowy 22plastyczny 22p ynny 69sta y 72wielokolumnowy 148wieloplatformowy 22

uk adyp ynne 13proporcjonalne 72

ulepszenie post powe 272url 248

WWAI-ARIA 243walidator 112 273walidator W3C 34warning 232warto ci heksadecymalne 38warto font-size 85

Kup książkę Poleć książkę

Skorowidz

296

Web Hypertext Application TechnologyWorking Group 107

Web Open Font Format WOFF 166WebKit 224 228week 253WHATWG 107witryna mobilna 43witryny mobilne 43w asciwo

animation 232border-radius 273grid 52inline-block 83linear-gradient 39margin 78opacity 177padding 78przybli ania 62scan 52

WOFF 169wra liwy projekt strony 30 173wtyczka

FitVid 136Webshims Lib 257

wype nienie 108wyra enie kluczowe only all 283wzgl dne jednostki wielko ci 24

YYepNopejs 282

Zzagnie d anie elementoacutew multimedialnych

w HTML5 130zagnie d anie multimedioacutew 131zaokr glony efekt t a 36zapytania medialne 13 47 48 49 50 53 69

72268sk adnia 49

zasada tre ponad wszystko 65Zawijanie tekstu 151znacznik

ltheadergt 35ltmetagt 60ltsourcegt 133meta viewport 63

znak 139

dania HTTP 37

Kup książkę Poleć książkę

Spis tre ci

8

Kup książkę Poleć książkę