Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3. Wydanie III - ebook

Jeszcze dziesięć lat temu responsywność strony internetowej była traktowana jako ciekawostka. Dziś jest powszechnym standardem. Znane od dawna klasyczne technologie HTML i CSS wciąż zachowują świeżość i wyjątkową przydatność w tworzeniu nowoczesnych stron internetowych. Społeczności skupione wokół tych narzędzi starannie dbają o ich nieustanny rozwój, dzięki czemu za ich pomocą nadal można osiągać imponujące efekty i spełniać coraz wyższe standardy. Oznacza to, że każdy szanujący się programista front-endu powinien na bieżąco śledzić nowości i uczyć się korzystania z sukcesywnie pojawiających się funkcjonalności HTML i CSS.

Ta książka jest kolejnym, uaktualnionym i uzupełnionym wydaniem lubianego podręcznika projektowania responsywnych stron internetowych. Omówiono w niej wszystkie nowości i ulepszenia z dziedziny projektowania responsywnych stron internetowych, w tym zapewnianie lepszej dostępności, fonty zmienne czy kontrola przewijania strony. Szczegółowo opisano moduł CSS Grid i mechanizm tworzenia układów Flexbox. Zaprezentowano wiele praktycznych informacji o SVG, wymogach dostępności, efektach w CSS, definiowaniu przejść, transformacji i animacji oraz włączaniu do kodu zapytań medialnych. Znakomitym uzupełnieniem treści są autorskie wskazówki i uwagi do programowania front-endu.

Najważniejsze zagadnienia:

• dostosowywanie arkuszy stylów do potrzeb różnych urządzeń
• pisanie przejrzystego, szybkiego i bogatego semantycznie kodu HTML
• grafiki w formacie SVG w projektach responsywnych
• najnowsze możliwości CSS: własności użytkownika, fonty zmienne i siatka
• weryfikacja danych w HTML i inne przydatne funkcje formularzy
• filtry, cienie, animacje i inne efekty wzbogacające interfejs

Współczesny HTML i CSS? Mogą więcej, niż myślisz!

O autorze 11

O korektorach merytorycznych 13

Przedmowa 15

Rozdział 1. Podstawowe wiadomości o projektowaniu responsywnych stron internetowych 19

• Panorama przeglądarek i urządzeń 20
• Projekt responsywny - definicja 21
  
  • Projektowanie responsywnych stron internetowych w pigułce 21
• Obsługa przeglądarek 22
  
  • Edytory tekstu 23
  • Narzędzia do wytwarzania oprogramowania 23
• Pierwszy przykład projektu responsywnego 24
  
  • Podstawowy plik HTML 24
  • Okiełznać obrazy 27
  • Zapytania medialne wkraczają do akcji 31
  • Wady opisanego przykładu 36
• Podsumowanie 36

Rozdział 2. Znaczniki HTML 37

• Prawidłowe rozpoczynanie strony HTML5 39
  
  • Znacznik doctype 39
  • Element HTML i atrybut lang 39
  • Kodowanie znaków 40
• Pobłażliwy charakter znaczników HTML5 40
  
  • Rozsądne podejście do pisania kodu 41
  • Oddajmy cześć wszechmocnemu elementowi <a> 42
• Nowe elementy semantyczne HTML5 42
  • Element
    <main> 43
  • Element
    <section> 44
  • Element
  • Element
    <article> 44
  • Element <aside>
  • Element
    <header> 45
  • Element <footer>
  • Algorytm tworzenia zarysu dokumentu HTML5 46
  • Uwaga na temat elementów h1 - h6 47
  • Element div 47
  • Element p 48
  • Element blockquote 48
  • Elementy <figure> i <figcaption> 48
  • Elementy <details> i <summary> 49
  • Element <address> 50
• Elementy semantyczne na poziomie tekstu 51
  • Element <span> 51
  • Element <b> 51
  • Element <strong> 51
  • Element <em> 52
  • Element <i> 52
• Elementy języka HTML, które uległy dezaktualizacji 53
• Praktyczne wykorzystanie elementów strukturalnych HTML5 53
• Standardy dostępności stron WCAG i WAI-ARIA 54
  • WCAG 54
  • Standard WAI-ARIA 55
• Osadzanie elementów multimedialnych w HTML5 56
  • Dodawanie do stron internetowych filmów i dźwięków 57
  • Responsywne odtwarzacze filmów i ramki wewnętrzne 59
• Podsumowanie 60
  • Ćwiczenie 60

Rozdział 3. Zapytania medialne: obsługa zróżnicowanych obszarów roboczych 63

• Znacznik meta viewport 66
• Dlaczego zapytania medialne są potrzebne do budowy układów responsywnych 68
  • Podstawowa logika warunkowa w CSS 68
• Składnia zapytań medialnych 69
  • Zapytania medialne w znaczniku <link> 70
  • Importowanie zapytań medialnych za pomocą dyrektywy @import 70
  • Zapytania medialne w arkuszach stylów 70
  • Odwracanie logiki zapytań medialnych 71
  • Łączenie zapytań medialnych 71
  • Zestawienia zapytań medialnych 71
  • Standardowe zapytania medialne 72
  • Co można sprawdzać za pomocą zapytań medialnych 72
• Modyfikowanie projektu strony za pomocą zapytań medialnych 73
• Zaawansowane zagadnienia dotyczące zapytań medialnych 76
  • Metody organizacji zapytań medialnych 77
  • Zasadność dzielenia zapytań medialnych na wiele plików 77
  • Śródliniowe zagnieżdżanie zapytań medialnych 78
• Łączyć zapytania medialne w bloki czy rozpraszać je w różnych miejscach pliku 78
• Zapytania medialne - poziom 4. 80
  • Funkcje interakcyjne 80
  • Funkcja doboru preferowanego schematu kolorów 82
• Podsumowanie 83

Rozdział 4. Układy płynne, flexbox i obrazy responsywne 85

• Konwertowanie układu stałego na elastyczny 86
  • Do czego służy model flexbox 90
• Flexbox - wprowadzenie 92
  • Wyboista droga do flexboksa 92
  • Nie wpisuj przedrostków ręcznie 92
  • Podstawy flexboksa 94
• Różne rodzaje układu flexboksa w różnych zapytaniach medialnych 98
  • Własność inline-flex 98
  • Wyrównywanie treści we flexboksie 99
  • Lepka stopka 107
  • Zmienianie kolejności elementów 108
  • Zawijanie z flexboksem 113
  • Podsumowanie wiadomości o flexboksie 116
• Obrazy responsywne 116
  • Wewnętrzny problem obrazów responsywnych 117
  • Proste przełączanie rozdzielczości za pomocą atrybutu srcset 118
  • Zaawansowane techniki przełączania obrazów za pomocą atrybutu srcset 118
  • Prezentowanie obrazów za pomocą elementu picture 120
• Podsumowanie 121

Rozdział 5. Układy oparte na siatce CSS 123

• CSS Grid i problemy, które rozwiązuje 124
  • Podstawowa składnia siatki 124
  • Pojęcia i terminy dotyczące siatki 125
• Tworzenie siatki 125
  • Jawne i niejawne definicje rozmieszczenia 130
• Rozmieszczanie i definiowanie rozmiaru elementów siatki 133
  • Własność gap 135
  • Wartość repeat 136
  • Jednostki fr 136
  • Rozmieszczanie elementów w siatce 136
  • Wartość span 137
  • Wartość dense 137
• Nazwane linie siatki 138
  • Własność grid-template-areas 141
• Zastosowanie nabytych umiejętności 142
  • Wartości auto-fit i auto-fill 143
  • Funkcja minmax() 145
• Składnia zbiorcza 147
  • Składnia grid-template 147
  • Składnia grid 148
• Podsumowanie 150

Rozdział 6. CSS3: selektory, typografia, tryby kolorów i nowe funkcje 153

• Selektory, jednostki i funkcje 154
  • Struktura reguł CSS 154
  • Pseudoelementy i pseudoklasy 155
  • Nowe selektory CSS3 i sposób ich wykorzystania 156
  • Strukturalne pseudoklasy CSS3 160
  • Jednostki zależne od rozmiaru obszaru roboczego (vmax, vmin, vh, vw) 170
  • Funkcja CSS calc 171
  • Własności użytkownika i zmienne CSS 171
  • Rozgałęzianie kodu CSS przy użyciu @supports 175
• Typografia sieciowa 177
  • Fonty systemowe 177
  • Reguła @font-face 178
  • Odwołanie do fontów w regule @font-face 179
  • Optymalizacja ładowania fontów przy użyciu font-display 180
  • Fonty zmienne 182
• Nowe formaty barw CSS3 i kanał alfa 187
  • Format RGB 187
  • Format HSL 188
• Podsumowanie 190

Rozdział 7. Spektakularny wygląd i CSS3 191

• Cienie tekstu w CSS3 192
  • Opuszczanie wartości rozmycia, gdy jest niepotrzebna 193
• Cienie elementów 194
  • Cień wewnątrz elementu 194
  • Definiowanie wielu cieni dla elementu 194
  • Wartość spread 195
• Gradienty tła 196
  • Liniowe gradienty tła 197
  • Gradienty promieniste 199
  • Gradienty responsywne 200
• Powtarzanie gradientu 201
• Gradientowe desenie tła 202
• Wiele obrazów tła jednocześnie 204
  • Wymiary tła 204
  • Własność background position 205
  • Zbiorcza własność background 206
  • Obrazy tła o wysokiej rozdzielczości 206
• Filtry CSS 207
  • Dostępne filtry CSS 208
  • Łączenie filtrów CSS 214
• Uwaga na temat wydajności CSS 214
• CSS clip-path 215
  • Własność clip-path z adresem URL 216
  • Podstawowe kształty CSS 216
  • Animowana ścieżka przycinania 220
• mask-image 222
  • Przykład mask-image 222
• mix-blend-mode 224
• Podsumowanie 224

Rozdział 8. Grafika SVG niezależna od rozdzielczości ekranu 227

• Historia SVG w pigułce 229
• Grafika, która jest dokumentem 230
  • Element główny SVG 231
  • Przestrzeń nazw 232
  • Elementy <title> i <desc> 232
  • Element <defs> 233
  • Element <g> 233
  • Kształty SVG 233
  • Ścieżki SVG 233
• Najpopularniejsze programy i usługi do tworzenia grafiki SVG 234
  • Oszczędzaj czas dzięki usługom oferującym ikony SVG 234
• Wstawianie grafik SVG na strony internetowe 235
  • Element <img> 235
  • Element <object> 236
  • Ustawianie grafik SVG w tle elementów 236
  • Krótka uwaga na temat kodowania danych w URI 237
  • Generowanie sprite'ów graficznych 238
• Wstawianie dokumentów SVG bezpośrednio do kodu HTML 238
• Wielokrotne wykorzystywanie obiektów graficznych z symboli 239
  • Osadzone grafiki SVG mogą mieć różne kolory w różnych kontekstach 241
  • Zmiana koloru grafik SVG za pomocą CSS 242
  • Wielokrotne wykorzystywanie obiektów graficznych z zewnętrznych źródeł 244
• Możliwości każdej z metod wstawiania grafik SVG na strony internetowe 245
  • Problemy z przeglądarkami 246
• Inne możliwości i dziwactwa SVG 246
  • Animacje SMIL 247
  • Stylizowanie grafik SVG za pomocą zewnętrznych arkuszy stylów 248
  • Formatowanie grafik SVG za pomocą arkuszy wewnętrznych 249
  • Animowanie grafik SVG za pomocą CSS 250
• Animowanie SVG za pomocą JavaScriptu 251
  • Prosty przykład animacji na bazie biblioteki GreenSock 252
• Optymalizacja grafik SVG 253
• Filtry SVG 254
• Uwaga na temat zapytań medialnych w SVG 257
• Porady implementacyjne 258
• Podsumowanie 259
• Dodatkowe źródła informacji 259

Rozdział 9. Przejścia, transformacje i animacje 261

• Czym są przejścia CSS3 i jak z nich korzystać? 262
  • Rodzaje przejść 264
  • Zbiorcza własność do definiowania przejść 265
  • Przejścia różnych własności w różnych przedziałach czasowych 266
• Funkcje czasu 266
• Transformacje dwuwymiarowe CSS3 268
  • scale 270
  • translate 270
  • rotate 273
  • skew 274
  • matrix 274
  • Własność transform-origin 275
• Transformacje trójwymiarowe 277
  • Wartość translate3d 280
  • Transformacje w metodzie stopniowego ulepszania 282
• Animacje w CSS3 284
  • Własność animation-fill-mode 287
• Ćwiczenia 288
• Podsumowanie 289

Rozdział 10. Formularze w HTML5 i CSS3 291

• Formularze HTML5 292
  • Elementy formularzy HTML5 292
  • Atrybut placeholder 294
  • Stylizacja wskaźnika wstawiania własnością caret-color 295
  • Atrybut required 295
  • Atrybut autofocus 296
  • Atrybut autocomplete 297
  • Atrybut list (i powiązany element datalist) 298
• Rodzaje kontrolek HTML5 300
  • Typ email 300
  • Typ number 301
  • Typ url 303
  • Typ tel 305
  • Typ search 305
  • Typ pattern 306
  • Typ color 307
  • Kontrolki daty i godziny 308
  • Typ time 310
  • Typ range 311
• Formatowanie formularzy HTML5 za pomocą arkuszy CSS3 312
  • Oznaczanie pól wymaganych 315
  • Wypełnianie tła 317
• Podsumowanie 318

Rozdział 11. Dodatkowe techniki i dobre rady na pożegnanie 319

• Zawijanie długich adresów URL 320
• Obcinanie tekstu 321
• Tworzenie poziomych przewijanych okienek 322
  • Poziome przewijane okienka w Grid 325
• CSS Scroll Snap 325
  • Własność scroll-snap-type 326
  • Własność scroll-snap-align 327
  • Własność scroll-padding 327
  • Gładkie przewijanie za pomocą scroll-behavior 330
• Łączenie punktów kontrolnych CSS i JavaScript 331
• Oglądanie projektu w przeglądarce najszybciej jak to możliwe 334
• Oglądaj i testuj projekt w prawdziwych urządzeniach 334
• Na czym dokładnie polega stopniowe ulepszanie strony 335
  • Wybór funkcji obsługiwanych przez różne przeglądarki 336
  • Równość funkcjonalna, nie estetyczna 336
  • Wybór obsługiwanych przeglądarek 336
  • Stopniowanie funkcjonalności 337
• Unikaj frameworków CSS w produkcji 337
• Ukrywanie, pokazywanie i wczytywanie treści na różnych ekranach 338
• Sprawdzanie składni 339
• Wydajność 341
  • Narzędzia do mierzenia wydajności 341
• Co szykuje przyszłość 343
• Podsumowanie 343