Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00115 008345 9800172 na godz. na dobę w sumie
Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3. Wydanie II - książka
Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3. Wydanie II - książka
Autor: Liczba stron: 288
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-2343-8 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> css
Porównaj ceny (książka, ebook (-20%), audiobook).
Profesjonalnie wykonana strona internetowa powinna działać bez zarzutu nie tylko na komputerze stacjonarnym, lecz także na tablecie czy telefonie. Użytkownicy chcą korzystać z aplikacji sieciowych w każdych warunkach i uruchamiać je na urządzeniach o najprzeróżniejszych rozmiarach czy parametrach. Należy się spodziewać, że wkrótce katalog urządzeń podłączanych do internetu znacznie się poszerzy. W takich warunkach projektant koniecznie musi zadbać o responsywność, aby tworzone przez niego strony internetowe dostosowywały się do zmiennych warunków i zachowywały funkcjonalność.

Niniejsza książka stanowi kompletne źródło informacji potrzebnych do napisania responsywnej strony internetowej. Jeśli znasz HTML i CSS, możesz z jej pomocą zbudować taką aplikację. Znajdziesz tu opis wszystkich podstawowych aspektów responsywnych projektów stron i dowiesz się, jak korzystać z najbardziej przydatnych technik w technologiach HTML5 i CSS3. Co więcej, odkryjesz najlepsze metody pisania i dostarczania kodu, obrazów i plików. Dzięki licznym przykładom i opisom bez trudu dostosujesz swój projekt do wymagań telefonów komórkowych i wielu innych urządzeń. Wydanie drugie uzupełniono o opis prawie wszystkich najnowszych technik i narzędzi potrzebnych do budowy responsywnych aplikacji internetowych.

W tej książce znajdziesz:

Responsywne strony internetowe — będą równie piękne nawet po latach!


Ben Frain — projektant stron internetowych, starszy programista frontendowy w firmie Bet365. Kiedyś był niedocenionym (i skromnym) aktorem telewizyjnym. Napisał też cztery równie niedocenione (jego zdaniem) scenariusze i wciąż żywi (słabnącą) nadzieję, że w końcu uda mu się sprzedać choćby jeden z nich. W oczekiwaniu na ten piękny dzień pisze książki o tajnikach projektowania stron WWW. Warto przeczytać również jego drugą książkę: Sass i Compass. Praktyczny przewodnik dla projektantów.
Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

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: helion@helion.pl 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(cid:258)ci Zespó(cid:239) wydania oryginalnego O autorze O korektorach merytorycznych Przedmowa Rozdzia(cid:239) 1. Podstawowe wiadomo(cid:258)ci o projektowaniu responsywnych stron internetowych Rozpoczynamy przygod(cid:218) Projekt responsywny — definicja Projektowanie responsywnych stron internetowych w pigu(cid:239)ce Ustawianie poziomu obs(cid:239)ugi przegl(cid:200)darek Kilka uwag na temat narz(cid:218)dzi i edytorów tekstu Pierwszy przyk(cid:239)ad projektu responsywnego Podstawowy plik HTML Okie(cid:239)zna(cid:202) obrazy Zapytania medialne wkraczaj(cid:200) do akcji Wady opisanego przyk(cid:239)adu Podsumowanie Rozdzia(cid:239) 2. Zapytania medialne: obs(cid:239)uga zró(cid:285)nicowanych obszarów roboczych Dlaczego zapytania medialne s(cid:200) potrzebne do budowy uk(cid:239)adów responsywnych Podstawowa logika warunkowa w CSS Sk(cid:239)adnia zapyta(cid:241) medialnych Zapytania medialne w znaczniku link (cid:146)(cid:200)czenie zapyta(cid:241) medialnych Importowanie zapyta(cid:241) medialnych za pomoc(cid:200) dyrektywy @import Zapytania medialne w arkuszach stylów Co mo(cid:285)na sprawdza(cid:202) za pomoc(cid:200) zapyta(cid:241) medialnych 11 13 15 17 21 22 23 23 23 25 26 26 29 32 37 38 39 40 41 41 42 43 44 44 44 Poleć książkęKup książkę Spis tre(cid:286)ci Modyfikowanie projektu strony za pomoc(cid:200) zapyta(cid:241) medialnych W zapytaniu medialnym mo(cid:285)na wpisa(cid:202) ka(cid:285)d(cid:200) regu(cid:239)(cid:218) CSS Zapytania medialne dla urz(cid:200)dze(cid:241) o du(cid:285)ej g(cid:218)sto(cid:258)ci pikseli Metody organizacji i pisania zapyta(cid:241) medialnych Do(cid:239)(cid:200)czanie ró(cid:285)nych plików CSS za pomoc(cid:200) zapyta(cid:241) medialnych Zasadno(cid:258)(cid:202) dzielenia zapyta(cid:241) medialnych na wiele plików (cid:165)ródliniowe zagnie(cid:285)d(cid:285)anie zapyta(cid:241) medialnych (cid:146)(cid:200)czy(cid:202) zapytania medialne w bloki czy rozprasza(cid:202) je w ró(cid:285)nych miejscach pliku Znacznik meta viewport Zapytania medialne — poziom 4. Obs(cid:239)uga skryptów Urz(cid:200)dzenia wskazuj(cid:200)ce Funkcja sprawdzania obs(cid:239)ugi efektu hover Zapytania dotycz(cid:200)ce otoczenia Podsumowanie Rozdzia(cid:239) 3. Uk(cid:239)ady p(cid:239)ynne i obrazy responsywne Konwertowanie uk(cid:239)adu sta(cid:239)ego na elastyczny Do czego s(cid:239)u(cid:285)y model flexbox Bloki (cid:258)ródliniowe i bia(cid:239)e znaki Elementy p(cid:239)ywaj(cid:200)ce W(cid:239)asno(cid:258)ci tabelaryczne Flexbox — wprowadzenie Wyboista droga do flexboksa Obs(cid:239)uga flexboksa przez przegl(cid:200)darki Podstawy flexboksa Idealne (cid:258)rodkowanie tekstu w pionie Przesuwanie elementów Zmienianie kolejno(cid:258)ci elementów Ró(cid:285)ne rodzaje uk(cid:239)adu flexboksa w ró(cid:285)nych zapytaniach medialnych W(cid:239)asno(cid:258)(cid:202) inline-flex Wyrównywanie tre(cid:258)ci we flexboksie W(cid:239)asno(cid:258)(cid:202) flex Lepka stopka Zmienianie kolejno(cid:258)ci elementów Podsumowanie wiadomo(cid:258)ci o flexboksie Obrazy responsywne Wewn(cid:218)trzny problem obrazów responsywnych Proste prze(cid:239)(cid:200)czanie rozdzielczo(cid:258)ci za pomoc(cid:200) atrybutu srcset Zaawansowane techniki prze(cid:239)(cid:200)czania obrazów za pomoc(cid:200) atrybutu srcset Prezentowanie obrazów za pomoc(cid:200) elementu picture Podsumowanie Rozdzia(cid:239) 4. HTML5 i projekty responsywne Znaczniki HTML5 s(cid:200) rozpoznawane przez wszystkie nowoczesne przegl(cid:200)darki Prawid(cid:239)owe rozpoczynanie strony HTML5 Znacznik doctype Element HTML i atrybut lang 4 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 Poleć książkęKup książkę Spis tre(cid:286)ci Definiowanie ró(cid:285)nych j(cid:218)zyków Kodowanie znaków Jak najlepiej pracowa(cid:202) z j(cid:218)zykiem HTML5 Rozs(cid:200)dne podej(cid:258)cie do pisania kodu Oddajmy cze(cid:258)(cid:202) 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 (cid:165)ródliniowe elementy semantyczne HTML5 Element b Element em Element i Elementy j(cid:218)zyka HTML, które uleg(cid:239)y dezaktualizacji Praktyczne wykorzystanie elementów strukturalnych HTML5 Rozs(cid:200)dne wybieranie elementów Standardy dost(cid:218)pno(cid:258)ci stron WCAG i WAI-ARIA WCAG Standard WAI-ARIA Zapami(cid:218)taj tylko jedn(cid:200) rzecz Krok dalej z ARIA Osadzanie elementów multimedialnych w HTML5 Dodawanie do stron internetowych filmów i d(cid:283)wi(cid:218)ków Znaczniki audio i video dzia(cid:239)aj(cid:200) niemal identycznie Responsywne odtwarzacze filmów i ramki wewn(cid:218)trzne Aplikacje sieciowe w trybie offline Podsumowanie Rozdzia(cid:239) 5. CSS3: selektory, typografia, tryby kolorów i nowe funkcje Nikt nie wie wszystkiego Struktura regu(cid:239) CSS Przydatne triki w CSS3 Uk(cid:239)ad wielokolumnowy w CSS3 dla projektu responsywnego Zawijanie tekstu Obcinanie tekstu Tworzenie poziomych przewijanych okienek Rozga(cid:239)(cid:218)zianie kodu CSS Zapytania o obs(cid:239)ug(cid:218) w(cid:239)asno(cid:258)ci (cid:146)(cid:200)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 Poleć książkęKup książkę Spis tre(cid:286)ci Nowe selektory CSS3 i sposób ich wykorzystania Selektory atrybutów w CSS3 Szczegó(cid:239)owe selektory atrybutów CSS3 Pu(cid:239)apki zwi(cid:200)zane z u(cid:285)ywaniem selektorów warto(cid:258)ci atrybutów Za pomoc(cid:200) selektorów warto(cid:258)ci atrybutów mo(cid:285)na wybiera(cid:202) identyfikatory i klasy zaczynaj(cid:200)ce si(cid:218) od cyfr Strukturalne pseudoklasy CSS3 Selektor :last-child Selektory n-tego potomka Zasada dzia(cid:239)ania selektorów n-tego potomka Selektory n-tego potomka w projektach responsywnych Selektor negacji (:not) Selektor :empty Formatowanie pierwszego wiersza akapitu bez wzgl(cid:218)du na obszar roboczy W(cid:239)asno(cid:258)ci u(cid:285)ytkownika i zmienne CSS Funkcja CSS calc Selektory, poziom 4. Pseudoklasa :has Jednostki zale(cid:285)ne od rozmiaru obszaru roboczego Typografia sieciowa Regu(cid:239)a @font-face Odwo(cid:239)anie do fontów w regule @font-face Uwagi na temat regu(cid:239)y @font-face i projektów responsywnych Nowe formaty barw CSS3 i kana(cid:239) alfa Format RGB Format HSL Kana(cid:239)y alfa Modu(cid:239) kolorów poziomu 4. Podsumowanie Rozdzia(cid:239) 6. Spektakularny wygl(cid:200)d i CSS3 Cienie tekstu w CSS3 Opuszczanie warto(cid:258)ci rozmycia, gdy jest niepotrzebna Definiowanie wielu cieni dla tekstu Cienie elementów Cie(cid:241) wewn(cid:200)trz elementu Definiowanie wielu cieni dla elementu Warto(cid:258)(cid:202) spread Gradienty t(cid:239)a Liniowe gradienty t(cid:239)a Gradienty promieniste Gradienty responsywne Powtarzanie gradientu Gradientowe desenie t(cid:239)a Wiele obrazów t(cid:239)a jednocze(cid:258)nie Wymiary t(cid:239)a W(cid:239)asno(cid:258)(cid:202) background position Zbiorcza w(cid:239)asno(cid:258)(cid:202) background 6 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 Poleć książkęKup książkę Spis tre(cid:286)ci Obrazy t(cid:239)a o wysokiej rozdzielczo(cid:258)ci Filtry CSS Dost(cid:218)pne filtry CSS (cid:146)(cid:200)czenie filtrów CSS Uwaga na temat wydajno(cid:258)ci CSS Uwagi na temat masek CSS i przycinania grafiki Podsumowanie Rozdzia(cid:239) 7. Grafika SVG niezale(cid:285)na od rozdzielczo(cid:258)ci ekranu Historia SVG w pigu(cid:239)ce Grafika, która jest dokumentem Element g(cid:239)ówny SVG Przestrze(cid:241) nazw Elementy title i desc Element defs Element g Kszta(cid:239)ty SVG (cid:165)cie(cid:285)ki SVG Najpopularniejsze programy i us(cid:239)ugi do tworzenia grafiki SVG Oszcz(cid:218)dzaj czas dzi(cid:218)ki us(cid:239)ugom oferuj(cid:200)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(cid:258)rednio do kodu HTML Wielokrotne wykorzystywanie obiektów graficznych z symboli Osadzone grafiki SVG mog(cid:200) mie(cid:202) ró(cid:285)ne kolory w ró(cid:285)nych kontekstach Wielokrotne wykorzystywanie obiektów graficznych ze (cid:283)róde(cid:239) zewn(cid:218)trznych Mo(cid:285)liwo(cid:258)ci ka(cid:285)dej z metod wstawiania grafik SVG na strony internetowe Problemy z przegl(cid:200)darkami Inne mo(cid:285)liwo(cid:258)ci i dziwactwa SVG Animacje SMIL Stylizowanie grafik SVG za pomoc(cid:200) zewn(cid:218)trznych arkuszy stylów Formatowanie grafik SVG za pomoc(cid:200) arkuszy wewn(cid:218)trznych Animowanie grafik SVG za pomoc(cid:200) CSS Animowanie SVG za pomoc(cid:200) JavaScript Prosty przyk(cid:239)ad animacji na bazie biblioteki GreenSock Optymalizacja grafik SVG Filtry SVG Uwaga na temat zapyta(cid:241) medialnych w SVG Porady implementacyjne Dodatkowe (cid:283)ród(cid:239)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 Poleć książkęKup książkę Spis tre(cid:286)ci Rozdzia(cid:239) 8. Przej(cid:258)cia, transformacje i animacje Czym s(cid:200) przej(cid:258)cia CSS3 i jak z nich korzysta(cid:202)? Rodzaje przej(cid:258)(cid:202) Zbiorcza w(cid:239)asno(cid:258)(cid:202) do definiowania przej(cid:258)(cid:202) Przej(cid:258)cia ró(cid:285)nych w(cid:239)asno(cid:258)ci w ró(cid:285)nych przedzia(cid:239)ach czasowych Funkcje czasu Zabawne typy przej(cid:258)(cid:202) dla stron responsywnych Transformacje dwuwymiarowe CSS3 scale translate rotate skew matrix W(cid:239)asno(cid:258)(cid:202) transform-origin Transformacje trójwymiarowe Warto(cid:258)(cid:202) translate3d Animacje w CSS3 W(cid:239)asno(cid:258)(cid:202) animation-fill-mode Podsumowanie Rozdzia(cid:239) 9. Formularze w HTML5 i CSS3 Formularze HTML5 Elementy formularzy HTML5 Atrybut placeholder Atrybut required Atrybut autofocus Atrybut autocomplete Atrybut list (i powi(cid:200)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(cid:239)nienia dla starszych przegl(cid:200)darek Formatowanie formularzy HTML5 za pomoc(cid:200) arkuszy CSS3 Oznaczanie pól wymaganych Wype(cid:239)nianie t(cid:239)a Podsumowanie 8 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 Poleć książkęKup książkę Spis tre(cid:286)ci Rozdzia(cid:239) 10. Ogólne zasady projektowania responsywnych stron internetowych Ogl(cid:200)danie projektu w przegl(cid:200)darce najszybciej jak to mo(cid:285)liwe Warto(cid:258)ci punktów kontrolnych powinny by(cid:202) ustalane w odniesieniu do projektu Ogl(cid:200)daj i testuj projekt w prawdziwych urz(cid:200)dzeniach Na czym dok(cid:239)adnie polega stopniowe ulepszanie strony Wybór funkcji obs(cid:239)ugiwanych przez ró(cid:285)ne przegl(cid:200)darki Równo(cid:258)(cid:202) funkcjonalna, nie estetyczna Wybór obs(cid:239)ugiwanych przegl(cid:200)darek Stopniowanie funkcjonalno(cid:258)ci Implementacja warstw funkcjonalnych (cid:146)(cid:200)czenie punktów kontrolnych CSS i JavaScript Unikaj szkieletów CSS w produkcji Kodowanie pragmatycznych rozwi(cid:200)za(cid:241) Kiedy odno(cid:258)nik staje si(cid:218) przyciskiem Pisz jak najprostszy kod Ukrywanie, pokazywanie i wczytywanie tre(cid:258)ci na ró(cid:285)nych ekranach Warstw(cid:218) wizualn(cid:200) strony definiuj za pomoc(cid:200) CSS Sprawdzanie sk(cid:239)adni Wydajno(cid:258)(cid:202) Co szykuje przysz(cid:239)o(cid:258)(cid:202) Podsumowanie Skorowidz 267 268 268 269 270 271 271 271 272 272 273 275 275 277 278 278 279 280 281 282 283 284 9 Poleć książkęKup książkę Spis tre(cid:286)ci 10 Poleć książkęKup książkę 2 Zapytania medialne: obs(cid:239)uga zró(cid:285)nicowanych obszarów roboczych W poprzednim rozdziale przyjrzeli(cid:258)my si(cid:218) podstawowym sk(cid:239)adnikom responsywnej strony internetowej: p(cid:239)ynnemu uk(cid:239)adowi, p(cid:239)ynnym obrazom i zapytaniom medialnym. Tutaj dok(cid:239)adnie przyjrzymy si(cid:218) zapytaniom medialnym, aby pozna(cid:202) ich wszystkie mo(cid:285)liwo(cid:258)ci oraz elementy sk(cid:239)adni. W tym rozdziale: (cid:81) dowiesz si(cid:218), dlaczego zapytania medialne s(cid:200) potrzebne w RWD; (cid:81) poznasz sk(cid:239)adni(cid:218) zapyta(cid:241) medialnych; (cid:81) nauczysz si(cid:218) definiowa(cid:202) zapytania medialne za pomoc(cid:200) znacznika link , dyrektywy @import oraz w plikach CSS; (cid:81) dowiesz si(cid:218), jakie w(cid:239)a(cid:258)ciwo(cid:258)ci urz(cid:200)dze(cid:241) mo(cid:285)na testowa(cid:202) za pomoc(cid:200) zapyta(cid:241) medialnych; (cid:81) nauczysz si(cid:218) wprowadza(cid:202) wizualne zmiany na stronie za pomoc(cid:200) zapyta(cid:241) medialnych w zale(cid:285)no(cid:258)ci od ilo(cid:258)ci dost(cid:218)pnego miejsca na ekranie; (cid:81) poznasz argumenty przedstawiane w dyskusji, czy zapytania medialne powinno si(cid:218) grupowa(cid:202) w jednym miejscu, czy wpisywa(cid:202) w tych miejscach, w których s(cid:200) potrzebne; Poleć książkęKup książkę Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3 (cid:81) nauczysz si(cid:218) korzysta(cid:202) ze znacznika meta viewport, dzi(cid:218)ki któremu zapytania medialne mog(cid:200) dzia(cid:239)a(cid:202) zgodnie z przeznaczeniem tak(cid:285)e w urz(cid:200)dzeniach z systemami iOS i Android; (cid:81) poznasz kolejne funkcje proponowane do dodania do nast(cid:218)pnych wersji specyfikacji zapyta(cid:241) medialnych. Specyfikacja CSS3 sk(cid:239)ada si(cid:218) z pewnej liczby modu(cid:239)ów. Jednym z nich jest Media Queries (Level 3), czyli zapytania medialne. Za ich pomoc(cid:200) mo(cid:285)na wybiera(cid:202), które zestawy regu(cid:239) CSS maj(cid:200) zosta(cid:202) zastosowane w urz(cid:200)dzeniach o okre(cid:258)lonych mo(cid:285)liwo(cid:258)ciach. Przyk(cid:239)adowo: wystarczy tylko kilka wierszy kodu CSS, aby zmieni(cid:202) sposób wy(cid:258)wietlania strony w odpowiedzi na zmian(cid:218) szeroko(cid:258)ci obszaru roboczego, wspó(cid:239)czynnika proporcji ekranu, orientacji (pionowa lub po- zioma) itd. Zapytania medialne s(cid:200) dobrze obs(cid:239)ugiwane przez przegl(cid:200)darki. Obs(cid:239)uguj(cid:200) je w(cid:239)a(cid:258)ciwie wszystkie aplikacje oprócz przedpotopowych potworów (od IE 8 w dó(cid:239)). Krótko mówi(cid:200)c: nie ma (cid:285)adnego powodu, aby si(cid:218) przed nimi broni(cid:202)! Specyfikacje W3C przechodz(cid:200) przez proces ratyfikacji w konsorcjum W3C (je(cid:258)li masz wolny dzie(cid:241), zapoznaj si(cid:218) z przebiegiem tego procesu przedstawionym na stronie: http://www.w3.org/2005/10/Process-20051014/tr). Mówi(cid:200)c najkrócej: ka(cid:285)da specyfikacja najpierw jest tzw. projektem roboczym (ang. Working Draft — WD), potem przechodzi w faz(cid:218) rekomendacji kandyduj(cid:200)cej (ang. Candidate Recommendation — CR), nast(cid:218)pnie zamienia si(cid:218) w propozycj(cid:218) rekomendacji (ang. Proposed Recommendation — PR), a na koniec, po wielu latach prac, otrzymujemy oficjaln(cid:200) rekomendacj(cid:218) W3C (ang. W3C Recommendation — REC). Wy- nika z tego, (cid:285)e bezpieczniejszymi modu(cid:239)ami s(cid:200) te, które osi(cid:200)gn(cid:218)(cid:239)y wy(cid:285)szy stopie(cid:241) dojrza(cid:239)o(cid:258)ci. Przyk(cid:239)adowo: modu(cid:239) transformacji CSS poziomu 3. (http://www.w3.org/TR/css3-3d-transforms/) osi(cid:200)gn(cid:200)(cid:239) status projektu roboczego w marcu 2009 r., w zwi(cid:200)zku z czym jest on obs(cid:239)ugiwany znacznie gorzej ni(cid:285) modu(cid:239)y b(cid:218)d(cid:200)ce na etapie CR, takie jak zapytania medialne. Dlaczego zapytania medialne s(cid:200) potrzebne do budowy uk(cid:239)adów responsywnych Zapytania medialne CSS3 umo(cid:285)liwiaj(cid:200) tworzenie regu(cid:239) przeznaczonych tylko dla urz(cid:200)dze(cid:241) o okre- (cid:258)lonych mo(cid:285)liwo(cid:258)ciach lub do zastosowania wy(cid:239)(cid:200)cznie w wybranych warunkach. W specyfika- cji W3C zapyta(cid:241) medialnych (http://www.w3.org/TR/css3-mediaqueries/) mo(cid:285)na przeczyta(cid:202) nast(cid:218)puj(cid:200)ce wprowadzenie do tej technologii: „Zapytanie medialne sk(cid:239)ada si(cid:218) z cz(cid:218)(cid:258)ci okre(cid:258)laj(cid:200)cej typ medium i opcjonalnie kilku wyra(cid:285)e(cid:241), które sprawdzaj(cid:200), czy zasz(cid:239)y warunki uruchamiaj(cid:200)ce konkretne regu(cid:239)y. W(cid:258)ród w(cid:239)a(cid:258)ciwo(cid:258)ci urz(cid:200)dze(cid:241), jakie mo(cid:285)na sprawdza(cid:202) za pomoc(cid:200) zapyta(cid:241) medialnych, znajduj(cid:200) si(cid:218): szeroko(cid:258)(cid:202), wysoko(cid:258)(cid:202) i kolor. Przy u(cid:285)yciu zapyta(cid:241) medialnych mo(cid:285)na dostosowa(cid:202) prezentacj(cid:218) do wybranych rodzajów urz(cid:200)dze(cid:241) wyj(cid:258)ciowych bez zmieniania samej tre(cid:258)ci”. 40 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Zapytania medialne: obs(cid:225)uga zró(cid:298)nicowanych obszarów roboczych Bez zapyta(cid:241) medialnych, za pomoc(cid:200) samych arkuszy stylów, nie da(cid:239)oby si(cid:218) radykalnie zmie- nia(cid:202) warstwy wizualnej strony. Dzi(cid:218)ki tym zapytaniom mo(cid:285)emy pisa(cid:202) regu(cid:239)y CSS przygotowuj(cid:200)ce nasz(cid:200) stron(cid:218) na takie ewentualno(cid:258)ci, jak zmiana orientacji ekranu, zmniejszenie lub powi(cid:218)k- szenie obszaru roboczego itd. Cho(cid:202) uk(cid:239)ad p(cid:239)ynny równie(cid:285) sprawia, (cid:285)e projekt prezentuje si(cid:218) lepiej przy ró(cid:285)nych szeroko- (cid:258)ciach ekranu, to je(cid:258)li wzi(cid:200)(cid:202) pod uwag(cid:218) ró(cid:285)norodno(cid:258)(cid:202) urz(cid:200)dze(cid:241), czasami potrzebne s(cid:200) bar- dziej kompleksowe rozwi(cid:200)zania. Ich wdro(cid:285)enie jest mo(cid:285)liwe dzi(cid:218)ki zapytaniom medialnym. Traktuj je jak podstawow(cid:200) logik(cid:218) warunkow(cid:200) CSS. Podstawowa logika warunkowa w CSS Wszystkie prawdziwe j(cid:218)zyki programowania zawieraj(cid:200) konstrukcje pozwalaj(cid:200)ce wybra(cid:202) jedn(cid:200) lub wi(cid:218)cej ga(cid:239)(cid:218)zi kodu do wykonania w zale(cid:285)no(cid:258)ci od pewnych warunków. Najcz(cid:218)(cid:258)ciej maj(cid:200) one posta(cid:202) powszechnie u(cid:285)ywanych instrukcji if-else. Je(cid:258)li kod (cid:283)ród(cid:239)owy j(cid:218)zyków programowania k(cid:239)uje Ci(cid:218) w oczy, nie musisz si(cid:218) przejmowa(cid:202). To, o czym teraz pisz(cid:218), to bardzo prosta koncepcja. Pos(cid:239)ugujesz si(cid:218) ni(cid:200) np., gdy prosisz koleg(cid:218) z pracy, aby zamówi(cid:239) Ci co(cid:258) w kawiarni: „Je(cid:258)li maj(cid:200) babeczki z potrójn(cid:200) czekolad(cid:200), to we(cid:283) mi jedn(cid:200), a je(cid:258)li nie, to we(cid:283) mi kawa(cid:239)ek ciasta marchewkowego”. Jest to prosta instrukcja warun- kowa z dwoma mo(cid:285)liwymi wynikami (i ka(cid:285)dy jest tak samo przyjemny). W czasie, gdy pisz(cid:218) t(cid:218) ksi(cid:200)(cid:285)k(cid:218), w CSS nie ma instrukcji logicznych ani (cid:285)adnych innych kon- strukcji typowych dla prawdziwych j(cid:218)zyków programowania. P(cid:218)tle, funkcje, iteracja i skom- plikowane obliczenia matematyczne nadal nale(cid:285)(cid:200) do (cid:258)wiata procesorów CSS (wspomina(cid:239)em ju(cid:285) o bardzo ciekawej ksi(cid:200)(cid:285)ce o Sass pt. Sass i Compass. Praktyczny przewodnik dla projektantów?). A jednak zapytania medialne s(cid:200) rodzajem mechanizmu umo(cid:285)liwiaj(cid:200)cego wyra(cid:285)anie prostej logiki warunkowej w CSS. Zawarte w nich regu(cid:239)y znajduj(cid:200) zastosowanie tylko wtedy, gdy zostan(cid:200) spe(cid:239)nione okre(cid:258)lone warunki. Funkcje programistyczne w przygotowaniu Popularno(cid:258)(cid:202) preprocesorów CSS nie umkn(cid:218)(cid:239)a uwadze ludzi pracuj(cid:200)cych nad specyfikacjami tej technologii. Trwaj(cid:200) ju(cid:285) prace nad wst(cid:218)pn(cid:200) wersj(cid:200) robocz(cid:200) specyfikacji zmiennych CSS: http://www.w3.org/TR/css-variables/. Niestety, obecnie obs(cid:239)uguje je tylko przegl(cid:200)darka Firefox, wi(cid:218)c na razie zmiennych nie mo(cid:285)na wykorzy- stywa(cid:202) w realnych projektach. Sk(cid:239)adnia zapyta(cid:241) medialnych Jak wygl(cid:200)da zapytanie medialne i — co wa(cid:285)niejsze — jak ono dzia(cid:239)a? Wprowad(cid:283) poni(cid:285)szy kod na samym dole dowolnego pliku CSS i obejrzyj w przegl(cid:200)darce stron(cid:218) internetow(cid:200), do której jest on do(cid:239)(cid:200)czony. Ewentualnie otwórz przyk(cid:239)adowy plik z folderu 02-01: 41 Poleć książkęKup 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(cid:218) internetow(cid:200) w przegl(cid:200)darce i zmie(cid:241) wielko(cid:258)(cid:202) okna. Kolor strony zmieni si(cid:218) w zale(cid:285)no(cid:258)ci od aktualnych wymiarów obszaru roboczego. Bardziej szczegó(cid:239)owy opis sk(cid:239)adni zapy- ta(cid:241) medialnych zamie(cid:258)ci(cid:239)em dalej. Najpierw chcia(cid:239)bym Ci pokaza(cid:202), jak i gdzie mo(cid:285)na ich u(cid:285)ywa(cid:202). Zapytania medialne w znaczniku link Je(cid:285)eli pracowa(cid:239)e(cid:258) ju(cid:285) z arkuszami stylów CSS 2, to wiesz, (cid:285)e mo(cid:285)na w nich zadeklarowa(cid:202) rodzaj urz(cid:200)dzenia (u(cid:285)ywaj(cid:200)c s(cid:239)ów kluczowych screen i print) w atrybucie media znacznika link . Tak(cid:200) deklaracj(cid:218) nale(cid:285)y umie(cid:258)ci(cid:202) wewn(cid:200)trz elementu head ; ma ona nast(cid:218)puj(cid:200)c(cid:200) posta(cid:202): link rel= stylesheet type= text/css media= screen href= screen-styles.css Zapytania medialne pozwalaj(cid:200) na dopasowanie formatowania strony do mo(cid:285)liwo(cid:258)ci i w(cid:239)a(cid:258)ciwo(cid:258)ci urz(cid:200)dzenia, a nie tylko do jego typu. Mo(cid:285)na to potraktowa(cid:202) jak skierowane do przegl(cid:200)darki zapytanie. Je(cid:258)li przegl(cid:200)darka „stwierdzi”, (cid:285)e podane w zapytaniu warunki zosta(cid:239)y spe(cid:239)nione, nada w(cid:239)a(cid:258)ciwe formatowanie. Je(cid:285)eli tak nie b(cid:218)dzie, zastosowane zostanie inne. Zamiast wysy(cid:239)a(cid:202) do przegl(cid:200)darki zapytanie: „Czy jeste(cid:258) ekranem?” — co by(cid:239)o dawniej szczytem mo(cid:285)liwo(cid:258)ci CSS 2 — zapytania medialne pozwalaj(cid:200) nam na wi(cid:218)ksz(cid:200) dociekliwo(cid:258)(cid:202). Za ich pomoc(cid:200) mo(cid:285)emy zapyta(cid:202): „Czy jeste(cid:258) ekranem w orientacji pionowej?”. Rzu(cid:202) okiem na poni(cid:285)szy przyk(cid:239)ad: link rel= stylesheet media= screen and (orientation: portrait) (cid:180)href= portrait-screen.css / 42 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Zapytania medialne: obs(cid:225)uga zró(cid:298)nicowanych obszarów roboczych Najpierw zapytanie medialne prosi o potwierdzenie typu urz(cid:200)dzenia („Czy jeste(cid:258) ekranem?”), a nast(cid:218)pnie w(cid:239)a(cid:258)ciwo(cid:258)ci („Czy twój obraz ma orientacj(cid:218) pionow(cid:200)?”). Arkusz stylów portrait- -screen.css zostanie za(cid:239)adowany dla dowolnego urz(cid:200)dzenia w trybie pionowym i zignorowany w innych. Istnieje mo(cid:285)liwo(cid:258)(cid:202) odwrócenia zapytania poprzez dodanie na pocz(cid:200)tku zapytania medialnego s(cid:239)owa kluczowego not. Ilustruje to ni(cid:285)ej przedstawiona deklaracja, która odwraca dzia(cid:239)anie kodu z poprzedniego przyk(cid:239)adu i powoduje za(cid:239)adowanie pliku, je(cid:258)li tylko dany ekran nie ma orientacji pionowej: link rel= stylesheet media= not screen and (orientation: portrait) (cid:180)href= portrait-screen.css / (cid:146)(cid:200)czenie zapyta(cid:241) medialnych Istnieje równie(cid:285) mo(cid:285)liwo(cid:258)(cid:202) po(cid:239)(cid:200)czenia wielu wyra(cid:285)e(cid:241). Rozszerzmy nasz przyk(cid:239)ad pierwszego zapytania medialnego i ograniczmy stosowanie pliku do urz(cid:200)dze(cid:241), które maj(cid:200) obszar operacyjny wi(cid:218)kszy ni(cid:285) 800 pikseli. link rel= stylesheet media= screen and (orientation: portrait) (cid:180)and (min-width: 800px) href= 800wide-portrait-screen.css / Mo(cid:285)emy te(cid:285) przygotowa(cid:202) ca(cid:239)(cid:200) list(cid:218) zapyta(cid:241) medialnych. Je(cid:258)li dowolne z wypisanych w zapytaniu warunków b(cid:218)d(cid:200) zgodne z prawd(cid:200), plik zostanie za(cid:239)adowany. Je(cid:258)li (cid:285)aden z nich nie zostanie spe(cid:239)niony, regu(cid:239)y nie zostan(cid:200) odczytane: link rel= stylesheet media= screen and (orientation: portrait) and (cid:180)(min-width: 800px), projection href= 800wide-portrait-screen.css / W tym miejscu nale(cid:285)y zwróci(cid:202) uwag(cid:218) na dwa wa(cid:285)ne aspekty: po pierwsze, ka(cid:285)de zapytanie medialne jest oddzielone przecinkiem, po drugie, (cid:239)atwo zauwa(cid:285)y(cid:202), (cid:285)e po s(cid:239)owie kluczowym projection nie wyst(cid:218)puj(cid:200) (cid:285)adne uzupe(cid:239)niaj(cid:200)ce s(cid:239)owa and i nie ma warto(cid:258)ci podanych w nawiasach. Oznacza to, (cid:285)e przy braku zdefiniowanych warto(cid:258)ci dane zapytanie medialne b(cid:218)dzie dotyczy(cid:202) wszystkich typów danego urz(cid:200)dzenia. W naszym przyk(cid:239)adzie formatowanie to b(cid:218)dzie dotyczy(cid:202) wszystkich projektorów. W zapytaniach medialnych mo(cid:285)na u(cid:285)ywa(cid:202) dowolnej jednostki miary CSS. Do najcz(cid:218)(cid:258)ciej stosowanych nale(cid:285)(cid:200) piksele (px), ale równie dobrze mo(cid:285)na si(cid:218) pos(cid:239)ugiwa(cid:202) jednostkami em i rem. Wi(cid:218)cej informacji na ten temat mo(cid:285)na znale(cid:283)(cid:202) w moim artykule dost(cid:218)pnym pod adresem: http://benfrain.com/just-use-pixels. Je(cid:258)li wi(cid:218)c chcesz ustawi(cid:202) punkt kontrolny na 800 pikselach (tylko wyra(cid:285)onych w jednostce em), po pro- stu podziel liczb(cid:218) pikseli przez 16. Na przyk(cid:239)ad 800px jest równe 50em (800/16=50). 43 Poleć książkęKup książkę Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3 Importowanie zapyta(cid:241) medialnych za pomoc(cid:200) dyrektywy @import Mo(cid:285)emy te(cid:285) u(cid:285)y(cid:202) dyrektywy @import, która je(cid:258)li zostan(cid:200) spe(cid:239)nione pewne warunki, wczyta arkusz stylów w innym arkuszu. Nast(cid:218)puj(cid:200)cy kod za(cid:239)adowa(cid:239)by arkusz phone.css, ale tylko je(cid:258)li urz(cid:200)dzenie, w którym strona zosta(cid:239)a otwarta, mia(cid:239)oby obszar roboczy nie szerszy ni(cid:285) 360 pikseli: @import url( phone.css ) screen and (max-width:360px); Pami(cid:218)taj, (cid:285)e u(cid:285)ycie dyrektywy @import oznacza dodatkowe (cid:285)(cid:200)danie HTTP (które wp(cid:239)ywa na szybko(cid:258)(cid:202) wczytywania strony), polegaj wi(cid:218)c na tej metodzie tylko okazyjnie. Zapytania medialne w arkuszach stylów Wiesz ju(cid:285), jak stosowa(cid:202) zapytania medialne w odno(cid:258)nikach do plików CSS umieszczonych w na- g(cid:239)ówku (mi(cid:218)dzy znacznikami head i /head ) dokumentu HTML oraz za pomoc(cid:200) dyrektywy @import. Jednak najcz(cid:218)(cid:258)ciej zapytania medialne wpisuje si(cid:218) bezpo(cid:258)rednio w arkuszach stylów. Gdyby(cid:258)my np. dodali do arkusza stylów poni(cid:285)szy kod, to wszystkie elementy h1 na stronie sta- (cid:239)yby si(cid:218) zielone, ale tylko w urz(cid:200)dzeniach o szeroko(cid:258)ci ekranu nieprzekraczaj(cid:200)cej 400 pikseli. @media screen and (max-device-width: 400px) { h1 { color: green } } Najpierw za pomoc(cid:200) regu(cid:239)y @media informujemy przegl(cid:200)dark(cid:218), (cid:285)e tworzymy zapytanie me- dialne, a nast(cid:218)pnie okre(cid:258)lamy, jakie urz(cid:200)dzenia nas interesuj(cid:200). W tym przyk(cid:239)adzie odnosimy si(cid:218) tylko do ekranów (a wi(cid:218)c np. nie do druku — print). Pó(cid:283)niej w nawiasie podajemy konkretne w(cid:239)a(cid:258)ciwo(cid:258)ci wybranego urz(cid:200)dzenia. Dalej znajduj(cid:200) si(cid:218) ju(cid:285) normalne regu(cid:239)y CSS. W tym miejscu powinienem chyba podkre(cid:258)li(cid:202), (cid:285)e oznaczanie typu mediów jako screen jest opcjonalne. Oto odpowiedni fragment specyfikacji, który o tym mówi: „Je(cid:258)li zapytanie medialne odnosi si(cid:218) do wszystkich rodzajów mediów, to mo(cid:285)na w jego definicji pos(cid:239)u(cid:285)y(cid:202) si(cid:218) sk(cid:239)adni(cid:200) skrócon(cid:200), tzn. mo(cid:285)na opu(cid:258)ci(cid:202) s(cid:239)owo kluczowe all (wraz ze znajduj(cid:200)cym si(cid:218) za nim s(cid:239)owem and). Innymi s(cid:239)owy: je(cid:258)li typ mediów nie zostanie okre(cid:258)lony, to znaczy, (cid:285)e chodzi o wszystkie typy mediów”. Je(cid:285)eli wi(cid:218)c nie piszesz stylów przeznaczonych wy(cid:239)(cid:200)cznie dla konkretnego rodzaju mediów, mo(cid:285)esz opu(cid:258)ci(cid:202) cz(cid:239)on screen and. Robi(cid:218) to we wszystkich nast(cid:218)pnych przyk(cid:239)adach. Co mo(cid:285)na sprawdza(cid:202) za pomoc(cid:200) zapyta(cid:241) medialnych Projektanci stron responsywnych najcz(cid:218)(cid:258)ciej u(cid:285)ywaj(cid:200) zapyta(cid:241) medialnych do sprawdzania szero- ko(cid:258)ci obszaru roboczego (width). Z mojego do(cid:258)wiadczenia wynika, (cid:285)e pozosta(cid:239)e parametry (mo(cid:285)e z wyj(cid:200)tkiem okazjonalnego sprawdzania rozdzielczo(cid:258)ci ekranu i wysoko(cid:258)ci obszaru robo- 44 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Zapytania medialne: obs(cid:225)uga zró(cid:298)nicowanych obszarów roboczych czego) nie s(cid:200) zbyt u(cid:285)yteczne. Na wszelki wypadek jednak zamieszczam pe(cid:239)n(cid:200) list(cid:218) parame- trów, które mo(cid:285)na sprawdza(cid:202) za pomoc(cid:200) zapyta(cid:241) medialnych poziomu 3. Cz(cid:218)(cid:258)(cid:202) z nich mo(cid:285)e Ci si(cid:218) przyda(cid:202): (cid:81) width — szeroko(cid:258)(cid:202) obszaru roboczego. (cid:81) height — wysoko(cid:258)(cid:202) obszaru roboczego. (cid:81) device-width — szeroko(cid:258)(cid:202) powierzchni wy(cid:258)wietlania (b(cid:218)dziemy j(cid:200) traktowa(cid:202) jako szeroko(cid:258)(cid:202) urz(cid:200)dzenia). (cid:81) device-height — wysoko(cid:258)(cid:202) powierzchni wy(cid:258)wietlania (b(cid:218)dziemy j(cid:200) traktowa(cid:202) jako wysoko(cid:258)(cid:202) urz(cid:200)dzenia). (cid:81) orientation — ta w(cid:239)asno(cid:258)(cid:202) s(cid:239)u(cid:285)y do sprawdzenia, czy urz(cid:200)dzenie jest ustawione poziomo, czy pionowo. (cid:81) aspect-ratio — stosunek szeroko(cid:258)ci obszaru roboczego do jego wysoko(cid:258)ci. Stosunek 16:9 mo(cid:285)na zapisa(cid:202) jako aspect-ratio: 16/9. (cid:81) device-aspect-ratio — parametr podobny do aspect-ratio, tylko odnosz(cid:200)cy si(cid:218) do szeroko(cid:258)ci i wysoko(cid:258)ci powierzchni wy(cid:258)wietlania urz(cid:200)dzenia, a nie do obszaru roboczego. (cid:81) color — liczba bitów przypadaj(cid:200)ca na ka(cid:285)dy sk(cid:239)adnik koloru. Przyk(cid:239)adowa w(cid:239)asno(cid:258)(cid:202) min-color:16 sprawdza, czy urz(cid:200)dzenie wy(cid:258)wietla 16-bitowe kolory. (cid:81) color-index — liczba wpisów w tabeli przegl(cid:200)du kolorów urz(cid:200)dzenia. Warto(cid:258)ci musz(cid:200) by(cid:202) liczbami i nie mog(cid:200) by(cid:202) ujemne. (cid:81) monochrome — parametr s(cid:239)u(cid:285)(cid:200)cy do sprawdzania, ile bitów przypada na piksel w monochromatycznym buforze klatek. Warto(cid:258)ci(cid:200) jest liczba ca(cid:239)kowita, np. 2 — ta liczba nie mo(cid:285)e by(cid:202) ujemna. (cid:81) resolution — ta opcja s(cid:239)u(cid:285)y do sprawdzania rozdzielczo(cid:258)ci ekranu lub wydruku, np. deklaracja min-resolution: 300dpi. W(cid:239)asno(cid:258)(cid:202) ta przyjmuje te(cid:285) warto(cid:258)ci wyra(cid:285)one w liczbie plamek na centymetr (ang. dots per centimeter), np. deklaracja min-resolution: 118dpcm. (cid:81) scan — ten parametr odnosi si(cid:218) g(cid:239)ównie do telewizorów i s(cid:239)u(cid:285)y do sprawdzania, czy stosowane jest skanowanie progresywne, czy przeplatane. Przyk(cid:239)adowo: do telewizora 720p HD (litera p w 720p oznacza wy(cid:258)wietlanie „progresywne”) mo(cid:285)na si(cid:218) odwo(cid:239)a(cid:202) za pomoc(cid:200) deklaracji scan: progressive, podczas gdy do telewizora 1080i HD (litera i w 1080i oznacza wy(cid:258)wietlanie z przeplotem) mo(cid:285)na si(cid:218) odnie(cid:258)(cid:202) deklaracj(cid:200) scan: interlace. (cid:81) grid — ta w(cid:239)asno(cid:258)(cid:202) pomaga ustali(cid:202), czy urz(cid:200)dzenie dzia(cid:239)a na podstawie siatki punktów, czy bitmapy. Wszystkie te opcje, z wyj(cid:200)tkiem scan i grid, mo(cid:285)na poprzedzi(cid:202) przedrostkami min i max, aby stwo- rzy(cid:202) deklaracje zakresów. W ramach przyk(cid:239)adu rozwa(cid:285)my nast(cid:218)puj(cid:200)cy fragment kodu: @import url( tiny.css ) screen and (min-width:200px) and (max-width:360px); 45 Poleć książkęKup książkę Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3 Jak wida(cid:202), przedrostki minimum (min) i maksimum (max) zosta(cid:239)y u(cid:285)yte z w(cid:239)asno(cid:258)ci(cid:200) width, tym samym zosta(cid:239) zdefiniowany zakres. Plik tiny.css zostanie odczytany tylko w przypadku urz(cid:200)dze(cid:241) wyposa(cid:285)onych w ekrany z obszarem roboczym nie w(cid:218)(cid:285)szym ni(cid:285) 200 pikseli i nie szerszym ni(cid:285) 360 pikseli. Elementy wycofywane w Media Queries CSS poziomu 4. Warto wiedzie(cid:202), (cid:285)e w szkicu specyfikacji Media Queries poziomu 4. kilka w(cid:239)asno(cid:258)ci oznaczono do usuni(cid:218)cia (http://dev.w3.org/csswg/mediaqueries-4/#mf-deprecated). Najwa(cid:285)niejsze z nich to: device-height, device-width oraz device-aspect-ratio. Przegl(cid:200)darki nadal b(cid:218)d(cid:200) je obs(cid:239)ugiwa(cid:202), ale zaleca si(cid:218) nie u(cid:285)ywa(cid:202) ich ju(cid:285) w nowych arkuszach stylów. Modyfikowanie projektu strony za pomoc(cid:200) zapyta(cid:241) medialnych Arkusze stylów zosta(cid:239)y zaprojektowane tak, aby style zadeklarowane ni(cid:285)ej zast(cid:218)powa(cid:239)y style zdefiniowane wy(cid:285)ej (chyba (cid:285)e te znajduj(cid:200)ce si(cid:218) wy(cid:285)ej dotycz(cid:200) bardziej konkretnych frag- mentów strony). Mo(cid:285)emy bez trudu ustanowi(cid:202) na samym pocz(cid:200)tku arkusza podstawowe style, które b(cid:218)d(cid:200) dotyczy(cid:202) wszystkich wersji naszego projektu, a nast(cid:218)pnie nadpisa(cid:202) interesuj(cid:200)ce nas fragmenty za pomoc(cid:200) zapyta(cid:241) medialnych umieszczonych w dolnej cz(cid:218)(cid:258)ci dokumentu. Przyk(cid:239)a- dowo: najpierw mo(cid:285)emy zdefiniowa(cid:202) odno(cid:258)niki czysto tekstowe (albo o zmniejszonym rozmiarze pisma) w nawigacji przeznaczonej dla urz(cid:200)dze(cid:241) o w(cid:200)skim obszarze roboczym, a nast(cid:218)pnie nadpi- sa(cid:202) te regu(cid:239)y zapytaniem medialnym, które powi(cid:218)kszy elementy nawigacji i doda do nich ikony w urz(cid:200)dzeniach o wi(cid:218)kszym ekranie. Zobaczmy, jak to mo(cid:285)e wygl(cid:200)da(cid:202) w praktyce (przyk(cid:239)ad 02-02). Najpierw spójrz na kod HTML: a href= # class= CardLink CardLink_Hearts Kier /a a href= # class= CardLink CardLink_Clubs Trefl /a a href= # class= CardLink CardLink_Spades Pik /a a href= # class= CardLink CardLink_Diamonds Karo /a Teraz przyjrzyj si(cid:218) regu(cid:239)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 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Zapytania medialne: obs(cid:225)uga zró(cid:298)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: (cid:31) ; } .CardLink_Clubs:before { content: (cid:31) ; } .CardLink_Spades:before { content: (cid:31) ; } .CardLink_Diamonds:before { content: (cid:31) ; } @media (min-width: 300px) { .CardLink:before { display: block; } } Pobieranie przyk(cid:239)adów kodu Wszystkie pliki z przyk(cid:239)adami kodu (cid:283)ród(cid:239)owego mo(cid:285)na pobra(cid:202) z serwera FTP wydawnictwa Helion pod adresem: ftp://ftp.helion.pl/przyklady/trash2.zip. Tak te odno(cid:258)niki b(cid:218)d(cid:200) wygl(cid:200)da(cid:202) w urz(cid:200)dzeniu o niewielkiej szeroko(cid:258)ci (patrz rysunek na na- st(cid:218)pnej stronie). 47 Poleć książkęKup książkę Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3 A taki wygl(cid:200)d przybior(cid:200) w szerszych urz(cid:200)dzeniach: W zapytaniu medialnym mo(cid:285)na wpisa(cid:202) ka(cid:285)d(cid:200) regu(cid:239)(cid:218) CSS Nale(cid:285)y pami(cid:218)ta(cid:202), (cid:285)e w zapytaniu medialnym mo(cid:285)na wpisa(cid:202) wszystko, co wpisa(cid:239)oby si(cid:218) w zwyk(cid:239)ym arkuszu stylów. Dzi(cid:218)ki temu mo(cid:285)liwe jest ca(cid:239)kowite zmienienie uk(cid:239)adu i wygl(cid:200)du strony w zale(cid:285)- no(cid:258)ci od warunków jej wy(cid:258)wietlania (np. zmiennych rozmiarów obszaru roboczego). Zapytania medialne dla urz(cid:200)dze(cid:241) o du(cid:285)ej g(cid:218)sto(cid:258)ci pikseli Zapyta(cid:241) medialnych cz(cid:218)sto u(cid:285)ywa si(cid:218) te(cid:285) do zmieniania stylów w przypadkach, gdy strona jest ogl(cid:200)dana w urz(cid:200)dzeniach o bardzo wysokiej rozdzielczo(cid:258)ci. Spójrz na poni(cid:285)szy kod: @media (min-resolution: 2dppx) { /* Style. */ } To zapytanie stanowi, (cid:285)e zawarte w nim regu(cid:239)y maj(cid:200) zosta(cid:202) zastosowane tylko w urz(cid:200)dzeniach o rozdzielczo(cid:258)ci ekranu wynosz(cid:200)cej 2 plamki na piksel (2dppx). Dotyczy to iPhone’a 4 (urz(cid:200)dzenia firmy Apple z ekranami o du(cid:285)ej g(cid:218)sto(cid:258)ci pikseli nazywaj(cid:200) si(cid:218) Retina) i wielu urz(cid:200)dze(cid:241) z sys- temem Android. W razie potrzeby mo(cid:285)na zmniejszy(cid:202) warto(cid:258)(cid:202) dppx, aby zapytanie odnosi(cid:239)o si(cid:218) do wi(cid:218)kszej liczby urz(cid:200)dze(cid:241). 48 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Zapytania medialne: obs(cid:225)uga zró(cid:298)nicowanych obszarów roboczych Je(cid:258)li przy definiowaniu zapytania z minimaln(cid:200) rozdzielczo(cid:258)ci(cid:200) zale(cid:285)y Ci na obs(cid:239)udze jak najwi(cid:218)kszej liczby urz(cid:200)dze(cid:241), dodaj przedrostki producentów za pomoc(cid:200) jakiego(cid:258) s(cid:239)u(cid:285)(cid:200)cego do tego narz(cid:218)dzia. Nie przejmuj si(cid:218), je(cid:258)li nie wiesz, co to s(cid:200) przedrostki producentów, poniewa(cid:285) wkrótce wszystko wyja(cid:258)ni(cid:218). Metody organizacji i pisania zapyta(cid:241) medialnych Na chwil(cid:218) zmienimy temat i przyjrzymy si(cid:218) innym metodom pisania i organizacji zapyta(cid:241) medialnych w arkuszach stylów. Ka(cid:285)da z nich ma pewne zalety i wady. Warto o nich wiedzie(cid:202), nawet je(cid:258)li teraz wydaje Ci si(cid:218), (cid:285)e nie s(cid:200) potrzebne w Twoich projektach. Do(cid:239)(cid:200)czanie ró(cid:285)nych plików CSS za pomoc(cid:200) zapyta(cid:241) medialnych Dla przegl(cid:200)darki internetowej arkusze stylów s(cid:200) zasobami „blokuj(cid:200)cymi renderowanie strony”. Przegl(cid:200)darka musi je pobra(cid:202) z serwera i przeanalizowa(cid:202), aby móc wy(cid:258)wietli(cid:202) stron(cid:218) na ekranie. Nowoczesne przegl(cid:200)darki internetowe s(cid:200) przynajmniej wystarczaj(cid:200)co „bystre”, (cid:285)e rozró(cid:285)niaj(cid:200), któ- re style (do(cid:239)(cid:200)czone w nag(cid:239)ówku przy u(cid:285)yciu zapyta(cid:241) medialnych) trzeba przetworzy(cid:202) natychmiast, a które mo(cid:285)na od(cid:239)o(cid:285)y(cid:202) na pó(cid:283)niej, gdy zostanie zako(cid:241)czona wst(cid:218)pna faza renderowania. Przegl(cid:200)darki mog(cid:200) od(cid:239)o(cid:285)y(cid:202) na pó(cid:283)niej wczytywanie stylów do(cid:239)(cid:200)czonych do strony przy u(cid:285)yciu niemaj(cid:200)cych zastosowania zapyta(cid:241) medialnych (np. je(cid:258)li ekran jest zbyt ma(cid:239)y, by dane zapytanie zosta(cid:239)o zastosowane) i wróci(cid:202) do nich po zako(cid:241)czeniu wst(cid:218)pnego wczytywania strony. W ten sposób zyskuje si(cid:218) nieco na wydajno(cid:258)ci. Wi(cid:218)cej informacji na ten temat mo(cid:285)na znale(cid:283)(cid:202) w portalu dla programistów Google na stronie: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render- blocking-css. Chcia(cid:239)bym jednak zwróci(cid:202) Twoj(cid:200) uwag(cid:218) na nast(cid:218)puj(cid:200)cy fragment tekstu: „Pami(cid:218)taj, (cid:285)e poj(cid:218)cie zasób blokuj(cid:200)cy renderowanie odnosi si(cid:218) tylko do faktu, (cid:285)e przegl(cid:200)darka wstrzymuje pierwsze renderowanie strony z powodu tego zasobu. Niezale(cid:285)nie od tego, czy nast(cid:218)puje czy nie, przegl(cid:200)darka zawsze pobiera zasób CSS, chocia(cid:285) w przypadku zasobów nieblokuj(cid:200)cych z ni(cid:285)szym priorytetem”. Powtórzmy zatem: wszystkie do(cid:239)(cid:200)czone do strony pliki zostan(cid:200) pobrane, ale przegl(cid:200)darka nie musi wstrzymywa(cid:202) renderowania, je(cid:258)li niektóre z nich nie s(cid:200) natychmiast potrzebne. 49 Poleć książkęKup książkę Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3 Zatem nowoczesna przegl(cid:200)darka wczytuj(cid:200)ca responsywn(cid:200) stron(cid:218) internetow(cid:200) (zobacz przy- k(cid:239)ad z folderu 02-03) z czterema arkuszami stylów do(cid:239)(cid:200)czonymi przy u(cid:285)yciu czterech ró(cid:285)nych zapyta(cid:241) medialnych (zawieraj(cid:200)cymi ró(cid:285)ne style dla poszczególnych przedzia(cid:239)ów rozmiarowych urz(cid:200)dze(cid:241)) pobierze wszystkie te pliki, ale najprawdopodobniej najpierw przetworzy ten, który jest natychmiast potrzebny do renderowania strony. Zasadno(cid:258)(cid:202) dzielenia zapyta(cid:241) medialnych na wiele plików Cho(cid:202), jak ju(cid:285) wiesz, dzielenie zapyta(cid:241) medialnych ma pewne zalety, nie zawsze korzy(cid:258)ci te s(cid:200) warte zachodu (oczywi(cid:258)cie nie licz(cid:200)c preferencji projektanta w zakresie dzielenia kodu na osobne pliki). Tak czy inaczej, ka(cid:285)dy dodatkowy plik oznacza konieczno(cid:258)(cid:202) wys(cid:239)ania do serwera jednego (cid:285)(cid:200)- dania HTTP wi(cid:218)cej, co w niektórych sytuacjach spowalnia proces (cid:239)adowania strony. W inter- necie nic nigdy nie jest (cid:239)atwe! Dlatego zanim zdecydujesz si(cid:218) na zastosowanie tej metody, zawsze dok(cid:239)adnie wszystko przemy(cid:258)l i przetestuj wydajno(cid:258)(cid:202) swojej strony w ró(cid:285)nych urz(cid:200)- dzeniach. Sam post(cid:218)puj(cid:218) w ten sposób, (cid:285)e je(cid:258)li nie mam nadmiaru czasu do wykorzystania, jest to ostat- nia technika, za pomoc(cid:200) której próbuj(cid:218) przyspieszy(cid:202) dzia(cid:239)anie swoich stron. Najpierw wyko- nuj(cid:218) nast(cid:218)puj(cid:200)ce czynno(cid:258)ci: (cid:239)(cid:200)cz(cid:218) i minimalizuj(cid:218) wszystkie skrypty; (cid:81) kompresuj(cid:218) wszystkie obrazy; (cid:81) (cid:81) kompresuj(cid:218) algorytmem gzip wszystkie serwowane zasoby; (cid:81) buforuj(cid:218) statyczn(cid:200) tre(cid:258)(cid:202) w sieciach CDN; (cid:81) usuwam wszystkie niepotrzebne regu(cid:239)y CSS. Dopiero potem mog(cid:218) rozwa(cid:285)y(cid:202) mo(cid:285)liwo(cid:258)(cid:202) wydzielenia zapyta(cid:241) medialnych do osobnych pli- ków w celu zyskania na wydajno(cid:258)ci. Algorytm gzip s(cid:239)u(cid:285)y do kompresowania i dekompresowania plików. Ka(cid:285)dy szanuj(cid:200)cy si(cid:218) serwer powinien umo(cid:285)liwia(cid:202) kompresowanie za jego pomoc(cid:200) plików CSS, dzi(cid:218)ki czemu z serwera do przegl(cid:200)darki (w której na- st(cid:218)puje dekompresja) przesy(cid:239)ane s(cid:200) mniejsze ilo(cid:258)ci danych. Dobre wprowadzenie do gzip mo(cid:285)na znale(cid:283)(cid:202) w Wikipedii: https://pl.wikipedia.org/wiki/Gzip. (cid:165)ródliniowe zagnie(cid:285)d(cid:285)anie zapyta(cid:241) medialnych Prawie zawsze, nie licz(cid:200)c pewnych ekstremalnych przypadków, zalecam wstawianie zapyta(cid:241) medialnych do istniej(cid:200)cych arkuszy stylów, obok „normalnych” regu(cid:239). 50 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Zapytania medialne: obs(cid:225)uga zró(cid:298)nicowanych obszarów roboczych Je(cid:258)li Tobie równie(cid:285) to odpowiada, musisz rozwa(cid:285)y(cid:202) jeszcze jedn(cid:200) kwesti(cid:218): czy zapytania me- dialne powinno si(cid:218) definiowa(cid:202) bezpo(cid:258)rednio pod zwi(cid:200)zanymi z nimi selektorami, czy w ca(cid:239)kiem osobnych blokach na ko(cid:241)cu pliku? Ciesz(cid:218) si(cid:218), (cid:285)e pytasz. (cid:146)(cid:200)czy(cid:202) zapytania medialne w bloki czy rozprasza(cid:202) je w ró(cid:285)nych miejscach pliku Jestem zwolennikiem pisania zapyta(cid:241) medialnych bezpo(cid:258)rednio pod „normalnymi” regu(cid:239)ami. Powiedzmy np., (cid:285)e chcemy modyfikowa(cid:202) szeroko(cid:258)(cid:202) kilku elementów w kilku miejscach arkusza stylów w zale(cid:285)no(cid:258)ci od szeroko(cid:258)ci obszaru roboczego. Ja zastosowa(cid:239)bym takie rozwi(cid:200)zanie: .thing { width: 50 ; } @media screen and (min-width: 30rem) { .thing { width: 75 ; } } /* Kilka innych regu(cid:225). */ .thing2 { width: 65 ; } @media screen and (min-width: 30rem) { .thing2 { width: 75 ; } } Na pierwszy rzut oka ten kod wygl(cid:200)da makabrycznie. S(cid:200) w nim dwa zapytania medialne od- nosz(cid:200)ce si(cid:218) do minimalnej szeroko(cid:258)ci ekranu 30rem. Przecie(cid:285) takie wielokrotne powtarzanie deklaracji @media to czyste marnotrawstwo. Czy nie powinienem wi(cid:218)c zach(cid:218)ca(cid:202) do grupowania zapyta(cid:241) medialnych w pojedyncze bloki, jak poni(cid:285)ej? .thing { width: 50 ; } .thing2 { width: 65 ; } 51 Poleć książkęKup 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(cid:200)tpliwie tak te(cid:285) mo(cid:285)na, ale wed(cid:239)ug mnie taka organizacja kodu utrudnia jego modyfiko- wanie i poprawianie. Oczywi(cid:258)cie nie ma jedynego poprawnego sposobu zapisywania zapyta(cid:241) medialnych, ale ja preferuj(cid:218) wstawianie ich bezpo(cid:258)rednio pod regu(cid:239)ami, których dotycz(cid:200), dzi(cid:218)ki czemu wszystkie warianty danej regu(cid:239)y znajduj(cid:200) si(cid:218) w jednym miejscu. Gdy zechc(cid:218) znale(cid:283)(cid:202) deklaracj(cid:218) odpowiadaj(cid:200)c(cid:200) wybranej regule, nie musz(cid:218) potem przeszukiwa(cid:202) ca(cid:239)ego arkusza stylów. Procesory CSS maj(cid:200) jeszcze wygodniejsze funkcje, poniewa(cid:285) pozwalaj(cid:200) na zagnie(cid:285)d(cid:285)anie zapyta(cid:241) medialnych w regu(cid:239)ach. W ksi(cid:200)(cid:285)ce Sass i Compass. Praktyczny przewodnik dla projektantów po(cid:258)wi(cid:218)ci(cid:239)em temu te- matowi ca(cid:239)y rozdzia(cid:239). Jednym z logicznych argumentów przeciw preferowanej przeze mnie metodzie jest kwestia obj(cid:218)to(cid:258)ci kodu. Ale czy na pewno sam rozmiar pliku jest wa(cid:285)ny do tego stopnia, by zniech(cid:218)ci(cid:202) nas do organizowania arkuszy stylów w taki sposób? Wiadomo, (cid:285)e nikt nie chce wysy(cid:239)a(cid:202) swoim u(cid:285)ytkownikom rozd(cid:218)tych do gigantycznych rozmiarów plików. Z drugiej strony, kompresja gzip (kompresowane powinny by(cid:202) wszystkie zasoby, jakie da si(cid:218) skompresowa(cid:202)) sprawia, (cid:285)e wzrost rozmiaru pliku CSS staje si(cid:218) nieistotny. Sprawdzi(cid:239)em to na wiele sposobów, wi(cid:218)c je(cid:258)li ten temat szczególnie Ci(cid:218) interesuje, mo(cid:285)esz przeczyta(cid:202) mój artyku(cid:239): http://benfrain.com/inline-or- -combined-media-queries-in-sass-fight/. Ogólnie chodzi w nim o to, (cid:285)e moim zdaniem kwestia rozmiaru pliku w dyskusji o tym, jak(cid:200) metod(cid:218) definiowania zapyta(cid:241) medialnych stosowa(cid:202), jest nieistotna. Je(cid:258)li chcesz wpisywa(cid:202) zapytania medialne bezpo(cid:258)rednio pod regu(cid:239)ami, których dotycz(cid:200), i jednocze(cid:258)nie wszystkie regu(cid:239)y zwi(cid:200)zane z danym zapytaniem mie(cid:202) w jednym bloku, to mo(cid:285)esz skorzysta(cid:202) z narz(cid:218)dzi kompilacyjnych (w tej chwili Grunt i Gulp maj(cid:200) odpowiednie wtyczki). Znacznik meta viewport Je(cid:258)li chcesz maksymalnie wykorzysta(cid:202) mo(cid:285)liwo(cid:258)ci zapyta(cid:241) medialnych, musisz sprawi(cid:202), aby urz(cid:200)dzenia z mniejszymi ekranami wy(cid:258)wietla(cid:239)y strony w odpowiednich dla siebie wymiarach (a nie np. prezentowa(cid:239)y strony o szeroko(cid:258)ci 980 pikseli, które trzeba by by(cid:239)o powi(cid:218)ksza(cid:202) i po- mniejsza(cid:202)). 52 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Zapytania medialne: obs(cid:225)uga zró(cid:298)nicowanych obszarów roboczych Kiedy w 2007 r. firma Apple wyprodukowa(cid:239)a iPhone’a, wprowadzi(cid:239)a wraz z nim w(cid:239)asny znacznik meta viewport, który jest ju(cid:285) obs(cid:239)ugiwany przez system Android i wiele innych platform. Znacznik ten s(cid:239)u(cid:285)y do sygnalizowania przegl(cid:200)darkom urz(cid:200)dze(cid:241) przeno(cid:258)nych przez strony in- ternetowe, w jaki sposób nale(cid:285)y je renderowa(cid:202). W przysz(cid:239)o(cid:258)ci ka(cid:285)da responsywna strona, która ma dobrze prezentowa(cid:202) si(cid:218) tak(cid:285)e na ma(cid:239)ych ekranach, b(cid:218)dzie musia(cid:239)a mie(cid:202) zdefiniowany ten znacznik. Testowanie projektów responsywnych w emulatorach Cho(cid:202) nic nie zast(cid:200)pi testów witryn na w(cid:239)a(cid:258)ciwych urz(cid:200)dzeniach, warto skorzysta(cid:202) z emulatorów dla sys- temów Android i iOS. Gwoli (cid:258)cis(cid:239)o(cid:258)ci: symulator tylko symuluje dane urz(cid:200)dzenie, podczas gdy emulator naprawd(cid:218) próbuje interpre- towa(cid:202) pierwotny kod urz(cid:200)dzenia. Emulator Androida dla systemów Windows, Linux i Mac jest darmowy — wystarczy (cid:258)ci(cid:200)gn(cid:200)(cid:202) i zainstalowa(cid:202) zestaw narz(cid:218)dzi Android Software Development Kit (SDK) z witryny: http://developer.android.com/sdk/. Symulator iOS dost(cid:218)pny jest tylko dla u(cid:285)ytkowników systemu Mac OS X — jest cz(cid:218)(cid:258)ci(cid:200) pakietu Xcode (dost(cid:218)pnego za darmo w Mac App Store). Tak(cid:285)e same przegl(cid:200)darki internetowe zawieraj(cid:200) coraz to lepsze emulatory ró(cid:285)nych urz(cid:200)dze(cid:241). Zarówno Firefox, jak i Chrome posiadaj(cid:200) specjalne ustawienia pozwalaj(cid:200)ce emulowa(cid:202) wiele ró(cid:285)nych urz(cid:200)dze(cid:241) przeno(cid:258)nych i obszarów roboczych. Znacznik meta viewport wstawia si(cid:218) w elemencie head dokumentu HTML. Mo(cid:285)na go ustawi(cid:202) na konkretn(cid:200) szeroko(cid:258)(cid:202) (wyra(cid:285)on(cid:200) np. w pikselach) lub na wspó(cid:239)czynnik skalowania, np. 2.0 (dwukrotno(cid:258)(cid:202) rzeczywistego rozmiaru). Poni(cid:285)ej znajduje si(cid:218) przyk(cid:239)adowa definicja z ustawion(cid:200) skal(cid:200) na 200 (2.0): meta name= viewport content= initial-scale=2.0,width=device-width / Przeanalizujmy sk(cid:239)adni(cid:218) tego znacznika, aby dok(cid:239)adnie zrozumie(cid:202) zasad(cid:218) jego dzia(cid:239)ania. (cid:146)atwo roz- szyfrowa(cid:202) znaczenie atrybutu name= viewport . Atrybut content= initial-scale=2.0 powoduje dwukrotne powi(cid:218)kszenie tre(cid:258)ci na stronie (warto(cid:258)(cid:202) 0.5 spowodowa(cid:239)aby dwukrotne zmniej- szenie, a 3.0 trzykrotne zwi(cid:218)kszenie itd.). Natomiast fragment width=device-width mówi przegl(cid:200)darce, (cid:285)e szeroko(cid:258)(cid:202) strony powinna by(cid:202) równa szeroko(cid:258)ci urz(cid:200)dzenia. Za pomoc(cid:200) znacznika meta mo(cid:285)na te(cid:285) kontrolowa(cid:202) maksymalny stopie(cid:241) powi(cid:218)kszania i zmniej- szania strony przez u(cid:285)ytkownika. Poni(cid:285)szy prosty przyk(cid:239)ad umo(cid:285)liwia u(cid:285)ytkownikom powi(cid:218)k- szenie obrazu na szeroko(cid:258)(cid:202) trzykrotnie wi(cid:218)ksz(cid:200) ni(cid:285) szeroko(cid:258)(cid:202) ekranu i zmniejszenie go na szeroko(cid:258)(cid:202) dwukrotnie mniejsz(cid:200) od szeroko(cid:258)ci ekranu. meta name= viewport content= width=device-width, maximum-scale=3, minimum-scale=0.5 / Istnieje te(cid:285) mo(cid:285)liwo(cid:258)(cid:202) wy(cid:239)(cid:200)czenia funkcji zmniejszania i powi(cid:218)kszania (cho(cid:202) trzeba pami(cid:218)ta(cid:202), (cid:285)e jest ona bardzo wa(cid:285)nym mechanizmem dost(cid:218)pno(cid:258)ci i dlatego w praktyce rzadko kiedy za- leca si(cid:218) ten krok): meta name= viewport content= initial-scale=1.0, user-scalable=no / 53 Poleć książkęKup książkę Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3 Tutaj najwa(cid:285)niejszy jest fragment user scalable=no. Zmienimy warto(cid:258)(cid:202) wspó(cid:239)czynnika skalowania na 1.0, dzi(cid:218)ki czemu przegl(cid:200)darka dopasuje wiel- ko(cid:258)(cid:202) strony do 100 wielko(cid:258)ci obszaru roboczego. Ustawienie tego parametru na szeroko(cid:258)(cid:202) urz(cid:200)dzenia sprawia, (cid:285)e strona b(cid:218)dzie renderowana na ca(cid:239)ej szeroko(cid:258)ci obs(cid:239)uguj(cid:200)cych te usta- wienia przegl(cid:200)darek. W wi(cid:218)kszo(cid:258)ci przypadków definicja tego znacznika powinna wygl(cid:200)da(cid:202) nast(cid:218)puj(cid:200)co: meta name= viewport content= width=device-width,initial-scale=1.0 / Konsorcjum W3C zauwa(cid:285)y(cid:239)o, (cid:285)e znacznik meta viewport jest w coraz powszechniejszym u(cid:285)yciu, wi(cid:218)c stara si(cid:218) przenie(cid:258)(cid:202) jego funkcjonalno(cid:258)(cid:202) do CSS. Na stronie: http://dev.w3.org/csswg/css-device-adapt/ znajdziesz informacje o deklaracji @viewport. Chodzi o to, by zamiast wprowadza(cid:202) oddzielny znacznik meta w sekcji head witryny, mo(cid:285)na by(cid:239)o deklarowa(cid:202) wyra(cid:285)enia typu @viewport { width: 320px; } w arkuszu stylów. Deklaracja ta ustawi(cid:239)aby szeroko(cid:258)(cid:202) przegl(cid:200)darki na 320 pikseli. Niestety, przegl(cid:200)- darki internetowe s(cid:239)abo obs(cid:239)uguj(cid:200) t(cid:218) technik(cid:218), wi(cid:218)c dla pewno(cid:258)ci mo(cid:285)na si(cid:218) pos(cid:239)ugiwa(cid:202) kombinacj(cid:200) znacznika meta i deklaracji @viewport. My(cid:258)l(cid:218), (cid:285)e ju(cid:285) do(cid:258)(cid:202) dobrze orientujesz si(cid:218), do czego s(cid:239)u(cid:285)(cid:200) i jak dzia(cid:239)aj(cid:200) zapytania medialne. Zanim przejdziemy do ca(cid:239)kiem nowego tematu, chcia(cid:239)bym jeszcze zrobi(cid:202) przegl(cid:200)d tego, co szykuje nam przysz(cid:239)o(cid:258)(cid:202) w nast(cid:218)pnej wersji specyfikacji. Zobaczmy! Zapytania medialne — poziom 4. W czasie, gdy pisz(cid:218) t(cid:218) ksi(cid:200)(cid:285)k(cid:218), specyfikacja CSS Media Queries Level 4 jest na etapie szkicu (http://dev.w3.org/csswg/mediaqueries-4/) i opisane w niej nowo(cid:258)ci nie s(cid:200) zaimplementowane w wielu przegl(cid:200)darkach. Dlatego te(cid:285), cho(cid:202) poni(cid:285)ej robi(cid:218) przegl(cid:200)d najwa(cid:285)niejszych elementów tej specyfikacji, nale(cid:285)y pami(cid:218)ta(cid:202), (cid:285)e wiele jeszcze mo(cid:285)e si(cid:218) zmieni(cid:202). Zawsze upewnij si(cid:218), czy to, czego chcesz u(cid:285)y(cid:202), jest ju(cid:285) obs(cid:239)ugiwane, i sprawd(cid:283), czy nie nast(cid:200)pi(cid:239)y jakie(cid:258) zmiany w sk(cid:239)adni. Omawiana specyfikacja zawiera wiele nowo(cid:258)ci, ale ja skupiam si(cid:218) tylko na sk(cid:239)adnikach doty- cz(cid:200)cych skryptów, urz(cid:200)dze(cid:241) wskazuj(cid:200)cych, kwestii wskazywania elementów kursorem oraz (cid:258)wiat(cid:239)a otoczenia. Obs(cid:239)uga skryptów W dokumentach HTML cz(cid:218)sto stosuje si(cid:218) technik(cid:218) polegaj(cid:200)c(cid:200) na domy(cid:258)lnym przypisaniu elementu do klasy oznaczaj(cid:200)cej, (cid:285)e nie ma (cid:285)adnego skryptu JavaScript, a nast(cid:218)pnie zmianie tej klasy na inn(cid:200), gdy zostanie uruchomiony skrypt. Jest to prosty sposób na rozga(cid:239)(cid:218)zienie ko- du (wliczaj(cid:200)c CSS) na podstawie tej nowej klasy HTML. Technika ta s(cid:239)u(cid:285)y przede wszystkich do pisania regu(cid:239) przeznaczonych dla u(cid:285)ytkowników, których przegl(cid:200)darka ma wy(cid:239)(cid:200)czon(cid:200) ob- s(cid:239)ug(cid:218) JavaScript. 54 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Zapytania medialne: obs(cid:225)uga zró(cid:298)nicowanych obszarów roboczych Nie wiem, czy powy(cid:285)szy akapit jest zrozumia(cid:239)y, wi(cid:218)c dodam prosty przyk(cid:239)ad. Domy(cid:258)lnie w doku- mencie HTML znajdowa(cid:239)by si(cid:218) taki element: html class= no-js Gdy na tej stronie zostanie uruchomiony skrypt JavaScript, jego pierwszym zadaniem b(cid:218)dzie zamiana klasy no-js na js: html class= js Teraz mo(cid:285)emy napisa(cid:202) regu(cid:239)y CSS przeznaczone do zastosowania tylko wtedy, gdy dzia(cid:239)aj(cid:200) skrypty JavaScript, np. .js .header {display: block;}. W nowej specyfikacji zapyta(cid:241) medialnych podj(cid:218)to prób(cid:218) ustandaryzowania tej metody tak, aby test obs(cid:239)ugi JavaScript mo(cid:285)na by(cid:239)o wykonywa(cid:202) wprost z poziomu CSS: @media (scripting: none) { /* Regu(cid:225)y do zastosowania, gdy brakuje obs(cid:225)ugi JavaScript. */ } Mo(cid:285)na te(cid:285) sprawdza(cid:202), czy JavaScript jest w(cid:239)(cid:200)czony: @media (scripting: enabled) { /* Regu(cid:225)y do zastosowania, gdy JavaScript jest w(cid:225)(cid:261)czony. */ } Istnieje te(cid:285) mo(cid:285)liwo(cid:258)(cid:202) sprawdzenia, czy obs(cid:239)uga JavaScript jest w(cid:239)(cid:200)czona tylko pocz(cid:200)tkowo. W specyfikacji W3C podano przyk(cid:239)ad drukowanej strony, której uk(cid:239)ad jest najpierw budowany z u(cid:285)yciem skryptów, ale pó(cid:283)niej JavaScript staje si(cid:218) niedost(cid:218)pny. Ten test zapisuje si(cid:218) nast(cid:218)puj(cid:200)co: @media (scripting: initial-only) { /* Regu(cid:225)y do zastosowania, gdy JavaScript dzia(cid:225)a tylko pocz(cid:261)tkowo. */ } Szerszy opis wst(cid:218)pnej wersji tej funkcji mo(cid:285)na znale(cid:283)(cid:202) pod adresem: https://drafts.csswg.org/ mediaqueries-4/#mf-scripting. Urz(cid:200)dzenia wskazuj(cid:200)ce Na stronach W3C znajduje si(cid:218) nast(cid:218)puj(cid:200)cy opis funkcji dotycz(cid:200)cej urz(cid:200)dze(cid:241) wskazuj(cid:200)cych: „Funkcja ta s(cid:239)u(cid:285)y do sprawdzania obecno(cid:258)ci i dok(cid:239)adno(cid:258)ci urz(cid:200)dze(cid:241) wskazuj(cid:200)cych, takich jak mysz. Je(cid:285)eli urz(cid:200)dzenie dysponuje kilkoma mechanizmami wskazywania, funkcja musi odzwierciedla(cid:202) w(cid:239)a(cid:258)ciwo(cid:258)ci podstawowego z nich zgodnie z ustaleniami klienta u(cid:285)ytkownika”. Urz(cid:200)dzenie wskazuj(cid:200)ce mo(cid:285)e mie(cid:202) jedn(cid:200) z trzech w(cid:239)a(cid:258)ciwo(cid:258)ci: none, coarse i fine. 55 Poleć książkęKup książkę Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3 Urz(cid:200)dzeniem wskazuj(cid:200)cym o w(cid:239)a(cid:258)ciwo(cid:258)ci coarse (gruby) mo(cid:285)e by(cid:202) palec w przypadku ekranu dotykowego albo kursor z konsoli do gier, w której nie ma tak precyzyjnego wska(cid:283)nika jak mysz. @media (pointer: coarse) { /* Regu(cid:225)y do zastosowania dla niezbyt precyzyjnego wska(cid:296)nika. */ } Urz(cid:200)dzenia o w(cid:239)a(cid:258)ciwo(cid:258)ci fine (precyzyjny) to np.: mysz, rysik lub jaki(cid:258) inny wynalazek do precy- zyjnego wskazywania elementów na ekranie. @m
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3. Wydanie II
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: