CSS od podszewki - ebook

W ostatnich latach CSS bardzo się rozwinął. Mimo że istnieje od kilku dekad, wciąż jest ważnym elementem warsztatu profesjonalnych projektantów stron internetowych. Co prawda przyswojenie podstaw CSS nie jest specjalnie trudne, ale osiągnięcie prawdziwej biegłości w korzystaniu z tego języka wymaga stałego uczenia się i ciągłych ćwiczeń. Trzeba dobrze zrozumieć wszystkie części kodu CSS, a także sposób, w jaki są do siebie dopasowane. Wysiłek włożony w doskonałe opanowanie języka szybko się zwróci: CSS pozwala zwiększyć wygodę użytkownika, przyspieszyć proces projektowania, uniknąć potencjalnych błędów, a także urozmaicić i ożywić aplikację.

Ta książka jest kompleksowym przewodnikiem po języku CSS dla osób na różnych poziomach biegłości w stosowaniu kaskadowych arkuszy stylów. Zawiera kluczowe informacje o podstawach języka, dzięki czemu będzie nieocenioną pomocą dla początkujących. Szczegółowo opisano tu również nowości i ulepszenia, które pojawiły się w języku na przestrzeni ostatnich kilku lat. Zaprezentowano także kwestie istotne dla zaawansowanych projektantów, takie jak organizacja kodu w sposób umożliwiający wielokrotne wykorzystywanie czy budowanie niezmiernie przydatnej w pracy zespołowej biblioteki wzorców. Sporo miejsca poświęcono technikom uzyskiwania efektów decydujących o atrakcyjnym i niepowtarzalnym wyglądzie aplikacji.

W tej książce między innymi:

• kaskady, dziedziczenie i moduł pudełkowy
• układy, w tym flexbox i siatka
• modularna organizacja kodu
• tajniki typografii internetowej
• używanie cieni, gradientów, kontrastów i odstępów
• transformacje, przejścia i animacje

CSS. Każda aplikacja może wyglądać pięknie!

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