Wstęp (11)

Rozdział 1. Elastyczny tekst (19)

• Definiowanie wielkości tekstu za pomocą słów kluczowych, wartości procentowych lub jednostek em jest najbardziej elastyczne i umożliwia użytkownikom jej regulowanie (20)
  
• Typowe rozwiązanie (21)
  
  • Dlaczego to rozwiązanie nie jest kuloodporne (22)
• Dostępne możliwości (24)
  
  • Jednostki długości (24)
  • Słowa kluczowe - względne (24)
  • Procenty (25)
  • Słowa kluczowe - bezwzględne (25)
• Rozwiązanie kuloodporne (26)
  
  • Słowa kluczowe - wyjaśnienie (26)
  • Rezygnacja z dokładności "co do piksela" (27)
• Dlaczego rozwiązanie to jest kuloodporne (28)
  
• Elastyczna baza - i co dalej? (28)
  
  • Ustaw i zapomnij (28)
  • Procentowa zmiana wartości bazowej (29)
• Stosowanie słów kluczowych i wartości procentowych (32)
  
  • Ustawienie pośredniej wartości bazowej (32)
  • Zagnieżdżając deklaracje w procentach, musimy zachować ostrożność (34)
  • Spójność dzięki wartościom procentowym (35)
• Elastyczny rozmiar tekstu dzięki jednostkom em (37)
  
  • Jednostka rem (39)
• Podsumowanie (41)

Rozdział 2. Skalowalna nawigacja (43)

• Należy opracować taką nawigację, która skaluje się w zależności od ustawionej wielkości tekstu oraz od objętości treści umieszczonych na stronie (44)
  
• Typowe rozwiązanie (45)
  
  • Eleganckie zakładki (45)
  • Typowy efekt rollover, czyli podmiana obrazków (46)
• Dlaczego rozwiązanie to nie jest kuloodporne (47)
  
  • Ogrom kodu (47)
  • Problemy z dostępnością (48)
  • Problemy ze skalowalnością (48)
  • Brak elastyczności (48)
• Rozwiązanie kuloodporne (49)
  
  • Bez stylów (50)
  • Dwa małe obrazki (50)
  • Stosowanie stylów (51)
  • (O)pływanie na ratunek (52)
  • Formowanie zakładek (53)
  • Wyrównanie obrazków tła (54)
  • Dodanie dolnego obramowania (56)
  • Efekt podmiany (57)
  • Wyróżniona zakładka (58)
• Dlaczego rozwiązanie to jest kuloodporne (58)
  
• Wariant bez obrazków, wykorzystujący gradienty CSS3 (59)
  
• Podobny przykład wykorzystujący jednostki em (63)
  
• Dodatkowe przykłady (65)
  
  • MOZILLA.ORG (65)
  • Skosy (65)
  • Wyszukiwanie w witrynie ESPN.com (66)
• Podsumowanie (68)

Rozdział 3. Elastyczne wiersze (71)

• Nie należy definiować wysokości poziomych elementów strony i trzeba zaplanować możliwość powiększenia ich w pionie (72)
  
• Typowe rozwiązanie (73)
  
• Dlaczego rozwiązanie to nie jest kuloodporne (74)
  
  • Mało istotne elementy graficzne (74)
  • Stałe wysokości (75)
  • Przerośnięty kod (75)
• Rozwiązanie kuloodporne (76)
  
  • Struktura kodu (76)
  • Identyfikacja elementów (77)
  • Bez stylów (78)
  • Dodanie tła (79)
  • Pozycjonowanie zawartości (79)
  • Brakujące tło (81)
  • Dodanie szczegółów (82)
  • Cztery zaokrąglone narożniki (84)
  • Szczegóły związane z tekstem i odnośnikami (85)
  • Ostatni etap (87)
  • Poprawka dla IE7 (89)
• Dlaczego rozwiązanie to jest kuloodporne (90)
  
  • Oddzielenie struktury od wyglądu (90)
  • Koniec z ustalonymi wysokościami (91)
• Wariant z atrybutem border-radius (92)
  
• Inny przykład rozciągania (94)
  
  • Struktura kodu (95)
  • Tworzenie dwóch obrazków (96)
  • Zastosowanie stylów CSS (96)
  • Autorozciąganie (98)
• Podsumowanie (99)

Rozdział 4. Pomysłowe rozmieszczanie elementów (101)

• Zamiast stosować tabele, lepiej używać elementów pływających (102)
  
• Typowe rozwiązanie (103)
  
• Dlaczego rozwiązanie to nie jest kuloodporne (104)
  
• Rozwiązanie kuloodporne (105)
  
  • Nieograniczony wybór struktur (105)
  • Stosowanie list definicji (106)
  • Struktura kodu (107)
  • Bez stylów (109)
  • Definiowanie stylów dla kontenera (109)
  • Identyfikacja obrazków (110)
  • Style podstawowe (111)
  • Pozycjonowanie obrazka (115)
  • Przeciwległe obiekty pływające (116)
  • Miejsce dla opisów każdej długości (118)
  • Samoczynne anulowanie opływania elementów (120)
  • Ostatnie szlify (123)
  • Zmiana kierunku wyrównania (125)
  • Efekt siatki (127)
  • Inne tło (131)
  • Zastosowanie cienia (132)
  • Zabawa z blokowaniem opływania elementów pływających (134)
  • Blokowanie opływania elementów za pomocą właściwości overflow (135)
  • Łatwe blokowanie opływania elementów za pomocą zawartości generowanej (136)
• Dlaczego rozwiązanie to jest kuloodporne (140)
  
• Podsumowanie (141)

Rozdział 5. Niezniszczalne ramki (143)

• Przed przystąpieniem do tworzenia stylów dla ramek należy wszystko dokładnie zaplanować (144)
  
• Typowe rozwiązanie (145)
  
• Dlaczego rozwiązanie to nie jest kuloodporne (146)
  
• Rozwiązanie kuloodporne (147)
  
  • Struktura kodu (148)
  • Strategia z obrazkami (149)
  • Stosowanie stylów (151)
• Dlaczego rozwiązanie to jest kuloodporne (154)
  
• Wariant z użyciem CSS3 (155)
  
• Inne techniki tworzenia zaokrąglonych narożników (159)
  
  • Rogi, rogi na okrągło (160)
• Pozorne ramki (167)
  
  • Jeden zaokrąglony narożnik (168)
  • Iluzja narożnika (171)
  • Kuloodporna strzałka (171)
  • Ograniczenia inspirują (173)
• Podsumowanie (173)

Rozdział 6. Brak obrazków? Brak CSS? Żaden problem! (175)

• Należy zadbać o to, by treść strony była czytelna, nawet jeśli strona zostanie pozbawiona rysunków i stylów CSS (176)
  
• Typowe rozwiązanie (177)
  
• Dlaczego rozwiązanie to nie jest kuloodporne (179)
  
• Rozwiązanie kuloodporne (181)
  
• Dlaczego rozwiązanie to jest kuloodporne (181)
  
• Ze stylami lub bez (184)
  
  • 10-sekundowy test użyteczności (185)
• Typowe rozwiązanie (186)
  
• Rozwiązanie kuloodporne (187)
  
• Test Dig Dug (189)
  
• Narzędzia do sprawdzania kuloodporności stron (190)
  
  • Favelety (190)
  • Pasek Web Developer (193)
  • Pasek Web Accessibility Toolbar (194)
  • Firebug (195)
  • Walidacja jako narzędzie (195)
• Podsumowanie (198)

Rozdział 7. Konwersja tabel (201)

• Z tabel należy usunąć kod odpowiadający za warstwę prezentacji, a ich wygląd zdefiniować za pomocą CSS (202)
  
• Typowe rozwiązanie (203)
  
• Dlaczego rozwiązanie to nie jest kuloodporne (205)
  
• Rozwiązanie kuloodporne (206)
  
  • Struktura kodu (206)
  • Stosowanie stylów (212)
• Dlaczego rozwiązanie to jest kuloodporne (224)
  
• Podsumowanie (225)

Rozdział 8. Płynny oraz elastyczny układ strony (227)

• Eksperymentuj z projektowaniem układów stron, które rozszerzają się i zwężają (228)
  
• Typowe rozwiązanie (229)
  
• Dlaczego rozwiązanie to nie jest kuloodporne (231)
  
  • Nadmiar kodu źródłowego (231)
  • Koszmar aktualizacji (231)
  • Niewłaściwa kolejność treści strony (232)
• Rozwiązanie kuloodporne (233)
  
  • Struktura kodu (233)
  • Tworzenie kolumn: pływanie kontra pozycjonowanie (234)
  • Stosowanie stylów (236)
  • Odstępy (239)
  • Dopełnienie kolumn (243)
  • Ustawianie szerokości minimalnej oraz maksymalnej (249)
  • Sposób na optyczne wyrównanie długości kolumn (253)
  • Trójkolumnowe układy stron (256)
• Dlaczego rozwiązanie to jest kuloodporne (265)
  
• Układ strony oparty na jednostkach em (265)
  
  • Przykład elastycznej strony internetowej (266)
  • Struktura kodu (266)
  • CSS (269)
  • Ideałem jest spójność strony (272)
  • Uwaga na paski przewijania (272)
• Podsumowanie (273)

Rozdział 9. Łączenie w całość (275)

• Zastosuj kuloodporne rozwiązania do projektu całej strony internetowej (276)
  
• Cel (277)
  
• Dlaczego rozwiązanie to jest kuloodporne (278)
  
  • Płynny, adaptujący się projekt (278)
  • Elastyczny tekst (280)
  • Brak rysunków? Brak CSS? Żaden problem! (280)
  • Wersje językowe (282)
• Konstrukcja (283)
  
  • Struktura kodu (283)
  • Style podstawowe (284)
  • Struktura układu strony (285)
  • Elastyczna siatka (286)
  • Definiowanie atrybutu max-width (287)
  • Nagłówek (289)
  • Elastyczne obrazki (291)
  • Struktura bocznego paska (294)
  • Wielokolumnowy układ strony w CSS3 (297)
  • Magia zapytań o media (298)
• Podsumowanie (306)

Skorowidz (307)

• Title: Kuloodporne strony internetowe. Jak poprawić elastyczność z wykorzystaniem XHTML-a i CSS. Wydanie III
• Author: Dan Cederholm
• Original title: Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with HTML5 and CSS3 (3rd Edition)
• Translation: Piotr Cieślak na podstawie: „Kuloodporne strony internetowe. Jak poprawić elastyczność z wykorzystaniem XHTML-a i CSS” w tłumaczeniu Agaty Bulandry oraz „Kuloodporne strony internetowe. Jak poprawić elastyczność z wykorzystaniem XHTML-a i CSS. Wydanie II” w tłumaczeniu Anny Trojan
• ISBN: 978-83-246-6954-7, 9788324669547
• Date of issue: 2013-02-19
• Format: Ebook
• Item ID: kuloo3
• Publisher: Helion