Responsive Web Design. Projektowanie elastycznych witryn w

Tytuł oryginału: Responsive Web Design with HTML5 and CSS3, 2nd Edition
Tłumaczenie: Łukasz Piwko
ISBN: 978-83-283-2343-8
Copyright © Packt Publishing 2015.
First published in the English language under the title ‘Responsive Web Design with HTML5 and CSS3 –
Second Edition – (9781784398934)’
Polish edition copyright © 2016 by Helion S.A.
All rights reserved.
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.
Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były
kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane
z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie
ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji
zawartych w książce.
Wydawnictwo HELION
ul. Kościuszki 1c, 44-100 GLIWICE
tel. 32 231 22 19, 32 230 98 63
e-mail: [email protected]
WWW: http://helion.pl (księgarnia internetowa, katalog książek)
Pliki z przykładami omawianymi w książce można znaleźć pod adresem:
ftp://ftp.helion.pl/przyklady/trash2.zip
Drogi Czytelniku!
Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres
http://helion.pl/user/opinie/trash2
Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.
Printed in Poland.
• Kup książkę
• Poleć książkę
• Oceń książkę
• Księgarnia internetowa
• Lubię to! » Nasza społeczność
Spis treĂci
Zespóï wydania oryginalnego
11
O autorze
13
O korektorach merytorycznych
15
Przedmowa
17
Rozdziaï 1. Podstawowe wiadomoĂci o projektowaniu responsywnych
stron internetowych
21
Rozpoczynamy przygodÚ
Projekt responsywny — definicja
Projektowanie responsywnych stron internetowych w piguïce
Ustawianie poziomu obsïugi przeglÈdarek
Kilka uwag na temat narzÚdzi i edytorów tekstu
Pierwszy przykïad projektu responsywnego
Podstawowy plik HTML
OkieïznaÊ obrazy
Zapytania medialne wkraczajÈ do akcji
Wady opisanego przykïadu
Podsumowanie
22
23
23
23
25
26
26
29
32
37
38
Rozdziaï 2. Zapytania medialne: obsïuga zróĝnicowanych obszarów roboczych
39
Dlaczego zapytania medialne sÈ potrzebne do budowy ukïadów responsywnych
Podstawowa logika warunkowa w CSS
Skïadnia zapytañ medialnych
Zapytania medialne w znaczniku <link>
’Èczenie zapytañ medialnych
Importowanie zapytañ medialnych za pomocÈ dyrektywy @import
Zapytania medialne w arkuszach stylów
Co moĝna sprawdzaÊ za pomocÈ zapytañ medialnych
40
41
41
42
43
44
44
44
Kup książkę
Poleć książkę
Spis treĞci
Modyfikowanie projektu strony za pomocÈ zapytañ medialnych
W zapytaniu medialnym moĝna wpisaÊ kaĝdÈ reguïÚ CSS
Zapytania medialne dla urzÈdzeñ o duĝej gÚstoĂci pikseli
Metody organizacji i pisania zapytañ medialnych
DoïÈczanie róĝnych plików CSS za pomocÈ zapytañ medialnych
ZasadnoĂÊ dzielenia zapytañ medialnych na wiele plików
¥ródliniowe zagnieĝdĝanie zapytañ medialnych
’ÈczyÊ zapytania medialne w bloki czy rozpraszaÊ je w róĝnych miejscach pliku
Znacznik meta viewport
Zapytania medialne — poziom 4.
Obsïuga skryptów
UrzÈdzenia wskazujÈce
Funkcja sprawdzania obsïugi efektu hover
Zapytania dotyczÈce otoczenia
Podsumowanie
Rozdziaï 3. Ukïady pïynne i obrazy responsywne
Konwertowanie ukïadu staïego na elastyczny
Do czego sïuĝy model flexbox
Bloki Ăródliniowe i biaïe znaki
Elementy pïywajÈce
WïasnoĂci tabelaryczne
Flexbox — wprowadzenie
Wyboista droga do flexboksa
Obsïuga flexboksa przez przeglÈdarki
Podstawy flexboksa
Idealne Ărodkowanie tekstu w pionie
Przesuwanie elementów
Zmienianie kolejnoĂci elementów
Róĝne rodzaje ukïadu flexboksa w róĝnych zapytaniach medialnych
WïasnoĂÊ inline-flex
Wyrównywanie treĂci we flexboksie
WïasnoĂÊ flex
Lepka stopka
Zmienianie kolejnoĂci elementów
Podsumowanie wiadomoĂci o flexboksie
Obrazy responsywne
WewnÚtrzny problem obrazów responsywnych
Proste przeïÈczanie rozdzielczoĂci za pomocÈ atrybutu srcset
Zaawansowane techniki przeïÈczania obrazów za pomocÈ atrybutu srcset
Prezentowanie obrazów za pomocÈ elementu picture
Podsumowanie
Rozdziaï 4. HTML5 i projekty responsywne
Znaczniki HTML5 sÈ rozpoznawane przez wszystkie nowoczesne przeglÈdarki
Prawidïowe rozpoczynanie strony HTML5
Znacznik doctype
Element HTML i atrybut lang
46
48
48
49
49
50
50
51
52
54
54
55
56
57
58
59
60
64
65
65
65
66
66
66
68
68
70
71
72
73
74
79
82
83
88
88
88
89
90
91
92
95
96
97
97
98
4
Kup książkę
Poleć książkę
Spis treĞci
Definiowanie róĝnych jÚzyków
Kodowanie znaków
Jak najlepiej pracowaÊ z jÚzykiem HTML5
RozsÈdne podejĂcie do pisania kodu
Oddajmy czeĂÊ wszechmocnemu elementowi <a>
Nowe elementy semantyczne HTML5
Element main
Element <section>
Element <nav>
Element <article>
Element <aside>
Elementy <figure> i <figcaption>
Elementy <details> i <summary>
Element <header>
Element <footer>
Element <address>
Uwaga na temat elementów h1 – h6
¥ródliniowe elementy semantyczne HTML5
Element <b>
Element <em>
Element <i>
Elementy jÚzyka HTML, które ulegïy dezaktualizacji
Praktyczne wykorzystanie elementów strukturalnych HTML5
RozsÈdne wybieranie elementów
Standardy dostÚpnoĂci stron WCAG i WAI-ARIA
WCAG
Standard WAI-ARIA
ZapamiÚtaj tylko jednÈ rzecz
Krok dalej z ARIA
Osadzanie elementów multimedialnych w HTML5
Dodawanie do stron internetowych filmów i děwiÚków
Znaczniki audio i video dziaïajÈ niemal identycznie
Responsywne odtwarzacze filmów i ramki wewnÚtrzne
Aplikacje sieciowe w trybie offline
Podsumowanie
Rozdziaï 5. CSS3: selektory, typografia, tryby kolorów i nowe funkcje
Nikt nie wie wszystkiego
Struktura reguï CSS
Przydatne triki w CSS3
Ukïad wielokolumnowy w CSS3 dla projektu responsywnego
Zawijanie tekstu
Obcinanie tekstu
Tworzenie poziomych przewijanych okienek
RozgaïÚzianie kodu CSS
Zapytania o obsïugÚ wïasnoĂci
’Èczenie warunków
Biblioteka Modernizr
98
98
98
99
100
101
101
102
102
103
103
103
104
105
105
106
106
107
107
107
108
108
109
109
110
110
111
111
112
112
113
115
115
116
117
119
120
120
121
121
124
125
126
128
128
129
130
5
Kup książkę
Poleć książkę
Spis treĞci
Nowe selektory CSS3 i sposób ich wykorzystania
Selektory atrybutów w CSS3
Szczegóïowe selektory atrybutów CSS3
Puïapki zwiÈzane z uĝywaniem selektorów wartoĂci atrybutów
Za pomocÈ selektorów wartoĂci atrybutów moĝna wybieraÊ identyfikatory
i klasy zaczynajÈce siÚ od cyfr
Strukturalne pseudoklasy CSS3
Selektor :last-child
Selektory n-tego potomka
Zasada dziaïania selektorów n-tego potomka
Selektory n-tego potomka w projektach responsywnych
Selektor negacji (:not)
Selektor :empty
Formatowanie pierwszego wiersza akapitu bez wzglÚdu na obszar roboczy
WïasnoĂci uĝytkownika i zmienne CSS
Funkcja CSS calc
Selektory, poziom 4.
Pseudoklasa :has
Jednostki zaleĝne od rozmiaru obszaru roboczego
Typografia sieciowa
Reguïa @font-face
Odwoïanie do fontów w regule @font-face
Uwagi na temat reguïy @font-face i projektów responsywnych
Nowe formaty barw CSS3 i kanaï alfa
Format RGB
Format HSL
Kanaïy alfa
Moduï kolorów poziomu 4.
Podsumowanie
Rozdziaï 6. Spektakularny wyglÈd i CSS3
Cienie tekstu w CSS3
Opuszczanie wartoĂci rozmycia, gdy jest niepotrzebna
Definiowanie wielu cieni dla tekstu
Cienie elementów
Cieñ wewnÈtrz elementu
Definiowanie wielu cieni dla elementu
WartoĂÊ spread
Gradienty tïa
Liniowe gradienty tïa
Gradienty promieniste
Gradienty responsywne
Powtarzanie gradientu
Gradientowe desenie tïa
Wiele obrazów tïa jednoczeĂnie
Wymiary tïa
WïasnoĂÊ background position
Zbiorcza wïasnoĂÊ background
132
132
133
135
136
136
137
137
138
141
143
144
145
145
146
147
147
147
148
149
149
151
152
152
152
154
154
155
157
158
159
159
159
160
161
161
162
162
165
166
167
168
169
170
170
171
6
Kup książkę
Poleć książkę
Spis treĞci
Obrazy tïa o wysokiej rozdzielczoĂci
Filtry CSS
DostÚpne filtry CSS
’Èczenie filtrów CSS
Uwaga na temat wydajnoĂci CSS
Uwagi na temat masek CSS i przycinania grafiki
Podsumowanie
Rozdziaï 7. Grafika SVG niezaleĝna od rozdzielczoĂci ekranu
Historia SVG w piguïce
Grafika, która jest dokumentem
Element gïówny SVG
Przestrzeñ nazw
Elementy <title> i <desc>
Element <defs>
Element <g>
Ksztaïty SVG
¥cieĝki SVG
Najpopularniejsze programy i usïugi do tworzenia grafiki SVG
OszczÚdzaj czas dziÚki usïugom oferujÈcym ikony SVG
Wstawianie grafik SVG na strony internetowe
Element <img>
Element <object>
Ustawianie grafik SVG w tle elementów
Krótka uwaga na temat kodowania danych w URI
Generowanie sprite’ów graficznych
Wstawianie dokumentów SVG bezpoĂrednio do kodu HTML
Wielokrotne wykorzystywanie obiektów graficznych z symboli
Osadzone grafiki SVG mogÈ mieÊ róĝne kolory w róĝnych kontekstach
Wielokrotne wykorzystywanie obiektów graficznych ze ěródeï zewnÚtrznych
MoĝliwoĂci kaĝdej z metod wstawiania grafik SVG na strony internetowe
Problemy z przeglÈdarkami
Inne moĝliwoĂci i dziwactwa SVG
Animacje SMIL
Stylizowanie grafik SVG za pomocÈ zewnÚtrznych arkuszy stylów
Formatowanie grafik SVG za pomocÈ arkuszy wewnÚtrznych
Animowanie grafik SVG za pomocÈ CSS
Animowanie SVG za pomocÈ JavaScript
Prosty przykïad animacji na bazie biblioteki GreenSock
Optymalizacja grafik SVG
Filtry SVG
Uwaga na temat zapytañ medialnych w SVG
Porady implementacyjne
Dodatkowe ěródïa informacji
Podsumowanie
172
172
174
179
179
180
181
183
185
186
187
188
188
188
188
189
189
189
190
191
191
191
192
194
195
195
196
197
198
199
200
201
201
202
203
204
205
206
207
208
210
211
212
212
7
Kup książkę
Poleć książkę
Spis treĞci
Rozdziaï 8. PrzejĂcia, transformacje i animacje
Czym sÈ przejĂcia CSS3 i jak z nich korzystaÊ?
Rodzaje przejĂÊ
Zbiorcza wïasnoĂÊ do definiowania przejĂÊ
PrzejĂcia róĝnych wïasnoĂci w róĝnych przedziaïach czasowych
Funkcje czasu
Zabawne typy przejĂÊ dla stron responsywnych
Transformacje dwuwymiarowe CSS3
scale
translate
rotate
skew
matrix
WïasnoĂÊ transform-origin
Transformacje trójwymiarowe
WartoĂÊ translate3d
Animacje w CSS3
WïasnoĂÊ animation-fill-mode
Podsumowanie
Rozdziaï 9. Formularze w HTML5 i CSS3
Formularze HTML5
Elementy formularzy HTML5
Atrybut placeholder
Atrybut required
Atrybut autofocus
Atrybut autocomplete
Atrybut list (i powiÈzany element datalist)
Rodzaje kontrolek HTML5
Typ email
Typ number
Typ url
Typ tel
Typ search
Typ pattern
Typ color
Kontrolki daty i godziny
Typ range
Wypeïnienia dla starszych przeglÈdarek
Formatowanie formularzy HTML5 za pomocÈ arkuszy CSS3
Oznaczanie pól wymaganych
Wypeïnianie tïa
Podsumowanie
215
216
218
218
219
219
221
221
222
222
225
226
226
227
229
232
236
238
239
241
242
243
243
244
244
246
246
248
248
249
250
252
253
253
254
254
257
258
259
262
264
265
8
Kup książkę
Poleć książkę
Spis treĞci
Rozdziaï 10. Ogólne zasady projektowania responsywnych stron internetowych
267
OglÈdanie projektu w przeglÈdarce najszybciej jak to moĝliwe
WartoĂci punktów kontrolnych powinny byÊ ustalane w odniesieniu do projektu
OglÈdaj i testuj projekt w prawdziwych urzÈdzeniach
Na czym dokïadnie polega stopniowe ulepszanie strony
Wybór funkcji obsïugiwanych przez róĝne przeglÈdarki
RównoĂÊ funkcjonalna, nie estetyczna
Wybór obsïugiwanych przeglÈdarek
Stopniowanie funkcjonalnoĂci
Implementacja warstw funkcjonalnych
’Èczenie punktów kontrolnych CSS i JavaScript
Unikaj szkieletów CSS w produkcji
Kodowanie pragmatycznych rozwiÈzañ
Kiedy odnoĂnik staje siÚ przyciskiem
Pisz jak najprostszy kod
Ukrywanie, pokazywanie i wczytywanie treĂci na róĝnych ekranach
WarstwÚ wizualnÈ strony definiuj za pomocÈ CSS
Sprawdzanie skïadni
WydajnoĂÊ
Co szykuje przyszïoĂÊ
Podsumowanie
Skorowidz
268
268
269
270
271
271
271
272
272
273
275
275
277
278
278
279
280
281
282
283
284
9
Kup książkę
Poleć książkę
Spis treĞci
10
Kup książkę
Poleć książkę
2
Zapytania medialne:
obsïuga zróĝnicowanych
obszarów roboczych
W poprzednim rozdziale przyjrzeliĂmy siÚ podstawowym skïadnikom responsywnej strony
internetowej: pïynnemu ukïadowi, pïynnym obrazom i zapytaniom medialnym.
Tutaj dokïadnie przyjrzymy siÚ zapytaniom medialnym, aby poznaÊ ich wszystkie moĝliwoĂci
oraz elementy skïadni.
W tym rozdziale:
Q dowiesz siÚ, dlaczego zapytania medialne sÈ potrzebne w RWD;
Q poznasz skïadniÚ zapytañ medialnych;
Q nauczysz siÚ definiowaÊ zapytania medialne za pomocÈ znacznika <link>,
dyrektywy @import oraz w plikach CSS;
Q dowiesz siÚ, jakie wïaĂciwoĂci urzÈdzeñ moĝna testowaÊ za pomocÈ zapytañ
medialnych;
Q nauczysz siÚ wprowadzaÊ wizualne zmiany na stronie za pomocÈ zapytañ
medialnych w zaleĝnoĂci od iloĂci dostÚpnego miejsca na ekranie;
Q poznasz argumenty przedstawiane w dyskusji, czy zapytania medialne powinno siÚ
grupowaÊ w jednym miejscu, czy wpisywaÊ w tych miejscach, w których sÈ
potrzebne;
Kup książkę
Poleć książkę
Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3
Q nauczysz siÚ korzystaÊ ze znacznika meta viewport, dziÚki któremu zapytania
medialne mogÈ dziaïaÊ zgodnie z przeznaczeniem takĝe w urzÈdzeniach
z systemami iOS i Android;
Q poznasz kolejne funkcje proponowane do dodania do nastÚpnych wersji
specyfikacji zapytañ medialnych.
Specyfikacja CSS3 skïada siÚ z pewnej liczby moduïów. Jednym z nich jest Media Queries
(Level 3), czyli zapytania medialne. Za ich pomocÈ moĝna wybieraÊ, które zestawy reguï CSS
majÈ zostaÊ zastosowane w urzÈdzeniach o okreĂlonych moĝliwoĂciach. Przykïadowo: wystarczy
tylko kilka wierszy kodu CSS, aby zmieniÊ sposób wyĂwietlania strony w odpowiedzi na zmianÚ
szerokoĂci obszaru roboczego, wspóïczynnika proporcji ekranu, orientacji (pionowa lub pozioma) itd.
Zapytania medialne sÈ dobrze obsïugiwane przez przeglÈdarki. ObsïugujÈ je wïaĂciwie
wszystkie aplikacje oprócz przedpotopowych potworów (od IE 8 w dóï). Krótko mówiÈc: nie
ma ĝadnego powodu, aby siÚ przed nimi broniÊ!
Specyfikacje W3C przechodzÈ przez proces ratyfikacji w konsorcjum W3C (jeĂli masz wolny dzieñ, zapoznaj siÚ
z przebiegiem tego procesu przedstawionym na stronie: http://www.w3.org/2005/10/Process-20051014/tr).
MówiÈc najkrócej: kaĝda specyfikacja najpierw jest tzw. projektem roboczym (ang. Working Draft —
WD), potem przechodzi w fazÚ rekomendacji kandydujÈcej (ang. Candidate Recommendation — CR),
nastÚpnie zamienia siÚ w propozycjÚ rekomendacji (ang. Proposed Recommendation — PR), a na koniec, po
wielu latach prac, otrzymujemy oficjalnÈ rekomendacjÚ W3C (ang. W3C Recommendation — REC). Wynika z tego, ĝe bezpieczniejszymi moduïami sÈ te, które osiÈgnÚïy wyĝszy stopieñ dojrzaïoĂci. Przykïadowo:
moduï transformacji CSS poziomu 3. (http://www.w3.org/TR/css3-3d-transforms/) osiÈgnÈï status projektu
roboczego w marcu 2009 r., w zwiÈzku z czym jest on obsïugiwany znacznie gorzej niĝ moduïy bÚdÈce
na etapie CR, takie jak zapytania medialne.
Dlaczego zapytania medialne sÈ potrzebne
do budowy ukïadów responsywnych
Zapytania medialne CSS3 umoĝliwiajÈ tworzenie reguï przeznaczonych tylko dla urzÈdzeñ o okreĂlonych moĝliwoĂciach lub do zastosowania wyïÈcznie w wybranych warunkach. W specyfikacji W3C zapytañ medialnych (http://www.w3.org/TR/css3-mediaqueries/) moĝna przeczytaÊ
nastÚpujÈce wprowadzenie do tej technologii:
„Zapytanie medialne skïada siÚ z czÚĂci okreĂlajÈcej typ medium i opcjonalnie kilku
wyraĝeñ, które sprawdzajÈ, czy zaszïy warunki uruchamiajÈce konkretne reguïy.
WĂród wïaĂciwoĂci urzÈdzeñ, jakie moĝna sprawdzaÊ za pomocÈ zapytañ medialnych,
znajdujÈ siÚ: szerokoĂÊ, wysokoĂÊ i kolor. Przy uĝyciu zapytañ medialnych moĝna
dostosowaÊ prezentacjÚ do wybranych rodzajów urzÈdzeñ wyjĂciowych bez
zmieniania samej treĂci”.
40
Kup książkę
Poleć książkę
Rozdziaá 2. • Zapytania medialne: obsáuga zróĪnicowanych obszarów roboczych
Bez zapytañ medialnych, za pomocÈ samych arkuszy stylów, nie daïoby siÚ radykalnie zmieniaÊ warstwy wizualnej strony. DziÚki tym zapytaniom moĝemy pisaÊ reguïy CSS przygotowujÈce
naszÈ stronÚ na takie ewentualnoĂci, jak zmiana orientacji ekranu, zmniejszenie lub powiÚkszenie obszaru roboczego itd.
ChoÊ ukïad pïynny równieĝ sprawia, ĝe projekt prezentuje siÚ lepiej przy róĝnych szerokoĂciach ekranu, to jeĂli wziÈÊ pod uwagÚ róĝnorodnoĂÊ urzÈdzeñ, czasami potrzebne sÈ bardziej kompleksowe rozwiÈzania. Ich wdroĝenie jest moĝliwe dziÚki zapytaniom medialnym.
Traktuj je jak podstawowÈ logikÚ warunkowÈ CSS.
Podstawowa logika warunkowa w CSS
Wszystkie prawdziwe jÚzyki programowania zawierajÈ konstrukcje pozwalajÈce wybraÊ jednÈ
lub wiÚcej gaïÚzi kodu do wykonania w zaleĝnoĂci od pewnych warunków. NajczÚĂciej majÈ
one postaÊ powszechnie uĝywanych instrukcji if-else.
JeĂli kod ěródïowy jÚzyków programowania kïuje CiÚ w oczy, nie musisz siÚ przejmowaÊ. To,
o czym teraz piszÚ, to bardzo prosta koncepcja. Posïugujesz siÚ niÈ np., gdy prosisz kolegÚ
z pracy, aby zamówiï Ci coĂ w kawiarni: „JeĂli majÈ babeczki z potrójnÈ czekoladÈ, to weě mi
jednÈ, a jeĂli nie, to weě mi kawaïek ciasta marchewkowego”. Jest to prosta instrukcja warunkowa z dwoma moĝliwymi wynikami (i kaĝdy jest tak samo przyjemny).
W czasie, gdy piszÚ tÚ ksiÈĝkÚ, w CSS nie ma instrukcji logicznych ani ĝadnych innych konstrukcji typowych dla prawdziwych jÚzyków programowania. PÚtle, funkcje, iteracja i skomplikowane obliczenia matematyczne nadal naleĝÈ do Ăwiata procesorów CSS (wspominaïem juĝ
o bardzo ciekawej ksiÈĝce o Sass pt. Sass i Compass. Praktyczny przewodnik dla projektantów?).
A jednak zapytania medialne sÈ rodzajem mechanizmu umoĝliwiajÈcego wyraĝanie prostej
logiki warunkowej w CSS. Zawarte w nich reguïy znajdujÈ zastosowanie tylko wtedy, gdy zostanÈ
speïnione okreĂlone warunki. Funkcje programistyczne w przygotowaniu
PopularnoĂÊ preprocesorów CSS nie umknÚïa uwadze ludzi pracujÈcych nad specyfikacjami tej technologii.
TrwajÈ juĝ prace nad wstÚpnÈ wersjÈ roboczÈ specyfikacji zmiennych CSS: http://www.w3.org/TR/css-variables/.
Niestety, obecnie obsïuguje je tylko przeglÈdarka Firefox, wiÚc na razie zmiennych nie moĝna wykorzystywaÊ w realnych projektach.
Skïadnia zapytañ medialnych
Jak wyglÈda zapytanie medialne i — co waĝniejsze — jak ono dziaïa?
Wprowadě poniĝszy kod na samym dole dowolnego pliku CSS i obejrzyj w przeglÈdarce stronÚ
internetowÈ, do której jest on doïÈczony. Ewentualnie otwórz przykïadowy plik z folderu 02-01:
41
Kup książkę
Poleć książkę
Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3
body {
background-color: grey;
}
@media screen and (min-width: 320px)
body {
background-color: green;
}
}
@media screen and (min-width: 550px)
body {
background-color: yellow;
}
}
@media screen and (min-width: 768px)
body {
background-color: orange;
}
}
@media screen and (min-width: 960px)
body {
background-color: red;
}
}
{
{
{
{
Otwórz teraz stronÚ internetowÈ w przeglÈdarce i zmieñ wielkoĂÊ okna. Kolor strony zmieni siÚ
w zaleĝnoĂci od aktualnych wymiarów obszaru roboczego. Bardziej szczegóïowy opis skïadni zapytañ medialnych zamieĂciïem dalej. Najpierw chciaïbym Ci pokazaÊ, jak i gdzie moĝna ich uĝywaÊ.
Zapytania medialne w znaczniku <link>
Jeĝeli pracowaïeĂ juĝ z arkuszami stylów CSS 2, to wiesz, ĝe moĝna w nich zadeklarowaÊ rodzaj
urzÈdzenia (uĝywajÈc sïów kluczowych screen i print) w atrybucie media znacznika <link>.
TakÈ deklaracjÚ naleĝy umieĂciÊ wewnÈtrz elementu <head>; ma ona nastÚpujÈcÈ postaÊ:
<link rel="stylesheet" type="text/css" media="screen" href="screen-styles.css">
Zapytania medialne pozwalajÈ na dopasowanie formatowania strony do moĝliwoĂci i wïaĂciwoĂci
urzÈdzenia, a nie tylko do jego typu. Moĝna to potraktowaÊ jak skierowane do przeglÈdarki
zapytanie. JeĂli przeglÈdarka „stwierdzi”, ĝe podane w zapytaniu warunki zostaïy speïnione,
nada wïaĂciwe formatowanie. Jeĝeli tak nie bÚdzie, zastosowane zostanie inne. Zamiast wysyïaÊ do
przeglÈdarki zapytanie: „Czy jesteĂ ekranem?” — co byïo dawniej szczytem moĝliwoĂci CSS 2
— zapytania medialne pozwalajÈ nam na wiÚkszÈ dociekliwoĂÊ. Za ich pomocÈ moĝemy zapytaÊ:
„Czy jesteĂ ekranem w orientacji pionowej?”. RzuÊ okiem na poniĝszy przykïad:
<link rel="stylesheet" media="screen and (orientation: portrait)"
´href="portrait-screen.css" />
42
Kup książkę
Poleć książkę
Rozdziaá 2. • Zapytania medialne: obsáuga zróĪnicowanych obszarów roboczych
Najpierw zapytanie medialne prosi o potwierdzenie typu urzÈdzenia („Czy jesteĂ ekranem?”),
a nastÚpnie wïaĂciwoĂci („Czy twój obraz ma orientacjÚ pionowÈ?”). Arkusz stylów portrait-screen.css zostanie zaïadowany dla dowolnego urzÈdzenia w trybie pionowym i zignorowany
w innych. Istnieje moĝliwoĂÊ odwrócenia zapytania poprzez dodanie na poczÈtku zapytania
medialnego sïowa kluczowego not. Ilustruje to niĝej przedstawiona deklaracja, która odwraca
dziaïanie kodu z poprzedniego przykïadu i powoduje zaïadowanie pliku, jeĂli tylko dany
ekran nie ma orientacji pionowej:
<link rel="stylesheet" media="not screen and (orientation: portrait)"
´href="portrait-screen.css" />
’Èczenie zapytañ medialnych
Istnieje równieĝ moĝliwoĂÊ poïÈczenia wielu wyraĝeñ. Rozszerzmy nasz przykïad pierwszego
zapytania medialnego i ograniczmy stosowanie pliku do urzÈdzeñ, które majÈ obszar operacyjny
wiÚkszy niĝ 800 pikseli.
<link rel="stylesheet" media="screen and (orientation: portrait)
´and (min-width: 800px)" href="800wide-portrait-screen.css" />
Moĝemy teĝ przygotowaÊ caïÈ listÚ zapytañ medialnych. JeĂli dowolne z wypisanych w zapytaniu
warunków bÚdÈ zgodne z prawdÈ, plik zostanie zaïadowany. JeĂli ĝaden z nich nie zostanie
speïniony, reguïy nie zostanÈ odczytane:
<link rel="stylesheet" media="screen and (orientation: portrait) and
´(min-width: 800px), projection" href="800wide-portrait-screen.css" />
W tym miejscu naleĝy zwróciÊ uwagÚ na dwa waĝne aspekty: po pierwsze, kaĝde zapytanie
medialne jest oddzielone przecinkiem, po drugie, ïatwo zauwaĝyÊ, ĝe po sïowie kluczowym
projection nie wystÚpujÈ ĝadne uzupeïniajÈce sïowa and i nie ma wartoĂci podanych w nawiasach.
Oznacza to, ĝe przy braku zdefiniowanych wartoĂci dane zapytanie medialne bÚdzie dotyczyÊ
wszystkich typów danego urzÈdzenia. W naszym przykïadzie formatowanie to bÚdzie dotyczyÊ
wszystkich projektorów.
W zapytaniach medialnych moĝna uĝywaÊ dowolnej jednostki miary CSS. Do najczÚĂciej stosowanych naleĝÈ
piksele (px), ale równie dobrze moĝna siÚ posïugiwaÊ jednostkami em i rem. WiÚcej informacji na ten
temat moĝna znaleěÊ w moim artykule dostÚpnym pod adresem: http://benfrain.com/just-use-pixels.
JeĂli wiÚc chcesz ustawiÊ punkt kontrolny na 800 pikselach (tylko wyraĝonych w jednostce em), po prostu podziel liczbÚ pikseli przez 16. Na przykïad 800px jest równe 50em (800/16=50).
43
Kup książkę
Poleć książkę
Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3
Importowanie zapytañ medialnych
za pomocÈ dyrektywy @import
Moĝemy teĝ uĝyÊ dyrektywy @import, która jeĂli zostanÈ speïnione pewne warunki, wczyta
arkusz stylów w innym arkuszu. NastÚpujÈcy kod zaïadowaïby arkusz phone.css, ale tylko jeĂli
urzÈdzenie, w którym strona zostaïa otwarta, miaïoby obszar roboczy nie szerszy niĝ 360 pikseli:
@import url("phone.css") screen and (max-width:360px);
PamiÚtaj, ĝe uĝycie dyrektywy @import oznacza dodatkowe ĝÈdanie HTTP (które wpïywa na
szybkoĂÊ wczytywania strony), polegaj wiÚc na tej metodzie tylko okazyjnie.
Zapytania medialne w arkuszach stylów
Wiesz juĝ, jak stosowaÊ zapytania medialne w odnoĂnikach do plików CSS umieszczonych w nagïówku (miÚdzy znacznikami <head> i </head>) dokumentu HTML oraz za pomocÈ dyrektywy
@import. Jednak najczÚĂciej zapytania medialne wpisuje siÚ bezpoĂrednio w arkuszach stylów.
GdybyĂmy np. dodali do arkusza stylów poniĝszy kod, to wszystkie elementy <h1> na stronie staïyby siÚ zielone, ale tylko w urzÈdzeniach o szerokoĂci ekranu nieprzekraczajÈcej 400 pikseli.
@media screen and (max-device-width: 400px) {
h1 { color: green }
}
Najpierw za pomocÈ reguïy @media informujemy przeglÈdarkÚ, ĝe tworzymy zapytanie medialne, a nastÚpnie okreĂlamy, jakie urzÈdzenia nas interesujÈ. W tym przykïadzie odnosimy siÚ
tylko do ekranów (a wiÚc np. nie do druku — print). Póěniej w nawiasie podajemy konkretne
wïaĂciwoĂci wybranego urzÈdzenia. Dalej znajdujÈ siÚ juĝ normalne reguïy CSS.
W tym miejscu powinienem chyba podkreĂliÊ, ĝe oznaczanie typu mediów jako screen jest
opcjonalne. Oto odpowiedni fragment specyfikacji, który o tym mówi:
„JeĂli zapytanie medialne odnosi siÚ do wszystkich rodzajów mediów, to moĝna
w jego definicji posïuĝyÊ siÚ skïadniÈ skróconÈ, tzn. moĝna opuĂciÊ sïowo kluczowe
all (wraz ze znajdujÈcym siÚ za nim sïowem and). Innymi sïowy: jeĂli typ mediów
nie zostanie okreĂlony, to znaczy, ĝe chodzi o wszystkie typy mediów”.
Jeĝeli wiÚc nie piszesz stylów przeznaczonych wyïÈcznie dla konkretnego rodzaju mediów,
moĝesz opuĂciÊ czïon screen and. RobiÚ to we wszystkich nastÚpnych przykïadach.
Co moĝna sprawdzaÊ za pomocÈ zapytañ medialnych
Projektanci stron responsywnych najczÚĂciej uĝywajÈ zapytañ medialnych do sprawdzania szerokoĂci obszaru roboczego (width). Z mojego doĂwiadczenia wynika, ĝe pozostaïe parametry
(moĝe z wyjÈtkiem okazjonalnego sprawdzania rozdzielczoĂci ekranu i wysokoĂci obszaru robo44
Kup książkę
Poleć książkę
Rozdziaá 2. • Zapytania medialne: obsáuga zróĪnicowanych obszarów roboczych
czego) nie sÈ zbyt uĝyteczne. Na wszelki wypadek jednak zamieszczam peïnÈ listÚ parametrów, które moĝna sprawdzaÊ za pomocÈ zapytañ medialnych poziomu 3. CzÚĂÊ z nich moĝe
Ci siÚ przydaÊ:
Q width — szerokoĂÊ obszaru roboczego.
Q height — wysokoĂÊ obszaru roboczego.
Q device-width — szerokoĂÊ powierzchni wyĂwietlania (bÚdziemy jÈ traktowaÊ
Q
Q
Q
Q
Q
Q
Q
Q
jako szerokoĂÊ urzÈdzenia).
device-height — wysokoĂÊ powierzchni wyĂwietlania (bÚdziemy jÈ traktowaÊ
jako wysokoĂÊ urzÈdzenia).
orientation — ta wïasnoĂÊ sïuĝy do sprawdzenia, czy urzÈdzenie jest ustawione
poziomo, czy pionowo.
aspect-ratio — stosunek szerokoĂci obszaru roboczego do jego wysokoĂci. Stosunek
16:9 moĝna zapisaÊ jako aspect-ratio: 16/9.
device-aspect-ratio — parametr podobny do aspect-ratio, tylko odnoszÈcy siÚ
do szerokoĂci i wysokoĂci powierzchni wyĂwietlania urzÈdzenia, a nie do obszaru
roboczego.
color — liczba bitów przypadajÈca na kaĝdy skïadnik koloru. Przykïadowa
wïasnoĂÊ min-color:16 sprawdza, czy urzÈdzenie wyĂwietla 16-bitowe kolory.
color-index — liczba wpisów w tabeli przeglÈdu kolorów urzÈdzenia. WartoĂci
muszÈ byÊ liczbami i nie mogÈ byÊ ujemne.
monochrome — parametr sïuĝÈcy do sprawdzania, ile bitów przypada na piksel
w monochromatycznym buforze klatek. WartoĂciÈ jest liczba caïkowita,
np. 2 — ta liczba nie moĝe byÊ ujemna.
resolution — ta opcja sïuĝy do sprawdzania rozdzielczoĂci ekranu lub wydruku,
np. deklaracja min-resolution: 300dpi. WïasnoĂÊ ta przyjmuje teĝ wartoĂci
wyraĝone w liczbie plamek na centymetr (ang. dots per centimeter), np. deklaracja
min-resolution: 118dpcm.
Q scan — ten parametr odnosi siÚ gïównie do telewizorów i sïuĝy do sprawdzania,
czy stosowane jest skanowanie progresywne, czy przeplatane. Przykïadowo: do
telewizora 720p HD (litera p w 720p oznacza wyĂwietlanie „progresywne”) moĝna
siÚ odwoïaÊ za pomocÈ deklaracji scan: progressive, podczas gdy do telewizora
1080i HD (litera i w 1080i oznacza wyĂwietlanie z przeplotem) moĝna siÚ odnieĂÊ
deklaracjÈ scan: interlace.
Q grid — ta wïasnoĂÊ pomaga ustaliÊ, czy urzÈdzenie dziaïa na podstawie siatki
punktów, czy bitmapy.
Wszystkie te opcje, z wyjÈtkiem scan i grid, moĝna poprzedziÊ przedrostkami min i max, aby stworzyÊ deklaracje zakresów. W ramach przykïadu rozwaĝmy nastÚpujÈcy fragment kodu:
@import url("tiny.css") screen and (min-width:200px) and (max-width:360px);
45
Kup książkę
Poleć książkę
Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3
Jak widaÊ, przedrostki minimum (min) i maksimum (max) zostaïy uĝyte z wïasnoĂciÈ width, tym
samym zostaï zdefiniowany zakres. Plik tiny.css zostanie odczytany tylko w przypadku urzÈdzeñ
wyposaĝonych w ekrany z obszarem roboczym nie wÚĝszym niĝ 200 pikseli i nie szerszym niĝ
360 pikseli.
Elementy wycofywane w Media Queries CSS poziomu 4.
Warto wiedzieÊ, ĝe w szkicu specyfikacji Media Queries poziomu 4. kilka wïasnoĂci oznaczono do usuniÚcia
(http://dev.w3.org/csswg/mediaqueries-4/#mf-deprecated). Najwaĝniejsze z nich to: device-height,
device-width oraz device-aspect-ratio. PrzeglÈdarki nadal bÚdÈ je obsïugiwaÊ, ale zaleca siÚ nie
uĝywaÊ ich juĝ w nowych arkuszach stylów.
Modyfikowanie projektu strony
za pomocÈ zapytañ medialnych
Arkusze stylów zostaïy zaprojektowane tak, aby style zadeklarowane niĝej zastÚpowaïy style
zdefiniowane wyĝej (chyba ĝe te znajdujÈce siÚ wyĝej dotyczÈ bardziej konkretnych fragmentów strony). Moĝemy bez trudu ustanowiÊ na samym poczÈtku arkusza podstawowe style,
które bÚdÈ dotyczyÊ wszystkich wersji naszego projektu, a nastÚpnie nadpisaÊ interesujÈce nas
fragmenty za pomocÈ zapytañ medialnych umieszczonych w dolnej czÚĂci dokumentu. Przykïadowo: najpierw moĝemy zdefiniowaÊ odnoĂniki czysto tekstowe (albo o zmniejszonym rozmiarze
pisma) w nawigacji przeznaczonej dla urzÈdzeñ o wÈskim obszarze roboczym, a nastÚpnie nadpisaÊ te reguïy zapytaniem medialnym, które powiÚkszy elementy nawigacji i doda do nich ikony
w urzÈdzeniach o wiÚkszym ekranie.
Zobaczmy, jak to moĝe wyglÈdaÊ w praktyce (przykïad 02-02). Najpierw spójrz na kod HTML:
<a
<a
<a
<a
href="#"
href="#"
href="#"
href="#"
class="CardLink
class="CardLink
class="CardLink
class="CardLink
CardLink_Hearts">Kier</a>
CardLink_Clubs">Trefl</a>
CardLink_Spades">Pik</a>
CardLink_Diamonds">Karo</a>
Teraz przyjrzyj siÚ reguïom CSS:
.CardLink {
display: block;
color: #666;
text-shadow: 0 2px 0 #efefef;
text-decoration: none;
height: 2.75rem;
line-height: 2.75rem;
border-bottom: 1px solid #bbb;
position: relative;
}
46
Kup książkę
Poleć książkę
Rozdziaá 2. • Zapytania medialne: obsáuga zróĪnicowanych obszarów roboczych
@media (min-width: 300px) {
.CardLink {
padding-left: 1.8rem;
font-size: 1.6rem;
}
}
.CardLink:before {
display: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
}
.CardLink_Hearts:before {
content: " ";
}
.CardLink_Clubs:before {
content: " ";
}
.CardLink_Spades:before {
content: " ";
}
.CardLink_Diamonds:before {
content: " ";
}
@media (min-width: 300px) {
.CardLink:before {
display: block;
}
}
Pobieranie przykïadów kodu
Wszystkie pliki z przykïadami kodu ěródïowego moĝna pobraÊ z serwera FTP wydawnictwa Helion pod
adresem: ftp://ftp.helion.pl/przyklady/trash2.zip.
Tak te odnoĂniki bÚdÈ wyglÈdaÊ w urzÈdzeniu o niewielkiej szerokoĂci (patrz rysunek na nastÚpnej stronie).
47
Kup książkę
Poleć książkę
Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3
A taki wyglÈd przybiorÈ w szerszych urzÈdzeniach:
W zapytaniu medialnym moĝna wpisaÊ kaĝdÈ reguïÚ CSS
Naleĝy pamiÚtaÊ, ĝe w zapytaniu medialnym moĝna wpisaÊ wszystko, co wpisaïoby siÚ w zwykïym
arkuszu stylów. DziÚki temu moĝliwe jest caïkowite zmienienie ukïadu i wyglÈdu strony w zaleĝnoĂci od warunków jej wyĂwietlania (np. zmiennych rozmiarów obszaru roboczego).
Zapytania medialne dla urzÈdzeñ o duĝej gÚstoĂci pikseli
Zapytañ medialnych czÚsto uĝywa siÚ teĝ do zmieniania stylów w przypadkach, gdy strona jest
oglÈdana w urzÈdzeniach o bardzo wysokiej rozdzielczoĂci. Spójrz na poniĝszy kod:
@media (min-resolution: 2dppx) {
/* Style. */
}
To zapytanie stanowi, ĝe zawarte w nim reguïy majÈ zostaÊ zastosowane tylko w urzÈdzeniach
o rozdzielczoĂci ekranu wynoszÈcej 2 plamki na piksel (2dppx). Dotyczy to iPhone’a 4 (urzÈdzenia
firmy Apple z ekranami o duĝej gÚstoĂci pikseli nazywajÈ siÚ Retina) i wielu urzÈdzeñ z systemem Android. W razie potrzeby moĝna zmniejszyÊ wartoĂÊ dppx, aby zapytanie odnosiïo siÚ
do wiÚkszej liczby urzÈdzeñ.
48
Kup książkę
Poleć książkę
Rozdziaá 2. • Zapytania medialne: obsáuga zróĪnicowanych obszarów roboczych
JeĂli przy definiowaniu zapytania z minimalnÈ rozdzielczoĂciÈ zaleĝy Ci na obsïudze jak najwiÚkszej liczby
urzÈdzeñ, dodaj przedrostki producentów za pomocÈ jakiegoĂ sïuĝÈcego do tego narzÚdzia. Nie przejmuj siÚ,
jeĂli nie wiesz, co to sÈ przedrostki producentów, poniewaĝ wkrótce wszystko wyjaĂniÚ.
Metody organizacji
i pisania zapytañ medialnych
Na chwilÚ zmienimy temat i przyjrzymy siÚ innym metodom pisania i organizacji zapytañ
medialnych w arkuszach stylów. Kaĝda z nich ma pewne zalety i wady. Warto o nich wiedzieÊ,
nawet jeĂli teraz wydaje Ci siÚ, ĝe nie sÈ potrzebne w Twoich projektach.
DoïÈczanie róĝnych plików CSS
za pomocÈ zapytañ medialnych
Dla przeglÈdarki internetowej arkusze stylów sÈ zasobami „blokujÈcymi renderowanie strony”.
PrzeglÈdarka musi je pobraÊ z serwera i przeanalizowaÊ, aby móc wyĂwietliÊ stronÚ na ekranie.
Nowoczesne przeglÈdarki internetowe sÈ przynajmniej wystarczajÈco „bystre”, ĝe rozróĝniajÈ, które style (doïÈczone w nagïówku przy uĝyciu zapytañ medialnych) trzeba przetworzyÊ natychmiast,
a które moĝna odïoĝyÊ na póěniej, gdy zostanie zakoñczona wstÚpna faza renderowania.
PrzeglÈdarki mogÈ odïoĝyÊ na póěniej wczytywanie stylów doïÈczonych do strony przy uĝyciu
niemajÈcych zastosowania zapytañ medialnych (np. jeĂli ekran jest zbyt maïy, by dane zapytanie
zostaïo zastosowane) i wróciÊ do nich po zakoñczeniu wstÚpnego wczytywania strony. W ten
sposób zyskuje siÚ nieco na wydajnoĂci.
WiÚcej informacji na ten temat moĝna znaleěÊ w portalu dla programistów Google na stronie:
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/renderblocking-css.
Chciaïbym jednak zwróciÊ TwojÈ uwagÚ na nastÚpujÈcy fragment tekstu:
„PamiÚtaj, ĝe pojÚcie zasób blokujÈcy renderowanie odnosi siÚ tylko do faktu,
ĝe przeglÈdarka wstrzymuje pierwsze renderowanie strony z powodu tego zasobu.
Niezaleĝnie od tego, czy nastÚpuje czy nie, przeglÈdarka zawsze pobiera zasób
CSS, chociaĝ w przypadku zasobów nieblokujÈcych z niĝszym priorytetem”.
Powtórzmy zatem: wszystkie doïÈczone do strony pliki zostanÈ pobrane, ale przeglÈdarka nie
musi wstrzymywaÊ renderowania, jeĂli niektóre z nich nie sÈ natychmiast potrzebne.
49
Kup książkę
Poleć książkę
Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3
Zatem nowoczesna przeglÈdarka wczytujÈca responsywnÈ stronÚ internetowÈ (zobacz przykïad z folderu 02-03) z czterema arkuszami stylów doïÈczonymi przy uĝyciu czterech róĝnych
zapytañ medialnych (zawierajÈcymi róĝne style dla poszczególnych przedziaïów rozmiarowych
urzÈdzeñ) pobierze wszystkie te pliki, ale najprawdopodobniej najpierw przetworzy ten, który
jest natychmiast potrzebny do renderowania strony.
ZasadnoĂÊ dzielenia zapytañ medialnych na wiele plików
ChoÊ, jak juĝ wiesz, dzielenie zapytañ medialnych ma pewne zalety, nie zawsze korzyĂci te sÈ
warte zachodu (oczywiĂcie nie liczÈc preferencji projektanta w zakresie dzielenia kodu na
osobne pliki).
Tak czy inaczej, kaĝdy dodatkowy plik oznacza koniecznoĂÊ wysïania do serwera jednego ĝÈdania HTTP wiÚcej, co w niektórych sytuacjach spowalnia proces ïadowania strony. W internecie nic nigdy nie jest ïatwe! Dlatego zanim zdecydujesz siÚ na zastosowanie tej metody,
zawsze dokïadnie wszystko przemyĂl i przetestuj wydajnoĂÊ swojej strony w róĝnych urzÈdzeniach.
Sam postÚpujÚ w ten sposób, ĝe jeĂli nie mam nadmiaru czasu do wykorzystania, jest to ostatnia technika, za pomocÈ której próbujÚ przyspieszyÊ dziaïanie swoich stron. Najpierw wykonujÚ nastÚpujÈce czynnoĂci:
Q kompresujÚ wszystkie obrazy;
Q ïÈczÚ i minimalizujÚ wszystkie skrypty;
Q
Q
Q
kompresujÚ algorytmem gzip wszystkie serwowane zasoby;
buforujÚ statycznÈ treĂÊ w sieciach CDN;
usuwam wszystkie niepotrzebne reguïy CSS.
Dopiero potem mogÚ rozwaĝyÊ moĝliwoĂÊ wydzielenia zapytañ medialnych do osobnych plików w celu zyskania na wydajnoĂci.
Algorytm gzip sïuĝy do kompresowania i dekompresowania plików. Kaĝdy szanujÈcy siÚ serwer powinien
umoĝliwiaÊ kompresowanie za jego pomocÈ plików CSS, dziÚki czemu z serwera do przeglÈdarki (w której nastÚpuje dekompresja) przesyïane sÈ mniejsze iloĂci danych. Dobre wprowadzenie do gzip moĝna znaleěÊ
w Wikipedii: https://pl.wikipedia.org/wiki/Gzip.
¥ródliniowe zagnieĝdĝanie zapytañ medialnych
Prawie zawsze, nie liczÈc pewnych ekstremalnych przypadków, zalecam wstawianie zapytañ
medialnych do istniejÈcych arkuszy stylów, obok „normalnych” reguï.
50
Kup książkę
Poleć książkę
Rozdziaá 2. • Zapytania medialne: obsáuga zróĪnicowanych obszarów roboczych
JeĂli Tobie równieĝ to odpowiada, musisz rozwaĝyÊ jeszcze jednÈ kwestiÚ: czy zapytania medialne powinno siÚ definiowaÊ bezpoĂrednio pod zwiÈzanymi z nimi selektorami, czy w caïkiem
osobnych blokach na koñcu pliku? CieszÚ siÚ, ĝe pytasz.
’ÈczyÊ zapytania medialne w bloki
czy rozpraszaÊ je w róĝnych miejscach pliku
Jestem zwolennikiem pisania zapytañ medialnych bezpoĂrednio pod „normalnymi” reguïami.
Powiedzmy np., ĝe chcemy modyfikowaÊ szerokoĂÊ kilku elementów w kilku miejscach arkusza
stylów w zaleĝnoĂci od szerokoĂci obszaru roboczego. Ja zastosowaïbym takie rozwiÈzanie:
.thing {
width: 50%;
}
@media screen and (min-width: 30rem) {
.thing {
width: 75%;
}
}
/* Kilka innych reguá. */
.thing2 {
width: 65%;
}
@media screen and (min-width: 30rem) {
.thing2 {
width: 75%;
}
}
Na pierwszy rzut oka ten kod wyglÈda makabrycznie. SÈ w nim dwa zapytania medialne odnoszÈce siÚ do minimalnej szerokoĂci ekranu 30rem. Przecieĝ takie wielokrotne powtarzanie
deklaracji @media to czyste marnotrawstwo. Czy nie powinienem wiÚc zachÚcaÊ do grupowania
zapytañ medialnych w pojedyncze bloki, jak poniĝej?
.thing {
width: 50%;
}
.thing2 {
width: 65%;
}
51
Kup książkę
Poleć książkę
Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3
@media screen and (min-width: 30rem) {
.thing {
width: 75%;
}
.thing2 {
width: 75%;
}
}
NiewÈtpliwie tak teĝ moĝna, ale wedïug mnie taka organizacja kodu utrudnia jego modyfikowanie i poprawianie. OczywiĂcie nie ma jedynego poprawnego sposobu zapisywania zapytañ
medialnych, ale ja preferujÚ wstawianie ich bezpoĂrednio pod reguïami, których dotyczÈ,
dziÚki czemu wszystkie warianty danej reguïy znajdujÈ siÚ w jednym miejscu. Gdy zechcÚ
znaleěÊ deklaracjÚ odpowiadajÈcÈ wybranej regule, nie muszÚ potem przeszukiwaÊ caïego
arkusza stylów.
Procesory CSS majÈ jeszcze wygodniejsze funkcje, poniewaĝ pozwalajÈ na zagnieĝdĝanie zapytañ medialnych
w reguïach. W ksiÈĝce Sass i Compass. Praktyczny przewodnik dla projektantów poĂwiÚciïem temu tematowi caïy rozdziaï.
Jednym z logicznych argumentów przeciw preferowanej przeze mnie metodzie jest kwestia
objÚtoĂci kodu. Ale czy na pewno sam rozmiar pliku jest waĝny do tego stopnia, by zniechÚciÊ
nas do organizowania arkuszy stylów w taki sposób? Wiadomo, ĝe nikt nie chce wysyïaÊ
swoim uĝytkownikom rozdÚtych do gigantycznych rozmiarów plików. Z drugiej strony, kompresja
gzip (kompresowane powinny byÊ wszystkie zasoby, jakie da siÚ skompresowaÊ) sprawia, ĝe
wzrost rozmiaru pliku CSS staje siÚ nieistotny. Sprawdziïem to na wiele sposobów, wiÚc jeĂli ten
temat szczególnie CiÚ interesuje, moĝesz przeczytaÊ mój artykuï: http://benfrain.com/inline-or-combined-media-queries-in-sass-fight/. Ogólnie chodzi w nim o to, ĝe moim zdaniem kwestia
rozmiaru pliku w dyskusji o tym, jakÈ metodÚ definiowania zapytañ medialnych stosowaÊ, jest
nieistotna.
JeĂli chcesz wpisywaÊ zapytania medialne bezpoĂrednio pod reguïami, których dotyczÈ, i jednoczeĂnie
wszystkie reguïy zwiÈzane z danym zapytaniem mieÊ w jednym bloku, to moĝesz skorzystaÊ z narzÚdzi
kompilacyjnych (w tej chwili Grunt i Gulp majÈ odpowiednie wtyczki).
Znacznik meta viewport
JeĂli chcesz maksymalnie wykorzystaÊ moĝliwoĂci zapytañ medialnych, musisz sprawiÊ, aby
urzÈdzenia z mniejszymi ekranami wyĂwietlaïy strony w odpowiednich dla siebie wymiarach
(a nie np. prezentowaïy strony o szerokoĂci 980 pikseli, które trzeba by byïo powiÚkszaÊ i pomniejszaÊ).
52
Kup książkę
Poleć książkę
Rozdziaá 2. • Zapytania medialne: obsáuga zróĪnicowanych obszarów roboczych
Kiedy w 2007 r. firma Apple wyprodukowaïa iPhone’a, wprowadziïa wraz z nim wïasny znacznik
meta viewport, który jest juĝ obsïugiwany przez system Android i wiele innych platform.
Znacznik ten sïuĝy do sygnalizowania przeglÈdarkom urzÈdzeñ przenoĂnych przez strony internetowe, w jaki sposób naleĝy je renderowaÊ.
W przyszïoĂci kaĝda responsywna strona, która ma dobrze prezentowaÊ siÚ takĝe na maïych
ekranach, bÚdzie musiaïa mieÊ zdefiniowany ten znacznik.
Testowanie projektów responsywnych w emulatorach
ChoÊ nic nie zastÈpi testów witryn na wïaĂciwych urzÈdzeniach, warto skorzystaÊ z emulatorów dla systemów Android i iOS.
Gwoli ĂcisïoĂci: symulator tylko symuluje dane urzÈdzenie, podczas gdy emulator naprawdÚ próbuje interpretowaÊ pierwotny kod urzÈdzenia.
Emulator Androida dla systemów Windows, Linux i Mac jest darmowy — wystarczy ĂciÈgnÈÊ i zainstalowaÊ
zestaw narzÚdzi Android Software Development Kit (SDK) z witryny: http://developer.android.com/sdk/.
Symulator iOS dostÚpny jest tylko dla uĝytkowników systemu Mac OS X — jest czÚĂciÈ pakietu Xcode
(dostÚpnego za darmo w Mac App Store).
Takĝe same przeglÈdarki internetowe zawierajÈ coraz to lepsze emulatory róĝnych urzÈdzeñ. Zarówno
Firefox, jak i Chrome posiadajÈ specjalne ustawienia pozwalajÈce emulowaÊ wiele róĝnych urzÈdzeñ
przenoĂnych i obszarów roboczych.
Znacznik meta viewport wstawia siÚ w elemencie <head> dokumentu HTML. Moĝna go ustawiÊ
na konkretnÈ szerokoĂÊ (wyraĝonÈ np. w pikselach) lub na wspóïczynnik skalowania, np. 2.0
(dwukrotnoĂÊ rzeczywistego rozmiaru). Poniĝej znajduje siÚ przykïadowa definicja z ustawionÈ
skalÈ na 200% (2.0):
<meta name="viewport" content="initial-scale=2.0,width=device-width" />
Przeanalizujmy skïadniÚ tego znacznika, aby dokïadnie zrozumieÊ zasadÚ jego dziaïania. ’atwo rozszyfrowaÊ znaczenie atrybutu name="viewport". Atrybut content="initial-scale=2.0" powoduje
dwukrotne powiÚkszenie treĂci na stronie (wartoĂÊ 0.5 spowodowaïaby dwukrotne zmniejszenie, a 3.0 trzykrotne zwiÚkszenie itd.). Natomiast fragment width=device-width mówi
przeglÈdarce, ĝe szerokoĂÊ strony powinna byÊ równa szerokoĂci urzÈdzenia.
Za pomocÈ znacznika meta moĝna teĝ kontrolowaÊ maksymalny stopieñ powiÚkszania i zmniejszania strony przez uĝytkownika. Poniĝszy prosty przykïad umoĝliwia uĝytkownikom powiÚkszenie obrazu na szerokoĂÊ trzykrotnie wiÚkszÈ niĝ szerokoĂÊ ekranu i zmniejszenie go na
szerokoĂÊ dwukrotnie mniejszÈ od szerokoĂci ekranu.
<meta name="viewport" content="width=device-width, maximum-scale=3, minimum-scale=0.5" />
Istnieje teĝ moĝliwoĂÊ wyïÈczenia funkcji zmniejszania i powiÚkszania (choÊ trzeba pamiÚtaÊ,
ĝe jest ona bardzo waĝnym mechanizmem dostÚpnoĂci i dlatego w praktyce rzadko kiedy zaleca siÚ ten krok):
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
53
Kup książkę
Poleć książkę
Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3
Tutaj najwaĝniejszy jest fragment user scalable=no.
Zmienimy wartoĂÊ wspóïczynnika skalowania na 1.0, dziÚki czemu przeglÈdarka dopasuje wielkoĂÊ strony do 100% wielkoĂci obszaru roboczego. Ustawienie tego parametru na szerokoĂÊ
urzÈdzenia sprawia, ĝe strona bÚdzie renderowana na caïej szerokoĂci obsïugujÈcych te ustawienia przeglÈdarek. W wiÚkszoĂci przypadków definicja tego znacznika powinna wyglÈdaÊ
nastÚpujÈco:
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
Konsorcjum W3C zauwaĝyïo, ĝe znacznik meta viewport jest w coraz powszechniejszym uĝyciu, wiÚc
stara siÚ przenieĂÊ jego funkcjonalnoĂÊ do CSS. Na stronie: http://dev.w3.org/csswg/css-device-adapt/
znajdziesz informacje o deklaracji @viewport. Chodzi o to, by zamiast wprowadzaÊ oddzielny znacznik
<meta> w sekcji <head> witryny, moĝna byïo deklarowaÊ wyraĝenia typu @viewport { width: 320px;
} w arkuszu stylów. Deklaracja ta ustawiïaby szerokoĂÊ przeglÈdarki na 320 pikseli. Niestety, przeglÈdarki internetowe sïabo obsïugujÈ tÚ technikÚ, wiÚc dla pewnoĂci moĝna siÚ posïugiwaÊ kombinacjÈ
znacznika meta i deklaracji @viewport.
MyĂlÚ, ĝe juĝ doĂÊ dobrze orientujesz siÚ, do czego sïuĝÈ i jak dziaïajÈ zapytania medialne. Zanim
przejdziemy do caïkiem nowego tematu, chciaïbym jeszcze zrobiÊ przeglÈd tego, co szykuje
nam przyszïoĂÊ w nastÚpnej wersji specyfikacji. Zobaczmy!
Zapytania medialne — poziom 4.
W czasie, gdy piszÚ tÚ ksiÈĝkÚ, specyfikacja CSS Media Queries Level 4 jest na etapie szkicu
(http://dev.w3.org/csswg/mediaqueries-4/) i opisane w niej nowoĂci nie sÈ zaimplementowane
w wielu przeglÈdarkach. Dlatego teĝ, choÊ poniĝej robiÚ przeglÈd najwaĝniejszych elementów tej
specyfikacji, naleĝy pamiÚtaÊ, ĝe wiele jeszcze moĝe siÚ zmieniÊ. Zawsze upewnij siÚ, czy to,
czego chcesz uĝyÊ, jest juĝ obsïugiwane, i sprawdě, czy nie nastÈpiïy jakieĂ zmiany w skïadni.
Omawiana specyfikacja zawiera wiele nowoĂci, ale ja skupiam siÚ tylko na skïadnikach dotyczÈcych skryptów, urzÈdzeñ wskazujÈcych, kwestii wskazywania elementów kursorem oraz
Ăwiatïa otoczenia.
Obsïuga skryptów
W dokumentach HTML czÚsto stosuje siÚ technikÚ polegajÈcÈ na domyĂlnym przypisaniu
elementu do klasy oznaczajÈcej, ĝe nie ma ĝadnego skryptu JavaScript, a nastÚpnie zmianie
tej klasy na innÈ, gdy zostanie uruchomiony skrypt. Jest to prosty sposób na rozgaïÚzienie kodu (wliczajÈc CSS) na podstawie tej nowej klasy HTML. Technika ta sïuĝy przede wszystkich
do pisania reguï przeznaczonych dla uĝytkowników, których przeglÈdarka ma wyïÈczonÈ obsïugÚ JavaScript.
54
Kup książkę
Poleć książkę
Rozdziaá 2. • Zapytania medialne: obsáuga zróĪnicowanych obszarów roboczych
Nie wiem, czy powyĝszy akapit jest zrozumiaïy, wiÚc dodam prosty przykïad. DomyĂlnie w dokumencie HTML znajdowaïby siÚ taki element:
<html class="no-js">
Gdy na tej stronie zostanie uruchomiony skrypt JavaScript, jego pierwszym zadaniem bÚdzie
zamiana klasy no-js na js:
<html class="js">
Teraz moĝemy napisaÊ reguïy CSS przeznaczone do zastosowania tylko wtedy, gdy dziaïajÈ
skrypty JavaScript, np. .js .header {display: block;}.
W nowej specyfikacji zapytañ medialnych podjÚto próbÚ ustandaryzowania tej metody tak,
aby test obsïugi JavaScript moĝna byïo wykonywaÊ wprost z poziomu CSS:
@media (scripting: none) {
/* Reguáy do zastosowania, gdy brakuje obsáugi JavaScript. */
}
Moĝna teĝ sprawdzaÊ, czy JavaScript jest wïÈczony:
@media (scripting: enabled) {
/* Reguáy do zastosowania, gdy JavaScript jest wáączony. */
}
Istnieje teĝ moĝliwoĂÊ sprawdzenia, czy obsïuga JavaScript jest wïÈczona tylko poczÈtkowo.
W specyfikacji W3C podano przykïad drukowanej strony, której ukïad jest najpierw budowany
z uĝyciem skryptów, ale póěniej JavaScript staje siÚ niedostÚpny. Ten test zapisuje siÚ nastÚpujÈco:
@media (scripting: initial-only) {
/* Reguáy do zastosowania, gdy JavaScript dziaáa tylko początkowo. */
}
Szerszy opis wstÚpnej wersji tej funkcji moĝna znaleěÊ pod adresem: https://drafts.csswg.org/
mediaqueries-4/#mf-scripting.
UrzÈdzenia wskazujÈce
Na stronach W3C znajduje siÚ nastÚpujÈcy opis funkcji dotyczÈcej urzÈdzeñ wskazujÈcych:
„Funkcja ta sïuĝy do sprawdzania obecnoĂci i dokïadnoĂci urzÈdzeñ wskazujÈcych,
takich jak mysz. Jeĝeli urzÈdzenie dysponuje kilkoma mechanizmami wskazywania,
funkcja musi odzwierciedlaÊ wïaĂciwoĂci podstawowego z nich zgodnie z ustaleniami
klienta uĝytkownika”.
UrzÈdzenie wskazujÈce moĝe mieÊ jednÈ z trzech wïaĂciwoĂci: none, coarse i fine.
55
Kup książkę
Poleć książkę
Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3
UrzÈdzeniem wskazujÈcym o wïaĂciwoĂci coarse (gruby) moĝe byÊ palec w przypadku ekranu
dotykowego albo kursor z konsoli do gier, w której nie ma tak precyzyjnego wskaěnika jak mysz.
@media (pointer: coarse) {
/* Reguáy do zastosowania dla niezbyt precyzyjnego wskaĨnika. */
}
UrzÈdzenia o wïaĂciwoĂci fine (precyzyjny) to np.: mysz, rysik lub jakiĂ inny wynalazek do precyzyjnego wskazywania elementów na ekranie.
@media (pointer: fine) {
/* Style do zastosowania dla precyzyjnych wskaĨników. */
}
Moim zdaniem im szybciej przeglÈdarki zacznÈ obsïugiwaÊ te wïasnoĂci, tym lepiej. Obecnie
wszyscy majÈ problemy ze stwierdzeniem, czy uĝytkownik dysponuje myszÈ, ekranem dotykowym, czy jednym i drugim, oraz z czego aktualnie korzysta.
Najbezpieczniej jest zakïadaÊ, ĝe uĝytkownik korzysta z ekranu dotykowego i zgodnie z tym zaïoĝeniem
ustawiaÊ odpowiednie rozmiary elementów. DziÚki temu, nawet jeĂli ktoĂ uĝywa myszy, bez problemu
bÚdzie mógï siÚ posïugiwaÊ naszym interfejsem. GdybyĂmy natomiast przyjÚli, ĝe uĝytkownik uĝywa
myszy, a ten posïugiwaïby siÚ ekranem dotykowym, to korzystanie z naszej strony byïoby dla niego
utrudnione.
JeĂli chcesz siÚ dowiedzieÊ, jak wielkie trudnoĂci trzeba przezwyciÚĝyÊ przy projektowaniu stron dla urzÈdzeñ
z myszÈ i ekranem dotykowym, polecam zestaw slajdów pt. Getting touchy Patricka H. Lauke'a: https://patrick
´hlauke.github.io/getting-touchy-presentation/.
Szerszy opis wstÚpnej wersji tej funkcji moĝna znaleěÊ pod adresem: http://dev.w3.org/csswg/ mediaqueries-4/#mf-interaction.
Funkcja sprawdzania obsïugi efektu hover
Nietrudno zgadnÈÊ, ĝe funkcja sprawdzania obsïugi efektu hover dotyczy testowania, czy
uĝytkownik jest w stanie umieĂciÊ kursor nad elementem na stronie. JeĂli obecnych jest kilka
urzÈdzeñ wejĂciowych (np. ekran dotykowy i mysz), pod uwagÚ brane sÈ wïaĂciwoĂci tego
podstawowego. Poniĝej przedstawiam moĝliwe wartoĂci i przykïady kodu.
Dla uĝytkowników bez moĝliwoĂci umieszczania kursora nad elementami moĝemy pisaÊ reguïy z wartoĂciÈ none:
@media (hover: none) {
/* Style do zastosowania, gdy uĪytkownik nie moĪe umieszczaü kursora nad elementami. */
}
Dla uĝytkowników, którzy mogÈ posïugiwaÊ siÚ kursorem, ale muszÈ w tym celu wykonaÊ jakÈĂ
znaczÈcÈ czynnoĂÊ, naleĝy napisaÊ deklaracjÚ z wartoĂciÈ on-demand:
56
Kup książkę
Poleć książkę
Rozdziaá 2. • Zapytania medialne: obsáuga zróĪnicowanych obszarów roboczych
@media (hover: on-demand) {
/* Style do zastosowania, gdy uĪytkownik moĪe uĪywaü kursora, ale wymaga to od niego
/* konkretnego wysiáku. */
}
Aby wyznaczyÊ reguïy dla uĝytkowników mogÈcych bez ĝadnych przeszkód posïugiwaÊ siÚ
kursorem, wystarczy uĝyÊ wartoĂci hover.
@media (hover) {
/* Style do zastosowania, gdy uĪytkownik moĪe bez przeszkód posáugiwaü siĊ kursorem. */
}
IstniejÈ jeszcze opcje any-pointer i any-hover. DziaïajÈ podobnie jak opisane powyĝej ustawienia pointer i hover, z tym ĝe sprawdzajÈ, czy danÈ moĝliwoĂÊ ma którekolwiek z dostÚpnych urzÈdzeñ.
Zapytania dotyczÈce otoczenia
Czy nie byïoby przyjemnie, gdybyĂmy mogli zmieniaÊ nasze projekty na podstawie warunków panujÈcych w otoczeniu uĝytkownika, np. natÚĝenia Ăwiatïa? DziÚki temu, gdyby uĝytkownik znajdowaï siÚ w ciemnym pokoju, moglibyĂmy zastosowaÊ nieco przytïumione kolory.
Albo odwrotnie: gdyby oĂwietlenie otoczenia miaïo duĝe natÚĝenie, moglibyĂmy zwiÚkszaÊ
kontrast kolorów. PodjÚto juĝ próby rozwiÈzania tego typu problemów za pomocÈ zapytañ
medialnych. Spójrz na poniĝsze przykïady:
@media (light-level: normal) {
/* Style dla standardowych warunków oĞwietlenia. */
}
@media (light-level: dim) {
/* Style dla sáabego Ğwiatáa otoczenia. */
}
@media (light-level: washed) {
/* Style dla jasnego Ğwiatáa otoczenia. */
}
Warto wiedzieÊ, ĝe jest kilka implementacji tych zapytañ medialnych. Poza tym moĝna siÚ
spodziewaÊ zmian w specyfikacji, zanim bÚdzie moĝna bezpiecznie z niej korzystaÊ. Jednak
juĝ teraz dobrze jest siÚ orientowaÊ, jakie zmiany mogÈ nastÈpiÊ w ciÈgu kilku najbliĝszych lat.
Szerszy opis wstÚpnej wersji tej funkcji moĝna znaleěÊ pod adresem: http://dev.w3.org/ csswg/
mediaqueries-4/#mf-environment.
57
Kup książkę
Poleć książkę
Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3
Podsumowanie
W tym rozdziale dowiedziaïeĂ siÚ, czym sÈ zapytania medialne CSS3, jak je zadeklarowaÊ w plikach CSS i jak mogÈ Ci one pomóc w stworzeniu projektu RWD witryny. DowiedziaïeĂ siÚ teĝ,
jak za pomocÈ znacznika meta zmusiÊ nowoczesne przeglÈdarki przenoĂne, aby wczytywaïy
strony w taki sposób, w jaki chcesz.
Ostatecznie przekonaïeĂ siÚ jednak, ĝe za pomocÈ samych zapytañ medialnych moĝna tworzyÊ projekty adaptacyjne, czyli takie, które zmieniajÈ skokowo ukïad w zaleĝnoĂci od warunków. Prawdziwie responsywna strona gïadko przechodzi od jednego ukïadu do innego. Do
osiÈgniÚcia naszego celu potrzebna bÚdzie wiÚc teĝ znajomoĂÊ ukïadów pïynnych, które mogÈ
siÚ elastycznie zmieniaÊ miÚdzy kolejnymi punktami kontrolnymi. Tworzenie ukïadów pïynnych uïatwiajÈcych harmonijne przejĂcie miÚdzy stanami narzucanymi przez nasze zapytania
medialne jest tematem kolejnego rozdziaïu.
58
Kup książkę
Poleć książkę
Skorowidz
A
algorytm gzip, 50, 52
animacja, 201
CSS, 215, 236
SVG, 195, 201, 204, 205,
206, 212
API, 95
Archibald Jake, 207
atrybut
alt, 132
aria-label, 276
autocomplete, 246
autofocus, 244, 246
data-*, 133
fill, 198
height, 187
lang, 98, 108
list, 246, 247
placeholder, 243
required, 244, 248, 262
selektor, Patrz: selektor
sizes, 90, 91
srcset, 89, 90, 91
viewbox, 187
width, 187
Autoprefixer, 68, 157
B
Béziera krzywa, Patrz: krzywa
Béziera
biblioteka Modernizr,
Patrz: Modernizr
blok Ăródliniowy, 65
Kup książkę
Bootstrap, 275
BrowserSync, 269
C
Chrome, 53
cieñ, 158, 159, 172
elementu, 159, 161
wewnÚtrzny, 160
Coyier Chris, 65, 180
CSS
animacja,
Patrz: animacja CSS
preprocesor,
Patrz: preprocesor CSS
przejĂcie,
Patrz: przejĂcie CSS
szkielet, 275
transformacja, Patrz:
transformacja CSS
wydajnoĂÊ, 179
CSS Masking Module, 180
CSS3 reguïa, Patrz: reguïa
custom propertiy, Patrz:
wïasnoĂÊ uĝytkownika
D
deseñ tïa, 168
dokument
HTML5, 97, Patrz: HTML5
DPI, 91
DPR, 91
Draw SVG, 190
dyrektywa
@import, 44
@media, 33, 44, 56, 57
@supports, 129, 130
děwiÚk, 113
E
efekt
hover, 56
wypeïnienia, 264
ekran
dotykowy, 56
orientacja, 42
Retina, Patrz: Retina
rozdzielczoĂÊ, 48
element
a, 100
address, 106
article, 103
aside, 103
b, 107
cieñ, Patrz: cieñ elementu
datalist, 246, 247
defs, 188
desc, 188
details, 104
div, 109
em, 107, 110
fieldset, 242
figcaption, 104
figure, 103, 104
footer, 105
g, 188
h1, 106
Poleć książkę
Skorowidz
header, 105
hgroup, 106, 108
html, 98
HTML5, 96
i, 108, 110
img, 91, 191, 199
main, 101, 102
multimedialny, 113
format alternatywny, 114
nav, 102
object, 191, 199
picture, 91
pïywajÈcy, 65
pozycjonowanie
bezwzglÚdne, 229
przestarzaïy, 108
rola, 111
script, 108
section, 102, 103, 109
semantyczny, 101
na poziomie tekstu, 107
source, 92, 114
summary, 104
SVG, 187, 188
title, 188
use, 196, 198
em, 33, 43
Embedded Content, 89
emulator, 53
F
feature query, Patrz: zapytanie
o obsïugÚ wïasnoĂci
film, 113
responsywny, 115
wspóïczynnik ksztaïtu, 116
Filter Effects, 173
filtr, 172, 173
blur, 174
brightness, 174
contrast, 174
CSS, 174, Patrz: filtr
drop-shadow, 173, 174
grayscale, 175
hue-rotate, 176, 179
invert, 176
ïÈczenie, 179
opacity, 177
saturate, 178
sepia, 178
SVG, 173, 208
url, 174
Firefox, 41, 53
flexbox, 59, 64, 66, 88, 126, 129,
282
automatyczne dodawanie
przedrostków, 68
inline, 73
kolejnoĂÊ elementów, 83
obsïuga przez przeglÈdarki,
66
specyfikacja, 66
wïasnoĂÊ, 68, 70, 71, 72, 73,
74
Flexible Box, Patrz: flexbox
font
Roboto, 149
sieciowy, 148, 151
format
GIF, 183, 191
JPEG, 183, 191
PNG, 183, 190, 191, 192
SVG, Patrz: SVG
WebP, 92
formularz HTML5, 242, 243
formatowanie CSS, 259
pole
adres URL, 250
color, 254
date, 255
email, 248
liczbowe, 249
month, 255
pattern, 253
tel, 252
time, 256
week, 256
wymagane, 262
wyszukiwania, 253
zakres, 257
Foundation, 275
funkcja
calc, 146
cubic-bezier, 219
czasu, 219, 220
ease, 219, 220
ease-in, 219
ease-in-out, 219
ease-out, 219
linear, 219
G
graceful degradation, Patrz:
strona elegancka redukcja
funkcjonalnoĂci
gradient, 162
generator, 166
kierunek, 163
liniowy, 162, 166
powtarzajÈcy siÚ, 167
promienisty, 165, 166, 168
punkty kontrolne, 163, 164
responsywny, 166
grafika
SVG, Patrz: SVG
wektorowa, 185
GreenSock, 205, 206, 207
H
HSB, 152
HSL, 152, 153, 158
HSLA, 154
HTML5, 26, 95
element, Patrz: element
HTML5
semantyka, 95, 101
skïadnia, 99
HTML5 Boilerplate, 99
HTTP2, 281
I
IcoMoon, 190, 196
Iconizr, 195
identyfikator URI, Patrz: URI
ikona, 190
Illustrator, 189
Inkscape, 190
instrukcja
if-else, 41, 128
switch, 128
interfejs programistyczny,
Patrz: API
285
Kup książkę
Poleć książkę
Skorowidz
Internet Explorer
wersja, 24
Irish Paul, 229
J
JavaScript, 54, 273, 279
jednostka
dpcm, 172
dpi, 172
dppx, 172
em, Patrz: em
piksel, Patrz: piksel
procent, 33
rem, Patrz: rem
vh, 90, 148
vmax, 148
vmin, 148
vw, 90, 148
jÚzyk
HTML, 186
SMIL, 201
XML, 186
znacznikowy, 186
jQuery, 192
K
kanaï alfa, 152, 154
klasa
js, 55
no-js, 55
klatka kluczowa, 236
Koblentz Thierry, 116
kodu rozgaïÚzienie, 54
kolor, 152, 197
kontrolka, 247, 248
daty i godziny, 254
krzywa Béziera, 220
L
LESS, 25
M
Marcotte Ethan, 23, 60
maska, 180
Matrix Construction Set, 227
Media Queries, 40
poziom 4, 46, 54
Method Draw, 190
Modernizr, 99, 130, 132, 193,
272
O
obraz, 29, 191
responsywny, 60, 88, 90, 92
rozdzielczoĂÊ, 89, 172
SVG, Patrz: SVG
szerokoĂÊ, 30, 31
technika obcinania, 180
tïa, 169
WebP, Patrz: format WebP
obszar roboczy, 28, 187
Offline Web Applications, 116
okna przewijanie
inercyjne, 127
poziome, 126, 132, 141
oĂ czasu, 236
P
piksel, 33, 43
w CSS, 90
plik
css/styles.css, 30
kompresowanie, 50, 52
PostCSS, 25
preprocesor
CSS, 25, 41
LESS, Patrz: LESS
PostCSS, Patrz: PostCSS
Sass, Patrz: Sass
Stylus, Patrz: Stylus
program
Adobe Illustrator, Patrz:
Illustrator
Inkscape, Patrz: Inkscape
Sketch, Patrz: Sketch
progressive enhancement, Patrz:
strona stopniowe ulepszanie
przedrostek producenta, 49, 157
przeglÈdarka
funkcjonalnoĂci, 271
obsïugiwana, 271
odĂwieĝanie, 269
przeglÈdarka internetowa, 23
Firefox, Patrz: Firefox
funkcjonalnoĂci, 25
Internet Explorer, Patrz:
Internet Explorer
przejĂcie CSS, 215, 216, 219
rodzaj, 218
przestrzeñ nazw, 188
przezroczystoĂÊ, 154
pseudoelement, 145
::after, 127
::before, 127
:first-line, 145
pseudoklasa, 136, 142
:has, 147
:root, 146
strukturalna, 144
pseudoselektor :placeholdershown, 244
punkt kontrolny, 33, 273
R
reguïa
@font-face, 149, 151
break-word, 124
column-count, 123
column-width, 121
deklaracja, 120
keyframes, 236
selektor, 120
struktura, 120
word-wrap, 124
rem, 34, 43
Responsive Web Design, Patrz:
RWD
Retina, 48
RGB, 152, 158
RGBA, 152
Rieger Bryan, 33
RWD, 22, 23
S
Sass, 25, 41
sekcja body, 26
selektor, 132, 135, 265
empty, 144
fragmentu, 133, 134
286
Kup książkę
Poleć książkę
Skorowidz
has, 147
klasy, 136
last-child, 137
negacji, 143
n-tego potomka, 137, 138,
141
nth-last-of-type, 140
nth-of-type, 140
pseudoklas, 142
relacyjny, 147
strukturalny, 137
szybkoĂÊ, 179
Service Workers, 117
Sharp Remy, 96
Sketch, 188, 189
skrypt JavaScript, 54, 96
sïowo kluczowe
print, 42
screen, 33, 42
SMIL, 201, 202
Snap.svg, 205
Soueidan Sara, 181
sprite graficzny, 193, 195, 211
stopka, 82
strona
elegancka redukcja
funkcjonalnoĂci, 24
HTML5, 97
projekt responsywny,
Patrz: RWD
responsywna, 26, 59, 60, 63,
64, 66, 115, 268, 271
offline, 116
wydajnoĂÊ, 281
standard dostÚpnoĂci, 110,
111
testowanie, 112
WAI-ARIA, 111, 112
WCAG, 110
stopka, 82
stopniowe ulepszanie, 24,
130, 269, 270, 272
transformacje, 233
ukïad
o staïej szerokoĂci, 59, 60,
63, 64
pïynny, 59, 60, 63, 64
tabelaryczny, 65
wielokolumnowy, 121
Style Tiles, 268
Stylus, 25
SVG, 184, 191, 199, 211
animacja, 195, 201
CSS, 204
JavaScript, 205, 206
filtr, Patrz: filtr SVG
formatowanie, 202, 203
ikona, Patrz: ikona
kolor, 197
ksztaït, 189
optymalizacja, 207
rysowanie linii, Patrz:
technika stroke-dashoffset
Ăcieĝka, Patrz: Ăcieĝka
Ăródliniowe, 199
ukïad wspóïrzÚdnych, 188
w kodzie HTML, 195
w przeglÈdarkach, 200
w tle, 192, 199
zapytanie medialne,
Patrz: zapytanie medialne
w SVG
SVG-edit, 190
SVGO, 207
SVGOMG, 207
symulator, 53
¥
Ăcieĝka, 189
fill, 198
T
technika stroke-dashoffset, 206,
207
tïo, 264
obraz, Patrz: obraz tïa
SVG, Patrz: SVG w tle
wymiary, 170
transformacja CSS, 215
dwuwymiarowa, 221
macierzowa, Patrz:
transformacja CSS matrix
matrix, 221, 226, 227, 228
rotate, 221, 225, 232
scale, 221, 222
skew, 221, 226
translate, 221, 222
trójwymiarowa, 229, 230,
232
U
URI, 194, 195, 211
urzÈdzenie wskazujÈce, 55
UTF-8, 98
V
Velocity.js, 205
viewport, Patrz: obszar roboczy
W
W3C, 40
WAI-ARIA header, 111
walidator ostrzeĝenie, 108
Webshims Lib, 258
Wendelken Aurelius, 265
wïasnoĂÊ, 120
align-items, 76
align-self, 76
animation-duration, 237
animation-fill-mode, 237,
238
animation-play-state, 238
appearance, 277
backface-visibility, 231
background, 163, 165, 166
background-image, 162
background-position, 170,
171
background-size, 170
box-shadow, 159, 160, 161,
172, 173
spread, 161
clear, 65
display :none, 216
flex, 79, 80, 83
flexbox, 68, 70, 71, 72, 73,
74, 79
flex-flow, 72
flex-shrink, 80
justify-content, 78
287
Kup książkę
Poleć książkę
Skorowidz
wïasnoĂÊ
max-width, 31
opacity, 154
order, 85
overflow-scrolling, 132
perspective, 230
stroke, 203
SVG fill, 193
tabelaryczna, 65
text-indent, 148
text-overflow, 125
text-shadow, 158, 159
transform-origin, 227
transition, 218, 221
transition-delay, 218
transition-duration, 218
transition-property, 218
transition-timing-function,
218
uĝytkownika, 145
white-space, 126
width, 31
wypeïniacz, 96, 258
wyraĝenie regularne, 253
Z
zapytanie medialne, 32, 33, 40,
46
dzielenie na pliki, 50
importowanie, 44
ïÈczenie, 43
o obsïugÚ wïasnoĂci, 128
o rozdzielczoĂÊ, 172
parametry, 44
punkt kontrolny, 268
skïadnia, 41, 43, 51, 52
specyfikacja, 37
w arkuszach stylów, 44, 49
w SVG, 210
zagnieĝdĝanie Ăródliniowe,
50
zagnieĝdĝanie w reguïach,
52
zmienna, 145, Patrz teĝ:
wïasnoĂÊ uĝytkownika
znacznik
audio, 113, 115
doctype, 97
link, 42
meta viewport, 28, 53, 54
Ăródliniowy, 107
video, 113, 115
znaku kodowanie, 98
¿
ĝÈdanie HTTP, 50
288
Kup książkę
Poleć książkę
Kup książkę
Poleć książkę