CSS od podszewki

Spis treści ebooka

Słowo wstępne 11

Przedmowa 13

Podziękowania 15

O książce 17

O autorze 21

CZĘŚĆ I. PRZEGLĄD PODSTAWOWYCH POJĘĆ 23

Rozdział 1. Kaskada, specyficzność i dziedziczenie 25

• 1.1. Kaskada 26
• 1.1.1. Źródło arkusza stylów 29
• 1.1.2. Specyficzność 31
• 1.1.3. Kolejność źródłowa 36
• 1.1.4. Dwie praktyczne zasady 39
• 1.2. Dziedziczenie 40
• 1.3. Wartości specjalne 42
• 1.3.1. Użycie słowa kluczowego inherit 42
• 1.3.2. Użycie słowa kluczowego initial 43
• 1.4. Właściwości skrócone 44
• 1.4.1. Uważaj na właściwości skrócone przesłaniające "po cichu" inne style 45
• 1.4.2. Kolejność wartości skróconych 46
• Podsumowanie 48

Rozdział 2. Użycie jednostek względnych 49

• 2.1. Siła jednostek względnych 50
• 2.1.1. Walka o projekt "idealny co do piksela" 50
• 2.1.2. Koniec projektów internetowych "idealnych co do piksela" 50
• 2.2. Jednostki em i rem 52
• 2.2.1. Użycie wartości z jednostką em do definiowania rozmiaru czcionki 53
• 2.2.2. Użycie jednostki rem do określania rozmiaru czcionki 57
• 2.3. Nie myśl w kategoriach pikseli 59
• 2.3.1. Ustawianie rozsądnego domyślnego rozmiaru czcionki 60
• 2.3.2. Zapewnianie elastyczności panelu 62
• 2.3.3. Zmiana wielkości pojedynczego komponentu 63
• 2.4. Jednostki względne obszaru roboczego 65
• 2.4.1. Użycie jednostki vw do określenia rozmiaru czcionki 67
• 2.4.2. Użycie funkcji calc() do określenia rozmiaru czcionki 67
• 2.5. Liczby bezjednostkowe i właściwość line-height 68
• 2.6. Właściwości niestandardowe (inaczej - zmienne CSS) 70
• 2.6.1. Dynamiczne zmienianie właściwości niestandardowych 72
• 2.6.2. Zmiana właściwości niestandardowych za pomocą kodu JavaScript 74
• 2.6.3. Eksperymentowanie z właściwościami niestandardowymi 75
• Podsumowanie 76

Rozdział 3. Opanowanie modelu pudełkowego 77

• 3.1. Trudności związane z szerokością elementów 78
• 3.1.1. Unikanie liczb magicznych 81
• 3.1.2. Dostosowywanie modelu pudełkowego 81
• 3.1.3. Użycie metody uniwersalnego określania wymiarów dla wartości border-box 83
• 3.1.4. Dodawanie przerwy między kolumnami 84
• 3.2. Trudności związane z wysokością elementu 86
• 3.2.1. Kontrolowanie zachowania przepełnienia 86
• 3.2.2. Stosowanie alternatywnych rozwiązań dla określania wysokości na podstawie wartości procentowej 87
• 3.2.3. Użycie właściwości min-height i max-height 92
• 3.2.4. Środkowanie zawartości w pionie 92
• 3.3. Marginesy ujemne 94
• 3.4. Załamywanie marginesów 95
• 3.4.1. Załamywanie między tekstem 95
• 3.4.2. Załamywanie wielu marginesów 96
• 3.4.3. Załamywanie poza obrębem kontenera 97
• 3.5. Określanie odstępów dla elementów w obrębie kontenera 99
• 3.5.1. Uwzględnienie zmieniającej się zawartości 101
• 3.5.2. Tworzenie bardziej ogólnego rozwiązania: selektor "sowy po lobotomii" 102
• Podsumowanie 105

CZĘŚĆ II. OPANOWANIE UKŁADU 107

Rozdział 4. Użycie elementów pływających 109

• 4.1. Przeznaczenie elementów pływających 110
• 4.2. Załamywanie kontenera i technika clearfix 115
• 4.2.1. Załamywanie kontenera 115
• 4.2.2. Objaśnienie techniki clearfix 118
• 4.3. Nieoczekiwane "chwytanie elementu pływającego" 120
• 4.4. Obiekty mediów i konteksty formatowania bloku 123
• 4.4.1. Ustanawianie kontekstu formatowania bloku 124
• 4.4.2. Użycie kontekstu formatowania bloku na potrzeby układów obiektów mediów 126
• 4.5. Systemy siatki 127
• 4.5.1. System siatki 128
• 4.5.2. Budowanie systemu siatki 128
• 4.5.3. Dodawanie przerw 133
• Podsumowanie 136

Rozdział 5. Flexbox 139

• 5.1. Zasady modułu Flexbox 140
• 5.1.1. Budowanie podstawowego menu opartego na module Flexbox 143
• 5.1.2. Dodawanie wypełnienia i odstępów 145
• 5.2. Wymiary elementów elastycznych 147
• 5.2.1. Użycie właściwości flex-basis 149
• 5.2.2. Użycie właściwości flex-grow 150
• 5.2.3. Użycie właściwości flex-shrink 151
• 5.2.4. Kilka praktycznych zastosowań 152
• 5.3. Kierunek kontenera elastycznego 153
• 5.3.1. Zmiana kierunku kontenera elastycznego 155
• 5.3.2. Określanie stylów formularza logowania 156
• 5.4. Wyrównanie, odstępy i inne szczegóły 158
• 5.4.1. Właściwości kontenera elastycznego 161
• 5.4.2. Właściwości elementów elastycznych 163
• 5.4.3. Użycie właściwości wyrównywania 164
• 5.5. Kilka rzeczy, których musisz być świadomy 165
• 5.5.1. Flexbugs 165
• 5.5.2. Układ pełnej strony 166
• Podsumowanie 166

Rozdział 6. Układ siatki 169

• 6.1. Układ witryny internetowej 170
• 6.1.1. Budowanie podstawowej siatki 171
• 6.2. Anatomia siatki 173
• 6.2.1. Numerowanie linii siatki 178
• 6.2.2. Korzystanie jednoczesne z modułu Flexbox 180
• 6.3. Techniki alternatywne 183
• 6.3.1. Nazwane linie siatki 183
• 6.3.2. Nadawanie nazw obszarom siatki 185
• 6.4. Siatka jawna i niejawna 187
• 6.4.1. Zapewnianie różnorodności 191
• 6.4.2. Dostosowywanie elementów siatki w celu wypełnienia ścieżki siatki 194
• 6.5. Zapytania dotyczące właściwości 196
• 6.6. Wyrównanie 200
• Podsumowanie 202

Rozdział 7. Pozycjonowanie i konteksty stosu 203

• 7.1. Pozycjonowanie ustalone 204
• 7.1.1. Tworzenie modalnego okna dialogowego z pozycjonowaniem ustalonym 204
• 7.1.2. Kontrolowanie wielkości pozycjonowanych elementów 208
• 7.2. Pozycjonowanie bezwzględne 208
• 7.2.1. Pozycjonowanie bezwzględne przycisku Zamknij 209
• 7.2.2. Pozycjonowanie pseudoelementu 210
• 7.3. Pozycjonowanie względne 211
• 7.3.1. Tworzenie menu rozwijanego 212
• 7.3.2. Tworzenie trójkąta w standardzie CSS 215
• 7.4. Konteksty stosu i właściwość z-index 217
• 7.4.1. Proces renderowania i kolejność na stosie 218
• 7.4.2. Modyfikowanie kolejności na stosie za pomocą właściwości z-index 220
• 7.4.3. Konteksty stosu 220
• 7.5. Pozycjonowanie sticky 224
• Podsumowanie 227

Rozdział 8. Projekt elastyczny 229

• 8.1. Najpierw urządzenia przenośne 231
• 8.1.1. Tworzenie menu dla urządzeń przenośnych 237
• 8.1.2. Dodawanie metaznacznika obszaru roboczego 241
• 8.2. Zapytania dotyczące mediów 242
• 8.2.1. Typy zapytania dotyczącego mediów 244
• 8.2.2. Dodawanie punktów zmian do strony 245
• 8.2.3. Dodawanie kolumn elastycznych 249
• 8.3. Układy płynne 252
• 8.3.1. Dodawanie stylów dla punktu zmian powiązanego z dużymi ekranami 253
• 8.3.2. Obsługa tabel 254
• 8.4. Obrazy elastyczne 256
• 8.4.1. Użycie wielu obrazów pod kątem różnych wielkości obszaru roboczego 256
• 8.4.2. Zastosowanie atrybutu srcset do udostępniania właściwego obrazu 257
• Podsumowanie 258

CZĘŚĆ III. UŻYCIE CSS NA DUŻĄ SKALĘ 259

Rozdział 9. Modularny kod CSS 261

• 9.1. Style podstawowe: przygotowanie fundamentu 263
• 9.2. Prosty moduł 264
• 9.2.1. Warianty modułu 265
• 9.2.2. Moduły z wieloma elementami 269
• 9.3. Moduły będące częścią większych struktur 272
• 9.3.1. Rozdzielanie wielu odpowiedzialności między moduły 273
• 9.3.2. Nadawanie nazw modułom 277
• 9.4. Klasy narzędziowe 278
• 9.5. Metody związane ze standardem CSS 279
• Podsumowanie 281

Rozdział 10. Biblioteki wzorców 283

• 10.1. Wprowadzenie do narzędzia KSS 284
• 10.1.1. Konfigurowanie narzędzia KSS 285
• 10.1.2. Tworzenie dokumentacji narzędzia KSS 287
• 10.1.3. Dokumentowanie wariantów modułu 291
• 10.1.4. Tworzenie strony przeglądu 293
• 10.1.5. Dokumentowanie modułów wymagających kodu JavaScript 294
• 10.1.6. Organizowanie biblioteki wzorców za pomocą sekcji 296
• 10.2. Zmiana sposobu tworzenia kodu CSS 298
• 10.2.1. Użycie metody przepływu zadań "najpierw CSS" 298
• 10.2.2. Użycie biblioteki wzorców jako interfejsu API 300
• Podsumowanie 306

CZĘŚĆ IV. ZAGADNIENIA ZAAWANSOWANE 307

Rozdział 11. Tła, cienie i tryby mieszania 309

• 11.1. Gradienty 310
• 11.1.1. Użycie wielu "przystanków" kolorów 313
• 11.1.2. Użycie gradientów promienistych 315
• 11.2. Cienie 317
• 11.2.1. Definiowanie głębi za pomocą gradientów i cieni 318
• 11.2.2. Tworzenie elementów z wykorzystaniem projektowania płaskiego 320
• 11.2.3. Tworzenie przycisków o nowocześniejszym wyglądzie 321
• 11.3. Tryby mieszania 322
• 11.3.1. Kolorowanie obrazu 324
• 11.3.2. Typy trybu mieszania 325
• 11.3.3. Dodawanie tekstury do obrazu 326
• 11.3.4. Użycie właściwości mix-blend-mode 328
• Podsumowanie 330

Rozdział 12. Kontrast, kolor i odstępy 331

• 12.1. Kontrast ponad wszystko 332
• 12.1.1. Definiowanie wzorców 334
• 12.1.2. Implementowanie projektu 335
• 12.2. Kolor 336
• 12.2.1. Notacje kolorów 343
• 12.2.2. Dodawanie nowych kolorów do palety 347
• 12.2.3. Uwzględnianie kontrastu w wypadku kolorów czcionek 349
• 12.3. Odstępy 351
• 12.3.1. Użycie jednostki em albo jednostki px 351
• 12.3.2. Uwzględnianie wysokości wierszy 354
• 12.3.3. Określanie odstępów dla elementów liniowych 357
• Podsumowanie 359

Rozdział 13. Typografia 361

• 13.1. Czcionki dla stron internetowych 363
• 13.2. Czcionki firmy Google 364
• 13.3. Zasady działania zestawu reguły @font-face 368
• 13.3.1. Formaty czcionek i warianty zapasowe 369
• 13.3.2. Wiele wariantów tego samego kroju czcionki 370
• 13.4. Dostosowywanie odstępów w celu zwiększenia czytelności 371
• 13.4.1. Odstępy w obrębie treści głównej 372
• 13.4.2. Nagłówki, niewielkie elementy i odstępy 374
• 13.5. Budzące postrach zdarzenia FOUT i FOIT 378
• 13.5.1. Użycie biblioteki Font Face Observer 380
• 13.5.2. Wariant awaryjny w postaci czcionek systemowych 381
• 13.5.3. Przygotowanie do użycia właściwości font-display 383
• Podsumowanie 384

Rozdział 14. Przejścia 387

• 14.1. Z jednego w drugie 388
• 14.2. Funkcje synchronizacji czasu 390
• 14.2.1. Krzywe Béziera 392
• 14.2.2. Kroki 394
• 14.3. Właściwości nieumożliwiające użycia animacji 395
• 14.3.1. Właściwości, które nie mogą być animowane 398
• 14.3.2. Rozjaśnianie i ściemnianie 399
• 14.4. Użycie przejścia dla właściwości height o wartości auto 401
• Podsumowanie 403

Rozdział 15. Transformacje 405

• 15.1. Obracanie, przesuwanie, skalowanie i wypaczanie 406
• 15.1.1. Zmiana źródła transformacji 408
• 15.1.2. Stosowanie wielu transformacji 409
• 15.2. Transformacje związane z ruchem 410
• 15.2.1. Skalowanie ikony w górę 415
• 15.2.2. Tworzenie "przylatujących" etykiet 418
• 15.2.3. Rozkładanie przejść w czasie 420
• 15.3. Wydajność animacji 422
• 15.3.1. Analiza potoku renderowania 422
• 15.4. Transformacje trójwymiarowe (3D) 424
• 15.4.1. Kontrolowanie perspektywy 425
• 15.4.2. Implementowanie zaawansowanych transformacji 3D 428
• Podsumowanie 430

Rozdział 16. Animacje 431

• 16.1. Klatki kluczowe 432
• 16.2. Animowanie transformacji trójwymiarowych 434
• 16.2.1. Budowanie układu bez animacji 435
• 16.2.2. Dodawanie animacji do układu 440
• 16.3. Opóźnienie animacji i tryb wypełniania 442
• 16.4. Przekazywanie znaczenia za pośrednictwem animacji 444
• 16.4.1. Reagowanie na interakcję użytkownika 445
• 16.4.2. Zwracanie uwagi użytkownika 448
• 16.5. Jeszcze jedna rada 451
• Podsumowanie 452

Dodatek A. Zestawienie selektorów 453

Dodatek B. Preprocesory 459

Skorowidz 473

pokaż cały spis treści

ukryj recenzje