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!
Spis treści
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 <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
- 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
- Osadzanie elementów multimedialnych w HTML5 56
- Podsumowanie 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
- 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
- Łączyć zapytania medialne w bloki czy rozpraszać je w różnych miejscach pliku 78
- Zapytania medialne - poziom 4. 80
- Podsumowanie 83
Rozdział 4. Układy płynne, flexbox i obrazy responsywne 85
- Konwertowanie układu stałego na elastyczny 86
- Flexbox - wprowadzenie 92
- Różne rodzaje układu flexboksa w różnych zapytaniach medialnych 98
- Obrazy responsywne 116
- Podsumowanie 121
Rozdział 5. Układy oparte na siatce CSS 123
- CSS Grid i problemy, które rozwiązuje 124
- Tworzenie siatki 125
- Rozmieszczanie i definiowanie rozmiaru elementów siatki 133
- Nazwane linie siatki 138
- Zastosowanie nabytych umiejętności 142
- Składnia zbiorcza 147
- 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
- Nowe formaty barw CSS3 i kanał alfa 187
- Podsumowanie 190
Rozdział 7. Spektakularny wygląd i CSS3 191
- Cienie tekstu w CSS3 192
- Cienie elementów 194
- Gradienty tła 196
- Powtarzanie gradientu 201
- Gradientowe desenie tła 202
- Wiele obrazów tła jednocześnie 204
- Filtry CSS 207
- Uwaga na temat wydajności CSS 214
- CSS clip-path 215
- 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
- Najpopularniejsze programy i usługi do tworzenia grafiki SVG 234
- Wstawianie grafik SVG na strony internetowe 235
- Wstawianie dokumentów SVG bezpośrednio do kodu HTML 238
- Wielokrotne wykorzystywanie obiektów graficznych z symboli 239
- Możliwości każdej z metod wstawiania grafik SVG na strony internetowe 245
- Inne możliwości i dziwactwa SVG 246
- Animowanie SVG za pomocą JavaScriptu 251
- 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
- Funkcje czasu 266
- Transformacje dwuwymiarowe CSS3 268
- Transformacje trójwymiarowe 277
- Animacje w CSS3 284
- Ćwiczenia 288
- Podsumowanie 289
Rozdział 10. Formularze w HTML5 i CSS3 291
- Formularze HTML5 292
- Rodzaje kontrolek HTML5 300
- Formatowanie formularzy HTML5 za pomocą arkuszy CSS3 312
- 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
- CSS Scroll Snap 325
- Łą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
- Unikaj frameworków CSS w produkcji 337
- Ukrywanie, pokazywanie i wczytywanie treści na różnych ekranach 338
- Sprawdzanie składni 339
- Wydajność 341
- Co szykuje przyszłość 343
- Podsumowanie 343