Table of contents :
Spis treści
O autorze
O korektorach merytorycznych
Podziękowania
Część I. Na dobry początek
Rozdział 1. Czym jest HTML5
Historia HTML
Wprowadzenie JavaScript
Koniec wojen przeglądarek
Dominacja wtyczek
Pojawienie się semantycznego HTML
Trend: standard HTML nie nadąża za sposobami użycia HTML
HTML5
Nowy standard, nowe standardy
Natywna obsługa multimediów
Zasoby programistyczne
Sieć semantyczna
Bieżący stan HTML5
Obsługa HTML5 w przeglądarkach
Wykorzystanie HTML5 na stronach
Struktura tej książki
Więcej informacji o HTML5
Podsumowanie
Rozdział 2. Przygotuj się
Wybór przeglądarki
Wybór edytora HTML
Wybór serwera internetowego
Pobranie Node.js
Pobranie modułu multipart
Pobranie przykładowych kodów
Podsumowanie
Rozdział 3. Wprowadzenie do HTML
Korzystanie z elementów
Dodatkowe elementy występujące w tym rozdziale
Puste elementy
Samozamykające znaczniki
Elementy void
Atrybuty elementów
Nadawanie elementom wielu atrybutów
Atrybuty boolowskie
Atrybuty autorskie
Tworzenie dokumentu HTML
Nadrzędna struktura
Metadane
Treść
Rodzice, dzieci, potomkowie i bracia
Typy elementów
Encje HTML
Globalne atrybuty HTML5
Atrybut accesskey
Atrybut class
Atrybut contenteditable
Atrybut contextmenu
Atrybut dir
Atrybut draggable
Atrybut dropzone
Atrybut hidden
Atrybut id
Atrybut lang
Atrybut spellcheck
Atrybut style
Atrybut tabindex
Atrybut title
Przydatne narzędzia HTML
Podsumowanie
Rozdział 4. Wprowadzenie do CSS
Definiowanie i nadawanie stylów
Właściwości CSS występujące w tym rozdziale
Zastosowanie stylu inline
Tworzenie osadzonego stylu
Zastosowanie zewnętrznego arkusza stylu
Kaskadowość i dziedziczenie stylów
Style przeglądarek
Style użytkowników
Kaskadowość stylów
Zmiana kolejności ważnymi stylami
Precyzja i ocena kolejności w przypadkach spornych
Dziedziczenie
Praca z kolorami w CSS
Szczegółowe wskazywanie kolorów
Długości w CSS
Długości bezwzględne
Długości względne
Inne jednostki w CSS
Miary kątów w CSS
Miary czasu w CSS
Sprawdzanie obsługi funkcji CSS
Przydatne narzędzia CSS
Przeglądarkowe raporty o stylach
Tworzenie selektorów przy użyciu SelectorGadget
Ulepszanie CSS z użyciem LESS
Framework CSS
Podsumowanie
Rozdział 5. Wprowadzenie do JavaScript
Przygotowanie do pracy z JavaScript
Deklaracje
Definiowanie i używanie funkcji
Definiowanie funkcji parametrami
Definiowanie funkcji, które zwracają wyniki
Zmienne i typy
Typy proste
Tworzenie obiektów
Praca z obiektami
Operatory JavaScript
Operatory równości i identyczności
Konwersja typów
Praca z tablicami
Literał tablicowy
Odczytywanie i modyfikowanie zawartości tablicy
Wyliczanie zawartości tablicy
Metody obsługi tablic
Obsługa błędów
Porównywanie wartości undefined i null
Sprawdzanie, czy zmienna lub właściwość ma wartość null lub undefined
Rozróżnianie między null i undefined
Przydatne narzędzia JavaScript
Debugery JavaScript
Biblioteki JavaScript
Podsumowanie
Część II. Elementy HTML
Rozdział 6. Elementy HTML — kontekst
Semantyka a prezentacja
Jak dobierać elementy
Im mniej, tym lepiej
Nie nadużywaj elementów
Wyrażaj się konkretnie i spójnie
Nie lekceważ odbiorcy
Struktura opisów elementów
Spis elementów
Elementy dokumentu i metadanych
Elementy tekstowe
Grupowanie treści
Dzielenie treści na sekcje
Tworzenie tabel
Tworzenie formularzy
Osadzanie zasobów
Niewdrożone elementy
Podsumowanie
Rozdział 7. Tworzenie dokumentów HTML
Ustanowienie podstawowej struktury dokumentu
Element doctype
Element html
Element head
Element body
Opatrzenie dokumentu elementami metadanych
Określenie tytułu dokumentu
Ustawienie podstawy dla względnych adresów URL
Opisanie dokumentu metadanymi
Definiowanie stylów CSS
Wskazywanie zewnętrznych zasobów
Pobieranie zasobów z wyprzedzeniem
Wykorzystanie elementów skryptowych
Element script
Element noscript
Podsumowanie
Rozdział 8. Elementy tekstowe
Tworzenie odnośników
Tworzenie odnośników zewnętrznych
Tworzenie względnych odnośników
Tworzenie odnośników wewnętrznych
Określanie kontekstu przeglądania
Oznaczanie treści podstawowymi elementami tekstowymi
Wskazywanie słów kluczowych i nazw produktów
Wyróżnianie
Wskazywanie wyrazów obcych i terminów technicznych
Wskazywanie nieścisłości i poprawek
Wskazywanie ważnego tekstu
Podkreślanie tekstu
Pomniejszony tekst
Indeksy górne i dolne
Łamanie wiersza
Wymuszanie łamania wiersza
Wskazanie odpowiedniego miejsca na łamanie wiersza
Przedstawianie danych wejściowych i wyjściowych
Odwołania, cytaty, definicje i skróty
Skróty
Definicje
Cytowanie treści z innego źródła
Odwołania do innych źródeł
Elementy obsługi językowej
Elementy ruby, rt i rp
Element bdo
Element bdi
Pozostałe elementy tekstowe
Wskazywanie zwyczajnego ciągu tekstu
Podświetlanie tekstu
Wskazywanie dodanych lub usuniętych treści
Wskazywanie godzin i dat
Podsumowanie
Rozdział 9. Grupowanie treści
Konieczność grupowania treści
Tworzenie akapitów
Element div
Preformatowana treść
Cytowanie innych źródeł
Przejścia tematyczne
Grupowanie treści w listach
Element ol
Element ul
Element li
Listy definicji
Listy o specyficznej numeracji
Ilustracje
Podsumowanie
Rozdział 10. Tworzenie sekcji
Podstawowe nagłówki
Ukrywanie podtytułów
Tworzenie sekcji
Nagłówki i stopki
Blok nawigacyjny
Artykuły
Paski boczne
Dane kontaktowe
Sekcja szczegółów
Podsumowanie
Rozdział 11. Elementy tabel
Podstawowa tabela
Komórki nagłówków
Nadanie tabeli struktury
Wskazywanie nagłówków i części głównej tabeli
Stopka
Nieregularne tabele
Łączenie nagłówków z komórkami
Podpis tabeli
Praca z kolumnami
Wskazywanie pojedynczych kolumn
Nadawanie obramowania elementowi table
Podsumowanie
Rozdział 12. Formularze
Podstawowy formularz
Definiowanie formularza
Oglądanie danych z formularza
Konfiguracja formularza
Konfiguracja atrybutu action formularza
Konfiguracja metody HTTP
Konfiguracja kodowania danych
Określanie uzupełniania formularza
Określenie docelowego miejsca wyświetlenia odpowiedzi formularza
Nazwa formularza
Nadawanie formularzom etykiet
Automatyczne uaktywnianie elementów input
Dezaktywacja poszczególnych elementów input
Grupowanie elementów formularza
Nadanie elementowi fieldset etykiety
Dezaktywowanie grup elementów input przy użyciu elementu fieldset
Element button
Zastosowanie elementu button do wysyłania formularzy
Zastosowanie elementu button do czyszczenia formularzy
Zastosowanie elementu button jako elementu generycznego
Praca z elementami spoza formularza
Podsumowanie
Rozdział 13. Konfiguracja elementu input
Zastosowanie elementu input do podawania danych tekstowych
Określanie rozmiaru elementu
Podawanie wartości i treści zastępczych
Lista danych
Tworzenie pól tekstowych nieaktywnych i tylko do odczytu
Określenie kierunku tekstu
Zastosowanie elementu input do pobierania haseł
Zastosowanie elementu input do tworzenia przycisków
Zastosowanie elementu input do ograniczenia rodzaju danych wejściowych
Zastosowanie elementu input do pobrania wartości numerycznej
Zastosowanie elementu input do uzyskania liczby z podanego zakresu
Zastosowanie elementu input do uzyskania wartości boolowskiej
Zastosowanie elementu input do tworzenia określonych list opcji
Zastosowanie elementu input do pobierania sformatowanych ciągów
Zastosowanie elementu input do pozyskiwania godzin i dat
Zastosowanie elementu input do pobierania danych o kolorze
Zastosowanie elementu input do pobierania haseł wyszukiwania
Zastosowanie elementu input do tworzenia ukrytych obiektów danych
Zastosowanie elementu input do tworzenia map i przycisków graficznych
Zastosowanie elementu input do wczytywania plików
Podsumowanie
Rozdział 14. Inne elementy formularzy i weryfikacja danych wejściowych
Inne elementy formularzy
Tworzenie list opcji
Pobieranie wielowierszowego tekstu
Wskazanie wyniku obliczenia
Generowanie par kluczy — publicznego i prywatnego
Weryfikacja danych wejściowych
Sprawdzenie, czy użytkownik podał wartość
Sprawdzenie, czy wartość mieści się w podanym zakresie
Sprawdzenie, czy wartość jest zgodna z wyrażeniem regularnym
Sprawdzenie, czy wartość jest adresem e-mailowym lub URL
Dezaktywacja weryfikacji danych
Podsumowanie
Rozdzial 15. Osadzanie zasobów
Osadzanie obrazów
Osadzanie odnośników graficznych
Tworzenie mapy obrazu działającej po stronie klienta
Osadzanie innych dokumentów HTML
Osadzanie zasobów przy użyciu wtyczek
Zastosowanie elementu embed
Zastosowanie elementów object i param
Inne zastosowania elementu object
Zastosowanie elementu object do osadzania obrazów
Zastosowanie elementu object do tworzenia map obrazu działających po stronie klienta
Zastosowanie elementu object jako kontekstu przeglądania
Osadzanie wyobrażeń wartości liczbowych
Paski postępu
Przedstawienie wartości z zakresu
Osadzanie innych elementów
Osadzanie zasobów audiowizualnych
Osadzanie grafiki
Podsumowanie
Część III. Kaskadowe arkusze stylów
Rozdział 16. Wprowadzenie do CSS
Standaryzacja CSS
Model polowy
Spis selektorów
Spis właściwości
Właściwości obramowania i tła
Właściwości modelu polowego
Właściwości layoutu
Właściwości tekstu
Właściwości przejść, animacji i przekształceń
Inne właściwości
Podsumowanie
Rozdział 17. Selektory CSS — część I
Podstawowe selektory CSS
Wybranie wszystkich elementów
Wybieranie elementów według typu
Wybieranie elementów według klasy
Wybieranie elementów według id
Wybieranie elementów według atrybutów
Łączenie selektorów
Tworzenie zestawień selektorów
Wybieranie potomków
Wybieranie dzieci
Wybieranie braci
Selektory pseudoelementów
Selektor ::first-line
Selektor ::first-letter
Selektory :before i :after
Licznik CSS
Podsumowanie
Rozdział 18. Selektory CSS — część II
Strukturalne selektory pseudoklas
Selektor :root
Selektor dzieci
Selektory n-tego dziecka
Selektory pseudoklas interfejsu użytkownika
Wybieranie aktywnych bądź nieaktywnych elementów
Wybieranie zaznaczonych elementów
Wybieranie elementów domyślnych
Wybieranie elementów input o poprawnych i niepoprawnych wartościach
Wybieranie elementów input na podstawie zakresów
Wybór elementów input według obecności atrybutu required
Dynamiczne selektory pseudoklas
Selektory :link i :visited
Selektor :hover
Selektor :active
Selektor :focus
Inne pseudoselektory
Selektor negacji
Selektor :empty
Selektor :lang
Selektor :target
Podsumowanie
Rozdział 19. Obramowania i tła
Nadanie obramowania
Szerokość obramowania
Styl obramowania
Nałożenie obramowania na jedną krawędź
Właściwości zbiorcze obramowania
Obramowania z zaokrąglonymi rogami
Obrazy w obramowaniu
Tła elementów
Kolor i obraz tła
Rozmiar obrazu tła
Położenie obrazu tła
Zaczepienie obrazu tła
Pozycja początkowa tła i styl przycinania
Właściwość zbiorcza background
Cienie
Obrysy
Podsumowanie
Rozdział 20. Model polowy
Dopełnienia
Marginesy
Rozmiar elementu
Pole wymiarów
Określanie minimalnych i maksymalnych wielkości
Przepełnienie
Widoczność elementu
Typy pola elementu
Elementy blokowe
Elementy liniowe
Elementy liniowo-blokowe
Elementy run-in
Ukrywanie elementów
Pływające pola
Zapobieganie stykaniu się elementów
Podsumowanie
Rozdział 21. Tworzenie layoutów
Pozycjonowanie
Rodzaje pozycjonowania
Kolejność elementów
Layouty wielokolumnowe
Layouty flexboksowe
Prosty flexbox
Użycie wielu elastycznych elementów
Przestrzeń pionowa
Maksymalne wielkości
Layouty tabelowe
Podsumowanie
Rozdział 21. Stylizacja tekstu
Podstawowe style tekstu
Wyrównywanie i justowanie tekstu
Białe znaki
Kierunek tekstu
Odstępy między wyrazami, literami i wierszami
Dzielenie wyrazów
Wcięcie pierwszego wiersza
Dekorowanie i przekształcanie tekstu
Nadawanie tekstowi cienia
Fonty
Wybór fonta
Rozmiar fonta
Styl i grubość fonta
Fonty internetowe
Podsumowanie
Rozdział 23. Przejścia, animacje i przekształcenia
Przejścia
Odwrócone przejścia
Wybór sposobu obliczania wartości pośrednich
Animacje
Klatki kluczowe
Określenie kierunku powtórzeń
Stan końcowy
Animowanie elementów layoutu
Wielokrotne wykorzystanie klatek kluczowych
Nadawanie wielu animacji wielu elementom
Wstrzymywanie i wznawianie animacji
Przekształcenia
Nadanie przekształcenia
Określenie punktu wyjścia
Utworzenie animacji lub przejścia z przekształceniem
Podsumowanie
Rozdział 24. Inne właściwości i funkcje CSS
Określenie koloru i krycia elementu
Określenie koloru pierwszego planu
Określenie krycia elementu
Obstylowanie tabel
Kondensowanie obramowania tabel
Konfiguracja oddzielonych krawędzi
Obsługa pustych komórek
Położenie podpisu
Określenie układu tabeli
Stylizacja list
Określenie typu znaczników listy
Użycie obrazu jako znacznika listy
Określenie położenia znacznika
Określenie stylu kursora
Podsumowanie
Część IV. Praca z DOM
Rozdział 25. Wprowadzenie do DOM
Obiektowy model dokumentu
Poziomy DOM i zgodność
Testowanie obsługi funkcji DOM
Spis funkcji DOM
Właściwości Document
Właściwości Window
Właściwości HTMLElement
Właściwości CSS w DOM
Zdarzenia DOM
Podsumowanie
Rozdział 26. Obiekt Document
Metadane dokumentu
Pobieranie informacji z dokumentu
Obiekt Location
Odczytywanie i zapisywanie ciasteczek
Stan żądania
Pozyskiwanie szczegółów o implementacji DOM
Znajdowanie obiektów elementów HTML
Zastosowanie właściwości do pozyskiwania obiektów elementów
Pozyskanie nazwanego elementu przy użyciu notacji tablicowej
Przeszukiwanie elementów
Przeszukiwanie łańcuchowe
Nawigacja w drzewie DOM
Podsumowanie
Rozdział 27. Obiekt Window
Pozyskanie obiektu Window
Pozyskiwanie informacji o oknie
Interakcja z oknem
Wyświetlanie zapytań
Pozyskiwanie ogólnych informacji
Praca z historią przeglądarki
Poruszanie się po historii przeglądania
Wprowadzenie nowej pozycji do historii
Dodanie nowej pozycji z adresem innego dokumentu
Zapisywanie kompleksowych stanów w historii
Zastąpienie pozycji w historii przeglądarki
Przekazywanie komunikatów między dokumentami
Liczniki
Podsumowanie
Rozdział 28. Praca z elementami DOM
Praca z obiektami elementów
Praca z klasami
Praca z atrybutami elementu
Praca z tekstem
Modyfikacja modelu
Tworzenie i usuwanie elementów
Powielanie elementów
Przenoszenie elementów
Porównywanie obiektów elementów
Praca z fragmentami HTML
Wstawienie elementu do bloku tekstu
Podsumowanie
Rozdział 29. Stylizacja elementów DOM
Praca z arkuszami stylów
Pobieranie podstawowych informacji o arkuszach stylów
Praca z ograniczeniami medium
Dezaktywowanie arkuszy stylów
Praca z wybranymi stylami
Praca ze stylami elementów
Praca z obiektami CSSStyleDeclaration
Praca z właściwościami pomocniczymi
Praca ze standardowymi właściwościami
Zastosowanie szczegółowych obiektów CSS w DOM
Praca z obliczonymi stylami
Podsumowanie
Rozdział 30. Zdarzenia
Wykorzystanie prostych procedur obsługi zdarzeń
Wprowadzenie prostej procedury obsługi zdarzeń inline
Wprowadzenie prostej procedury obsługi zdarzeń
Zastosowanie DOM i obiektu Event
Odróżnianie zdarzeń według typu
Przepływ zdarzeń
Praca ze zdarzeniami, które można anulować
Praca ze zdarzeniami HTML
Zdarzenia obiektów Document i Window
Praca ze zdarzeniami myszy
Praca ze zdarzeniami fokusowania
Praca ze zdarzeniami klawiatury
Praca ze zdarzeniami formularza
Podsumowanie
Rozdział 31. Obiekty poszczególnych elementów
Obiekty dokumentu i metadanych
Element base
Element body
Element link
Element meta
Element script
Element style
Element title
Inne elementy dokumentu i metadanych
Elementy tekstowe
Element a
Elementy del i ins
Element q
Element time
Inne elementy tekstowe
Elementy grupujące
Element blockquote
Element li
Element ol
Inne elementy grupujące
Elementy sekcji
Element details
Inne elementy sekcji
Elementy tabeli
Elementy col i colgroup
Element table
Elementy thead, tbody i tfoot
Element th
Element tr
Inne elementy tabeli
Elementy formularza
Element button
Element datalist
Element fieldset
Element form
Element input
Element label
Element legend
Element optgroup
Element option
Element output
Element select
Element textarea
Elementy content
Element area
Element embed
Element iframe
Elementy img
Element map
Element meter
Element object
Element param
Element progress
Podsumowanie
Część V. Zaawansowane funkcje
Rozdział 32. Wprowadzenie do Ajaksa. Część I
Początki z Ajaksem
Obsługa odpowiedzi
Problem z Operą
Zdarzenia Ajaksa
Obsługa błędów
Obsługa błędów wejściowych
Obsługa błędów żądań
Obsługa błędów aplikacji
Pobieranie i definiowanie nagłówków
Zmiana metody HTTP żądania
Wyłączenie buforowania treści
Odczytywanie nagłówków odpowiedzi
Wydawanie żądań Ajaksa między różnymi źródłami
Nagłówek żądania źródła
Zaawansowane funkcje CORS
Przerywanie żądań
Podsumowanie
Rozdział 33. Wprowadzenie do Ajaksa. Część II
Przygotowanie się do wysłania danych serwerowi
Utworzenie serwera
Problem
Wysyłanie danych formularza
Wysyłanie danych formularza obiektem FormData
Utworzenie obiektu FormData
Modyfikacja obiektu FormData
Wysyłanie danych JSON
Wysyłanie plików
Śledzenie postępów wczytywania
Żądanie i przetwarzanie różnych typów treści
Pobieranie fragmentów HTML
Pobieranie danych XML
Pobieranie danych JSON
Podsumowanie
Rozdział 34. Multimedia
Element video
Wczytywanie filmu z wyprzedzeniem
Wyświetlanie obrazu zastępczego
Rozmiar filmu
Źródło i format filmu
Element track
Element audio
Praca z osadzonymi mediami za pośrednictwem DOM
Pobieranie informacji o mediach
Określenie możliwości odtworzenia multimediów
Kontrolowanie sposobu odtwarzania
Podsumowanie
Rozdział 35. Element canvas. Część I
Początki z elementem canvas
Uzyskanie kontekstu płótna
Rysowanie prostokątów
Ustawienie stanu rysowania
Styl rysowania styku linii
Styl wypełnienia kształtu i rysowania linii
Gradienty
Gradient promieniowy
Wzory
Zapisywanie i przywracanie stanu rysowania
Rysowanie obrazów
Obrazy filmowe
Obrazy z elementu canvas
Podsumowanie
Rozdział 36. Element canvas. Część II
Rysowanie z użyciem ścieżek
Rysowanie ścieżek liniami
Rysowanie prostokątów
Rysowanie łuków
Wykorzystanie metody arcTo
Wykorzystanie metody arc
Rysowanie krzywych Béziera
Rysowanie sześciennych krzywych Béziera
Rysowanie kwadratowych krzywych Béziera
Utworzenie obszaru przycinania
Rysowanie tekstu
Wykorzystanie efektów i przekształceń
Cienie
Przezroczystość
Kompozycja
Przekształcenia
Podsumowanie
Rozdział 37. Funkcja przeciągania i upuszczania
Tworzenie elementów źródłowych
Obsługa zdarzeń przeciągania
Utworzenie obszaru docelowego
Przyjmowanie upuszczonych treści
Praca z obiektem DataTransfer
Filtrowanie przeciąganych elementów według treści
Przeciąganie i upuszczanie plików
Podsumowanie
Rozdział 38. Geolokalizacja
Wykorzystanie geolokalizacji
Pobranie informacji o bieżącej lokalizacji
Obsługa błędów funkcji geolokalizacji
Definiowanie opcji geolokalizacji
Śledzenie lokalizacji
Podsumowanie
Rozdział 39. Magazynowanie danych
Magazyn lokalny
Nasłuchiwanie zdarzeń magazynowania
Magazyn sesji
Podsumowanie
Rozdział 40. Aplikacje internetowe działające offline
Problem
Utworzenie manifestu
Określanie sekcji manifestu
Sekcja FALLBACK
Sekcja NETWORK
Sprawdzenie stanu przeglądarki
Praca z buforem offline
Aktualizowanie
Pobranie aktualizacji
Zastosowanie aktualizacji
Podsumowanie
Skorowidz
Citation preview
Tytuł oryginału: The Definitive Guide to HTML5 Tłumaczenie: Maksymilian Gutowski ISBN: 978-83-246-7181-6 Original edition copyright © 2011 by Adam Freeman. All rights reserved. Polish edition copyright © 2012 by Helion S.A. All rights reserved. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: [email protected] WWW: http://helion.pl (księgarnia internetowa, katalog książek)
Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/htm5pe_ebook Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Poleć książkę na Facebook.com
• Księgarnia internetowa
• Kup w wersji papierowej
• Lubię to! » Nasza społeczność
• Oceń książkę
Mojej ukochanej żonie, Jacqui Griffyth — Adam Freeman
Spis treści
O autorze ................................................................................................................................. 23 O korektorach merytorycznych . .............................................................................................. 24 Podziękowania ........................................................................................................................ 25 Część I
Na dobry początek . ........................................................................................... 27
Rozdział 1
Czym jest HTML5 . ............................................................................................. 29 Historia HTML . .............................................................................................................................29 Wprowadzenie JavaScript . ...........................................................................................................30 Koniec wojen przeglądarek . .........................................................................................................30 Dominacja wtyczek . .......................................................................................................................30 Pojawienie się semantycznego HTML . .......................................................................................31 Trend: standard HTML nie nadąża za sposobami użycia HTML ...........................................31 HTML5 . ...........................................................................................................................................31 Nowy standard, nowe standardy . ................................................................................................32 Natywna obsługa multimediów . ..................................................................................................32 Zasoby programistyczne . ..............................................................................................................32 Sieć semantyczna . ..........................................................................................................................33 Bieżący stan HTML5 . ....................................................................................................................33 Obsługa HTML5 w przeglądarkach . ...........................................................................................33 Wykorzystanie HTML5 na stronach . .........................................................................................33 Struktura tej książki . ......................................................................................................................33 Więcej informacji o HTML5 . .......................................................................................................34 Podsumowanie . ..............................................................................................................................34
Rozdział 2
Przygotuj się . .................................................................................................... 35 Wybór przeglądarki . ......................................................................................................................35 Wybór edytora HTML . .................................................................................................................36 Wybór serwera internetowego . ....................................................................................................36
SPIS TREŚCI
Pobranie Node.js . ...........................................................................................................................36 Pobranie modułu multipart . .................................................................................................36 Pobranie przykładowych kodów . ................................................................................................37 Podsumowanie . ..............................................................................................................................37
Rozdział 3
Wprowadzenie do HTML . ................................................................................. 39 Korzystanie z elementów . .............................................................................................................40 Dodatkowe elementy występujące w tym rozdziale . ................................................................41 Puste elementy . ..............................................................................................................................42 Samozamykające znaczniki . .........................................................................................................42 Elementy void . ................................................................................................................................43 Atrybuty elementów . .....................................................................................................................44 Nadawanie elementom wielu atrybutów . ...................................................................................44 Atrybuty boolowskie . ....................................................................................................................44 Atrybuty autorskie . ........................................................................................................................45 Tworzenie dokumentu HTML . ...................................................................................................45 Nadrzędna struktura . ....................................................................................................................46 Metadane . ........................................................................................................................................46 Treść .................................................................................................................................................47 Rodzice, dzieci, potomkowie i bracia . .........................................................................................47 Typy elementów . ............................................................................................................................48 Encje HTML . ..................................................................................................................................48 Globalne atrybuty HTML5 . ..........................................................................................................49 Atrybut accesskey . .........................................................................................................................49 Atrybut class ...................................................................................................................................50 Atrybut contenteditable . ...............................................................................................................52 Atrybut contextmenu . ...................................................................................................................53 Atrybut dir ......................................................................................................................................53 Atrybut draggable . .........................................................................................................................53 Atrybut dropzone . .........................................................................................................................53 Atrybut hidden . ..............................................................................................................................53 Atrybut id . .......................................................................................................................................55 Atrybut lang ....................................................................................................................................55 Atrybut spellcheck . ........................................................................................................................56 Atrybut style . ..................................................................................................................................57 Atrybut tabindex . ...........................................................................................................................57 Atrybut title . ...................................................................................................................................58 Przydatne narzędzia HTML . ........................................................................................................59 Podsumowanie . ..............................................................................................................................59
Rozdział 4
Wprowadzenie do CSS . ..................................................................................... 61 Definiowanie i nadawanie stylów . ...............................................................................................61 Właściwości CSS występujące w tym rozdziale . .................................................................62 Zastosowanie stylu inline . ......................................................................................................62 Tworzenie osadzonego stylu . ................................................................................................63 Zastosowanie zewnętrznego arkusza stylu . .........................................................................65
6
SPIS TREŚCI
Kaskadowość i dziedziczenie stylów . ..........................................................................................67 Style przeglądarek . .........................................................................................................................67 Style użytkowników . ......................................................................................................................68 Kaskadowość stylów . .....................................................................................................................69 Zmiana kolejności ważnymi stylami . ..........................................................................................69 Precyzja i ocena kolejności w przypadkach spornych . .............................................................70 Dziedziczenie . .................................................................................................................................73 Praca z kolorami w CSS . ...............................................................................................................74 Szczegółowe wskazywanie kolorów . ....................................................................................75 Długości w CSS . .............................................................................................................................75 Długości bezwzględne . ..................................................................................................................76 Długości względne . ........................................................................................................................77 Inne jednostki w CSS . ....................................................................................................................82 Miary kątów w CSS . .......................................................................................................................82 Miary czasu w CSS . ........................................................................................................................82 Sprawdzanie obsługi funkcji CSS . ...............................................................................................83 Przydatne narzędzia CSS . .............................................................................................................83 Przeglądarkowe raporty o stylach . ..............................................................................................83 Tworzenie selektorów przy użyciu SelectorGadget . .................................................................83 Ulepszanie CSS z użyciem LESS . .................................................................................................84 Framework CSS . .............................................................................................................................84 Podsumowanie . ..............................................................................................................................85
Rozdział 5
Wprowadzenie do JavaScript . .......................................................................... 87 Przygotowanie do pracy z JavaScript . .........................................................................................88 Deklaracje . ......................................................................................................................................89 Definiowanie i używanie funkcji . ................................................................................................90 Definiowanie funkcji parametrami . ............................................................................................90 Definiowanie funkcji, które zwracają wyniki . ...........................................................................91 Zmienne i typy . ..............................................................................................................................92 Typy proste . ....................................................................................................................................92 Tworzenie obiektów . .....................................................................................................................93 Praca z obiektami . ..........................................................................................................................95 Operatory JavaScript . ....................................................................................................................99 Operatory równości i identyczności . ..........................................................................................99 Konwersja typów . ........................................................................................................................102 Praca z tablicami . .........................................................................................................................104 Literał tablicowy ...........................................................................................................................105 Odczytywanie i modyfikowanie zawartości tablicy . ...............................................................105 Wyliczanie zawartości tablicy . ...................................................................................................106 Metody obsługi tablic . .................................................................................................................106 Obsługa błędów . ...........................................................................................................................106 Porównywanie wartości undefined i null . ................................................................................108 Sprawdzanie, czy zmienna lub właściwość ma wartość null lub undefined .................110 Rozróżnianie między null i undefined . ..............................................................................111
7
SPIS TREŚCI
Przydatne narzędzia JavaScript . .................................................................................................111 Debugery JavaScript . ...................................................................................................................111 Biblioteki JavaScript . ...................................................................................................................112 Podsumowanie .............................................................................................................................112
Część II Rozdział 6
Elementy HTML . .............................................................................................. 113 Elementy HTML — kontekst . .......................................................................... 115 Semantyka a prezentacja . ............................................................................................................115 Jak dobierać elementy . ................................................................................................................116 Im mniej, tym lepiej . ...................................................................................................................116 Nie nadużywaj elementów . .........................................................................................................116 Wyrażaj się konkretnie i spójnie . ..............................................................................................116 Nie lekceważ odbiorcy . ...............................................................................................................117 Struktura opisów elementów . ....................................................................................................117 Spis elementów .............................................................................................................................118 Elementy dokumentu i metadanych . ........................................................................................118 Elementy tekstowe .......................................................................................................................118 Grupowanie treści ........................................................................................................................120 Dzielenie treści na sekcje . ...........................................................................................................120 Tworzenie tabel ............................................................................................................................121 Tworzenie formularzy . ................................................................................................................121 Osadzanie zasobów ......................................................................................................................122 Niewdrożone elementy . ..............................................................................................................123 Podsumowanie .............................................................................................................................123
Rozdział 7
Tworzenie dokumentów HTML . ...................................................................... 125 Ustanowienie podstawowej struktury dokumentu . ................................................................126 Element doctype . ..........................................................................................................................126 Element html ................................................................................................................................127 Element head ................................................................................................................................127 Element body ................................................................................................................................128 Opatrzenie dokumentu elementami metadanych . .................................................................129 Określenie tytułu dokumentu . ...................................................................................................129 Ustawienie podstawy dla względnych adresów URL . ............................................................130 Opisanie dokumentu metadanymi . ..........................................................................................131 Definiowanie stylów CSS . ...........................................................................................................134 Wskazywanie zewnętrznych zasobów . .....................................................................................139 Pobieranie zasobów z wyprzedzeniem . ....................................................................................142 Wykorzystanie elementów skryptowych . .................................................................................142 Element script ...............................................................................................................................142 Element noscript ..........................................................................................................................148 Podsumowanie .............................................................................................................................150
Rozdział 8
Elementy tekstowe . ........................................................................................ 151 Tworzenie odnośników . ..............................................................................................................152 Tworzenie odnośników zewnętrznych . .............................................................................153 Tworzenie względnych odnośników . .................................................................................154
8
SPIS TREŚCI
Tworzenie odnośników wewnętrznych . ...................................................................................155 Określanie kontekstu przeglądania . ..........................................................................................155 Oznaczanie treści podstawowymi elementami tekstowymi . .................................................156 Wskazywanie słów kluczowych i nazw produktów . ...............................................................156 Wyróżnianie .................................................................................................................................157 Wskazywanie wyrazów obcych i terminów technicznych . ....................................................158 Wskazywanie nieścisłości i poprawek . .....................................................................................159 Wskazywanie ważnego tekstu . ...................................................................................................160 Podkreślanie tekstu ......................................................................................................................161 Pomniejszony tekst . .....................................................................................................................162 Indeksy górne i dolne . .................................................................................................................163 Łamanie wiersza . ..........................................................................................................................164 Wymuszanie łamania wiersza . ...................................................................................................164 Wskazanie odpowiedniego miejsca na łamanie wiersza . .......................................................165 Przedstawianie danych wejściowych i wyjściowych . ..............................................................167 Odwołania, cytaty, definicje i skróty . ........................................................................................167 Skróty .............................................................................................................................................168 Definicje ........................................................................................................................................169 Cytowanie treści z innego źródła . ..............................................................................................169 Odwołania do innych źródeł . .....................................................................................................171 Elementy obsługi językowej . ......................................................................................................171 Elementy ruby, rt i rp . .................................................................................................................172 Element bdo ..................................................................................................................................173 Element bdi ...................................................................................................................................174 Pozostałe elementy tekstowe . .....................................................................................................176 Wskazywanie zwyczajnego ciągu tekstu . ..................................................................................176 Podświetlanie tekstu . ...................................................................................................................177 Wskazywanie dodanych lub usuniętych treści . .......................................................................178 Wskazywanie godzin i dat . .........................................................................................................180 Podsumowanie . ............................................................................................................................181
Rozdział 9
Grupowanie treści . ......................................................................................... 183 Konieczność grupowania treści . ................................................................................................184 Tworzenie akapitów . ...................................................................................................................185 Element div ...................................................................................................................................186 Preformatowana treść . ................................................................................................................188 Cytowanie innych źródeł . ...........................................................................................................189 Przejścia tematyczne . ...................................................................................................................191 Grupowanie treści w listach . ......................................................................................................193 Element ol .....................................................................................................................................193 Element ul .....................................................................................................................................195 Element li ......................................................................................................................................196 Listy definicji ................................................................................................................................197 Listy o specyficznej numeracji . ..................................................................................................199 Ilustracje ........................................................................................................................................200 Podsumowanie .............................................................................................................................202
9
SPIS TREŚCI
Rozdział 10 Tworzenie sekcji . ............................................................................................ 203 Podstawowe nagłówki . ................................................................................................................204 Ukrywanie podtytułów . ..............................................................................................................205 Tworzenie sekcji ...........................................................................................................................209 Nagłówki i stopki .........................................................................................................................211 Blok nawigacyjny .........................................................................................................................215 Artykuły ........................................................................................................................................218 Paski boczne .................................................................................................................................220 Dane kontaktowe . ........................................................................................................................223 Sekcja szczegółów ........................................................................................................................224 Podsumowanie .............................................................................................................................227
Rozdział 11 Elementy tabel . .............................................................................................. 229 Podstawowa tabela . ......................................................................................................................229 Komórki nagłówków . ..................................................................................................................232 Nadanie tabeli struktury . ............................................................................................................234 Wskazywanie nagłówków i części głównej tabeli . ...................................................................235 Stopka ............................................................................................................................................236 Nieregularne tabele . .....................................................................................................................238 Łączenie nagłówków z komórkami . ..........................................................................................242 Podpis tabeli .................................................................................................................................243 Praca z kolumnami . .....................................................................................................................245 Wskazywanie pojedynczych kolumn . ................................................................................247 Nadawanie obramowania elementowi table . ...........................................................................249 Podsumowanie .............................................................................................................................251
Rozdział 12
Formularze . ..................................................................................................... 253 Podstawowy formularz . ..............................................................................................................254 Definiowanie formularza ............................................................................................................255 Oglądanie danych z formularza . ................................................................................................256 Konfiguracja formularza . ............................................................................................................258 Konfiguracja atrybutu action formularza . ...............................................................................258 Konfiguracja metody HTTP . ......................................................................................................259 Konfiguracja kodowania danych . ..............................................................................................259 Określanie uzupełniania formularza . .......................................................................................261 Określenie docelowego miejsca wyświetlenia odpowiedzi formularza ................................262 Nazwa formularza . .......................................................................................................................263 Nadawanie formularzom etykiet . ..............................................................................................264 Automatyczne uaktywnianie elementów input . .....................................................................265 Dezaktywacja poszczególnych elementów input . ...................................................................266 Grupowanie elementów formularza . ........................................................................................267 Nadanie elementowi fieldset etykiety . ......................................................................................268 Dezaktywowanie grup elementów input przy użyciu elementu fieldset . ............................269 Element button .............................................................................................................................270 Zastosowanie elementu button do wysyłania formularzy . .............................................271 Zastosowanie elementu button do czyszczenia formularzy . ..........................................272 Zastosowanie elementu button jako elementu generycznego . .......................................273
10
SPIS TREŚCI
Praca z elementami spoza formularza . .....................................................................................274 Podsumowanie . ............................................................................................................................275
Rozdział 13 Konfiguracja elementu input . ......................................................................... 277 Zastosowanie elementu input do podawania danych tekstowych . ......................................278 Określanie rozmiaru elementu . .................................................................................................278 Podawanie wartości i treści zastępczych . .................................................................................280 Lista danych ..................................................................................................................................281 Tworzenie pól tekstowych nieaktywnych i tylko do odczytu . ...............................................284 Określenie kierunku tekstu . .......................................................................................................285 Zastosowanie elementu input do pobierania haseł . ................................................................285 Zastosowanie elementu input do tworzenia przycisków . ......................................................287 Zastosowanie elementu input do ograniczenia rodzaju danych wejściowych ....................289 Zastosowanie elementu input do pobrania wartości numerycznej . .....................................290 Zastosowanie elementu input do uzyskania liczby z podanego zakresu . ............................291 Zastosowanie elementu input do uzyskania wartości boolowskiej . .....................................292 Zastosowanie elementu input do tworzenia określonych list opcji . ....................................295 Zastosowanie elementu input do pobierania sformatowanych ciągów . ..............................296 Zastosowanie elementu input do pozyskiwania godzin i dat . ...............................................298 Zastosowanie elementu input do pobierania danych o kolorze . ..........................................300 Zastosowanie elementu input do pobierania haseł wyszukiwania . ......................................302 Zastosowanie elementu input do tworzenia ukrytych obiektów danych . ...........................303 Zastosowanie elementu input do tworzenia map i przycisków graficznych ........................305 Zastosowanie elementu input do wczytywania plików . .........................................................307 Podsumowanie .............................................................................................................................308
Rozdział 14 Inne elementy formularzy i weryfikacja danych wejściowych ........................ 309 Inne elementy formularzy . .........................................................................................................309 Tworzenie list opcji .....................................................................................................................309 Pobieranie wielowierszowego tekstu . .......................................................................................313 Wskazanie wyniku obliczenia . ...................................................................................................316 Generowanie par kluczy — publicznego i prywatnego . .........................................................316 Weryfikacja danych wejściowych . .............................................................................................317 Sprawdzenie, czy użytkownik podał wartość . .........................................................................318 Sprawdzenie, czy wartość mieści się w podanym zakresie . ...................................................319 Sprawdzenie, czy wartość jest zgodna z wyrażeniem regularnym . .......................................321 Sprawdzenie, czy wartość jest adresem e-mailowym lub URL . ............................................322 Dezaktywacja weryfikacji danych . .............................................................................................322 Podsumowanie .............................................................................................................................323
Rozdział 15
Osadzanie zasobów . ....................................................................................... 325 Osadzanie obrazów . .....................................................................................................................326 Osadzanie odnośników graficznych . ........................................................................................327 Tworzenie mapy obrazu działającej po stronie klienta . .........................................................329 Osadzanie innych dokumentów HTML . .................................................................................331
11
SPIS TREŚCI
Osadzanie zasobów przy użyciu wtyczek . ................................................................................333 Zastosowanie elementu embed . .................................................................................................334 Zastosowanie elementów object i param . ................................................................................334 Inne zastosowania elementu object . ..........................................................................................337 Zastosowanie elementu object do osadzania obrazów . ...................................................337 Zastosowanie elementu object do tworzenia map obrazu działających po stronie klienta . .......................................................................................338 Zastosowanie elementu object jako kontekstu przeglądania . ........................................338 Osadzanie wyobrażeń wartości liczbowych . ............................................................................339 Paski postępu ................................................................................................................................339 Przedstawienie wartości z zakresu . ...........................................................................................340 Osadzanie innych elementów . ...................................................................................................342 Osadzanie zasobów audiowizualnych . ......................................................................................342 Osadzanie grafiki . ........................................................................................................................342 Podsumowanie . ............................................................................................................................342
Część III Rozdział 16
Kaskadowe arkusze stylów . ............................................................................ 343 Wprowadzenie do CSS . ................................................................................... 345 Standaryzacja CSS ........................................................................................................................345 Model polowy ...............................................................................................................................346 Spis selektorów .............................................................................................................................346 Spis właściwości . ..........................................................................................................................349 Właściwości obramowania i tła . ................................................................................................349 Właściwości modelu polowego . .................................................................................................350 Właściwości layoutu . ...................................................................................................................351 Właściwości tekstu . ......................................................................................................................352 Właściwości przejść, animacji i przekształceń . ........................................................................353 Inne właściwości ..........................................................................................................................353 Podsumowanie . ............................................................................................................................354
Rozdział 17 Selektory CSS — część I . ................................................................................. 355 Podstawowe selektory CSS . ........................................................................................................356 Wybranie wszystkich elementów . .............................................................................................356 Wybieranie elementów według typu . .......................................................................................357 Wybieranie elementów według klasy . ......................................................................................358 Wybieranie elementów według id . ............................................................................................359 Wybieranie elementów według atrybutów . .............................................................................360 Łączenie selektorów . ....................................................................................................................363 Tworzenie zestawień selektorów . ..............................................................................................364 Wybieranie potomków . ..............................................................................................................365 Wybieranie dzieci ........................................................................................................................366 Wybieranie braci ..........................................................................................................................368 Selektory pseudoelementów . ......................................................................................................369 Selektor ::first-line . ................................................................................................................370 Selektor ::first-letter . .............................................................................................................370
12
SPIS TREŚCI
Selektory :before i :after . .............................................................................................................372 Licznik CSS ...................................................................................................................................373 Podsumowanie .............................................................................................................................374
Rozdział 18 Selektory CSS — część II . ................................................................................ 375 Strukturalne selektory pseudoklas . ...........................................................................................376 Selektor :root ................................................................................................................................376 Selektor dzieci ...............................................................................................................................377 Selektory n-tego dziecka . ............................................................................................................381 Selektory pseudoklas interfejsu użytkownika . .........................................................................382 Wybieranie aktywnych bądź nieaktywnych elementów . .......................................................382 Wybieranie zaznaczonych elementów . .....................................................................................383 Wybieranie elementów domyślnych . ........................................................................................384 Wybieranie elementów input o poprawnych i niepoprawnych wartościach ......................385 Wybieranie elementów input na podstawie zakresów . ..........................................................386 Wybór elementów input według obecności atrybutu required . ...........................................387 Dynamiczne selektory pseudoklas . ...........................................................................................388 Selektory :link i :visited . ..............................................................................................................388 Selektor :hover ..............................................................................................................................389 Selektor :active ..............................................................................................................................390 Selektor :focus ...............................................................................................................................391 Inne pseudoselektory . .................................................................................................................392 Selektor negacji ............................................................................................................................392 Selektor :empty .............................................................................................................................393 Selektor :lang ................................................................................................................................394 Selektor :target ..............................................................................................................................394 Podsumowanie .............................................................................................................................395
Rozdział 19
Obramowania i tła . ......................................................................................... 397 Nadanie obramowania . ...............................................................................................................398 Szerokość obramowania . ............................................................................................................399 Styl obramowania ........................................................................................................................399 Nałożenie obramowania na jedną krawędź . ............................................................................399 Właściwości zbiorcze obramowania . ........................................................................................401 Obramowania z zaokrąglonymi rogami . ..................................................................................402 Obrazy w obramowaniu . ............................................................................................................404 Tła elementów . .............................................................................................................................409 Kolor i obraz tła ...........................................................................................................................409 Rozmiar obrazu tła . .....................................................................................................................410 Położenie obrazu tła . ...................................................................................................................411 Zaczepienie obrazu tła ................................................................................................................412 Pozycja początkowa tła i styl przycinania . ...............................................................................413 Właściwość zbiorcza background . ............................................................................................415 Cienie .............................................................................................................................................416 Obrysy ...........................................................................................................................................418 Podsumowanie .............................................................................................................................421
13
SPIS TREŚCI
Rozdział 20 Model polowy . ............................................................................................... 423 Dopełnienia ..................................................................................................................................424 Marginesy ......................................................................................................................................426 Rozmiar elementu . .......................................................................................................................427 Pole wymiarów .............................................................................................................................429 Określanie minimalnych i maksymalnych wielkości . ............................................................430 Przepełnienie ................................................................................................................................431 Widoczność elementu . ................................................................................................................434 Typy pola elementu . ....................................................................................................................435 Elementy blokowe ........................................................................................................................435 Elementy liniowe .........................................................................................................................437 Elementy liniowo-blokowe . ........................................................................................................439 Elementy run-in ...........................................................................................................................439 Ukrywanie elementów . ...............................................................................................................442 Pływające pola . .............................................................................................................................442 Zapobieganie stykaniu się elementów . ..............................................................................445 Podsumowanie . ............................................................................................................................448
Rozdział 21 Tworzenie layoutów . ...................................................................................... 449 Pozycjonowanie ...........................................................................................................................450 Rodzaje pozycjonowania . ...........................................................................................................450 Kolejność elementów . .................................................................................................................452 Layouty wielokolumnowe . .........................................................................................................454 Layouty flexboksowe ...................................................................................................................456 Prosty flexbox ...............................................................................................................................459 Użycie wielu elastycznych elementów . .....................................................................................460 Przestrzeń pionowa .....................................................................................................................461 Maksymalne wielkości ................................................................................................................463 Layouty tabelowe . ........................................................................................................................465 Podsumowanie .............................................................................................................................467
Rozdział 22 Stylizacja tekstu . ............................................................................................. 469 Podstawowe style tekstu . ............................................................................................................470 Wyrównywanie i justowanie tekstu . .........................................................................................470 Białe znaki .....................................................................................................................................472 Kierunek tekstu ............................................................................................................................474 Odstępy między wyrazami, literami i wierszami . ...................................................................475 Dzielenie wyrazów . ......................................................................................................................476 Wcięcie pierwszego wiersza . ......................................................................................................478 Dekorowanie i przekształcanie tekstu . .....................................................................................479 Nadawanie tekstowi cienia . ........................................................................................................480 Fonty ..............................................................................................................................................482 Wybór fonta ..................................................................................................................................482 Rozmiar fonta ...............................................................................................................................484 Styl i grubość fonta ......................................................................................................................485 Fonty internetowe . .......................................................................................................................486 Podsumowanie .............................................................................................................................487
14
SPIS TREŚCI
Rozdział 23 Przejścia, animacje i przekształcenia . ............................................................. 489 Przejścia .........................................................................................................................................490 Odwrócone przejścia ...................................................................................................................493 Wybór sposobu obliczania wartości pośrednich . ....................................................................494 Animacje .......................................................................................................................................496 Klatki kluczowe ............................................................................................................................498 Określenie kierunku powtórzeń . ...............................................................................................501 Stan końcowy ...............................................................................................................................502 Animowanie elementów layoutu . ..............................................................................................503 Wielokrotne wykorzystanie klatek kluczowych . .....................................................................504 Nadawanie wielu animacji wielu elementom . .........................................................................505 Wstrzymywanie i wznawianie animacji . ..................................................................................507 Przekształcenia .............................................................................................................................508 Nadanie przekształcenia . ............................................................................................................509 Określenie punktu wyjścia . ........................................................................................................510 Utworzenie animacji lub przejścia z przekształceniem . .........................................................511 Podsumowanie .............................................................................................................................512
Rozdział 24 Inne właściwości i funkcje CSS . ...................................................................... 513 Określenie koloru i krycia elementu . ........................................................................................513 Określenie koloru pierwszego planu . ........................................................................................514 Określenie krycia elementu . .......................................................................................................514 Obstylowanie tabel ......................................................................................................................516 Kondensowanie obramowania tabel . ........................................................................................516 Konfiguracja oddzielonych krawędzi . ......................................................................................518 Obsługa pustych komórek . .........................................................................................................519 Położenie podpisu . .......................................................................................................................520 Określenie układu tabeli . ............................................................................................................521 Stylizacja list ..................................................................................................................................523 Określenie typu znaczników listy . .............................................................................................523 Użycie obrazu jako znacznika listy . ...........................................................................................524 Określenie położenia znacznika . ...............................................................................................525 Określenie stylu kursora . ............................................................................................................527 Podsumowanie . ............................................................................................................................528
Część IV Rozdział 25
Praca z DOM . .................................................................................................. 529 Wprowadzenie do DOM . ................................................................................ 531 Obiektowy model dokumentu . ..................................................................................................531 Poziomy DOM i zgodność . ........................................................................................................533 Testowanie obsługi funkcji DOM . .....................................................................................533 Spis funkcji DOM . .......................................................................................................................534 Właściwości Document . ......................................................................................................534 Właściwości Window . ..........................................................................................................537 Właściwości HTMLElement . ..............................................................................................539
15
SPIS TREŚCI
Właściwości CSS w DOM . ..........................................................................................................541 Zdarzenia DOM ...........................................................................................................................544 Podsumowanie . ............................................................................................................................545
Rozdział 26 Obiekt Document . ........................................................................................... 547 Metadane dokumentu . ................................................................................................................549 Pobieranie informacji z dokumentu . ........................................................................................549 Obiekt Location ............................................................................................................................552 Odczytywanie i zapisywanie ciasteczek . ...................................................................................555 Stan żądania ..................................................................................................................................556 Pozyskiwanie szczegółów o implementacji DOM . .................................................................557 Znajdowanie obiektów elementów HTML . .............................................................................558 Zastosowanie właściwości do pozyskiwania obiektów elementów . .....................................559 Pozyskanie nazwanego elementu przy użyciu notacji tablicowej . ........................................560 Przeszukiwanie elementów . .......................................................................................................561 Przeszukiwanie łańcuchowe . ......................................................................................................564 Nawigacja w drzewie DOM . .......................................................................................................565 Podsumowanie .............................................................................................................................567
Rozdział 27 Obiekt Window . .............................................................................................. 569 Pozyskanie obiektu Window . .....................................................................................................570 Pozyskiwanie informacji o oknie . ..............................................................................................570 Interakcja z oknem ......................................................................................................................572 Wyświetlanie zapytań . .................................................................................................................573 Pozyskiwanie ogólnych informacji . ..........................................................................................575 Praca z historią przeglądarki . .....................................................................................................575 Poruszanie się po historii przeglądania . ...................................................................................576 Wprowadzenie nowej pozycji do historii . ................................................................................577 Dodanie nowej pozycji z adresem innego dokumentu . .........................................................579 Zapisywanie kompleksowych stanów w historii . ....................................................................581 Zastąpienie pozycji w historii przeglądarki . ............................................................................583 Przekazywanie komunikatów między dokumentami . ...........................................................584 Liczniki ..........................................................................................................................................588 Podsumowanie .............................................................................................................................589
Rozdział 28
Praca z elementami DOM . .............................................................................. 591 Praca z obiektami elementów . ...................................................................................................592 Praca z klasami .............................................................................................................................593 Praca z atrybutami elementu . ....................................................................................................596 Praca z tekstem . ............................................................................................................................600 Modyfikacja modelu . ...................................................................................................................602 Tworzenie i usuwanie elementów . .....................................................................................603 Powielanie elementów . .........................................................................................................604 Przenoszenie elementów . .....................................................................................................605 Porównywanie obiektów elementów . ................................................................................606
16
SPIS TREŚCI
Praca z fragmentami HTML . .....................................................................................................608 Wstawienie elementu do bloku tekstu . .....................................................................................612 Podsumowanie . ............................................................................................................................613
Rozdział 29
Stylizacja elementów DOM . ............................................................................ 615 Praca z arkuszami stylów . ...........................................................................................................616 Pobieranie podstawowych informacji o arkuszach stylów . ...................................................616 Praca z ograniczeniami medium . ..............................................................................................617 Dezaktywowanie arkuszy stylów . ..............................................................................................620 Praca z wybranymi stylami . ........................................................................................................621 Praca ze stylami elementów . ......................................................................................................623 Praca z obiektami CSSStyleDeclaration . ..................................................................................624 Praca z właściwościami pomocniczymi . ...................................................................................625 Praca ze standardowymi właściwościami . ................................................................................628 Zastosowanie szczegółowych obiektów CSS w DOM . ...........................................................632 Praca z obliczonymi stylami . ......................................................................................................634 Podsumowanie .............................................................................................................................637
Rozdział 30 Zdarzenia . ....................................................................................................... 639 Wykorzystanie prostych procedur obsługi zdarzeń . ..............................................................640 Wprowadzenie prostej procedury obsługi zdarzeń inline . ....................................................640 Wprowadzenie prostej procedury obsługi zdarzeń . ...............................................................642 Zastosowanie DOM i obiektu Event . ........................................................................................643 Odróżnianie zdarzeń według typu . ...........................................................................................645 Przepływ zdarzeń .........................................................................................................................647 Praca ze zdarzeniami, które można anulować . ........................................................................653 Praca ze zdarzeniami HTML . ....................................................................................................654 Zdarzenia obiektów Document i Window . ..............................................................................654 Praca ze zdarzeniami myszy . ......................................................................................................654 Praca ze zdarzeniami fokusowania . ..........................................................................................657 Praca ze zdarzeniami klawiatury . ..............................................................................................658 Praca ze zdarzeniami formularza . .............................................................................................660 Podsumowanie .............................................................................................................................661
Rozdział 31
Obiekty poszczególnych elementów . .............................................................. 663 Obiekty dokumentu i metadanych . ...........................................................................................663 Element base .................................................................................................................................663 Element body ................................................................................................................................663 Element link ..................................................................................................................................664 Element meta ................................................................................................................................664 Element script ...............................................................................................................................664 Element style .................................................................................................................................665 Element title ..................................................................................................................................665 Inne elementy dokumentu i metadanych . ...............................................................................665 Elementy tekstowe . ......................................................................................................................665 Element a ................................................................................................................................665 Elementy del i ins . .................................................................................................................666 17
SPIS TREŚCI
Element q ......................................................................................................................................666 Element time ................................................................................................................................666 Inne elementy tekstowe . .............................................................................................................667 Elementy grupujące . ....................................................................................................................667 Element blockquote . ....................................................................................................................667 Element li ......................................................................................................................................667 Element ol .....................................................................................................................................667 Inne elementy grupujące . ...........................................................................................................668 Elementy sekcji . ............................................................................................................................668 Element details .............................................................................................................................668 Inne elementy sekcji ....................................................................................................................668 Elementy tabeli .............................................................................................................................668 Elementy col i colgroup . .............................................................................................................668 Element table ................................................................................................................................669 Elementy thead, tbody i tfoot . ....................................................................................................669 Element th .....................................................................................................................................669 Element tr ......................................................................................................................................670 Inne elementy tabeli ....................................................................................................................670 Elementy formularza . ..................................................................................................................671 Element button .............................................................................................................................671 Element datalist . ...........................................................................................................................671 Element fieldset ............................................................................................................................671 Element form ................................................................................................................................672 Element input ...............................................................................................................................672 Element label ................................................................................................................................674 Element legend .............................................................................................................................674 Element optgroup . .......................................................................................................................674 Element option .............................................................................................................................675 Element output .............................................................................................................................675 Element select ...............................................................................................................................676 Element textarea ..........................................................................................................................677 Elementy content .........................................................................................................................678 Element area .................................................................................................................................678 Element embed .............................................................................................................................678 Element iframe .............................................................................................................................679 Elementy img ................................................................................................................................679 Element map .................................................................................................................................680 Element meter ..............................................................................................................................680 Element object ..............................................................................................................................680 Element param .............................................................................................................................681 Element progress .........................................................................................................................681 Podsumowanie .............................................................................................................................682
18
SPIS TREŚCI
Część V
Zaawansowane funkcje . ................................................................................. 683
Rozdział 32 Wprowadzenie do Ajaksa. Część I . ................................................................. 685 Początki z Ajaksem . .....................................................................................................................686 Obsługa odpowiedzi . ...................................................................................................................689 Problem z Operą ..........................................................................................................................690 Zdarzenia Ajaksa . .........................................................................................................................691 Obsługa błędów . ...........................................................................................................................694 Obsługa błędów wejściowych . ...................................................................................................696 Obsługa błędów żądań ................................................................................................................696 Obsługa błędów aplikacji . ...........................................................................................................697 Pobieranie i definiowanie nagłówków . .....................................................................................697 Zmiana metody HTTP żądania . ................................................................................................697 Wyłączenie buforowania treści . .................................................................................................699 Odczytywanie nagłówków odpowiedzi . ...................................................................................699 Wydawanie żądań Ajaksa między różnymi źródłami . ...........................................................701 Nagłówek żądania źródła . ...........................................................................................................704 Zaawansowane funkcje CORS . ..................................................................................................704 Przerywanie żądań .......................................................................................................................704 Podsumowanie .............................................................................................................................707
Rozdział 33 Wprowadzenie do Ajaksa. Część II . ................................................................ 709 Przygotowanie się do wysłania danych serwerowi . ................................................................710 Utworzenie serwera . ....................................................................................................................710 Problem .........................................................................................................................................712 Wysyłanie danych formularza . ..................................................................................................713 Wysyłanie danych formularza obiektem FormData . .............................................................715 Utworzenie obiektu FormData . .................................................................................................716 Modyfikacja obiektu FormData . ...............................................................................................716 Wysyłanie danych JSON . ............................................................................................................718 Wysyłanie plików . ........................................................................................................................719 Śledzenie postępów wczytywania . .............................................................................................721 Żądanie i przetwarzanie różnych typów treści . .......................................................................723 Pobieranie fragmentów HTML . ................................................................................................723 Pobieranie danych XML . ............................................................................................................726 Pobieranie danych JSON . ...........................................................................................................728 Podsumowanie .............................................................................................................................729
Rozdział 34 Multimedia . .................................................................................................... 731 Element video ...............................................................................................................................732 Wczytywanie filmu z wyprzedzeniem . ..............................................................................732 Wyświetlanie obrazu zastępczego . .....................................................................................735 Rozmiar filmu . .......................................................................................................................735 Źródło i format filmu . ..........................................................................................................736 Element track . ........................................................................................................................738
19
SPIS TREŚCI
Element audio ..............................................................................................................................739 Praca z osadzonymi mediami za pośrednictwem DOM . .......................................................740 Pobieranie informacji o mediach . .............................................................................................741 Określenie możliwości odtworzenia multimediów . ...............................................................743 Kontrolowanie sposobu odtwarzania . ......................................................................................745 Podsumowanie . ............................................................................................................................747
Rozdział 35 Element canvas. Część I . ................................................................................. 749 Początki z elementem canvas . ....................................................................................................750 Uzyskanie kontekstu płótna . ......................................................................................................751 Rysowanie prostokątów . .............................................................................................................752 Ustawienie stanu rysowania . ......................................................................................................754 Styl rysowania styku linii . ...........................................................................................................755 Styl wypełnienia kształtu i rysowania linii . ..............................................................................757 Gradienty ......................................................................................................................................757 Gradient promieniowy ................................................................................................................762 Wzory ............................................................................................................................................765 Zapisywanie i przywracanie stanu rysowania . .........................................................................767 Rysowanie obrazów . ....................................................................................................................769 Obrazy filmowe ............................................................................................................................770 Obrazy z elementu canvas . .........................................................................................................772 Podsumowanie .............................................................................................................................773
Rozdział 36
Element canvas. Część II . ................................................................................ 775 Rysowanie z użyciem ścieżek . ....................................................................................................775 Rysowanie ścieżek liniami . .........................................................................................................776 Rysowanie prostokątów . .............................................................................................................779 Rysowanie łuków . ........................................................................................................................780 Wykorzystanie metody arcTo . ...................................................................................................781 Wykorzystanie metody arc . ........................................................................................................784 Rysowanie krzywych Béziera . ....................................................................................................785 Rysowanie sześciennych krzywych Béziera . ............................................................................786 Rysowanie kwadratowych krzywych Béziera . .........................................................................787 Utworzenie obszaru przycinania . ..............................................................................................789 Rysowanie tekstu . ........................................................................................................................790 Wykorzystanie efektów i przekształceń . ...................................................................................792 Cienie .............................................................................................................................................792 Przezroczystość ............................................................................................................................793 Kompozycja ..................................................................................................................................794 Przekształcenia .............................................................................................................................796 Podsumowanie .............................................................................................................................798
Rozdział 37 Funkcja przeciągania i upuszczania . ............................................................... 799 Tworzenie elementów źródłowych . ..........................................................................................799 Obsługa zdarzeń przeciągania . ...........................................................................................800 Utworzenie obszaru docelowego . ..............................................................................................802 Przyjmowanie upuszczonych treści . ..................................................................................804
20
SPIS TREŚCI
Praca z obiektem DataTransfer . ................................................................................................806 Filtrowanie przeciąganych elementów według treści . ............................................................808 Przeciąganie i upuszczanie plików . ...........................................................................................809 Podsumowanie .............................................................................................................................812
Rozdział 38
Geolokalizacja . ............................................................................................... 813 Wykorzystanie geolokalizacji . ....................................................................................................813 Pobranie informacji o bieżącej lokalizacji . ........................................................................813 Obsługa błędów funkcji geolokalizacji . ....................................................................................816 Definiowanie opcji geolokalizacji . .............................................................................................818 Śledzenie lokalizacji . ....................................................................................................................820 Podsumowanie .............................................................................................................................821
Rozdział 39 Magazynowanie danych . ................................................................................ 823 Magazyn lokalny . .........................................................................................................................823 Nasłuchiwanie zdarzeń magazynowania . ..........................................................................826 Magazyn sesji ................................................................................................................................827 Podsumowanie .............................................................................................................................830
Rozdział 40 Aplikacje internetowe działające offline . ........................................................ 831 Problem .........................................................................................................................................831 Utworzenie manifestu . ................................................................................................................833 Określanie sekcji manifestu . .......................................................................................................835 Sekcja FALLBACK .......................................................................................................................835 Sekcja NETWORK . .....................................................................................................................838 Sprawdzenie stanu przeglądarki . ...............................................................................................838 Praca z buforem offline . ..............................................................................................................839 Aktualizowanie .............................................................................................................................842 Pobranie aktualizacji ...................................................................................................................843 Zastosowanie aktualizacji . ..........................................................................................................843 Podsumowanie .............................................................................................................................844
Skorowidz. ....................................................................................................... 845
21
SPIS TREŚCI
22
O autorze
Adam Freeman jest doświadczonym specjalistą z dziedziny IT. Zajmował stanowiska kierownicze w różnych firmach — ostatnio był zatrudniony w ogólnoświatowym banku jako dyrektor techniczny i dyrektor ds. operacyjnych. Dziś, zakończywszy już karierę, spędza swój czas na bieganiu i pisaniu. To jego trzynasta książka o tematyce technicznej.
O korektorach merytorycznych
Kevin Grant jest pełnoetatowym deweloperem PHP, zamieszkałym i pracującym w okolicach brytyjskiego Sheffield. Obecnie zajmuje się obsługą stron internetowych opartych na Zend Framework. Swój typowy dzień pracy zazwyczaj spędza na kodowaniu, administrowaniu serwerem, profilowaniu wydajności oraz doradzaniu innym w zakresie wdrażania technologii związanych ze skalowalnością, takich jak memcached i techniki równoważenia obciążenia. Weekendy spędza z rodziną, wykonując czasami doraźne prace domowe. Często narzeka, że zbyt rzadko chodzi się wspinać, pomimo że w okolicy znajduje się kilka skałek i ścianek wspinaczkowych. ZX Spectrum 48K+ był jego pierwszym komputerem, lecz do dziś jego ulubioną grą komputerową pozostaje Parsec. Andy Olsen jest brytyjskim konsultantem-freelancerem. Jego praca dotyczy przede wszystkim technologii internetowych i mobilnych, .NET oraz Java. Andy pracuje w branży IT od 25 lat (ależ ten czas leci!), a kiedy dorośnie, zostanie profesjonalnym piłkarzem. Mieszka wraz z rodziną w walijskim Swansea nad morzem. Lubi biegać, jeździć na nartach i oglądać mecze Swans. Możesz się z nim skontaktować e-mailowo, pod adresem [email protected].
Podziękowania
Chciałbym podziękować wszystkim pracownikom wydawnictwa Apress za dołożenie tak wielu starań, by moja książka mogła ujrzeć światło dzienne. Na słowa podziękowania zasługują w szczególności Jennifer Blackwell za trzymanie nade mną pieczy (i znoszenie mojej niechęci do korzystania z SharePoint), a także Ewan Buckingham i Ben Renow-Clarke za zlecenie mi napisania tej książki i jej zredagowanie. Chciałbym również podziękować Kevinowi, Andy’emu, Rogerowi, Vanessie, Lori, Ralphowi, Kim i Marilyn za korektę i opinie.
CZĘŚĆ I
Na dobry początek
Do rozpoczęcia nauki HTML5 musisz się najpierw przysposobić. W następnych pięciu rozdziałach omówię strukturę tej książki, pokażę, jak przygotować się do pracy z HTML5, oraz odświeżę Twoją znajomość podstaw z zakresu HTML, CSS i JavaScript.
ROZDZIAŁ 1
Czym jest HTML5
HTML (ang. Hypertext Markup Language — hipertekstowy język znaczników) istniał od początku lat dziewięćdziesiątych. Najwcześniej zdarzyło mi się z nim zetknąć około roku 1993 lub 1994, gdy pracowałem w uniwersyteckim laboratorium badawczym w pobliżu Londynu. Przeglądarka — NCSA Mosaic — była jedna, a serwery internetowe można było policzyć na palcach jednej dłoni. Kiedy wspominam te czasy, zastanawia mnie, dlaczego HTML i World Wide Web tak bardzo nas ekscytowały. (Wówczas zresztą nazwę WWW musieliśmy mozolnie zapisywać tymi trzema wyrazami; brakowało masy krytycznej lub poczucia, że sieć ta ma szczególne znaczenie, żebyśmy mogli o niej mówić po prostu jako „sieci”). Wszystko odbywało się bardzo zwyczajnie. Pamiętam, jak oglądaliśmy wczytujące się — powoli — zdjęcia kamieni szlachetnych. Było to w czasach sprzed upowszechnienia się połączeń szerokopasmowych, kiedy cały uniwersytet dysponował przepustowością właściwą dzisiejszym telefonom komórkowym. Mimo wszystko byliśmy podekscytowani. Podania o granty w pośpiechu przeredagowywano, żeby uwzględniały nowe warunki. Rzeczywiście miało się poczucie, że historia techniki dzieliła się na okresy przed zaistnieniem sieci i po jej zaistnieniu, pomimo że mogliśmy co najwyżej oglądać zdjęcia dzbanka z kawą znajdującego się na innym uniwersytecie z okolic Londynu (jednak oddalonym na tyle, że nie moglibyśmy się do niego na ową kawę udać). Od tego czasu sieć Web stała się dla wielu użytkowników tożsama z Internetem, a zdjęcia kamieni szlachetnych od dawna już nas nie poruszają. HTML w międzyczasie poszerzano, ulepszano, zniekształcano, ćwiartowano, walczono o niego, zgłaszano pozwy w jego sprawie, ignorowano go, wykorzystywano, mieszano z błotem za nadmierną prostotę, chwalono jako język przyszłości i — wreszcie — pozwolono mu się ugruntować jako części nieodzownej infrastruktury codziennego życia miliardów ludzi. Niniejsza książka dotyczy HTML5 — najnowszej wersji standardu HTML i próby uporządkowania, ustrukturyzowania oraz ulepszenia istotnej technologii, która wreszcie dojrzała po długich latach burzy i naporu.
Historia HTML W każdej książce o HTML można znaleźć punkt o tytule „Historia HTML” i w większości z nich dokładnie omawia się rozwój standardu HTML od jego narodzin do teraźniejszości. Jeżeli te informacje są Ci potrzebne, to możesz ich poszukać na Wikipedii, choć nie są zbyt interesujące ani przydatne. Aby zrozumieć, w jaki sposób HTML rozwijał się i jak przyjął postać HTML5, musimy przyjrzeć się kilku kluczowym punktom zwrotnym i jednemu długotrwałemu trendowi.
ROZDZIAŁ 1.
•
ClYM JEST HTMLS
Wprowadzenie JavaScript JavaScript (który wbrew pozorom ma niewiele wspólnego z językiem programowania Java) został stworzony przez firmę Netscape. Jego narodziny dały możliwość wykorzystywania w przeglądarkach internetowych skryptów wykonywalnych po stronie klienta, przez co HTML zmienił się z nośnika statycznych informacji w coś nieco bardziej rozwiniętego. Nieco bardziej, ponieważ kompleksowe interakcje w przeglądarkach, z jakimi dziś się spotykamy, pojawiły się dopiero po pewnym czasie. JavaScript nie jest częścią właściwej specyfikacji HTML, lecz współpraca przeglądarek, HTML i JavaScript jest tak ścisła, że nie ma sensu na siłę ich rozdzielać. Specyfikacja HTMLS zakłada dostępność JavaScript, który z kolei jest nieodzowny, jeśli chce się wykorzystać niektóre z najciekawszych nowych możliwości włączonych do HTMLS.
Koniec wojen przeglądarek W pewnym okresie na rynku przeglądarek toczyła się zażarta walka. Głównymi konkurentami były Microsoft i Netscape, których współzawodnictwo polegało na wzbogacaniu przeglądarek o unikalne funkcje. Założenie było takie, że owe funkcje okażą się wystarczająco ciekawe, by webdeweloperzy�orzyli zasoby działające · wnicy będą wyraźnie jedynie na określonej przeglądarce, a te zasoby z kolei będą na tyle ciekawe, ż preferować daną przeglądarkę, zapewniając jej tym samym dominację yn Nie do końca tak wyszło. Webdeweloperzy ostatecznie wykorzyst a ł�c ie możliwości oferowane przez wszystkie przeglądarki lub obchodzili ograniczenia, używając ość porównywalnych funkcji. Było to nieco męczące, a webdeweloperzy wciąż liżą rany po ty ach. Koniec końców, Microsoft przegrał proces o łamanie pra ymonopolowego, który wynikł z darmowego udostępniania przeglądarki Internet Expl � z olei godziło w płatną przeglądarkę Netscape Navigator. Microsoft oskarża się o doprowadz cape do bankructwa. Może jest w tym trochę prawdy, lecz sam przez okres osiemnastu miesi yłem w tym czasie konsultantem Netscape -nigdy nie zetknąłem się z firmą, która z takim up re ążyła do samozagłady. Niektórym firmom już jest pisany taki los, że stają się przykładami, z ni wynoszą naukę-Netscape był jedną z nich. Śmierć Netscape i kary nałożone na Mi�s ? akończyły wojny przeglądarek i stworzyły warunki do ugruntowania standardów, których prze �ki miały przestrzegać. Specyfikację HTML usprawniono, a trzymanie się jej stało się normą. D r�glądarki konkurują ze sobą pod względem zgodności ze standardami-ten diametralny zw wił życie zarówno deweloperom, jak i użytkownikom.
as�
� ���
� ��Vs
'
·
.2.,_� �
'$.�
Dominacja wtyc
Wtyczki okazały się korzystne dla sieci. Pozwoliły firmom na dostarczanie rozbudowanych funkcji i bogatych zasobów, których uzyskanie nie byłoby możliwe przy użyciu samego kodu HTML. Niektóre z tych wtyczek są już tak zaawansowane i szeroko używane, że wiele stron internetowych to zaledwie nośniki zasobów owych wtyczek. Dotyczy to w szczególności Adobe Flash-często stykam się ze stronami zbudowanymi całkowicie we Flashu. Metoda ta nie jest zła z samego założenia, ale jej wykorzystanie oznacza, że przeglądarka i kod HTML używane są zaledwie jako nośnik treści wytworzonych we Flashu. Wtyczki stawiają twórców przeglądarek w niewygodnej pozycji, ponieważ dają one kontrolę właśnie producentom wtyczek, a próba przeniesienia bogatych treści właściwych Flashowi bezpośrednio do przeglądarki jest jedną z kluczowych dziedzin, którą rozwinięto w HTMLS. Na odejście od Flasha naciskają przede wszystkim dwie firmy: Apple i Microsoft. System operacyjny Apple iOS nie obsługuje Flasha, a Microsoft z kolei wyłączył obsługę Flasha w wersji Metro przeglądarki Internet Explorer w systemie Windows 8.
30
ROZDZIAŁ 1.
•
ClYM JEST HTMLS
Pojawienie się semantycznego HTML We wczesnych wersjach standardu HTML nie było szczególnego rozróżnienia między treścią a sposobem jej prezentacji. Jeśli chciałeś wskazać, że jakiś fragment tekstu jest istotny, to wprowadzałeś element HTML, który ów fragment pogrubiał. Do samego użytkownika należało z kolei skojarzenie, że pogrubiony tekst jest ważny. Ludzie nie mają z tym większych trudności, ale dla automatów jest to niezwykle problematyczne. Od kiedy wprowadzono HTML do użycia, zautomatyzowane przetwarzanie treści stało się istotne. Ponadto coraz bardziej starano się oddzielić znaczenie elementów HTML od wyglądu treści wyświetlanych w przeglądarce. Trend: standard HTML nie nadąża za sposobami użycia HTML Proces tworzenia standardu zawsze jest długotrwały, zwłaszcza w przypadku czegoś tak szeroko wykorzystywanego, jak HTML. Uczestniczy w nim wiele stron, którym zależy na ukształtowaniu nowych wersji standardu tak, by odpowiadała ich komercyjnym interesom lub punktom widzenia. Standardy nie mają mocy prawnej, a organizacje odpowiedzialne za ich tworzenie niczego się tak nie boją, jak fragmentacji, gdyż wymusza ona prowadzenie czasochłonnych rozważań nad tym, jak ewent�ne funkcje i ulepszenia miałyby działać. ""'� Organizacją odpowiedzialną za standardy HTML jest World Wide W e�sortium (znane jako W3C). Jej zadanie nie jest łatwe, a przekształcenie propozycji w stands ���czasu. Na zatwierdzenie aktualizacji specyfikacji HTML trzeba bardzo długo czekać. '-.� Przez to, że proces standaryzacji jest tak długotrwały, W3C z� s� ało z opóźnieniem, standaryzując to, co zdążyło już się stać powszechnie uznawaną praktyką. Spe J>.a�-HTML są odbiciem tych podejść do zasobów internetowych, które były odkrywcze kilka l�t . aczenie standardu HTML maleje o części w przeglądarkach, a po części przez to, ponieważ właściwe innowacje wdraża się poza W we wtyczkach.
o
HTMLS
�O
HTMLS to nie tylko najnowsza wer�ja ec�cji HTML Jest to równie?. ogólne określenie zbioru powiązanych technologii, służących orzenia nowoczesnych, bogatych zasobów internetowych. Technologie te przedstawię Ci�p 'z zych rozdziałach, ale najważniejsze z nich to bazowa specyfikacja HTMLS, kaskadowe arkusze st CSS, ang. Cascading Style Sheets) oraz JavaScript. Bazowa specyfikacja �T L reśla elementy, którymi oznacza się treść i określa jej znaczenie. CSS pozwala określać wygląd onych treści, gdy prezentuje się je użytkownikowi. JavaScript pozwala na modyfikowanie zawartości kumentu HTML, reagowanie na działania użytkownika oraz wykorzystanie niektórych programacentrycznych funkcji nowych elementów HTMLS. • Wskazówka Nie martw się, jeżeli nic z tego nie rozumiesz. Elementy HTML przedstawię Ci w rozdziale 3., z CSS zapoznam w rozdziale 4., a wiedzę o JavaScript odświeżę w rozdziale 5.
Niektórzy (zgryźliwi, chorobliwie obsesyjni i drobiazgowi) ludzie zwróciliby uwagę, że HTMLS odnosi się tylko do elementów HTML. Nie warto ich słuchać, gdyż nie zwracają uwagi na fundamentalną przemianę charakteru zasobów internetowych. Technologie wykorzystywane na stronach internetowych stały się tak silnie ze sobą związane, że trzeba je wszystkie znać, by móc tworzyć zasoby. Używając elementów HTML bez CSS, tworzyłbyś treści, z których przyswojeniem użytkownicy mieliby trudności. Używając kodu HTML i CSS bez JavaScript, straciłbyś możliwość dania użytkownikom natychmiastowych informacji zwrotnych na temat ich działań oraz wykorzystania niektórych z nowych, zaawansowanych funkcji, które zapewnia HTMLS. 31
ROZDZIAŁ 1.
•
ClYM JEST HTMLS
Nowy standard, nowe standardy W celu poradzenia sobie z długotrwałością procesu standaryzacji i tym, jak standard pozostaje w tyle za powszechnym użyciem, HTMLS i pokrewne technologie definiuje się dużą liczbą pomniejszych standardów. Niektóre to zaledwie kilka stron, skoncentrowanych na bardzo konkretnym aspekcie pojedynczej funkcji. Są też- rzecz jasna- inne, które składają się z setek stron drobnego druku, traktujących o całych zbiorach funkcji. Założenie jest takie, że mniejsze grupki mogą współpracować nad produkcją i standaryzacją ważnych dla nich funkcji, a standaryzacją mniej spornych kwestii mogą się zająć bez opóźnień wynikających z różnic zdań co do innych funkcji. Podejście to wiąże się zarówno z pozytywnymi, jak i negatywnymi konsekwencjami. Pozytywne jest to, że standardy rzeczywiście opracowuje się szybciej. Główną wadą jest natomiast trudność w śledzeniu wszystkich rozwijanych standardów i powiązań między nimi. Jakość specyfikacji bywa też gorsza- niektóre standardy są niejednoznaczne, co prowadzi do ich niespójnej implementacji w przeglądarkach. Być może największą wadą jest brak punktu odniesienia przy ocenianiu zgodności z HTMLS. To dopiero początek, ale nie możemy się spodziewać wdrożenia wszystkich funkcji we wszystkich przeglądarkach, z jakich użytkownicy będą korzystać. Wprowadzanie nowych funkcji staje się p ez to problematyczne i wymaga starannego oszacowania, jak szeroko dany standard się upowszechn W3C opublikowało oficjalne logo HTMLS (rysunek 1.1), lecz nie wskazuje ono obsługi jakiegok� l{ onkretnie aspektu standardu HTMLS lub związanych z nim technologii.
�
��
HTML
5 Rysunek 1.1. Oficjalne logo
��· � ';:Qo ..
HTML�
�
Natywna obsług a..W._
0 0
mediów
�MLS jest natywne odtwarzanie plików audio i wideo w przeglądarce, Kluczowym usprawnien� tj. bez konieczności użycia wtyczki. Jest to przykład reakcji W3C na dominację wtyczek, a integracja natywnej obsługi multimediów z pozostałymi funkcjami HTML wydaje się obiecująca. Funkcje te omówię w rozdziale 34. Zasoby programistyczne Jedną z największych zmian w HTMLS jest włączenie elementu canvas, który omówię w rozdziałach 35. i 36. Element ten jest kolejnym przykładem reakcji na dominację wtyczek- tworzy on obszar graficzny, który można wykorzystywać do wykonywania zadań, do których zwykło się stosować Adobe Flash. Doniosłość tej funkcji wynika częściowo z tego, że w obrębie elementu canvas konieczne jest stosowanie JavaScript, przez co programowanie staje się jedną z najważniejszych czynności, jakie podejmuje się przy pracy z dokumentem HTML. To bardzo ważna zmiana.
32
ROZDZIAŁ 1.
•
ClYM JEST HTMLS
Sieć semantyczna W HTMLS wprowadzono szereg funkcji i zasad służących do oddzielenia znaczenia elementów od tego, jak treść jest prezentowana. Jest to ważna kwestia, którą omówię bardziej szczegółowo w rozdziale 6. i która będzie się w tej książce pojawiać wielokrotnie. Wskazuje ona na dojrzałość języka HTML i odzwierciedla różnorodność sposobów, w jakie treści HTML można produkować i konsumować. Ta zmiana (którą wprowadzano stopniowo przez wcześniejsze wersje HTML) wiąże się z dodatkową pracą dla webdewelopera, ponieważ musi najpierw oznaczyć treść, a potem zdefiniować jej wygląd, ale istnieją pewne użyteczne ulepszenia, które zmniejszają uciążliwość tego procesu.
Bieżący stan
HTML5
Bazowy standard HTMLS jest wciąż opracowywany i jeszcze przyjdzie trochę poczekać na jego ukończenie. Oznacza to, że między opisanymi przeze mnie w tej książce funkcjami a ostateczną wersją standardu prawdopodobnie pojawią się jakieś różnice. Niemniej jednak gotowy standard ukaże się prawdopodobnie dopiero za kilka lat, a zmiany będą minimalne. Obsługa HTMLS
w
przeglądarkach
�
' � � s
Najpopularniejsze przeglądarki internetowe już dziś obsługują w ·el �)�:�� � i HTMLS i przykładowe dokumenty HTMLS w tej książce zaprezentuję Ci w przeglądar c t�l jak Google Chrome i Mozilla Firefox. Nie każda przeglądarka jednak obsługuje wszystkie fun · , t eż warto zbadać sprawę obsługi danej funkcji przed wykorzystaniem jej w projekcie. Nie��e ądarki, takie jak Chrome i Firefox, aktualizowane są niemal cały czas. Nie potrafiłbym zl - c� �stkich aktualizacji przeglądarek, które pobrałem przez czas pisania tej książki, a każda z nich !}Z a się z pojawieniem się jakiejś nowej funkcji lub naprawieniem jakiegoś błędu. Nie mogłem prz z odać pewnych informacji odnośnie do tego, które przeglądarki obsługują które funkcje. ·o ak pod uwagę pofragmentowany charakter standardów HTMLS, warto sprawdzać funk ·e i liotekach JavaScript w rodzaju Modernizr (http:/1 www.modernizr.com). Modernizr pozwala n omatyczne sprawdzenie, czy przeglądarka użytkownika obsługuje najważniejsze funkcje HTM 5, da• c Ci możliwość podjęcia decyzji co do tego, na których funkcjach zamierzasz polegać. Jeżeli chcesz planować z wyprz z m, to mogę Ci polecić stronę When Can I Use? iesz szczegółowe informacje o obsłudze funkcji w przeglądarkach (http://caniuse.com), na której i szybkości wdrażania; p m daje się ona stale doglądana.
�
�
�
Wykorzystanie HTMLS na stronach Stron wykorzystujących funkcje HTMLS pojawia się coraz więcej. Niektóre z nich są jedynie stronami demonstracyjnymi, służącymi do pokazywania danych funkcji w działaniu, lecz jednocześnie zwiększa się liczba bardziej konkretnych stron, które wykorzystują możliwości przeglądarek obsługujących HTMLS. Dobrym tego przykładem jest YouTube, który może się teraz pochwalić natywną obsługą filmów w HTMLS, choć- rzecz jasna- w starszych przeglądarkach filmy puszczane są we Flashu.
Struktura tej książki
Książka dzieli się na pięć części. W części I znajdziesz informacje, które będą Ci potrzebne do dalszej lektury, a także przypomnienie podstaw HTML, CSS i JavaScript. Jeżeli nie zajmowałeś się ostatnio tworzeniem stron, to rozdziały te pozwolą Ci odświeżyć swoją wiedzę.
33
ROZDZIAŁ 1.
•
ClYM JEST HTMLS
W części II znajduje się omówienie elementów HTML, włącznie z tymi, które pojawiły się dopiero w HTMLS lub uległy zmianie. Wszystkie elementy są opisane i przedstawione na przykładach; znajdziesz tam również informację o domyślnej prezentacji elementów. Część III zawiera omówienie kaskadowych arkuszy stylów- Cascading Style Sheets (CSS). W tych rozdziałach znajdziesz opis wszystkich selektorów i atrybutów używanych przy stylizacji treści, a także wiele przykładów, które pomogą Ci złożyć to wszystko w całość. Omawiam w nich najnowszą wersję CSS (CSS3), ale przedstawiam również funkcje, które były już obecne w CSSl i CSS2. W części IV znajdziesz omówienie obiektowego modelu dokumentu - Document Object Model (DOM) - który pozwala na poruszanie się po treści HTML i modyfikowanie jej przy użyciu JavaScript. DOM udostępnia szereg funkcji, które są nieodzowne przy tworzeniu bogatej treści internetowej. Część V zawiera informacje o zaawansowanych funkcjach HTMLS, takich jak Ajax, multimedia i element canvas. Korzystanie z tych funkcji wymaga większych umiejętności programistycznych, ale pozwala na znaczące ulepszenie treści internetowych. Nie są one wprawdzie potrzebne do wykorzystania możliwości HTMLS, ale warto rozważyć użycie ich przy bardziej rozbudowanych projektach. • Uwaga Spośród technologii związanych z HTMLS nie omówiłem w tej książce skalowanych grafik wektorowych - Scalable Vector Graphics (SVG). SVG pozwala na tworzenie dwuwymiarowych z wykorzystaniem języka znaczników lub JavaScript. SVG to poważny temat. Jeżeli i Ci polecić książkę SVG Programming, której autorem jest Kurt Cagle.
Więcej informacji o
HTML5
�
�p �zycji wektorowych ��e Cię SVG, to mogę
�-
'>s"'D-
chciałem, żeby ta książka była wyczerpująca, ale z pewno��niesz się z jakimś problemem, do którego się nie odniosłem, lub przyjdzie Ci do głowy pytanie n ��Te mam odpowiedzi. W takim przypadku ·esz tam przejrzeć standardy i zorientować wejdź w pierwszej kolejności na stronę W3C (w3c.or się, co powinno się dziać w przeglądarce. Standard b ają mało zrozumiałe (a często zapętlają się w wewnętrznych odniesieniach), lecz można �ciągnąć przydatne wnioski. Mozilla Developer Network (develop er. ��rg) jest przyjaźniejszym, lecz mniej autorytatywnym źródłem. Można tam znaleźć wiele przydatnWinformacji o różnych funkcjach HTML, w tym również HTMLS.
�o
������ �::�
m pod zrozumienie HTMLS, wskazując kluczowe pm�ty zwrotne w historii HTML i tłumacząc, jak HTMLS się do nich odnosi. W następnym rozdziale powiem Ci, jak przygotować się do pracy z wieloma z zawartych w tej książce przykładów. Następnie weźmiemy się za poznawanie HTMLS, zaczynając od samych elementów HTML.
34
ROZDZIAŁ 2
Przygotuj się � �
Przed rozpoczęciem pracy musisz się przygotować. Potrzebne Ci będą podst�w� narzędzia do pracy webdeweloperskiej, a także jeden program, który pozwoli Ci odtworzyć niektór 4�ziej zaawansowanych przykładów znajdujących się na końcu książki. Szczęśliwie, istnieje wiele darmowych i open source' owych narz �eb� elaperskich do wyboru. Wszystkie narzędzia, z których korzystałem przy opracowywaniu za ��n w tej książce przykładów, są dostępne za darmo. Zebrawszy narzędzia, możesz wyruszyć w p TMLS.
Wybór przeglądarki
� �
�
Q
Najważniejszym narzędziem, którym będziesz się � ać w pracy z tą książką, jest przeglądarka. W książce odnoszę się do popularnych przeglą�� komputerowych wersji następujących programów: Google Chrome, nY Mozilla Firefox, V A..._ \ • Opera, � Apple Safari, A..._ '\ Internet Explorer. A..._'\� Przeglądarki te są n �iej rozpowszechnione, a ich wersje na komputery są aktualizowane częściej i obsługują więcej funkcji niż ich odpowiedniki na urządzenia przenośne. Powyższa lista może nie uwzględniać Twojej ulubionej przeglądarki. Nie oznacza to, że Twoja przeglądarka nie obsługuje przedstawionych tutaj funkcji HTMLS, ale radziłbym Ci, abyś korzystał z tych przeglądarek, które wymieniłem. Moja ulubiona przeglądarka to Google Chrome. Podoba mi się jej prostota i to, że oferuje całkiem niezłe narzędzia deweloperskie. Z tego powodu większość rysunków w tej książce przedstawia dokumenty HTMLS wyświetlane w Google Chrome. Jeżeli nie jesteś miłośnikiem tej przeglądarki, to proponowałbym korzystanie z Firefoksa lub Opery, jako że ich obsługa HTMLS jest porównywalna. Safari i Internet Explorer wydają się pozostawać w tyle. Internet Explorer znajduje się teraz w ciekawym stanie. Kiedy piszę te słowa, Internet Explorer 9 jest w przygotowaniu i może się pochwalić całkiem rozsądną obsługą podstawowych funkcji HTMLS. Istnieje już wersja podglądowa Internet Explorer 10, który jest znacznie usprawniony, lecz wciąż pozbawiony obsługi niektórych najważniejszych funkcji. Staje się jednak jasne, że pomysł Microsoftu na Windows 8 uwzględnia tworzenie aplikacji opartych na HTMLS i JavaScript. Sugeruje to, że możemy oczekiwać od silnika Internet Explorer w Windows 8 dobrej obsługi HTMLS. •
•
•
•
•
ROZDZIAŁ 2. PRZYGOTUJ SIĘ
Uwaga Proszę, nie pisz mi elaboratów o tym, dlaczego Twoja ulubiona przeglądarka jest lepsza od mojej. Nie wątpię, że Twoja przeglądarka jest wspaniała, wierzę w Twoją rozwagę i życzę Ci wielu lat radości z jej używania. Jeśli jednak naprawdę nie możesz się powstrzymać, to jestem gotów sprzedać Ci zestaw terapeutyczny za jedyne 50 dolarów. Dostaniesz plik kartek, nożyczki i klej. Będziesz mógł wydrukować i wyciąć szablony Twojej przeglądarki, które nakleisz na rysunki z interfejsem Chrome. To niewielka cena za spokój ducha, prawda?
Wybór edytora HTML Do tworzenia dokumentów HTML potrzebny Ci będzie edytor. Wystarczy dowolny edytor tekstu, ale poleciłbym Ci edytor, który obsługuje konkretnie HTML (albo — jeszcze lepiej — HTML5). W tego typu edytorach zwykle można się spotkać z funkcją sprawdzania składni kodu, autouzupełniania, dzięki której nie musisz wpisywać tak wielkich ilości tekstu, oraz z panelem podglądowym, w którym widać rezultaty nanoszonych zmian. Na potrzeby tej książki korzystałem z Komodo Edit producenta ActiveState (który można pobrać z activestate.com) — darmowego, open source’owego edytora, którego obsługa HTML jest dość dobra i który przystaje do moich preferencji co do tego, jak edytor powinien działać. Nie jestem w żaden sposób powiązany z ActiveState i nie mam żadnego powodu, by promować Komodo Edit poza tym, że uznałem ten program za przydatny zarówno przy pisaniu tej książki, jak i przy innych projektach.
Wybór serwera internetowego Serwer internetowy nie jest Ci potrzebny do pracy z tą książką, lecz niektóre funkcje działają inaczej, kiedy dokumenty HTML odczytywane są z dysku. Do obsługi zawartych w tej książce przykładów nadaje się każdy serwer, przy czym masz wiele darmowych i open source’owych możliwości do wyboru. Sam korzystałem z IIS 7.5, który jest serwerem internetowym i aplikacji Microsoftu. Nie jest to darmowa usługa, ale posiadam serwer deweloperski działający na Windows Server 2008 R2, więc miałem już dostęp do wszystkich potrzebnych mi funkcji.
Pobranie Node.js W kilku rozdziałach książki musiałem zawrzeć kod przeznaczony dla serwera, z którym przeglądarka mogłaby się komunikować. Do tego zadania wybrałem Node.js. Node.js stało się ostatnio pewnego rodzaju fenomenem. Oferuje proste, zdarzeniowe I/O, które idealnie pasuje do obsługi wielu wywołań małych ilości danych. Nie musisz się na tym znać ani się tym przejmować. Wybrałem Node.js, ponieważ skrypty serwerowe piszę w JavaScript i dzięki temu nie musiałem przedstawiać w tej książce drugiego języka programowania. Nie będę tłumaczył, jak działa Node.js, ani omawiał szczegółów moich skryptów serwerowych, które dzięki znajomości JavaScript sam powinieneś móc rozpracować, jeżeli nie chcesz ich traktować jak „czarnej skrzynki”. Node.js możesz pobrać ze strony nodejs.org. Na potrzeby tej książki korzystałem z wersji 0.4.11. Node.js wydaje się bardzo szybko rozwijać, toteż niewykluczone, że zetkniesz się z nowymi wersjami. Korzystam z systemu Windows, a skompilowane pliki binarne pobrałem z http://node-js.prcn.co.cc.
Pobranie modułu multipart W bazowym pakiecie Node.js brakuje niektórych z potrzebnych Ci funkcji. Potrzebny jest Ci również moduł multipart, który pobierzesz ze strony https://github.com/isaacs/multipart-js. Zainstaluj go zgodnie z instrukcją; będzie Ci potrzebny przy rozdziałach 32. i 33., kiedy przyjrzymy się Ajaksowi.
36
ROZDZIAŁ 2. PRZYGOTUJ SIĘ
Pobranie przykładowych kodów Wszystkie przykładowe dokumenty HTML z tej książki są dostępne za darmo na stronie wydawnictwa Helion, pod adresem www.helion.pl/ksiazki/htm5pe.htm. Dokumenty te uporządkowane są według rozdziałów i zawierają zasoby, które mają obsługiwać (z wyjątkiem zasobów audiowizualnych z rozdziału 34., jako że uzyskanie pozwolenia na reprodukcję treści medialnych jest bardzo trudne).
Podsumowanie Opisałem w tym rozdziale kroki, które trzeba podjąć w celu przygotowania się do pracy z kolejnymi rozdziałami. Do webdewelopingu wystarczy kilka prostych narzędzi, spośród których najważniejsza jest przeglądarka, a które można zdobyć całkowicie za darmo. Następne trzy rozdziały posłużą Ci do odświeżenia znajomości HTML, CSS i JavaScript.
37
ROZDZIAŁ 2. PRZYGOTUJ SIĘ
38
ROZDZIAŁ 3
Wprowadzenie do HTML
Każdy deweloper musi cokolwiek wiedzieć o HTML. Przez ostatnie lata stał się on wszechobecny i można bezpiecznie założyć, że przynajmniej zdarzyło Ci się zobaczyć kod HTML, nawet jeśli nigdy nie musiałeś go pisać. W tym rozdziale omawiam HTML od podstaw, żebyś uzyskał pewny grunt pod nogami. Zaczynam od tego, do czego HTML służy i jak działa. Zdefiniuję podstawową terminologię HTML i przedstawię kilka bazowych elementów tego języka, które pojawiają się praktycznie na każdej stronie internetowej. Jak sama nazwa wskazuje, HTML jest językiem znaczników. Znaczniki te przyjmują formę elementów, które odnoszą się do treści — na ogół tekstu. W poniższych podrozdziałach omówię poszczególne aspekty elementów HTML, wytłumaczę, jak skonfigurować elementy przy użyciu atrybutów, oraz opiszę atrybuty globalne, które można stosować we wszystkich elementach HTML. W tabeli 3.1 znajduje się streszczenie całego rozdziału. Tabela 3.1. Streszczenie rozdziału Problem
Rozwiązanie
Listing
Oznaczenie treści.
Zastosuj element HTML.
3.1 – 3.5
Szczegółowe określenie interpretacji elementów HTML przez przeglądarkę.
Przypisz elementowi jeden lub więcej atrybutów.
3.6 – 3.10
Zadeklarowanie, że dokument zawiera kod HTML.
Zastosuj elementy DOCTYPE i html.
3.11
Opisanie dokumentu HTML.
Zastosuj element head i zamieść w nim jeden lub więcej elementów metadanych (które opisuję w rozdziale 7.).
3.12
Dodanie treści do dokumentu HTML.
Zastosuj element body i zamieść w nim tekst lub inne elementy HTML.
3.13
Dodanie skrótu klawiszowego, służącego do wyboru elementu.
Użyj globalnego atrybutu accesskey.
3.14
Tworzenie klas elementów w celu nadania im jednolitego stylu bądź umożliwienia ich programowego wyszukiwania.
Użyj globalnego atrybutu class.
3.15 – 3.17
Pozwolenie użytkownikowi na edycję treści elementu.
Użyj globalnego atrybutu contenteditable.
3.18
Dodanie menu kontekstowego do elementu.
Użyj globalnego atrybutu contextmenu. (Atrybut ten obecnie nie jest obsługiwany przez przeglądarki).
-
ROZDZIAŁ 3. WPROWADZENIE DO HTML
Tabela 3.1. Streszczenie rozdziału — ciąg dalszy Problem
Rozwiązanie
Listing
Określenie kierunku, w jakim rozmieszczona jest treść danego elementu.
Użyj globalnego atrybutu dir.
3.19
Określenie możliwości przeciągania danego elementu.
Użyj globalnego atrybutu draggable. (W rozdziale 37. przeczytasz szczegółowy opis przeciągania i upuszczania w HTML5).
-
Określenie danego elementu jako celu, w którym inne elementy można upuszczać.
Użyj globalnego atrybutu dropzone. (W rozdziale 37. przeczytasz szczegółowy opis przeciągania i upuszczania w HTML5).
-
Wskazanie, że dany element wraz z zawartością jest nieistotny.
Użyj globalnego atrybutu hidden.
3.20
Przypisanie elementowi unikalnego identyfikatora w celu nadania mu stylu lub umożliwienia programowego wyszukiwania go.
Użyj globalnego atrybutu id.
3.21
Określenie języka, w którym treść elementu jest wyrażona.
Użyj globalnego atrybutu lang.
3.22
Określenie, czy pisownia treści elementu powinna być sprawdzona.
Użyj globalnego atrybutu spellcheck.
3.23
Bezpośrednie przypisanie stylu elementowi.
Użyj globalnego atrybutu style.
3.24
Określenie kolejności, w jakiej kursor porusza się po elementach dokumentu HTML przy naciskaniu klawisza Tab.
Użyj globalnego atrybutu tabindex.
3.25
Udzielenie dodatkowych informacji o elemencie (które zwykle pojawiają się w chmurce podpowiedzi).
Użyj globalnego atrybutu title.
3.26
Korzystanie z elementów W listingu 3.1 widnieje prosty przykład tekstu oznaczonego elementem HTML. Listing 3.1. Przykład elementu HTML Lubię jabłka i pomarańcze.
Składający się z trzech części element zapisałem pogrubionym tekstem. Pierwsze dwie jego części to znaczniki, zwane również tagami. Znacznik otwierający to , a zamykający to . Pomiędzy znacznikami znajduje się treść elementu (w tym przypadku słowo jabłka). Znaczniki wraz z treścią składają się razem na element code (rysunek 3.1).
Rysunek 3.1. Anatomia elementu HTML
40
ROZDZIAŁ 3. WPROWADZENIE DO HTML
Elementy służą do podawania przeglądarce informacji o właściwej treści. Charakterystyka elementu nadawana jest jego treści. Każdy element HTML ma inne i dość konkretne znaczenie; np. element code opisuje fragment kodu komputerowego. Wskazówka Wielkość liter nie jest istotna przy zapisie nazw elementów. Przeglądarka rozpozna i , a nawet , jako znaczniki otwierające elementu code. Na ogół przyjmuje się, że należy wybrać jeden zapis i trzymać się go. W ostatnich latach częściej wybieranym stylem stał się zapis wyłącznie małymi literami i to właśnie z niego korzystam w tej książce.
W HTML występują różne rodzaje elementów, które pełnią różne funkcje w dokumencie HTML — element code jest przykładem elementu semantycznego. Elementy semantyczne pozwalają nam na określenie znaczenia treści i relacji pomiędzy różnymi jej fragmentami. Więcej na ten temat piszę w rozdziale 8. Efekt zastosowania elementu code widać na rysunku 3.2.
Rysunek 3.2. Element code wyświetlony w przeglądarce Zauważ, że przeglądarka nie wyświetla tagów elementu. Jej zadaniem jest zinterpretowanie kodu HTML i przedstawienie użytkownikowi treści w sposób uwzględniający podane przez Ciebie elementy.
Rozdzielenie prezentacji od treści Niektóre elementy HTML wpływają na prezentację treści. Przeglądarka, trafiając na jeden z takich elementów, zmienia wygląd jego treści. Element code jest tego dobrym przykładem. Jak widać na rysunku 3.1, przeglądarka po natrafieniu na element code wyświetliła oznaczoną treść fontem o stałej szerokości znaków. Stosowanie elementów HTML do określania wyglądu treści jest obecnie zdecydowanie odradzane. Założenie jest takie, by używać elementów HTML do określania struktury i znaczenia treści, a arkuszy CSS do definiowania prezentacji. CSS omówię w rozdziale 4. Elementy wpływające na prezentację to zazwyczaj te, które pojawiły się we wczesnych wersjach HTML, kiedy jeszcze nie przestrzegano zasady rozdziału prezentacji od treści tak rygorystycznie. Przeglądarki nadają takim elementom domyślne style prezentacji, np. font o stałej szerokości znaków w przypadku elementu code. Jak jeszcze wspomnę w rozdziale 4., występowanie owych domyślnych stylów możesz zniwelować przy użyciu kodu CSS.
Dodatkowe elementy występujące w tym rozdziale Żeby pomóc Ci odświeżyć sobie znajomość HTML, muszę skorzystać z kilku elementów, które opiszę dopiero w późniejszych rozdziałach. W tabeli 3.2 znajduje się lista tych elementów wraz z ich krótkimi opisami oraz spisem rozdziałów, w których możesz się z nimi szczegółowo zapoznać.
41
ROZDZIAŁ 3. WPROWADZENIE DO HTML
Tabela 3.2. Spis elementów Element
Opis
Rozdział
a
Tworzy odnośnik
8
body
Wskazuje treść dokumentu HTML
7
button
Tworzy przycisk do zatwierdzania formularzy
12
code
Wskazuje fragment kodu komputerowego
8
DOCTYPE
Wskazuje początek dokumentu HTML
7
head
Wskazuje nagłówek dokumentu HTML
7
hr
Wskazuje zmianę tematyczną
9
html
Wskazuje sekcję HTML dokumentu
7
input
Wskazuje dane wejściowe podawane przez użytkownika
8
label
Tworzy etykietę dla innego elementu
12
p
Wskazuje akapit
9
style
Określa styl CSS
7
table
Wskazuje dane tabelaryczne
11
td
Wskazuje komórkę tabeli
11
textarea
Tworzy wielowierszowe pole tekstowe, w którym użytkownik podaje dane
14
th
Tworzy komórkę nagłówkową tabeli
11
title
Określa tytuł dokumentu HTML
7
tr
Wskazuje rząd tabeli
11
Puste elementy Między znacznikiem otwierającym i zamykającym nie trzeba umieszczać treści. W takich sytuacjach powstaje pusty element, taki jak ukazany w listingu 3.2. Listing 3.2. Pusty element HTML Lubię jabłka i pomarańcze.
Nie wszystkie puste elementy mają sens, a code jest tego przykładem. Pomimo tego wciąż jest to poprawny kod HTML.
Samozamykające znaczniki Puste elementy możesz zapisywać zwięźlej przy użyciu pojedynczego znacznika (listing 3.3). Listing 3.3. Pusty element zapisany pojedynczym znacznikiem Lubię jabłka i pomarańcze.
Znacznik otwierający z zamykającym możesz połączyć w jeden — ukośnik (/), którym zwykle oznacza się początek znacznika zamykającego, zamieszcza się na końcu pojedynczego znacznika. Elementy z listingów 3.2 i 3.3 są tożsame, lecz pojedynczy znacznik jest zwięźlejszym zapisem pustego elementu.
42
ROZDZIAŁ 3. WPROWADZENIE DO HTML
Elementy void Niektóre elementy trzeba wyrażać pojedynczymi znacznikami, gdyż specyfikacja HTML nie pozwala na umieszczanie w ich obrębie jakiejkolwiek treści. Określa się je mianem elementów void. Przykładem takiego elementu jest hr — element grupujący, który wskazuje przejście akapitowe. (Pozostałe elementy grupujące znajdziesz w rozdziale 9.). Z elementów void możesz korzystać na dwa sposoby — pierwszy z nich polega na podaniu samego znacznika otwierającego (listing 3.4). Listing 3.4. Element void zapisany samym znacznikiem otwierającym Lubię jabłka i pomarańcze.
Było dziś ciepło i słonecznie.
Przeglądarka wie, że hr jest elementem void, i nie oczekuje znacznika zamykającego. Możesz też zamieścić w elemencie ukośnik, aby zapewnić mu spójność z pustymi elementami (listing 3.5). Listing 3.5. Element void zapisany zgodnie ze strukturą pustego elementu Lubię jabłka i pomarańcze.
Było dziś ciepło i słonecznie.
Wolę używać tego drugiego formatu i to właśnie z niego korzystam w tej książce. Notabene, element hr jest kolejnym przykładem elementu o znaczeniu prezentacyjnym — w jego miejscu przeglądarka wyświetla poziomą linię. Na rysunku 3.3 widnieje domyślna interpretacja elementu hr.
Rysunek 3.3. Domyślna prezentacja elementu hr
Używanie opcjonalnych znaczników otwierających i zamykających (lub nie) Wiele elementów HTML5 objętych jest specjalnymi zasadami, zgodnie z którymi można pominąć któryś ze znaczników. Przykładowo, dla elementu html (który opiszę w rozdziale 7.) można pominąć znacznik zamykający, o ile „bezpośrednio po elemencie nie znajduje się komentarz, a on sam zawiera element body, który albo nie jest pusty, albo jego znacznik otwierający nie został pominięty”. Cieszy mnie, że znaczniki można potraktować tak elastycznie, ale jednocześnie może to być mylące i prowadzić do nieporządku. Elementy HTML nie są przetwarzane wyłącznie przez przeglądarki — będą je przeglądać Twoi współpracownicy, a także Ty sam w przyszłości, kiedy będziesz chciał zaktualizować swoją aplikację. Przeglądarka może określić, dlaczego dany znacznik pominięto, lecz nie będzie to oczywiste ani dla Twoich kolegów, ani dla Ciebie samego, kiedy będziesz modyfikować kod. Z tego powodu nie będę tutaj opisywał owych specjalnych zasad, a będę korzystał z otwierających i zamykających znaczników elementów, chyba że pojawi się istotny powód, żeby tego nie robić — a wtedy wytłumaczę dlaczego.
43
ROZDZIAŁ 3. WPROWADZENIE DO HTML
Atrybuty elementów Elementy możesz konfigurować przy użyciu atrybutów. W listingu 3.6 widnieje odnoszący się do elementu atrybut. Element ten pozwala na tworzenie odnośników, których kliknięcie powoduje wczytanie innego dokumentu HTML. Listing 3.6. Atrybut elementu Lubię jabłka i pomarańcze.
Atrybuty można dodawać jedynie do znaczników otwierających i pojedynczych, a nigdy do znaczników zamykających. Atrybut ma swoją nazwę i wartość, jak widać na rysunku 3.4.
Rysunek 3.4. Nadawanie atrybutu elementowi HTML Istnieje szereg globalnych atrybutów, które można przypisać każdemu elementowi HTML. Opiszę je w dalszej części rozdziału. Poza owymi atrybutami globalnymi poszczególne elementy mają też własne atrybuty, które służą do podawania danych konfiguracyjnych właściwych dla funkcji, jakie dane elementy pełnią. Atrybut href jest atrybutem lokalnym elementu a i służy do wskazania adresu URL, do którego prowadzi odnośnik. Element a można skonfigurować przy użyciu kilku określonych atrybutów, które omówię w rozdziale 8. Wskazówka Wartość atrybutu w listingu ująłem w podwójnym cudzysłowie ("mojawartość"), ale można też skorzystać z cudzysłowu pojedynczego ('mojawartość'). Jeżeli chcesz określić taką wartość, która sama zawiera cudzysłów, to musisz skorzystać z obydwu rodzajów cudzysłowów ("moja 'cytowana' wartość" lub 'moja "cytowana" wartość').
Nadawanie elementom wielu atrybutów Elementowi możesz nadać więcej niż jeden atrybut, oddzielając je od siebie jedną lub większą liczbą spacji (listing 3.7). Listing 3.7. Nadawanie elementowi wielu atrybutów Lubię jabłka i pomarańcze.
Kolejność atrybutów nie jest istotna i możesz dowolnie zestawiać atrybuty globalne z właściwymi dla danego elementu, co zresztą zrobiłem w listingu. Atrybuty class i id (które omówię w dalszej części rozdziału) są globalne.
Atrybuty boolowskie Niektóre atrybuty są atrybutami boolowskimi. Nie musisz podawać dla nich wartości — wystarczy dodać samą nazwę atrybutu do elementu (listing 3.8). Listing 3.8. Atrybut boolowski Podaj swoje imię:
44
ROZDZIAŁ 3. WPROWADZENIE DO HTML
Podany w tym przykładzie atrybut boolowski to disabled i wystarczyło, bym dopisał jego nazwę do elementu. Element input daje użytkownikowi możliwość podania danych w formularzach HTML (które omówię w rozdziale 12.). Dodanie atrybutu disabled uniemożliwia użytkownikowi podanie danych. Atrybuty boolowskie są nieco dziwne, ponieważ sama ich obecność, a nie wartość konfiguruje element. Nie podałem disabled="true", lecz samo słowo disabled. Ten sam efekt można uzyskać, podając pusty ciąg ("") lub nadając atrybutowi wartość będącą jego własną nazwą (listing 3.9). Listing 3.9. Atrybut boolowski z pustym ciągiem jako wartością Podaj swoje imię: Podaj swoje imię:
Atrybuty autorskie Masz możliwość definiowania własnych atrybutów, o ile ich nazwy poprzedzone będą przedrostkiem data-. W listingu 3.10 widnieją przykłady takich atrybutów. Listing 3.10. Używanie własnych atrybutów elementów Podaj swoje imię:
Atrybuty autorskie są sformalizowaną wersją techniki używanej w HTML 4, gdzie przeglądarki ignorowały wszelkie atrybuty, których nie rozpoznawały. Atrybuty te poprzedza się przedrostkiem data-, aby zapobiec interferencjom z nazwami atrybutów, które mogą się pojawić w przyszłych wersjach HTML. Atrybuty autorskie przydają się w pracy z CSS (który omówię w rozdziale 4.) i JavaScript (który omówię w rozdziale 5.).
Tworzenie dokumentu HTML Elementy i atrybuty nie występują samodzielnie, lecz używa się ich do oznaczania treści dokumentu HTML. Najprostszym sposobem na utworzenie dokumentu HTML jest stworzenie pliku tekstowego z rozszerzeniem .html. Plik możesz następnie otworzyć w przeglądarce, czy to bezpośrednio z dysku, czy za pośrednictwem serwera. (Na potrzeby tej książki korzystam głównie z serwera o nazwie titan, którą będziesz często widywał w oknie przeglądarki na zrzutach ekranu).
Przeglądarki i klienty użytkownika O przeglądarce, zarówno w tym rozdziale, jak i przez większą część książki, piszę jako programie, dla którego jest przeznaczony tworzony przez nas HTML. To wygodny sposób myślenia o HTML i to właśnie najczęściej za pośrednictwem przeglądarek korzysta się z kodu HTML, ale nie jest to do końca ścisłe podejście. Klient użytkownika to zbiorcza nazwa programów i komponentów służących do przetwarzania kodu HTML. Choć przeglądarka jest najpowszechniejszym rodzajem klienta użytkownika, istnieją też inne rodzaje oprogramowania. Klienty użytkownika inne niż przeglądarki nadal są dość rzadkie, ale oczekuje się, że będą zyskiwać na popularności. Zwiększony nacisk na oddzielanie treści od prezentacji w HTML5 jest ważny, ponieważ uznaje się, że nie cała treść kodu HTML jest przedstawiana użytkownikom. I tak będę się w tej książce odnosił do przeglądarek, skoro są one najważniejszą i dominującą kategorią klientów, ale warto mieć na uwadze, że Twój kod w HTML5 będzie używany także przez innego rodzaju programy.
Dokument HTML ma określoną strukturę — konieczne jest umieszczenie w nim kilku kluczowych elementów. Większość przykładów w tej książce przedstawiam jako pełne dokumenty HTML — oznacza to, że możesz szybko i łatwo sprawdzić, jak dany element się wprowadza i jaki wywiera on wpływ. Elementy
45
ROZDZIAŁ 3. WPROWADZENIE DO HTML
z listingów objaśnię w kolejnych rozdziałach, ale na dobry początek oprowadzę Cię przez podstawowy dokument HTML. Odeślę Cię również do dalszych rozdziałów, w których będziesz mógł się zapoznać ze szczegółami.
HTML kontra XHTML Choć tematem tej książki jest HTML, niewłaściwe byłoby nie wspomnieć o XHTML (tj. HTML poprzedzonym literą X). Składnia HTML pozwala na robienie rzeczy, które w XML skutkowałyby tworzeniem błędnych dokumentów. Oznacza to, że przetworzenie dokumentu HTML przez standardowy parser XML mogłoby być trudne. Temu problemowi możesz zaradzić, korzystając z XHTML, który jest XML-ową serializacją HTML. Innymi słowy, chodzi o wyrażenie treści oraz elementów i atrybutów HTML kodem poprawnym dla standardu XML, który może zostać właściwie przetworzony przez parser XML. Możesz również tworzyć dokumenty wielojęzyczne, składające się z poprawnego kodu HTML i poprawnego XML, choć wtedy można korzystać jedynie z części ogółu elementów HTML. XHTML nie omawiam w tej książce szerzej, ale więcej na jego temat możesz przeczytać pod następującym adresem: http://wiki.whatwg.org/wiki/HTML_vs._XHTML.
Nadrzędna struktura Za ogólną strukturę dokumentu HTML odpowiadają dwa elementy: DOCTYPE i html, które widać w listingu 3.11. Listing 3.11. Nadrzędna struktura dokumentu HTML
46
ROZDZIAŁ 3. WPROWADZENIE DO HTML
Przykład
W listingu podałem minimum metadanych, czyli element title. Wszystkie dokumenty HTML teoretycznie powinny zawierać element title, choć przeglądarki na ogół nie zwracają uwagi na braki w tym zakresie. Większość przeglądarek wyświetla zawartość elementu title w pasku menu swojego okna lub u góry zakładki, w której strona jest wyświetlana. Elementy head i title opisuję wyczerpująco w rozdziale 7. wraz z wszystkimi pozostałymi elementami metadanych, które można umieścić w elemencie head. Wskazówka W listingu widać, jak wstawiać komentarze w dokumencie HTML. Zaczyna się je od znacznika . Przeglądarka zignoruje wszystko, co jest zamieszczone pomiędzy nimi.
Poza tym, że element head zawiera elementy opisujące dokument HTML, służy on również do określania powiązań z zewnętrznymi zasobami (w rodzaju arkuszy CSS), definiowania stylów CSS typu inline (tj. zawartych w pliku HTML) oraz definiowania i wczytywania skryptów. Wszystkie z tych funkcji prezentuję w rozdziale 7.
Treść Trzecia i ostatnia część dokumentu to treść, którą umieszcza się w elemencie body (listing 3.13). Listing 3.13. Element body w dokumencie HTML
Lubię jabłka i pomarańcze.
Element body wskazuje przeglądarce, która część dokumentu ma być pokazana użytkownikowi. Rzecz jasna, ta książka w znacznej części dotyczy tego, co możesz w tymże elemencie umieścić. Dodawszy element body, uzyskałem szkielet dokumentu HTML, który będę wykorzystywał w większości przykładów.
Rodzice, dzieci, potomkowie i bracia Elementy HTML w dokumencie HTML trwają w określonych relacjach z innymi elementami. Element zawierający inny element jest rodzicem tego drugiego elementu. W listingu 3.13 element body jest rodzicem elementu code, ponieważ code znajduje się między znacznikiem otwierającym a zamykającym body. Analogicznie, element code jest dzieckiem elementu body. Element może mieć wiele dzieci, ale tylko jednego rodzica. Elementy mogą zawierać elementy, które również zawierają elementy. To również widać w listingu 3.13: element html zawiera element body, który zawiera z kolei element code. Elementy body i code są potomkami elementu html, ale jedynie element body jest dzieckiem elementu html. Dzieci są bezpośrednimi potomkami. Elementy o wspólnym rodzicu nazywamy braćmi. W listingu 3.13 elementy head i body są braćmi, ponieważ obydwa są dziećmi elementu html.
47
ROZDZIAŁ 3. WPROWADZENIE DO HTML
Relacje pomiędzy elementami są w HTML bardzo istotne. Jak zobaczysz w punkcie poniżej, istnieją ograniczenia określające, jakie elementy mogą być względem siebie rodzicami i dziećmi. Ograniczenia te wyraża się w kategoriach typów elementów. Relacje między elementami są również istotne w CSS (który opiszę w rozdziale 4.) i jednym ze sposobów wyboru elementów, co do których poszczególne style mają być zastosowane, jest właśnie wskazywanie ich relacji na linii rodzic-dziecko. Wreszcie, kiedy dojdziemy do tematu obiektowego modelu dokumentu (DOM) w części IV, poszczególne elementy dokumentu będziesz wyszukiwał, poruszając się po drzewie dokumentu, które jest wyobrażeniem relacji pomiędzy elementami. Umiejętność odróżnienia potomków od braci jest ważna w świecie HTML.
Typy elementów Specyfikacja HTML5 określa trzy kategorie elementów: metadanych (ang. metadata), strukturalnych (ang. flow) i treściowych (ang. phrasing). Elementy metadanych służą do tworzenia podstawowej struktury dokumentu HTML oraz dostarczania przeglądarce informacji i wskazówek co do tego, jak dokument należy przetworzyć. Elementy metadanych opisuję w rozdziale 7. Pozostałe dwie kategorie są nieco inne — służą do wskazywania właściwych zestawień rodziców i dzieci danego elementu. Elementy treściowe są podstawowymi cegiełkami HTML. W rozdziale 8. znajdziesz opisy najczęściej używanych elementów treściowych. Kategoria elementów strukturalnych jest nadzbiorem elementów treściowych. Wszystkie elementy treściowe są więc także elementami strukturalnymi, lecz nie wszystkie elementy strukturalne są elementami treściowymi. Nie wszystkie elementy należą do którejś z kategorii elementów — są to mianowicie te, które nie mają szczególnego znaczenia lub których stosowanie odbywa się w warunkach o poważnie sprecyzowanych ograniczeniach. Przykładem takiego elementu z ograniczeniami jest element li, który określa pozycję listy i może przynależeć do jednego z trzech rodziców: ol (uporządkowana lista), ul (nieuporządkowana lista) lub menu (jak sama nazwa wskazuje — menu). Więcej o elemencie li przeczytasz w rozdziale 9. Przynależność wszystkich elementów do kategorii przedstawię Ci w ramach opisów, począwszy od rozdziału 6.
Encje HTML Jak widać na przykładach przedstawionych w tym rozdziale, pewne znaki mają w dokumencie HTML szczególne znaczenie — oczywistym przykładem są < i >. Czasami możesz mieć potrzebę użycia tych znaków w treści tak, by nie zostały zinterpretowane jako część kodu HTML. W tym celu musisz skorzystać z encji HTML. Encja jest kodem zastępującym w przeglądarce dany znak. Często wykorzystywane encje znajdziesz w tabeli 3.3. Tabela 3.3. Często używane encje HTML Znak
Nazwa encji
Numer encji
&
&
€
€
€
£
£
£
§
§
§
©
©
©
®
®
®
™
™
™
48
ROZDZIAŁ 3. WPROWADZENIE DO HTML
Każdy znak specjalny ma numer encji, którym możesz przedstawić ów znak w treści, np. znak & numerem . Najpowszechniej stosowane znaki specjalne mają także własne nazwy, np. and & znaczą dla przeglądarki to samo.
Globalne atrybuty HTML5 Opowiedziałem Ci wcześniej, jak konfigurować elementy przy użyciu atrybutów. Każdy element ma właściwe sobie atrybuty, zwane atrybutami lokalnymi. Kiedy zacznę szczegółowo opisywać elementy w rozdziale 6., podam Ci listę wszystkich lokalnych atrybutów poszczególnych elementów i wskażę, jak z nich korzystać. Każdy atrybut lokalny daje możliwość kontrolowania jakiegoś wyjątkowego aspektu funkcjonowania elementu. Istnieje też druga kategoria atrybutów — atrybuty globalne. Określają one zachowanie wspólne dla wszystkich elementów. Do każdego elementu możesz dodać każdy atrybut globalny, choć nie zawsze prowadzi to do sensownej lub użytecznej zmiany zachowania. W kolejnych punktach opiszę wszystkie atrybuty globalne i zademonstruję ich działanie. Niektóre z tych atrybutów związane są z szerszymi funkcjami HTML, które opiszę bardziej szczegółowo w dalszej części książki — w takich przypadkach odeślę Cię do właściwych rozdziałów.
Atrybut accesskey Atrybut accesskey pozwala na określenie jednego lub więcej skrótów klawiszowych służących do wybierania elementu na stronie. W listingu 3.14 wykorzystałem ten atrybut w prostym formularzu. O formularzach traktują rozdziały od 12. do 14., po których przeczytaniu nie od rzeczy byłoby do tego przykładu wrócić. Listing 3.14. Atrybut accesskey
Przykład
Imię:
Hasło:
W tym przykładzie dodałem atrybut accesskey do trzech elementów input; element input scharakteryzuję w rozdziałach 12. i 13. Chodzi tu o to, żeby pozwolić stałym użytkownikom strony poruszać się po często używanych elementach przy użyciu skrótów klawiszowych. Kombinacja klawiszy, którą uaktywnia się ustawieniem accesskey, różni się w zależności od platformy. W przypadku Windows należy jednocześnie nacisnąć klawisz Alt i wartość accesskey. Efekt zastosowania atrybutu accesskey widać na rysunku 3.5. Nacisnąłem Alt+I, aby uaktywnić pierwszy element input i wpisać nazwę użytkownika. Następnie nacisnąłem Alt+H, żeby przejść do drugiego elementu input i wpisać hasło. Naciśnięcie Alt+Z skutkuje naciśnięciem przycisku Zaloguj, zatwierdzając tym samym formularz.
49
ROZDZIAŁ 3. WPROWADZENIE DO HTML
Rysunek 3.5. Efekt działania atrybutu accesskey
Atrybut class Atrybut class służy do klasyfikowania, czy też katalogowania elementów. Robi się to zwykle w celu umożliwienia wyszukiwania zawartych w dokumencie elementów przynależących do danej klasy lub zastosowania stylu CSS. W listingu 3.15 widać przykład wykorzystania atrybutu class. Listing 3.15. Atrybut class
Przykład
Strona Helionu
Strona W3C
Każdemu elementowi możesz przypisać wiele klas, oddzielając ich nazwy spacją. Nazwy utworzonych klas mogą być dowolne, ale warto dobrać znaczące nazwy, zwłaszcza jeśli w Twoim dokumencie ma ich być wiele. Atrybut class sam w sobie niczego nie robi. Na rysunku 3.6 widać kod HTML wyświetlony w przeglądarce. Jak widać, w ten sposób uzyskujemy jedynie kilka odnośników.
Rysunek 3.6. Para elementów, którym przypisano atrybut class Pierwszym sposobem na wykorzystanie atrybutu class jest stworzenie stylu przypisanego do jednej lub więcej zdefiniowanych klas. W listingu 3.16 widnieje przykład. Listing 3.16. Definiowanie stylu opartego na klasach
50
ROZDZIAŁ 3. WPROWADZENIE DO HTML
Przykład
Strona Helionu
Strona W3C
W tym przykładzie przy użyciu elementu style zdefiniowałem dwa style — pierwszy przypisałem elementom przydzielonym do klasy class2, a drugi do class1. Element style omówię w rozdziale 7., a wprowadzenie do stosowania stylów i przypisywania ich elementom w różny sposób przedstawię w rozdziale 4. Kiedy wczytujesz w przeglądarce kod HTML, style nakładają się na elementy. Efekt widać na rysunku 3.7. Atutem używania klas do przypisywania stylów jest to, że nie musisz wielokrotnie podawać ustawień stylu przy każdym elemencie.
Rysunek 3.7. Atrybut class użyty do nakładania stylów Atrybut class można też wykorzystać w skrypcie. W listingu 3.17 widać przykład. Listing 3.17. Atrybut class w skrypcie
Przykład
Strona Helionu
Strona W3C
Skrypt w tym przykładzie wyszukuje wszystkie elementy przydzielone do klasy otherclass i nakłada na nie styl. Element script omówię w rozdziale 7., wszystkie cechy w rozdziałach od 19. do 24., a kwestię wyszukiwania elementów w dokumencie w rozdziale 26. Efekt zastosowania tego skryptu widać na rysunku 3.8.
Rysunek 3.8. Zastosowanie atrybutu class w skrypcie
Atrybut contenteditable Atrybut contenteditable jest nowością w HTML5 i pozwala użytkownikowi na zmianę treści strony. W listingu 3.18 znajdziesz prosty przykład. Listing 3.18. Zastosowanie atrybutu contenteditable
Przykład
Dziś pada deszcz
Atrybut contenteditable przypisałem elementowi p (który opiszę w rozdziale 9.). Przypisanie atrybutowi wartości true umożliwia użytkownikowi edycję zawartości elementu, a przypisanie mu wartości false z kolei dezaktywuje tę funkcję. (Jeżeli wartość nie jest podana, to element dziedziczy ustawienie po rodzicu). Efekt działania atrybutu widnieje na rysunku 3.9. Użytkownik może pisać po kliknięciu tekstu.
Rysunek 3.9. Włączenie możliwości edycji atrybutem contenteditable
52
ROZDZIAŁ 3. WPROWADZENIE DO HTML
Atrybut contextmenu Atrybut contextmenu pozwala na zdefiniowanie menu kontekstowych elementów. Owe menu wyskakują, kiedy użytkownik je uaktywnia (np. kiedy użytkownik Windows naciska prawym klawiszem myszy). W chwili, kiedy to piszę, żadna przeglądarka nie obsługuje atrybutu contextmenu.
Atrybut dir Atrybut dir określa kierunek tekstu elementu. Obsługuje on dwie wartości: ltr (tekst od lewej do prawej) i rtl (tekst od prawej do lewej). W listingu 3.19 wykorzystano obydwie wartości. Listing 3.19. Zastosowanie atrybutu dir
Przykład
Tekst od prawej do lewej
Tekst od lewej do prawej
Efekt zastosowania atrybutu dir widać na rysunku 3.10.
Rysunek 3.10. Tekst wyświetlany od lewej do prawej i od prawej do lewej
Atrybut draggable Atrybut draggable jest częścią funkcji przeciągania i upuszczania w HTML5; służy do wskazywania, czy dany element można przeciągnąć. Przeciąganie i upuszczanie omówię szerzej w rozdziale 37.
Atrybut dropzone Atrybut dropzone jest częścią funkcji przeciągania i upuszczania w HTML5; jest uzupełnieniem opisanego powyżej atrybutu draggable. Obydwa atrybuty omówię w rozdziale 37.
Atrybut hidden Atrybut hidden jest atrybutem boolowskim, który wskazuje, że dany element nie jest w danej chwili istotny. Przeglądarki interpretują ten atrybut w sposób taki, że ukrywają opatrzony nim element. W listingu 3.20 widać przykład zastosowania atrybutu hidden.
53
ROZDZIAŁ 3. WPROWADZENIE DO HTML
Listing 3.20. Zastosowanie atrybutu hidden
Przykład
Przełącz
Imię | Miasto |
David Cameron | Londyn |
Angela Merkel | Berlin |
Nicolas Sarkozy | Paryż |
Rozwinąłem ten przykład odrobinę ponad konieczność. Utworzyłem element table zawierający element tr (określający rząd tabeli), któremu przydzieliłem atrybut hidden. Utworzyłem również element button, którego naciśnięcie wywołuje funkcję JavaScript toggleHidden podaną w elemencie script. Skrypt ów usuwa atrybut hidden, kiedy jest obecny, a dodaje go, kiedy go nie ma. Na razie nie łam sobie głowy nad tym, jak to działa. Elementy table, tr, th i td omówię w rozdziale 11., element script w rozdziale 7., a zdarzenia w rozdziale 30. Zrobiłem to wszystko po to, żeby przedstawić efekt zastosowania atrybutu hidden. Rysunek 3.11 przedstawia, co się dzieje po naciśnięciu przycisku.
Rysunek 3.11. Efekt usuwania i dodawania atrybutu hidden Przeglądarka w ogóle nie wyświetla elementów opatrzonych atrybutem hidden, zupełnie jakby ich wcale nie było w kodzie HTML. Z tego powodu na ekranie pojawia się tabela o mniejszej liczbie rzędów.
54
ROZDZIAŁ 3. WPROWADZENIE DO HTML
Atrybut id Atrybut id służy do przypisywania elementom unikalnych identyfikatorów. Identyfikatory te często wykorzystuje się do nadawania stylów elementom i wybierania elementów w JavaScript. W listingu 3.21 widać przykład nadania stylu na podstawie wartości id atrybutu. Listing 3.21. Zastosowanie atrybutu id
Przykład
Strona Helionu
Strona W3C
Aby nałożyć styl na podstawie wartości atrybutu id, nazwę id należy w stylu poprzedzić znakiem #. Więcej szczegółów o selektorach CSS przedstawię w rozdziałach 17. i 18., a poszczególne style, jakie można nadać, w rozdziałach od 19. do 24. Efekt zastosowania stylu widać na rysunku 3.12.
Rysunek 3.12. Nadanie stylu na podstawie wartości atrybutu id elementu Wskazówka Atrybut id można również wykorzystywać do przenoszenia się do określonego miejsca w dokumencie. Wyobraź sobie dokument przyklad.html, który zawierałby element z atrybutem id o wartości mojelement — do owego elementu można by wtedy przejść, podając adres przyklad.html#mojelement. Ostatni człon adresu URL (czyli # wraz z wartością id elementu) określa się mianem identyfikatora fragmentu.
Atrybut lang Atrybut lang służy do określania języka, w jakim zapisana jest treść elementu. W listingu 3.22 widać przykład zastosowania tego atrybutu.
55
ROZDZIAŁ 3. WPROWADZENIE DO HTML
Listing 3.22. Zastosowanie atrybutu lang
Przykład
Cześć, jak się masz?
Hello - how are you?
Bonjour - comment êtes-vous?
Wartością atrybutu lang musi być prawidłowy kod języka ISO. Szczegóły co do wskazywania języków znajdziesz na stronie http://tools.ietf.org/html/bcp47. Uważaj jednak: określanie języków bywa złożonym i niełatwym zadaniem. Atrybut lang ma za zadanie pomagać przeglądarce w odpowiednim wyświetlaniu elementów, np. poprzez podmianę cudzysłowów, ale także umożliwiać czytnikom ekranowym (lub innym narzędziom asystującym) przyjęcie właściwej wymowy słów. Atrybut lang może również posłużyć do wyboru treści w danym języku, np. w celu nałożenia na nie stylu lub wyświetlania jedynie treści w języku wybranym przez użytkownika.
Atrybut spellcheck Atrybut spellcheck służy do określania, czy przeglądarka ma sprawdzać pisownię treści elementu. Korzystanie z tego atrybutu ma sens tylko w przypadku elementów, które użytkownik może edytować, tak jak widać to w listingu 3.23. Element textarea opiszę w rozdziale 14. Listing 3.23. Zastosowanie atrybutu spellcheck
Przykład
Oto błendny tekst
Dopuszczalne wartości atrybutu spellcheck to true (która uaktywnia korektor pisowni) i false (która go dezaktywuje). Działanie korektora tekstu różni się w zależności od przeglądarki. Na rysunku 3.13 widać, jak to wygląda w Google Chrome — program sprawdza pisownię na bieżąco. W innych przeglądarkach użytkownik musi sam zażądać sprawdzenia tekstu.
Rysunek 3.13. Korektor pisowni w Chrome
56
ROZDZIAŁ 3. WPROWADZENIE DO HTML
Ostrzeżenie Korektory pisowni w większości najpopularniejszych przeglądarek obecnie ignorują opisany powyżej element lang. Program przeprowadzi korektę na podstawie języka systemu operacyjnego użytkownika albo języka określonego w osobnym ustawieniu przeglądarki.
Atrybut style Atrybut style pozwala bezpośrednio nadać styl CSS określonemu elementowi (w odróżnieniu od zastosowania odrębnego elementu style lub zewnętrznego arkusza stylu). Przykład jego zastosowania widać w listingu 3.24. Listing 3.24. Zastosowanie atrybutu style
Przykład
Odwiedź stronę Helionu
Style CSS opiszę szerzej w rozdziale 5. Więcej o dostępnych stylach dowiesz się z rozdziałów od 19. do 24.
Atrybut tabindex Atrybut tabindex pozwala na określenie kolejności, w jakiej zmienia się zaznaczenie elementów przy naciskaniu klawisza Tab, sprawiając tym samym, że przeglądarka ignoruje domyślną kolejność. Zastosowanie tego atrybutu widać w listingu 3.25. Listing 3.25. Zastosowanie atrybutu tabindex
Przykład
Imię:
Miasto: Kraj:
Pierwszym zaznaczanym elementem jest ten z tabindex o wartości 1. Kiedy użytkownik naciska klawisz Tab, zaznaczenie przenosi się na element z tabindex o wartości 2 i tak dalej. tabindex o wartości -1 sprawia,
57
ROZDZIAŁ 3. WPROWADZENIE DO HTML
że element nie jest zaznaczany przy naciśnięciu Tab. Rezultatem podania takich wartości tabindex jest to, że przy naciskaniu klawisza Tab zaznaczenie przechodzi od pierwszego elementu input do trzeciego, a następnie do przycisku Prześlij (rysunek 3.14).
Rysunek 3.14. Kolejność zaznaczania określona atrybutem tabindex
Atrybut title Atrybut title zawiera dodatkowe informacje o elemencie, które przeglądarka standardowo wykorzystuje w chmurkach podpowiedzi. Zastosowanie title widać w listingu 3.26. Listing 3.26. Zastosowanie atrybutu title
Przykład
Odwiedź stronę Helionu
Na rysunku 3.15 widać, jak Google Chrome wykorzystuje wartość tego atrybutu.
Rysunek 3.15. Wartość atrybutu title wyświetlona jako chmurka podpowiedzi
58
ROZDZIAŁ 3. WPROWADZENIE DO HTML
Przydatne narzędzia HTML Wydaje mi się, że w pracy z HTML pomocne są tylko dwa narzędzia. Pierwsze z nich to dobry edytor HTML, który podświetla niepoprawne elementy i atrybuty i ogólnie wskazuje dobrą drogę. Jak wspomniałem w rozdziale 2., dobrze mi się pracuje z Komodo Edit, ale poza tym istnieje wiele edytorów, spośród których dobierzesz sobie coś pasującego do Twojego trybu pracy — upewnij się tylko, że obsługuje HTML5. Drugie narzędzie to funkcja Źródło strony, która występuje w większości przeglądarek. Możliwość przejrzenia kodu HTML dokumentu jest świetnym sposobem na sprawdzanie własnej pracy, a także daje sposobność do zapoznania się z cudzymi metodami.
Podsumowanie W tym rozdziale przedstawiłem Ci pokrótce strukturę i charakterystykę dokumentu HTML. Pokazałem Ci, jak oznaczać treść elementami HTML i jak stworzyć dokument HTML. Objaśniłem, jak skonfigurować sposób, w jaki przeglądarka interpretuje elementy, a także opisałem różnicę między atrybutami globalnymi a lokalnymi. Omówiłem wszystkie atrybuty globalne. Przedstawiłem podstawowe elementy dokumentu HTML oraz jego strukturę.
59
ROZDZIAŁ 3. WPROWADZENIE DO HTML
60
ROZDZIAŁ 4
Wprowadzenie do CSS
Kaskadowe arkusze stylów (CSS) służą do określania prezentacji (czyli wyglądu i formatowania) dokumentu HTML. W tym rozdziale pokażę Ci, jak tworzyć i nadawać style CSS. Wytłumaczę, dlaczego są to kaskadowe arkusze stylów, oraz ułożę fundamenty pod kolejne rozdziały. W tabeli 4.1 znajduje się streszczenie całego rozdziału. Tabela 4.1. Streszczenie rozdziału Problem
Rozwiązanie
Listing
Zdefiniowanie stylu.
Użyj deklaracji właściwości i wartości.
4.1
Nałożenie stylu bezpośrednio na element.
Użyj atrybutu style do stworzenia stylu inline.
4.2
Utworzenie stylu, który można nadać wielu elementom.
Użyj elementu style, określ selektor oraz szereg deklaracji stylu.
4.3, 4.4
Utworzenie stylów, które można nadać wielu dokumentom HTML.
Utwórz zewnętrzny arkusz stylu i odnieś do niego elementem link.
4.5 – 4.9
Określenie, które właściwości stylów mają być zastosowane przy danym elemencie.
Określ kolejność kaskady dla źródła stylów i oblicz precyzję na potrzeby przypadków spornych.
4.10 – 4.12, 4.14 – 4.16
Anulowanie standardowej kaskady stylów.
Utwórz „ważny” styl.
4.13
Zastosowanie właściwości stylu określonej przez rodzica.
Użyj dziedziczenia właściwości.
4.17, 4.18
Określenie wartości właściwości względem innej właściwości.
Użyj względnej jednostki miary.
4.19 – 4.23
Dynamiczne obliczenie wartości właściwości.
Użyj funkcji calc.
4.24
Definiowanie i nadawanie stylów Styl CSS składa się z jednej lub więcej oddzielonych średnikami deklaracji. Każda deklaracja składa się z właściwości CSS oraz wartości, po której stoi średnik. W listingu 4.1 widnieje prosty styl. Listing 4.1. Prosty styl CSS background-color:grey; color:white
ROZDZIAŁ 4. WPROWADZENIE DO CSS
Na rysunku 4.1 widnieją deklaracje, właściwości i wartości tego stylu.
Rysunek 4.1. Budowa stylu CSS Podany w tym przykładzie styl ma dwie deklaracje. Pierwsza nadaje właściwości background-color wartość grey, a druga wartość white właściwości color. Wybór właściwości CSS jest wielki, a każda z nich określa jakiś aspekt wyglądu elementów, które są przez nią określane. W rozdziałach od 19. do 24. omówię właściwości CSS i przedstawię efekty ich zastosowania.
Właściwości CSS występujące w tym rozdziale Do zademonstrowania działania kodu CSS muszę skorzystać z pewnych właściwości CSS, które dogłębnie opiszę dopiero w późniejszych rozdziałach. W tabeli 4.2 znajdziesz ich listę, krótkie opisy i odwołania do rozdziałów, w których znajdziesz więcej szczegółów. Tabela 4.2. Spis właściwości CSS Właściwość
Opis
Rozdział
background-color
Określa kolor tła elementu
19
border
Określa obramowanie elementu
19
color
Określa główny kolor elementu
24
font-size
Określa rozmiar tekstu elementu
22
height
Określa wysokość elementu
20
padding
Określa ilość miejsca pomiędzy treścią elementu a jego obramowaniem
20
text-decoration
Określa dekorację tekstu elementu, m.in. podkreślenie, które pojawia się w tym rozdziale
22
width
Określa szerokość elementu
20
Zastosowanie stylu inline Nie wystarczy zdefiniować styl — trzeba go jeszcze nałożyć, aby wskazać przeglądarce, na które elementy ów styl oddziałuje. Najbardziej bezpośrednim sposobem nałożenia stylu na element jest przypisanie owemu elementowi globalnego atrybutu style (opisanego w rozdziale 3.), tak jak to widać w listingu 4.2. Listing 4.2. Nadanie stylu przy użyciu globalnego atrybutu style
Przykład
Odwiedź stronę Helionu
62
ROZDZIAŁ 4. WPROWADZENIE DO CSS
Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
W tym dokumencie HTML znajdują się cztery elementy z treścią: dwa odnośniki (utworzone elementem a) oraz element p zawierający element span. Globalnym atrybutem style nadałem styl pierwszemu elementowi a, czyli odnośnikowi do strony Helionu. Więcej na temat elementów a, p i span przeczytasz w rozdziałach 8. i 9. — teraz jednak powinieneś się głównie zająć problemem nadawania stylów. Atrybut style oddziałuje jedynie na element, któremu został przypisany, co widać na rysunku 4.2.
Rysunek 4.2. Nałożenie stylu bezpośrednio na element Na rysunku widać rezultat zastosowania dwóch właściwości CSS. Właściwość background-color określa kolor tła elementu, a właściwość color główny kolor elementu. Styl nie wpłynął jednak na wygląd treści pozostałych dwóch elementów.
Religia CSS a fanatycy Temat CSS zdaje się przyciągać oszołomów. Praktycznie każda dyskusja internetowa o tym, jak uzyskać pewien efekt przy użyciu CSS, przeobraża się w kłótnię co do tego, jak to zrobić prawidłowo. Nie mam czasu dla takich ludzi. Prawidłowe rozwiązywanie problemów polega na wykorzystaniu dostępnej wiedzy i narzędzi do obsłużenia jak największej liczby użytkowników. Perfekcjonizm w pracy z CSS jest jałowy. Radzę Ci unikać takich kłótni i po prostu zająć się stosowaniem i rozwijaniem sztuczek i technik, które są efektywne i Cię cieszą.
Tworzenie osadzonego stylu Nakładanie stylów na pojedyncze elementy bywa użyteczne, ale jest mało wydajne w przypadku skomplikowanych dokumentów, wymagających zastosowania dziesiątek różnych stylów. Nie dość, że trzeba przypisać elementom właściwe style, to jeszcze trzeba uważnie aktualizować kod — a łatwo przy tym o błąd. Zamiast tego możesz skorzystać z elementu style (w odróżnieniu od atrybutu style) do zdefiniowania osadzonego stylu i wskazać przeglądarce, którym elementom ma on być przypisany, używając do tego selektora CSS. W listingu 4.3 widać zastosowanie elementu style z prostym selektorem CSS. Listing 4.3. Zastosowanie elementu style
Przykład
Odwiedź stronę Helionu
Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
Element style i jego atrybuty opiszę w rozdziale 7. W tym rozdziale skupimy się na definiowaniu stylu w elemencie style. Tutaj też używa się deklaracji, lecz umieszcza się je w nawiasach klamrowych ({ i }) poprzedzonych selektorem (rysunek 4.3).
Rysunek 4.3. Budowa stylu zdefiniowanego w elemencie style Selektorem w tym przykładzie jest a; wskazuje przeglądarce, by nadała styl każdemu elementowi a w dokumencie. Rezultat widać na rysunku 4.4.
Rysunek 4.4. Rezultat zastosowania selektora W pojedynczym elemencie style możesz zdefiniować wiele stylów — wystarczy zdefiniować kilka selektorów i przypisanych im deklaracji. W listingu 4.4 widać element style zawierający dwa style. Listing 4.4. Definiowanie wielu stylów w pojedynczym elemencie style
Przykład
64
ROZDZIAŁ 4. WPROWADZENIE DO CSS
Odwiedź stronę Helionu
Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
Selektorem nowego stylu jest span, co oznacza, że przeglądarka nałoży styl — zawierający właściwości border i padding — na wszystkie elementy span w dokumencie. Właściwość border tworzy obramowanie wokół wybranego elementu, a właściwość padding tworzy odstęp wokół owego elementu. Rezultat widać na rysunku 4.5. Występujące w tych przykładach selektory i własności są bardzo proste. Pełen zakres selektorów omówię w rozdziałach 17. i 18., a właściwości w rozdziałach 19. i 20.
Rysunek 4.5. Zastosowanie wielu stylów
Zastosowanie zewnętrznego arkusza stylu Zamiast definiować ten sam zestaw stylów na każdej stronie HTML, możesz utworzyć osobny arkusz stylu. Jest to osobny plik, przeważnie z rozszerzeniem .css, w którym umieszcza się style. W listingu 4.5 widnieje zawartość pliku styles.css, który znajdziesz w dołączonym do tego rozdziału kodzie źródłowym na stronie www.helion.pl/ksiazki/htm5pe.htm. Listing 4.5. Plik styles.css a { background-color:grey; color:white } span { border: thin black solid; padding: 10px; }
W arkuszu stylu nie musisz zamieszczać elementu style — wystarczy podać selektor i deklaracje każdego stylu, jakiego potrzeba. Styl wprowadzisz do dokumentu HTML elementem link, tak jak to pokazano w listingu 4.6. Listing 4.6. Importowanie zewnętrznego arkusza stylu
Przykład
Odwiedź stronę Helionu
Lubię jabłka i pomarańcze.
65
ROZDZIAŁ 4. WPROWADZENIE DO CSS
Odwiedź stronę W3C
Możesz wprowadzić tyle arkuszy stylów, ile tylko chcesz; każdy element link może zawierać odnośnik do jednego arkusza. Element link opiszę szerzej w rozdziale 7. Podobnie jak z elementem style, kolejność importowania arkuszy stylów jest istotna, jeżeli definiujesz dwa style dla jednego selektora. Nałożony zostanie ten, który wczytuje się ostatni.
Importowanie z innych arkuszy stylów Styl możesz importować do arkusza z drugiego arkusza deklaracją @import. W celu przedstawienia tej funkcji utworzyłem drugi arkusz, o nazwie combined.css, którego zawartość widnieje w listingu 4.7. Listing 4.7. Plik combined.css @import "styles.css"; span { border: medium black dashed; padding: 10px; }
Możesz importować dowolną liczbę arkuszy; każdy trzeba podawać w osobnej deklaracji @import. Deklaracje @import muszą znajdować się u góry arkusza, przed jakimikolwiek deklaracjami stylów. Do arkusza combined.css importowałem styles.css, a następnie zdefiniowałem nowy styl dla elementów span. W listingu 4.8 widnieje arkusz dokumentu HTML z odnośnikiem do pliku combined.css. Listing 4.8. Odnośnik do arkusza stylu z importowanym arkuszem
Przykład
Odwiedź stronę Helionu
Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
Deklaracja @import w combined.css importuje obydwa style zdefiniowane w arkuszu styles.css; z kolei zawarty w combined.css styl odnoszący się do elementów span anuluje styl określony dla elementów span w styles.css. Rezultat widać na rysunku 4.6.
Rysunek 4.6. Importowanie stylów z innego arkusza stylu
66
ROZDZIAŁ 4. WPROWADZENIE DO CSS
Deklaracja @import nie jest powszechnie używana. Jest tak częściowo dlatego, że jest mało znana, ale również ze względu na to, że przeglądarki zwykły działać wolniej przy interpretowaniu deklaracji @import, niż kiedy przetwarzają szereg elementów link na podstawie kaskady stylów (którą omówię w następnym podrozdziale).
Określanie kodowania znaków arkusza stylu Jedyne, co może się znaleźć w arkuszu CSS przed deklaracją @import, to deklaracja @charset, określająca kodowanie znaków arkusza stylu. W listingu 4.9 widać przykład zdefiniowanego kodowania UTF-8, które występuje najpowszechniej. Listing 4.9. Określenie kodowania znaków arkusza stylu @charset "UTF-8"; @import "styles.css"; span { border: medium black dashed; padding: 10px; }
Jeżeli nie określisz kodowania znaków, przeglądarka użyje kodowania podanego w dokumencie HTML, który wczytał arkusz stylu. Jeżeli w dokumencie HTML nie określono kodowania, to przeglądarka domyślnie skorzysta z UTF-8.
Kaskadowość i dziedziczenie stylów Kluczem do zrozumienia arkuszy stylu jest zrozumienie ich kaskadowości i dziedziczenia. Kaskadowość i dziedziczenie wskazują przeglądarce, jakie wartości ma przypisywać właściwościom przy wyświetlaniu elementu. Każdy element ma szereg właściwości CSS, które przeglądarka wykorzystuje podczas wyświetlania strony. Przy każdej z tych właściwości przeglądarka musi przejrzeć wszystkie dostępne jej źródła stylów. Zapoznałeś się już z trzema różnymi sposobami definiowania stylów (inline, przez osadzenie oraz w zewnętrznym arkuszu), ale powinieneś też się zapoznać z dwoma innymi źródłami stylów.
Style przeglądarek Style przeglądarek (a właściwie style klientów użytkownika) są domyślnymi stylami, które przeglądarka nakłada na elementy, kiedy żaden inny styl nie jest podany. Style te różnią się nieco w poszczególnych przeglądarkach, ale w znacznej mierze są do siebie podobne. Przykładowo, zastanów się, jak przeglądarka wyświetla element a, czyli odnośnik, kiedy w dokumencie HTML nie ma sprecyzowanego innego stylu. W listingu 4.10 widnieje prosty, pozbawiony stylów dokument HTML. Listing 4.10. Pozbawiony stylów dokument HTML
Przykład
Odwiedź stronę Helionu
Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
67
ROZDZIAŁ 4. WPROWADZENIE DO CSS
Listing ten jest innym wariantem poprzedniego przykładu, pozbawionego jakichkolwiek stylów. Wygląd elementów a w przeglądarce widać na rysunku 4.7.
Rysunek 4.7. Domyślny styl odnośników Do tego stopnia jesteśmy przyzwyczajeni do stylu, jaki przeglądarki przypisują odnośnikom, że nawet nie zwracamy na niego uwagi. Gdybyś się jednak przez chwilę przyjrzał, to zwróciłbyś uwagę na wygląd owego stylu. Treść odnośnika wyświetlana jest na niebiesko i z podkreśleniem. Można z tego wywnioskować, że przeglądarka używa stylu przypominającego ten z listingu 4.11. Listing 4.11. Domyślny styl przeglądarkowy elementów a a { color: blue; text-decoration: underline; }
Przeglądarki nie mają domyślnych stylów dla wszystkich elementów HTML, ale wyświetlają wiele elementów na podstawie takich własnych stylów. W każdym rozdziale, w którym opisuję elementy HTML, zamieszczam typowy domyślny styl, jakiego można oczekiwać od przeglądarek. Opis elementu a znajdziesz w rozdziale 8.
Style użytkowników Większość przeglądarek pozwala użytkownikom na definiowanie własnych arkuszy stylów. Określa się je mianem stylów użytkowników. Nie jest to często stosowana funkcja, ale dla tych, którzy decydują się tworzyć własne arkusze, sama możliwość często bywa bardzo ważna — po części dlatego, że pozwala to na zwiększenie dostępności stron. Każda przeglądarka używa własnego mechanizmu obsługi stylów użytkownika. Google Chrome tworzy plik Custom.css w katalogu C:\Users\nazwa_użytkownika\AppData\Local\Google\Chrome\User Data\ Default\User StyleSheets. Wszelkie style dodane do tego pliku nakładane są na wszystkie odwiedzane przez użytkownika strony i podlegają zasadom kaskadowania, które opiszę w następnym punkcie. Listing 4.12 w ramach prostej demonstracji przedstawia styl, który dodałem do mojego pliku Custom.css. Listing 4.12. Dodanie stylu do arkusza użytkownika a { color: white; background:grey; text-decoration: none; padding: 2px; }
Styl ten przypisany jest elementom a i niweluje oddziaływanie domyślnego stylu przeglądarki. Na rysunku 4.8 widać rezultat nałożenia mojego stylu użytkownika po odświeżeniu dokumentu HTML z listingu 4.9.
68
ROZDZIAŁ 4. WPROWADZENIE DO CSS
Rysunek 4.8. Definiowanie stylów użytkownika
Kaskadowość stylów Skoro już widziałeś wszystkie źródła stylów, które przeglądarka musi rozważyć, możesz przyjrzeć się kolejności, w której będzie ona szukać wartości właściwości przy wyświetlaniu elementów. Kolejność jest bardzo jasno określona: 1. Style inline (zdefiniowane przy użyciu globalnego atrybutu style elementu). 2. Style osadzone (zdefiniowane w elemencie style). 3. Zewnętrzne style (importowane elementem link). 4. Style użytkownika (zdefiniowane przez użytkownika). 5. Style przeglądarki (style domyślnie stosowane przez przeglądarki). Wyobraź sobie, że użytkownik chce wyświetlić element a. Przeglądarka musi w takiej sytuacji dowiedzieć się, jakiego koloru ma być tekst. Aby znaleźć odpowiedź na to pytanie, musi pobrać wartość właściwości color. Przeglądarka sprawdzi w pierwszej kolejności, czy interpretowany element zawiera styl inline, który określałby wartość jego właściwości color, tak jak poniżej: Odwiedź stronę Helionu
Jeżeli nie ma żadnego stylu inline, to przeglądarka poszuka elementu style, który zawierałby styl odnoszący się do elementu, tak jak poniżej:
Jeżeli nie ma żadnego elementu style, to przeglądarka sprawdza arkusze stylów importowane elementem link i tak dalej, aż znajdzie wartość własności color. Jeżeli żadnej wartości nie znajdzie, to użyje wartości wskazanej w domyślnym stylu przeglądarki. Pierwsze trzy źródła właściwości (style inline, style osadzone i arkusze stylów) określa się zbiorczo mianem stylów autorskich. Style zdefiniowane w arkuszu stylu użytkownika nazywa się stylami użytkownika, a style zdefiniowane przez przeglądarkę stylami przeglądarki.
Zmiana kolejności ważnymi stylami Standardową kolejność kaskady możesz zmodyfikować, oznaczając wartości właściwości jako ważne, tak jak w listingu 4.13. Listing 4.13. Oznaczanie właściwości stylów jako ważne
69
ROZDZIAŁ 4. WPROWADZENIE DO CSS
Przykład
Odwiedź stronę Helionu
Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
Poszczególne wartości możesz oznaczyć jako ważne, dodając do deklaracji człon !important. Przeglądarka traktuje ważne style preferencyjnie, niezależnie od miejsca, w którym są zdefiniowane. Rezultat wprowadzenia „ważności” właściwości widać na rysunku 4.9, gdzie osadzona wartość właściwości color niweluje działanie wartości podanej inline (co może trudno dostrzec na stronicy książki).
Rysunek 4.9. Ważne wartości właściwości niwelują wartości właściwości podanych inline Wskazówka Jedyne, co może zniwelować działanie podanej przez Ciebie ważnej wartości, to ważna wartość zdefiniowana w arkuszu użytkownika. Przy standardowych wartościach style autorskie mają pierwszeństwo przed stylami użytkownika, lecz w przypadku ważnych wartości zachowanie to jest odwrócone.
Precyzja i ocena kolejności w przypadkach spornych Przyjmijmy, że trafiasz na sporną sytuację: dwa style odnoszące się do jednego elementu zdefiniowane są na tym samym poziomie i obydwa zawierają wartości tej właściwości, którą przeglądarka usiłuje wyświetlić. Przeglądarka ocenia precyzję obydwu stylów i wybiera bardziej precyzyjny. Przeglądarka określa precyzję stylu na podstawie trzech cech: 1. Liczby wartości id w selektorze stylu. 2. Liczby innych atrybutów i pseudoklas w selektorze. 3. Liczby nazw elementów i pseudoelementów w selektorze. Tworzenie selektorów o wszystkich tych cechach omówię w rozdziałach 17. i 18. Przeglądarka łączy wartości z każdego przeliczenia i używa wartości właściwości z najbardziej precyzyjnego stylu. W listingu 4.14 znajduje się bardzo prosty przykład precyzji. Listing 4.14. Precyzja stylów
70
ROZDZIAŁ 4. WPROWADZENIE DO CSS
Przykład
Odwiedź stronę Helionu
Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
Do obliczania precyzji używa się zestawienia liczbowego a-b-c, w którym każda zmienna jest sumą wyliczenia odpowiedniej cechy. Nie jest to liczba trzycyfrowa — styl jest bardziej precyzyjny, kiedy jego wartość a jest największa. Przeglądarka porównuje wartości b tylko wtedy, kiedy wartości a dwóch stylów są równe — wtedy bardziej precyzyjny jest styl o wyższej wartości b. Z kolei jeżeli zarówno wartości a, jak i b są równe, to przeglądarka przechodzi do porównania wartości c. Oznacza to, że wynik 1-0-0 wskazuje na większą precyzję niż wynik 0-5-5. W tym przykładzie selektor a.myclass zawiera atrybut klasy, co oznacza, że precyzja tego stylu wynosi 0-1-0 (0 wartości id + 1 inny atrybut + 0 nazw elementów). Precyzja drugiego stylu wynosi 0-0-0 (nie ma w nim żadnej wartości id, innych atrybutów ani nazw elementów). Przeglądarka znajduje wartość właściwości color przy interpretowaniu elementu a, któremu przypisano klasę myclass. Przy wszystkich pozostałych elementach a zastosowana jest wartość z drugiego stylu. Rezultat doboru i wykorzystania wartości przez przeglądarkę w tym przykładzie widać na rysunku 4.10.
Rysunek 4.10. Przydzielanie wartości ze stylów na podstawie precyzji Kiedy wartości definiowane są przez style o jednakowej precyzji, przeglądarka dobiera wartość na podstawie kolejności, w jakiej są zdefiniowane, tj. wykorzystuje wartość zdefiniowaną jako ostatnią. W listingu 4.15 widać dokument, który zawiera dwa równie precyzyjne style. Listing 4.15. Równie precyzyjne style
Przykład
Odwiedź stronę Helionu
Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
Obydwa style zdefiniowane w elemencie style mają jednakową precyzję. Przeglądarka, parsując drugi element a na stronie, wybierze wartość white dla właściwości color, ponieważ została ona zdefiniowana w ostatnim stylu. Rezultat widać na rysunku 4.11.
Rysunek 4.11. Wybór wartości właściwości na podstawie kolejności zdefiniowanych stylów Możesz odwrócić kolejność stylów, żeby się przekonać, że to właśnie na jej podstawie przeglądarka dobrała wartość dla właściwości color, tak jak widać to w listingu 4.16. Listing 4.16. Odwrócenie kolejności zdefiniowanych stylów
Przykład
Odwiedź stronę Helionu
Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
Jak można się było spodziewać, wartość dobrana przez przeglądarkę dla właściwości color zmieniła się na black, co widać na rysunku 4.12. Dobór wartości opiera się na precyzji i kolejności konkretnych właściwości. W podanych tutaj przykładach zdefiniowałem także wartość właściwości background. Jako że wartości tej nie podawałem
72
ROZDZIAŁ 4. WPROWADZENIE DO CSS
Rysunek 4.12. Rezultat zmiany kolejności zdefiniowanych stylów w obydwu stylach, nie zachodził pod tym względem żaden konflikt między stylami i przeglądarka nie musiała wybierać spośród wartości.
Dziedziczenie Jeżeli przeglądarka nie może znaleźć wartości dla właściwości w którymś z dostępnych stylów, to posłuży się zasadą dziedziczenia, tj. użyje wartości, jaką owa właściwość ma w rodzicu danego elementu. Przykład tego widać w listingu 4.17. Listing 4.17. Dziedziczenie właściwości
Przykład
Odwiedź stronę Helionu
Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
W tym przykładzie interesują nas właściwości, jakie przeglądarka nadaje elementowi span, którego rodzicem jest element p. Wygląd dokumentu w przeglądarce widać na rysunku 4.13.
Rysunek 4.13. Zastosowanie dziedziczonych wartości właściwości
73
ROZDZIAŁ 4. WPROWADZENIE DO CSS
Nigdzie w tym dokumencie nie podałem wartości właściwości color w stylu odnoszącym się do elementu span, lecz przeglądarka wyświetliła tekst z użyciem wartości white. Wartość ta została odziedziczona po rodzicu — elemencie p. Dezorientować może to, że nie wszystkie własności CSS są dziedziczone. Na ogół dziedziczone są te, które odnoszą się do wyglądu elementu (np. koloru tekstu, szczegółów fonta). Nie są dziedziczone te, które odnoszą się do położenia elementu na stronie. Dziedziczenie możesz wymusić, umieszczając w stylu specjalną wartość inherit — jednoznacznie polecasz wtedy przeglądarce, by przypisała właściwości wartość, jaka występuje u rodzica. W listingu 4.18 widać przykład zastosowania wartości inherit. Listing 4.18. Zastosowanie specjalnej wartości inherit
Przykład
Odwiedź stronę Helionu
Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
W tym przykładzie utworzyłem styl odnoszący się do elementów span. Elementy te dziedziczą wobec tego wartości właściwości border ich rodziców. Rezultat widać na rysunku 4.14. Wokół elementu span i elementu p, w którym jest zagnieżdżony, widać teraz obramowanie.
Rysunek 4.14. Zastosowanie wartości inherit
Praca z kolorami w CSS Kolory są bardzo istotnym elementem stron internetowych. W CSS możesz dobierać kolory na różne sposoby. Najłatwiej skorzystać z predefiniowanych nazw kolorów lub wskazać dziesiętną bądź szesnastkową wartość czerwonego, zielonego i niebieskiego. Wartości dziesiętne oddziela się przecinkami, a szesnastkowe zwykle podaje się po znaku # — np. #ffffff, co oznacza kolor biały. W tabeli 4.3 widnieją niektóre predefiniowane nazwy kolorów wraz z ich dziesiętnymi i szesnastkowymi odpowiednikami.
74
ROZDZIAŁ 4. WPROWADZENIE DO CSS
Tabela 4.3. Wybrane kolory Nazwa koloru
Wartość szesnastkowa
Wartość dziesiętna
black
#000000
0,0,0
silver
#C0C0C0
192,192,192
gray
#808080
128,128,128
white
#FFFFFF
255,255,255
maroon
#800000
128,0,0
red
#FF0000
255,0,0
purple
#800080
128,0,128
fuchsia
#FF00FF
255,0,255
green
#008000
0,128,0
lime
#00FF00
0,255,0
olive
#808000
128,128,0
yellow
#FFFF00
255,255,0
navy
#000080
0,0,128
blue
#0000FF
0,0,255
teal
#008080
0,128,128
aqua
#00FFFF
0,255,255
Są to nazwy podstawowych kolorów, lecz CSS obsługuje także rozszerzoną paletę barw. Nazw wszystkich kolorów jest zbyt wiele, by je tutaj wszystkie wymienić, ale pełną listę znajdziesz na stronie www.w3.org/TR/css3-color. Wśród tych barw znajduje się wiele odcieni, w tym również drobnych wariacji kolorów z podstawowej listy. W tabeli 4.4 znajduje się przykładowa paleta odcieni szarości. Tabela 4.4. Wybrane kolory z rozszerzonej palety Nazwa koloru
Wartość szesnastkowa
darkgray
#a9a9a9
Wartość dziesiętna 169,169,169
darkslategray
#2f4f4f
47,79,79
dimgray
#696969
105,105,105
gray
#808080
128,128,128
lightgray
#d3d3d3
211,211,211
lightslategray
#778899
119,136,153
slategray
#708090
112,128,144
Szczegółowe wskazywanie kolorów Podawanie nazw kolorów i prostych wartości szesnastkowych nie jest jedynym sposobem wskazywania barw. Istnieją jeszcze inne możliwości dobierania kolorów. W tabeli 4.5 znajduje się opis każdej z nich.
Długości w CSS Wiele właściwości CSS wymaga sprecyzowania długości. Przykładem jest m.in. właściwość width, która określa szerokość elementu, oraz właściwość font-size, która określa wielkość tekstu, jakim zapisana jest treść elementu. W listingu 4.19 znajduje się styl, który wykorzystuje obydwie te właściwości.
75
ROZDZIAŁ 4. WPROWADZENIE DO CSS
Tabela 4.5. Funkcje koloru w CSS Funkcja
Opis
Przykład
rgb(r, g, b)
Wskazuje kolor w modelu RGB.
color: rgb(112, 128, 144)
rgba(r, g, b, a)
Wskazuje kolor w modelu RGB wraz z dodatkową wartością alpha, która określa przezroczystość. Wartość 0 oznacza całkowitą przezroczystość; wartość 1 całkowite krycie.
color: rgba(112, 128, 144, 0.4)
hsl(h, s, l)
Wskazuje kolor w modelu HSL.
color: hsl(120, 100%, 22%)
hsla(h, s, l, a)
Tak samo jak z HSL, ale z dodatkową wartością alpha, która określa przezroczystość.
color: hsla(120, 100%, 22%, 0.4)
Listing 4.19. Określanie jednostek miary w wartościach właściwości
Przykład
Odwiedź stronę Helionu
Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
Kiedy podajesz długość, zestawiasz liczbę jednostek z oznaczeniem jednostki bez oddzielania ich od siebie spacją bądź innymi znakami. W listingu nadałem właściwości width wartość 5cm, czyli 5 jednostek określonych identyfikatorem cm (oznaczającym centymetry). Jednocześnie właściwości font-size nadałem wartość 20pt, czyli 20 jednostek określonych identyfikatorem pt (oznaczającym punkty, które omówię poniżej). W CSS istnieją dwa rodzaje jednostek miary długości — bezwzględne i względne, odnoszące się do innych właściwości. Obydwa rodzaje omówię w kolejnych punktach.
Długości bezwzględne W powyższym listingu użyłem jednostek cm i pt, które są przykładami jednostek bezwzględnych. Tych jednostek miary używa się także poza ekranem komputera. CSS obsługuje pięć rodzajów jednostek absolutnych, które opisuję w tabeli 4.6. W obrębie stylu możesz używać różnych jednostek, a także różnych typów jednostek — zarówno względnych, jak i bezwzględnych. Jednostki bezwzględne przydają się, jeżeli orientujesz się, jak treść będzie prezentowana, czyli np. kiedy projektujesz na potrzeby druku. W swoich stylach CSS jednak nie korzystam z nich często. Jednostki względne wydają mi się bardziej elastyczne i łatwiejsze w dalszej obsłudze. Rzadko tworzę zasoby, których miary muszą odpowiadać miarom spoza świata wirtualnego.
76
ROZDZIAŁ 4. WPROWADZENIE DO CSS
Tabela 4.6. Bezwzględne jednostki miary w CSS Identyfikator jednostki miary
Opis
in
Cale
cm
Centymetry
mm
Milimetry
pt
Punkty (jeden punkt to 1/72 cala)
pc
Pica (jeden pica to 12 punktów)
Wskazówka Być może zastanawiasz się, dlaczego w tabeli jednostek bezwzględnych nie ma pikseli. Otóż w CSS próbowano traktować piksele jako względną jednostkę miary, choć — o czym opowiem w dalszej części rozdziału — nie do końca tak wyszło. Więcej na ten temat przeczytasz w punkcie „Piksele”.
Długości względne Określanie i wprowadzanie długości względnych jest bardziej skomplikowane, a ich jednoznaczne zdefiniowanie wymaga stosowania ścisłego języka. Jednostka względna mierzona jest w odniesieniu do jakiejś innej jednostki. Niestety, język specyfikacji CSS nie jest odpowiednio ścisły (co jest zresztą problemem CSS od lat). Oznacza to, że w CSS istnieje wiele ciekawych i przydatnych względnych jednostek miar, lecz niektórych nie można używać, ponieważ nie można być pewnym spójnej i powszechnej ich obsługi w przeglądarkach. W tabeli 4.7 znajdują się względne jednostki miary w CSS, na których można polegać w pracy z popularnymi przeglądarkami. Tabela 4.7. Względne jednostki miary w CSS Identyfikator jednostki miary
Opis
em
Względna wobec wielkości fonta elementu
ex
Względna wobec wysokości x fonta elementu
rem
Względna wobec wielkości fonta głównego elementu
px
Liczba pikseli CSS (przy założeniu, że ekran ma rozdzielczość 96 dpi)
%
Procent wartości innej właściwości W poniższych punktach objaśnię Ci, jak wyrażać długości tymi jednostkami miary.
Jednostki względne wobec wielkości fonta Używając jednostek względnych, w rzeczywistości określasz wielokrotności innych miar. W pierwszej kolejności przyjrzymy się jednostkom względnym wobec wielkości fonta (listing 4.20). Listing 4.20. Zastosowanie jednostek względnych
Przykład
Odwiedź stronę Helionu
Lubię jabłka i pomarańcze.
Lubię także mango i wiśnie.
Odwiedź stronę W3C
W tym przykładzie nadałem właściwości height wartość 2em — wskazuje to, że elementy p mają być wyświetlane tak, by ich wysokość była dwukrotnością wysokości tekstu. Owa wielokrotność obliczana jest kolejno dla wszystkich wyświetlanych elementów. W elemencie style podałem domyślną wartość 15pt dla właściwości font-size; ponadto drugiemu elementowi p nadałem inline wartość 12pt. Wygląd tych elementów w przeglądarce widać na rysunku 4.15.
Rysunek 4.15. Rezultat zastosowania miar względnych Względnych jednostek miary możesz też używać do wyrażania wielokrotności innych wartości względnych. W listingu 4.21 znajduje się właściwość height o wartości wyrażonej jednostkami em. Jednostki em odnoszą się do wartości font-size, którą podałem w jednostkach rem. Listing 4.21. Zastosowanie jednostek opartych na innych wartościach względnych
Przykład
Odwiedź stronę Helionu
Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
78
ROZDZIAŁ 4. WPROWADZENIE DO CSS
Jednostka rem odnosi się do rozmiaru fonta określonego dla elementu html, zwanego również elementem głównym. W tym przykładzie wybrałem dla rozmiaru fonta wartość 0,4 centymetra. Zrobiłem to w elemencie style, choć równie dobrze mógłbym utworzyć ten styl inline, zamieszczając atrybut style bezpośrednio w elemencie html. Wartość font-size w drugim stylu wynosi 2rem — oznacza to, że rozmiar tekstu w każdym elemencie, którego ta wartość dotyczy, będzie dwukrotnie większy od tekstu elementu głównego, tj. będzie wynosił 0,8 centymetra. Zawarta w tym samym stylu właściwość height ma wartość 2em, czyli dwukrotność. Przeglądarka wobec tego wyświetla tekst elementów p w wielkości 0,8 centymetra, podczas gdy same elementy są wysokie na 1,6 centymetra. Wykorzystanie tych stylów w przeglądarce można podejrzeć na rysunku 4.16.
Rysunek 4.16. Określanie wartości względnych wobec innych wartości względnych Trzecią jednostką względną, która odnosi się do wielkości tekstu, jest ex, oznaczający wysokość x danego fonta. Wysokość x to odległość między linią podstawową a środkową kroju, ale na ogół jest równa wysokości litery x — stąd nazwa. 1ex z reguły wynosi ok. 0.5em.
Piksele Piksele działają w CSS inaczej, niż mógłbyś się spodziewać. Termin piksel zazwyczaj odnosi się do najmniejszej jednostki graficznej wyświetlacza — pojedynczego elementu. W CSS piksel definiuje się natomiast inaczej: Piksel referencyjny to postrzegana wielkość jednego piksela na urządzeniu o rozdzielczości 96 dpi, znajdującym się od użytkownika w odległości wyciągniętej ręki. CSS jest pełen takich niejasnych definicji. Nie chcę narzekać, ale specyfikacje odnoszące się do długości ramienia użytkownika są problematyczne. Szczęśliwie, popularne przeglądarki ignorują definicję pikseli według CSS i uznają jeden piksel za 1/96 cala. Jest to standardowa rozdzielczość w Windows. Przeglądarki działające na platformach z wyświetlaczami o innej rozdzielczości zwykle przekładają wartości tak, by piksel wciąż miał wielkość ok. 1/96 cala. Wskazówka Choć nie przyda Ci się to na wiele, z definicją piksela w CSS możesz się zapoznać pod adresem www.w3.org/TR/CSS21/syndata.html#length-units.
Ostatecznie, choć piksele w CSS mają być względną jednostką miary, to przeglądarki traktują je jako jednostki bezwzględne. Listing 4.22 ukazuje przykład podania pikseli w stylu. Listing 4.22. Wartości pikselowe w stylu
Przykład
Odwiedź stronę Helionu
Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
W tym przykładzie wartości font-size i width podałem w pikselach. Rezultat wyświetlenia tego stylu w przeglądarce widać na rysunku 4.17.
Rysunek 4.17. Zastosowanie pikseli jako jednostki miary Wskazówka Choć często używam pikseli w CSS, jest to raczej kwestia przyzwyczajenia. Sądzę, że jednostki em pozwalają na większą elastyczność — kiedy chcę wprowadzić jakąś zmianę, to wystarczy zmienić rozmiar tekstu, a reszta stylu sama się do tego dopasowuje. Pamiętaj, że choć piksele CSS są teoretycznie jednostkami względnymi, to w praktyce funkcjonują jako jednostki bezwzględne, przez co ich stosowanie bywa mało elastyczne.
Procenty Wartość możesz podać również jako procent wartości innej właściwości. Służy do tego znak %, który widnieje w listingu 4.23. Listing 4.23. Podawanie wartości jako odsetka wartości innej właściwości
Przykład
80
ROZDZIAŁ 4. WPROWADZENIE DO CSS
Odwiedź stronę Helionu
Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
Używanie procentów jako jednostki miary wiąże się jednak z dwoma problemami. Po pierwsze, nie każdej właściwości można przypisać taką wartość. Po drugie, każda właściwość, której można przypisać wartość procentową, odnosi się do jakiejś innej określonej właściwości. Przykładowo, właściwość font-size odnosi się do dziedziczonej wielkości tekstu, a właściwość width do szerokości bloku zawierającego. Może się to wydawać bardziej skomplikowane, niż rzeczywiście jest. Istotne i często wspominane pojęcie bloku zawierającego omówię w rozdziale 16. W rozdziale 19., w którym zacznę opisywać właściwości CSS, objaśnię również, które z nich obsługują procenty i z jakich wartości owe procenty są wyliczane.
Nieobsługiwane powszechnie jednostki miary CSS, poza tymi miarami względnymi, które podałem, używa również jednostek, które jeszcze nie są powszechnie obsługiwane. W tabeli 4.8 widnieje spis tych nowych jednostek. Staną się one przydatne, kiedy zaczną być powszechnie i spójnie obsługiwane, ale do tego czasu należy unikać korzystania z nich. Tabela 4.8. Względne jednostki miary w CSS, których przeglądarki nie obsługują Identyfikator jednostki miary
Opis
gd
Względna wobec siatki. Nie jest powszechnie obsługiwana, ponieważ odnosi się do pewnych właściwości, które nie są dobrze zdefiniowane w specyfikacjach CSS.
vw
Względna wobec szerokości okna roboczego — każde vw to 1/100 szerokości okna roboczego dokumentu, zazwyczaj okna przeglądarki.
vh
Względna wobec wysokości okna roboczego — każde vh to 1/100 wysokości okna roboczego.
vm
Każde vm to 1/100 krótszej osi okna roboczego (szerokości lub wysokości).
ch
Względna wobec średniej szerokości znaków wyświetlanych bieżącym krojem. Jednostka ta nie jest dobrze zdefiniowana w specyfikacjach CSS i nie jest spójnie obsługiwana.
Jednostki vw, vh i vm mają szansę stać się przydatne w wielu różnych sytuacjach, ale obecnie działają jedynie w Internet Explorer, a i tak wiem z pobieżnych prób, że nie są obsługiwane zgodnie ze specyfikacją CSS.
Obliczanie jednostek w CSS CSS3 określa ciekawą funkcję, pozwalającą na obliczanie jednostek. Jest to elastyczna funkcja, która daje Ci zarówno kontrolę, jak i precyzję przy tworzeniu stylów. W listingu 4.24 widnieje przykład. Listing 4.24. Obliczanie jednostek
Przykład
Odwiedź stronę Helionu
Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
Obliczenie należy ująć w nawias i poprzedzić słowem kluczowym calc. Możesz korzystać z różnych jednostek i wykonywać proste działania arytmetyczne. Nie ma jednak powodów do ekscytacji — w chwili, kiedy to piszę, jedynie Internet Explorer obsługuje funkcję calc(). Z zasady unikam opisywania w tej książce funkcji, które nie są powszechnie obsługiwane, ale mam nadzieję, że akurat ta zostanie wdrożona, i sądzę, że warto śledzić postępy w tym zakresie.
Inne jednostki w CSS Jednostki miary w CSS nie ograniczają się do określania długości. Istnieje wiele różnych jednostek, ale powszechnie używa się zaledwie kilku z nich. W poniższych punktach opiszę jednostki miary, z których będę korzystać w tej książce.
Miary kątów w CSS Kąty będą Ci potrzebne przy omówieniu transformacji w rozdziale 23. Kąty zapisuje się w postaci liczby poprzedzającej jednostkę, np. 360deg. W tabeli 4.9 znajduje się spis obsługiwanych jednostek miary kątów. Tabela 4.9. Jednostki miary kątów w CSS Identyfikator jednostki miary
Opis
deg
Określa kąt w stopniach; używa wartości od 0deg do 360deg
grad
Określa kąt w gradianach; używa wartości od 0grad do 360grad
rad
Określa kąt w radianach; używa wartości od 0rad do 6.28rad
turn
Określa kąt w pełnych obrotach; 1turn jest równy 360deg
Miary czasu w CSS Możesz określać odstępy czasowe przy użyciu miar CSS. Czas zapisuje się w postaci liczby poprzedzającej jednostkę czasu, np. 100ms. W tabeli 4.10 znajduje się spis obsługiwanych jednostek miary czasu. Tabela 4.10. Jednostki miary czasu w CSS Identyfikator jednostki miary
Opis
s
Określa czas w sekundach
ms
Określa czas w milisekundach (1s jest równe 1000ms)
82
ROZDZIAŁ 4. WPROWADZENIE DO CSS
Sprawdzanie obsługi funkcji CSS Sfragmentaryzowany charakter specyfikacji CSS i jej niespójna obsługa w przeglądarkach sprawiają, że orientowanie się co do tego, czy pewne funkcje działają, bywa trudne. Do takich oszacowań przydaje się kilka narzędzi. Pierwsze to strona http://caniuse.com, która oferuje wyczerpujący spis tego, które funkcje HTML5 i CSS3 obsługiwane są przez poszczególne wersje określonych przeglądarek. Można tam znaleźć szczegółowe informacje dotyczące dużego zbioru przeglądarek na komputery i urządzenia przenośne, działających na różnych systemach operacyjnych. Ponadto znajdują się tam pewne proste narzędzia wspomagające podejmowanie decyzji, działające na podstawie popularności przeglądarek i ich rangi na rynku. Serwis ten bywa bardzo przydatny, kiedy zaczynam pracę nad nowym projektem i chcę się rozeznać, na których funkcjach mogę polegać. Znacząco ułatwia to rozeznawanie się w sfragmentaryzowanych standardach oraz implementacjach. Drugim takim narzędziem jest Modernizr (www.modernizr.com), który sprawdza działanie poszczególnych funkcji dynamicznie. Jest to mała biblioteka JavaScript, która sprawdza obecność kluczowych funkcji HTML5 i CSS, pozwalając Ci na dostosowanie się do funkcji obsługiwanych przez przeglądarkę użytkownika. Oferuje ona również kilka innych ciekawych funkcji, m.in. obstylowanie w starszych wersjach Internet Explorer elementów semantycznych (omówionych w rozdziale 10.), które pojawiły się w HTML5.
Przydatne narzędzia CSS Istnieją pewne narzędzia, których wprawdzie nie omawiam w tej książce, ale które mogą Ci się przydać w pracy z CSS. Opisuję je kolejno w poniższych punktach. Wszystkie są dostępne za darmo lub wchodzą w skład funkcji popularnych przeglądarek.
Przeglądarkowe raporty o stylach Wśród narzędzi deweloperskich wszystkich popularnych przeglądarek można znaleźć funkcję analizy stylów. Konkretne implementacje tej funkcji różnią się nieco, ale z założenia dają Ci możliwość wybrania elementu z wyświetlanego dokumentu lub jego kodu, by sprawdzić, które style przeglądarka zastosowała. Narzędzia te wskazują kolejność kaskadowania stylów oraz przetworzone style (czyli styl, który został ostatecznie nałożony na element po przetworzeniu wszystkich kaskadowych i odziedziczonych stylów). Dają nawet możliwość edycji i tworzenia nowych stylów w celu sprawdzenia ich wyglądu. Na rysunku 4.18 widnieje odpowiednie narzędzie przeglądarki stylów Google Chrome.
Tworzenie selektorów przy użyciu SelectorGadget W rozdziałach 17. i 18. omówię wszystkie obsługiwane przez CSS selektory. Jest ich wiele i można je łączyć w celu tworzenia mocnych, a jednocześnie elastycznie działających efektów. Opanowanie sztuki posługiwania się selektorami wymaga czasu, a jednym z najbardziej pomocnych w tym zakresie narzędzi jest SelectorGadget, który jest zakładką JavaScript dostępną na stronie www.selectorgadget.com. Narzędzie to nie jest już od jakiegoś czasu aktualizowane, ale mimo to działa we współczesnych przeglądarkach. Wystarczy postępować zgodnie z instrukcjami instalacyjnymi. Po wczytaniu skryptu będziesz miał możliwość klikania elementów w przeglądarce, by tworzyć selektory CSS. Na rysunku 4.19 widać SelectorGadget w działaniu.
83
ROZDZIAŁ 4. WPROWADZENIE DO CSS
Rysunek 4.18. Analiza stylów CSS w Google Chrome
Rysunek 4.19. Wykorzystanie SelectorGadget do tworzenia selektorów CSS
Ulepszanie CSS z użyciem LESS Po rozpoczęciu pracy z CSS dość szybko zauważysz, że jest to rozwlekły i monotonny sposób zapisu stylów. Fragmenty trzeba często powielać, przez co zarządzanie stylami jest na dłuższą metę czasochłonne i podatne na błędy. CSS można rozszerzyć przy użyciu LESS — polega to na wykorzystaniu JavaScript do ulepszenia kodu CSS. Skrypt oferuje ciekawe możliwości, takie jak wykorzystanie zmiennych, dziedziczenie stylów oraz dodatkowe funkcje. Ostatnio często korzystam z LESS i jestem zadowolony z rezultatów. Szczegóły znajdziesz na stronie http://lesscss.org, skąd możesz też pobrać bibliotekę JavaScript.
Framework CSS Istnieje wiele wysokiej klasy frameworków CSS, na których możesz oprzeć swoje strony i aplikacje internetowe. Zawierają one zbiory stylów, dzięki czemu nie jesteś skazany na ciągłe odtwarzanie podstawowego kodu. Co lepsze frameworki pozwalają także na zmniejszenie rozbieżności implementacji w różnych przeglądarkach.
84
ROZDZIAŁ 4. WPROWADZENIE DO CSS
Z frameworków CSS mogę polecić Blueprint, który pobierzesz ze strony www.blueprintcss.org. Jest łatwy w użyciu i bardzo elastyczny, a także oferuje świetny system tworzenia siatek layoutów.
Podsumowanie W tym rozdziale omówiłem, jak tworzyć i nadawać style. Przedstawiłem zasady kaskadowania stylów oraz sposób, w jaki jednostki miary działają w CSS. Wspomniałem również o kilku narzędziach, które pozwalają określić, czy dane funkcje CSS obsługiwane są przez różne przeglądarki, a także o dodatkowych zasobach, które przydają się w pracy z CSS.
85
ROZDZIAŁ 4. WPROWADZENIE DO CSS
86
ROZDZIAŁ 5
Wprowadzenie do JavaScript
JavaScript miał trudne życie — bolesne narodziny i trudną młodość — i dopiero w ostatnich latach zdobył uznanie jako użyteczny i elastyczny język programowania. Z JavaScript możesz wiele zdziałać i choć nie jest to idealny język, należy traktować go poważnie. Ten rozdział pozwoli Ci odświeżyć znajomość JavaScript; znajdziesz w nim opis funkcji, które będą Ci potrzebne w dalszej pracy z książką. Wskazówka Jeśli chcesz skorzystać na lekturze tej książki, to powinieneś mieć pewne doświadczenie z programowaniem i być zaznajomiony ze zmiennymi, funkcjami i obiektami. Jeżeli dopiero zaczynasz programować, to dobrze byłoby sięgnąć po serię artykułów na popularnym serwisie lifehacker.com, które nie wymagają jakiejkolwiek znajomości programowania od czytelnika, a przykłady ujęte są w JavaScript. Samouczek (w języku angielskim) znajdziesz tutaj: http://lifehacker.com/5744113/learn-to-code-the-full-beginners-guide.
W tym rozdziale skupię się na najważniejszych funkcjach JavaScript potrzebnych do programowania zasobów internetowych. Jeżeli chcesz się dowiedzieć więcej o JavaScript, mogę Ci polecić kilka książek. Ogólne informacje o tym języku znajdziesz w JavaScript: The Definitive Guide Davida Flanagana. Więcej o zaawansowanych koncepcjach i funkcjach przeczytasz w Pro JavaScript Design Patterns Rossa Harmesa i Dustina Diaza. W tabeli 5.1 znajduje się streszczenie całego rozdziału. Tabela 5.1. Streszczenie rozdziału Problem
Rozwiązanie
Listing
Zdefiniowanie skryptu inline w dokumencie.
Użyj elementu script.
5.1
Natychmiastowe wykonanie deklaracji.
Podaj deklarację bezpośrednio w skrypcie.
5.2
Zdefiniowanie funkcji JavaScript.
Użyj słowa kluczowego function.
5.3 – 5.5
Zdefiniowanie prostej zmiennej.
Użyj słowa kluczowego var i podaj wartość literalną.
5.6 – 5.9
Utworzenie obiektu.
Użyj new Object () lub literału obiektowego.
5.10 – 5.11
Dodanie metod do obiektu.
Stwórz nową właściwość i przypisz jej funkcję.
5.12
Pobranie lub nadanie obiektowi właściwości.
Użyj notacji kropkowej lub tablicowej.
5.13
Wyliczenie właściwości obiektu.
Użyj deklaracji for...in.
5.14
ROZDZIAŁ 5. WPROWADZENIE DO JAVASCRIPT
Tabela 5.1. Streszczenie rozdziału — ciąg dalszy Problem
Rozwiązanie
Listing
Dodanie właściwości i metod do obiektów.
Przypisz wartość nazwie właściwości, której potrzebujesz.
5.15, 5.16
Usunięcie właściwości z obiektu.
Użyj słowa kluczowego delete.
5.17
Określenie, czy obiekt definiuje właściwość.
Użyj wyrażenia in.
5.18
Określenie, czy dwie zmienne mają jednakową wartość, niezależnie od ich typu.
Użyj operatora równości (==).
5.19, 5.21
Określenie, czy dwie zmienne mają jednakową wartość i są jednego typu.
Użyj operatora identyczności (===).
5.20, 5.22
Przekształcenie z jednego typu w inny.
Użyj funkcji Number lub String.
5.23 – 5.25
Utworzenie tablicy.
Użyj new Array() lub literału tablicowego.
5.26, 5.27
Odczytanie i modyfikacja zawartości tablicy.
Użyj notacji indeksowej do odczytania lub przypisania nowej wartości pozycji w tablicy.
5.28, 5.29
Wyliczenie zawartości tablicy.
Użyj pętli for.
5.30
Obsługa błędów.
Użyj deklaracji try...catch.
5.31, 5.32
Porównanie wartości null i undefined.
Przekształć wartość w typ boolean lub użyj operatora równości (==) tak, by określał null i undefined jako jednakowe, a operator identyczności (===) jako odmienne.
5.33 – 5.36
Przygotowanie do pracy z JavaScript Skrypty w dokumentach HTML można definiować na kilka różnych sposobów. Możesz utworzyć skrypt inline, czyli taki, który jest częścią dokumentu HTML, albo skrypt zewnętrzny, czyli znajdujący się w osobnym pliku, do którego dokument odnosi się poprzez adres URL. Obydwa te podejścia wymagają użycia elementu script, który opisuję szerzej w rozdziale 7. W tym rozdziale, z myślą o prostocie, używam skryptów inline. W listingu 5.1 widnieje przykład takiego skryptu. Listing 5.1. Prosty skrypt inline
Przykład
Oto możliwie najprostszy skrypt, który zamieszcza w dokumencie słowo Witaj. Element script zamieszczono za pozostałą treścią dokumentu, aby wszystkie inne elementy zostały zinterpretowane przez przeglądarkę jeszcze przed wykonaniem skryptu. W rozdziale 7. opowiem, dlaczego to jest istotne, oraz objaśnię, jak w pewnej mierze kontrolować wykonywanie skryptów.
88
ROZDZIAŁ 5. WPROWADZENIE DO JAVASCRIPT
Wskazówka W wielu przykładach przy wprowadzeniu do JavaScript pojawia się metoda document.writeln, która jest prostym sposobem na ukazanie rezultatu działania skryptów. Metoda ta zwyczajnie polega na dodaniu wiersza tekstu do dokumentu HTML. Więcej o obiekcie document i metodzie writeln przeczytasz w rozdziale 26.
Wygląd treści i działanie skryptu w przeglądarce widać na rysunku 5.1.
Rysunek 5.1. Wykorzystanie JavaScript w celu dodania treści do dokumentu HTML W tym rozdziale nie prezentuję zrzutów ekranowych, lecz jedynie rezultaty niektórych przykładów. Forma wyjściowa listingu 5.1 jest więc następująca: Witaj
Niektóre z wyników sformatowałem, aby ułatwić ich czytanie. W kolejnych podrozdziałach przedstawię Ci najważniejsze cechy języka JavaScript. Jeżeli masz jakiekolwiek doświadczenie z programowaniem w dowolnym współczesnym języku, składnia i styl JavaScript wydadzą Ci się znajome.
Deklaracje Deklaracja jest podstawową cegiełką JavaScript. Każda deklaracja określa jedno polecenie; zazwyczaj kończy się je średnikiem (;). W rzeczywistości używanie średników nie jest konieczne, ale zwiększa to czytelność kodu i pozwala na podawanie wielu deklaracji w jednym wierszu. W listingu 5.2 widnieje skrypt z kilkoma deklaracjami. Listing 5.2. Deklaracje JavaScript
Przykład
Przeglądarka wykonuje kolejne deklaracje. W tym przykładzie zawarłem dwie proste deklaracje. Wynik wygląda następująco (choć rezultat może też zostać wyświetlony w jednym wierszu): Oto deklaracja Oto druga deklaracja
89
ROZDZIAŁ 5. WPROWADZENIE DO JAVASCRIPT
Definiowanie i używanie funkcji Jeżeli definiujesz deklaracje bezpośrednio w elemencie script, tak jak zrobiłem to w listingu 5.2, przeglądarka wykonuje owe deklaracje, kiedy tylko dociera do nich w kodzie. Zamiast tego możesz jednak zebrać wiele deklaracji w funkcji, które są wykonywane dopiero wtedy, kiedy przeglądarka natrafia na deklarację przywołującą taką funkcję (listing 5.3). Listing 5.3. Definiowanie funkcji JavaScript
Przykład
Deklaracje zawarte w funkcji objęte są nawiasami klamrowymi ({ i }); określa się je mianem bloków kodu. W powyższym listingu widnieje funkcja o nazwie myFunc, której blok kodu zawiera pojedynczą deklarację. W JavaScript występuje rozróżnienie między małymi a wielkimi literami, wobec czego słowo kluczowe function musi być pisane od małej litery. Deklaracja zawarta w funkcji nie zostanie wykonana, dopóki przeglądarka nie dotrze do innej deklaracji, która wywoływałaby ową funkcję, np.: myFunc();
Powyższy przykład nie jest szczególnie dobry, bo funkcję wywołano w nim bezpośrednio po jej zdefiniowaniu. Użyteczne przykłady znajdziesz w dalszej części rozdziału.
Definiowanie funkcji parametrami Tak jak większość języków programowania, JavaScript pozwala na definiowanie parametrów funkcji, jak widać w listingu 5.4. Listing 5.4. Definiowanie funkcji parametrami
Przykład
90
ROZDZIAŁ 5. WPROWADZENIE DO JAVASCRIPT
Funkcja myFunc ma w powyższym listingu dwa parametry: name i weather. JavaScript jest językiem o słabym typowaniu. Oznacza to, że nie trzeba deklarować typu danych parametrów przy definiowaniu funkcji. Do słabego typowania nawiążę jeszcze w dalszej części rozdziału, kiedy przyjrzymy się zmiennym JavaScript. Przy wywoływaniu funkcji z parametrami podaje się wartości jako argumenty funkcji, tak jak poniżej: myFunc("Adam", "słoneczny");
Rezultat zastosowania kodu z listingu jest następujący: Witaj, Adam. Mamy słoneczny dzień
Liczba argumentów przy wywoływaniu funkcji nie musi być taka sama, jak liczba parametrów funkcji. Kiedy wywołujesz funkcję, podając mniej argumentów, niż ma ona parametrów, wszelkie parametry o nieokreślonych wartościach pozostają niezdefiniowane. Jeżeli z kolei podasz więcej argumentów, niż funkcja ma parametrów, to nadmiarowe argumenty zostaną zignorowane. Wobec tego nie możesz utworzyć dwóch funkcji o jednakowej nazwie i odmiennych parametrach i oczekiwać, że JavaScript rozróżni je od siebie na podstawie argumentów podanych przy wywoływaniu funkcji. Kiedy definiujesz dwie funkcje o takiej samej nazwie, druga definicja zastępuje pierwszą.
Definiowanie funkcji, które zwracają wyniki Wyniki funkcji wywołuje się słowem kluczowym return. W listingu 5.5 widnieje przykład funkcji, która zwraca wynik. Listing 5.5. Zwrócony wynik funkcji
Przykład
Powyższa funkcja definiuje jeden parametr i używa jego wartości do wygenerowania prostego wyniku. Wywołałem funkcję i podałem wynik jako argument funkcji document.writeln: document.writeln(myFunc("Adam"));
Zauważ, że nie musisz deklarować, by funkcja zwracała wynik, ani określać typu danych wyniku. Wynik listingu jest następujący: Witaj, Adam.
91
ROZDZIAŁ 5. WPROWADZENIE DO JAVASCRIPT
Zmienne i typy Zmienne definiuje się słowem kluczowym var; można też w obrębie jednej deklaracji od razu przypisać wartość definiowanej zmiennej. Zmienne zdefiniowane w funkcji są zmiennymi lokalnymi i używane są wyłącznie w ramach danej funkcji. Zmienne zdefiniowane bezpośrednio w elemencie script są zmiennymi globalnymi, do których można się odnieść z dowolnego miejsca, w tym również z innych skryptów. W listingu 5.6 widnieje przykład zastosowania zmiennych lokalnych i globalnych. Listing 5.6. Zmienne lokalne i globalne
Przykład
JavaScript jest językiem o słabym typowaniu. Nie oznacza to, że w JavaScript nie występują typy, lecz że nie trzeba deklarować typów zmiennych, a można bez problemu przypisywać różne typy tym samym zmiennym. JavaScript określa typ na podstawie wartości przypisanej zmiennej i swobodnie zmienia typy w zależności od kontekstów, w jakich są używane. Wynik listingu 5.6 jest następujący: Witaj, Adam. Jest dziś słonecznie. Lubię jabłka.
Typy proste W JavaScript występuje mały zbiór typów prostych: string, number i boolean. Nie wygląda to na wiele, ale te trzy typy dają bardzo dużą elastyczność w pracy z JavaScript.
Typ string Wartości string definiuje się w pojedynczych lub podwójnych cudzysłowach, jak widać w listingu 5.7. Listing 5.7. Definiowanie zmiennych stringowych
Przykład
Cudzysłowy muszą się dopełniać. Nie wolno zaczynać ciągu cudzysłowem pojedynczym, a kończyć podwójnym.
Typ boolean Typ boolean może mieć dwie wartości: true i false. W listingu 5.8 wykorzystano obydwie wartości, ale ten typ zmiennych jest najbardziej przydatny w deklaracjach warunkowych, które opiszę w dalszej części rozdziału. Listing 5.8. Definiowanie wartości boolean
Przykład
Typ number Typ number obsługuje zarówno liczby całkowite, jak i zmiennoprzecinkowe (czyli liczby rzeczywiste). Przykład zastosowania obydwu rodzajów liczb widnieje w listingu 5.9. Listing 5.9. Definiowanie wartości liczbowych
Przykład
Nie musisz określać, jakiego rodzaju liczbę podajesz — wystarczy, że wprowadzisz odpowiednią wartość, a JavaScript dostosuje się do tego. W listingu podałem liczbę całkowitą i wartość zmiennoprzecinkową; poprzedziłem też jedną wartość przedrostkiem 0x, by wskazać wartość szesnastkową.
Tworzenie obiektów JavaScript obsługuje obiekty, które można tworzyć na różne sposoby. W listingu 5.10 widnieje przykład.
93
ROZDZIAŁ 5. WPROWADZENIE DO JAVASCRIPT
Listing 5.10. Tworzenie obiektu
Przykład
Utworzyłem obiekt deklaracją new Object() i przypisałem wynik (czyli nowo utworzony obiekt) zmiennej myData. Po utworzeniu obiektu mogłem przypisać wartości jego właściwościom: myData.name = "Adam";
Przed podaniem tej deklaracji mój obiekt nie miał właściwości name. Po jej wykonaniu pojawia się także właściwość o wartości Adam. Wartość właściwości można wywołać, zestawiając nazwę zmiennej z nazwą jej właściwości i przedzielając je kropką: document.writeln("Witaj, " + myData.name + ". ");
Literały obiektowe Obiekt i jego właściwości możesz zdefiniować za jednym podejściem, wykorzystując w tym celu format literału obiektowego. W listingu 5.11 widnieje tego przykład. Listing 5.11. Zastosowanie formatu literału obiektowego
Przykład
Każda definiowana właściwość oddzielona jest od swojej wartości dwukropkiem (:), podczas gdy same właściwości oddzielone są przecinkami (,).
Funkcje jako metody Do obiektów można poza właściwościami dodawać również funkcje. Przypisana obiektowi funkcja nazywana jest metodą. Jest to jedna z moich ulubionych funkcjonalności JavaScript. Metody wydają mi
94
ROZDZIAŁ 5. WPROWADZENIE DO JAVASCRIPT
się eleganckie i przyjemne w użyciu, choć nie potrafię wytłumaczyć, dlaczego tak sądzę. W listingu 5.12 widać przykład dodania metody. Listing 5.12. Dodawanie metod do obiektu
Przykład
W tym przykładzie posłużyłem się funkcją do utworzenia metody printMessages. Zauważ, że do właściwości zdefiniowanych przez obiekt musiałem się odnieść słowem kluczowym this. Kiedy funkcji używa się jako metody, funkcja z założenia przechodzi na obiekt, którego metoda zostaje wywołana jako argument specjalną zmienną this. Wynik powyższego listingu jest następujący: Witaj, Adam. Jest dziś słonecznie.
Wskazówka JavaScript ma o wiele więcej do zaoferowania poza możliwością tworzenia obiektów i zarządzania nimi, ale nie musisz się na tym znać, jeśli chcesz pracować z HTML5. Jeżeli chcesz się dowiedzieć więcej o tym języku, to rzuć okiem na książki, które poleciłem na początku rozdziału.
Praca z obiektami Z utworzonymi obiektami można robić wiele różnych rzeczy. W poniższych podpunktach opiszę czynności, które przydadzą się w dalszej pracy z tą książką.
Odczytywanie i modyfikowanie wartości właściwości Najbardziej oczywistą czynnością, jakiej można się podjąć w stosunku do obiektu, jest odczytanie lub zmodyfikowanie wartości przypisanych do definiowanych przez ów obiekt właściwości. Możesz skorzystać z dwóch różnych składni, które występują w listingu 5.13. Listing 5.13. Odczytywanie i modyfikowanie właściwości obiektów
Przykład
95
ROZDZIAŁ 5. WPROWADZENIE DO JAVASCRIPT
Pierwsza forma jest większości programistów znajoma; korzystałem z niej we wcześniejszych przykładach. Polega na zestawieniu nazwy obiektu i nazwy właściwości, przedzielonych kropką: myData.name = "Marcin";
Druga forma przyjmuje postać tablicy: myData["weather"] = "pochmurno";
Podałem tu nazwę właściwości w nawiasie kwadratowym ([ i ]). Jest to dość wygodny sposób uzyskiwania dostępu do właściwości, gdyż właściwość można ująć w zmiennej: var myData = { name: "Adam", weather: "słonecznie", }; var propName = "pogoda"; myData[propName] = "pochmurno";
Jest to podstawa do wyliczania właściwości obiektu, o czym piszę poniżej.
Wyliczanie właściwości obiektów Właściwości obiektu możesz wyliczyć, używając deklaracji for...in. W listingu 5.14 widnieje przykład jej zastosowania. Listing 5.14. Wyliczanie właściwości obiektów
Przykład
Pętla for...in wykonuje deklarację w blokach kodu każdej właściwości obiektu myData. Przy każdym powtórzeniu, zmiennej prop przypisywana jest nazwa przetwarzanej właściwości. Użyłem indeksu tablicowego (tj. zawartego między [ i ]) do wywołania wartości właściwości obiektu. Dane wyjściowe tego listingu (po przeformatowaniu w celu zwiększenia czytelności) wyglądają następująco: Zmienna: name Wartość: Adam Zmienna: weather Wartość: słonecznie Zmienna: printMessages Wartość: function () { document.writeln("Witaj, " + this.name + ". "); document.writeln("Jest dziś " + this.weather + "."); }
Z wyniku widać, że funkcja, którą zdefiniowałem jako metodę, również została wyliczona. Wynika to z elastyczności, z jaką JavaScript obsługuje funkcje, oraz z tego, że metody też są uznawane za właściwości obiektu.
Dodawanie i usuwanie właściwości i metod Nowe właściwości obiektu możesz zdefiniować nawet jeśli używasz literału obiektowego. W listingu 5.15 widnieje przykład. Listing 5.15. Dodanie nowej właściwości do obiektu
Przykład
W powyższym listingu dodałem do obiektu dayOfWeek nową właściwość. Użyłem do tego zapisu kropkowego (zestawiając oddzielone kropką nazwy obiektu i właściwości), choć mogłem równie dobrze skorzystać z zapisu indeksu tablicowego. Jak możesz się już domyślać, nowe metody do obiektu możesz dodać również poprzez przypisanie funkcji jako wartości właściwości (listing 5.16). Listing 5.16. Dodanie nowej metody do obiektu
97
ROZDZIAŁ 5. WPROWADZENIE DO JAVASCRIPT
Przykład
Właściwość lub metodę możesz usunąć z obiektu przy użyciu słowa kluczowego delete, tak jak widać to w listingu 5.17. Listing 5.17. Usuwanie właściwości z obiektu
Przykład
Określanie, czy obiekt ma właściwość Przy użyciu wyrażenia in można sprawdzić, czy obiekt ma jakąś właściwość (listing 5.18). Listing 5.18. Określenie, czy obiekt ma właściwość
Przykład
W tym przykładzie sprawdziłem, czy obecne są dwie właściwości: jedna istniejąca, a druga nieistniejąca. Zmienna hasName będzie miała wartość true, a właściwość hasDate wartość false.
Operatory JavaScript Operatory JavaScript są dość standardowe. Większość przydatnych operatorów przedstawiam w tabeli 5.2. Tabela 5.2. Przydatne operatory JavaScript Operator
Opis
++, --
Pre- lub postinkrementacja oraz pre- lub postdekrementacja
+, -, *, /, %
Dodawanie, odejmowanie, mnożenie, dzielenie, reszta z dzielenia
=
Mniejsze, mniejsze bądź równe, większe, większe bądź równe
==, !=
Równość, nierówność
===, !==
Identyczność, nieidentyczność
&&, ||
Logiczne I oraz LUB
=
Przypisanie
+
Konkatenacja ciągu
?:
Ternarna deklaracja warunkowa
Operatory równości i identyczności Operatory równości i identyczności są godne szczególnej uwagi. Operatory równości docelowo przypisują argumentom jednakowy typ, aby orzec o ich równości. Są przydatne, o ile jesteś świadomy sposobu ich działania. W listingu 5.19 widać działanie operatora równości. Listing 5.19. Operator równości
Przykład
Wynik tego skryptu jest następujący: Są równe
JavaScript konwertuje obydwa argumenty na ten sam typ i porównuje je. Operator równości w zasadzie sprawdza, czy wartości są równe, nie zwracając uwagi na ich typ. Jeżeli chcesz sprawdzić, czy zarówno wartości, jak i typy są jednakowe, to musisz skorzystać z operatora identyczności (===, czyli trzy znaki równości, w odróżnieniu od dwóch znaków operatora równości), tak jak widać to w listingu 5.20. Listing 5.20. Zastosowanie operatora identyczności
Przykład
W tym przykładzie operator identyczności wskazuje, że dwie zmienne są różne. Operator ten nie konwertuje typów. Wynik powyższego skryptu jest następujący: Nie są identyczne
Wskazówka Zauważ, że w listingach 5.19 i 5.20 użyłem deklaracji warunkowej if. Deklaracja ta porównuje dane i jeśli zwraca wynik true, to deklaracje w bloku kodu zostają wykonane. Deklaracji if można używać z dodatkową deklaracją else, zawierającą blok kodu, którego deklaracje zostają wykonane, jeżeli if zwraca wartość false.
Prymitywy JavaScript (czyli podstawowe typy, m.in. ciągi i liczby) porównywane są według wartości, lecz obiekty JavaScript na podstawie relacji między nimi. W listingu 5.21 widać, jak JavaScript wykonuje testy równości i identyczności obiektów.
100
ROZDZIAŁ 5. WPROWADZENIE DO JAVASCRIPT
Listing 5.21. Testy równości i identyczności obiektów
Przykład
Wyniki tego skryptu są następujące: Test 1: false Test 2: true Test 3: false Test 4: true
W listingu 5.22 te same testy przeprowadzone są na prymitywach. Listing 5.22. Testy równości i identyczności prymitywów
Przykład
Wyniki tego skryptu są następujące: Test 1: true Test 2: true Test 3: false Test 4: true
Konwersja typów Operator konkatenacji ciągu (+) ma pierwszeństwo przed operatorem dodawania (również +). Może to powodować zamieszanie, jako że JavaScript swobodnie konwertuje typy w celu uzyskania rezultatu, przy czym nie zawsze jest to rezultat oczekiwany. Przykład tego widnieje w listingu 5.23. Listing 5.23. Pierwszeństwo operatora konkatenacji ciągu
Przykład
Wynik tego skryptu jest następujący: Wynik 1: 10 Wynik 2: 55
To właśnie wyniki w rodzaju drugiego powodują zamieszanie. Coś, co miało być w zamyśle dodawaniem, zostaje zinterpretowane jako konkatenacja ciągu z powodu pierwszeństwa operatora i nadmiernej swobody konwersji typów. Aby zapobiec takim sytuacjom, możesz wymusić konwersję typów wartości — w ten sposób upewniasz się, że przeprowadzona zostanie właściwa operacja. W tabeli 5.3 przedstawiam najprzydatniejsze metody konwersji.
Konwersja liczb na ciągi Jeżeli pracujesz z wieloma zmiennymi liczbowymi, które chcesz zestawić do postaci ciągów, możesz przekonwertować liczby na ciągi metodą toString, tak jak ukazano to w listingu 5.24.
102
ROZDZIAŁ 5. WPROWADZENIE DO JAVASCRIPT
Tabela 5.3. Przydatne metody konwersji liczb na ciągi Metoda
Opis
Zwraca
toString()
Odtwarza liczbę w zapisie dziesiątkowym
string
toString(2) toString(8) toString(16)
Odtwarza liczbę w zapisie binarnym, ósemkowym lub szesnastkowym
string
toFixed(n)
Odtwarza liczbę rzeczywistą z n cyframi po separatorze dziesiętnym
string
toExponential(n)
Odtwarza liczbę w zapisie wykładniczym z jedną cyfrą przed separatorem dziesiętnym i n cyframi po nim
string
toPrecision(n)
Odtwarza liczbę z n cyfr znaczących, w razie konieczności wykorzystując zapis wykładniczy
string
Listing 5.24. Zastosowanie metody number.toString
Przykład
Zauważ, że wartość liczbową zamieściłem w nawiasie, a następnie wywołałem metodę toString. Wynika to z tego, że JavaScript musi mieć możliwość przekonwertowania literalnej wartości na wartość typu number przed wywołaniem metod przezeń definiowanych. Przedstawiłem również inny sposób na uzyskanie tego efektu (poza wywołaniem toString) — polega na wywołaniu funkcji String i podaniu wartości numerycznej w charakterze argumentu. Obydwie te techniki dają taki sam rezultat, tj. konwersję typu number na typ string, przy którym operator + służy do konkatenacji ciągów, a nie dodawania. Wynik tego skryptu jest następujący: Wynik: 55
Oto kilka innych metod, które dają większą kontrolę nad tym, jak liczba jest przedstawiana w ciągu. Opisuję je pokrótce w tabeli 5.3. Wszystkie ukazane w tabeli metody definiuje się typem number.
Konwersja ciągów na liczby Drugim problemem jest konwersja ciągów na liczby, tak by móc dodawać, zamiast konkatenować. Można tego dokonać przy użyciu funkcji Number, co widać w listingu 5.25. Listing 5.25. Konwersja ciągów na liczby
Przykład
Wynik tego skryptu jest następujący: Wynik: 10
Funkcja Number parsuje wartości ciągów dość rygorystycznie. Możesz jednak skorzystać z dwóch innych funkcji, które są bardziej elastyczne pod tym względem i ignorują znaki nienumeryczne: parseInt i parseFloat. W tabeli 5.4 opisuję wszystkie trzy funkcje. Tabela 5.4. Przydatne funkcje konwersji ciągów na liczby Metoda
Opis
Number()
Parsuje podany ciąg, by uzyskać liczbę całkowitą lub rzeczywistą
parseInt()
Parsuje podany ciąg, by uzyskać liczbę całkowitą
parseFloat()
Parsuje podany ciąg, by uzyskać liczbę całkowitą lub rzeczywistą
Praca z tablicami Tablice JavaScript działają w zasadzie tak samo jak tablice w większości innych języków programowania. Listing 5.26 pokazuje, jak należy tworzyć i wypełniać tablice. Listing 5.26. Tworzenie i wypełnianie tablicy
Przykład
Nową tablicę utworzyłem przy użyciu funkcji new Array(). Powstała w ten sposób pusta tablica, którą przypisałem zmiennej mojaTablica. W kolejnych deklaracjach przydzielam wartości różnym elementom tablicy. W tym przykładzie należy zwrócić na kilka rzeczy uwagę. Po pierwsze, nie musiałem deklarować liczby elementów tablicy przy jej tworzeniu. Tablice JavaScript mogą pomieścić dowolną liczbę elementów.
104
ROZDZIAŁ 5. WPROWADZENIE DO JAVASCRIPT
Po drugie, nie musiałem określić typu danych zawartych w tablicy. Tablice JavaScript mogą zawierać dowolne zestawienia typów danych. W powyższym przykładzie zawarłem w tablicy trzy różnego typu elementy: number, string i boolean.
Literał tablicowy Literał tablicowy pozwala na utworzenie i wypełnienie tablicy w jednej deklaracji, tak jak to widać w listingu 5.27. Listing 5.27. Zastosowanie literału tablicowego
Przykład
W tym przykładzie poleciłem, by zmiennej myArray przypisano nową tablicę, podając jednocześnie w nawiasie kwadratowym (między [ i ]) elementy tablicy.
Odczytywanie i modyfikowanie zawartości tablicy Wartość elementu indeksowego danej tablicy odczytuje się przy użyciu nawiasu kwadratowego, zamieszczając pożądaną pozycję indeksową pomiędzy znakami [ i ], co widać w listingu 5.28. JavaScript używa indeksów zaczynających się od zera. Listing 5.28. Odczytywanie danych indeksu tablicy
Przykład
Dane z dowolnego indeksu tablicy JavaScript możesz zmodyfikować, przypisując mu inną wartość. Podobnie jak przy zwykłych zmiennych, możesz bez problemu zmienić typ danych elementu. W listingu 5.29 widnieje przykład modyfikacji zawartości tablicy. Listing 5.29. Modyfikacja zawartości tablicy
105
ROZDZIAŁ 5. WPROWADZENIE DO JAVASCRIPT
Przykład
W tym przykładzie przypisałem wartość string indeksowi 0, gdzie wcześniej była wartość number.
Wyliczanie zawartości tablicy Zawartość tablicy możesz wyliczyć przy użyciu pętli for. Listing 5.30 pokazuje, jak użyć pętli do wyświetlenia zawartości prostej tablicy. Listing 5.30. Wyliczenie zawartości tablicy
Przykład
Pętla JavaScript działa tak samo jak pętle w wielu innych językach. Liczbę elementów możesz określić właściwością length. Wynik powyższego listingu jest następujący: Indeks 0: 100 Indeks 1: Adam Indeks 2: true
Metody obsługi tablic Obiektowi Array w JavaScript przypisane są pewne metody, służące do pracy z tablicami. W tabeli 5.5 znajdziesz najprzydatniejsze.
Obsługa błędów Do obsługi błędów w JavaScript służy deklaracja try...catch. Przy pracy z tą książką rzadko będziesz się musiał zajmować błędami, jako że koncentruję się w niej na omawianiu funkcji HTML5, a nie na podstawowych umiejętnościach programistycznych. W listingu 5.31 widać przykład zastosowania takiej deklaracji.
106
ROZDZIAŁ 5. WPROWADZENIE DO JAVASCRIPT
Tabela 5.5. Przydatne metody obsługi tablic Metoda
Opis
Zwraca
concat ()
Konkatenuje zawartość tablicy z tablicą podaną jako argument. Możliwe jest podanie wielu tablic.
Array
join()
Łączy wszystkie elementy tablicy w ciąg. Argument określa znak, którymi elementy mają być oddzielone.
string
pop()
Traktuje tablicę jak stos; usuwa i zwraca ostatni element tablicy.
object
push()
Traktuje tablicę jak stos; dodaje podany element do tablicy.
void
reverse()
Odwraca kolejność elementów tablicy.
Array
shift()
Działa jak pop, lecz oddziałuje na pierwszy element tablicy.
object
slice(,)
Zwraca podtablicę.
Array
sort()
Sortuje elementy tablicy.
Array
unshift()
Działa jak push, lecz zamieszcza nowy element na początku tablicy.
void
Listing 5.31. Obsługa wyjątku
Przykład
Problem, który pojawił się w tym skrypcie, jest dość częsty. Usiłuję w nim użyć niepoprawnie zainicjalizowanej zmiennej. Kod, po którym spodziewam się wystąpienia błędu, zamieściłem w bloku try deklaracji. Kiedy żaden błąd nie występuje, deklaracje zostają normalnie wykonane, a blok catch jest ignorowany. Kiedy jednak błąd się pojawia, wykonywanie deklaracji z bloku try natychmiast zostaje wstrzymane, a wykonywane są instrukcje z bloku catch. Błąd zostaje opisany w obiekcie Error, podanym w bloku catch. W tabeli 5.6 znajdują się właściwości obiektu Error. Tabela 5.6. Obiekt Error Właściwość
Opis
Zwraca
message
Opis błędu.
string
name
Nazwa błędu. Domyślnie jest to Error.
string
number
Numer błędu, jeżeli takowy istnieje.
number
107
ROZDZIAŁ 5. WPROWADZENIE DO JAVASCRIPT
Blok catch pozwala Ci na naprawienie błędu lub usunięcie jego efektów. Jeżeli jakieś deklaracje muszą zostać wykonane niezależnie od wystąpienia błędu, możesz je zamieścić w opcjonalnym bloku finally (listing 5.32). Listing 5.32. Zastosowanie bloku finally
Przykład
Porównywanie wartości undefined i null W JavaScript występuje kilka specjalnych wartości, z których porównywaniem należy uważać: undefined i null. Wartość undefined zwracana jest, kiedy odczytujesz zmienną, której nie nadano wartości, lub kiedy usiłujesz odczytać nieistniejącą właściwość obiektu. W listingu 5.33 widać zastosowanie undefined w JavaScript. Listing 5.33. Specjalna wartość undefined
Przykład
Wynik tego listingu jest następujący: Właściwość: undefined
108
ROZDZIAŁ 5. WPROWADZENIE DO JAVASCRIPT
JavaScript jest dziwny o tyle, że występuje w nim również wartość specjalna null, która nieco się różni od undefined. Wartość undefined zwracana jest, kiedy żadna wartość nie została przypisana. Wartości null używasz natomiast wtedy, kiedy chcesz wskazać, że przypisałeś jakąś wartość, lecz nie jest to poprawny object, string, number bądź boolean (czyli przypisałeś wartość, która nie jest wartością). Listing 5.34 ukazuje przejście od undefined do null. Listing 5.34. Zastosowanie wartości undefined i null
Przykład
Utworzyłem obiekt, a następnie spróbowałem odczytać wartość właściwości weather, której nie zdefiniowałem we wcześniejszym fragmencie kodu: document.writeln("Zmienna: " + myData.weather); document.writeln("Właściwość: " + ("weather" in myData));
Nie było tam jeszcze właściwości weather, toteż wartość zwrócona po wywołaniu myData.weather to undefined, a użycie słowa kluczowego in do określenia, czy obiekt zawiera tę właściwość, daje wartość zwrotną false. Wynik tych dwóch deklaracji wygląda następująco: Zmienna: undefined Właściwość: false
Właściwości weather przypisuję następnie wartość, dodając tym samym ową właściwość do obiektu: myData.weather = "słonecznie"; document.writeln("Zmienna: " + myData.weather); document.writeln("Właściwość: " + ("weather" in myData));
Odczytuję wartość właściwości i sprawdzam ponownie, czy obiekt ma taką właściwość. Jak można się spodziewać, obiekt jednak definiuje ową właściwość, a jej wartość to słonecznie:
109
ROZDZIAŁ 5. WPROWADZENIE DO JAVASCRIPT
Zmienna: słonecznie Właściwość: true
Następnie nadaję właściwości wartość null: myData.weather = null;
Przynosi to bardzo konkretny rezultat — obiekt wprawdzie nadal definiuje właściwość, ale jest ona pozbawiona wartości. Przy kolejnym sprawdzeniu uzyskuję następujące rezultaty: Zmienna: null Właściwość: true
Sprawdzanie, czy zmienna lub właściwość ma wartość null lub undefined Jeżeli chcesz sprawdzić, czy właściwość ma wartość null lub undefined (i nie interesuje Cię, którą konkretnie), możesz zwyczajnie użyć deklaracji if z operatorem negacji (!), tak jak to ukazano w listingu 5.35. Listing 5.35. Sprawdzanie, czy zmienna lub właściwość ma wartość null lub undefined
Przykład
Ta technika polega na przeprowadzanej przez JavaScript wymuszonej konwersji typów, która sprawia, że sprawdzane wartości są traktowane jako wartości boolean. Kiedy zmienna lub właściwość ma wartość null lub undefined, jej wymuszona wartość boolean to false.
110
ROZDZIAŁ 5. WPROWADZENIE DO JAVASCRIPT
Rozróżnianie między null i undefined Kiedy chcesz porównać dwie wartości, masz pewien wybór. Jeżeli chcesz uznać wartość undefined za tożsamą z null, możesz użyć operatora równości (==) i zdać się na konwersję typów JavaScript. Zmienna o wartości undefined zostanie wtedy uznana za równą zmiennej o wartości null. Jeżeli chcesz jednak odróżnić wartość null od undefined, to musisz skorzystać z operatora identyczności ( ===). Obydwa porównania widać w listingu 5.36. Listing 5.36. Porównania równości i identyczności wartości null i undefined
Przykład
Wynik tego skryptu jest następujący: Równość: true Identyczność: false
Przydatne narzędzia JavaScript Istnieje wiele narzędzi, które mogą uprościć pracę z JavaScript. Sądzę, że szczególną uwagę warto zwrócić na dwa z nich.
Debugery JavaScript Współczesne przeglądarki albo mają wbudowane zaawansowane debugery JavaScript, albo obsługują je za pośrednictwem wtyczek (np. Firebug w Mozilla Firefox). Można w nich ustawiać punkty wstrzymania, wykrywać błędy oraz przechodzić kolejno przez wszystkie etapy skryptu podczas jego wykonywania. Jeżeli masz problem z jakimś skryptem, to w pierwszej kolejności powinieneś skorzystać z debugera. Sam korzystam z Google Chrome i dobrze mi się pracuje z wbudowanym debugerem. Jeżeli natomiast mierzę się ze szczególnie trudnym problemem, to używam Firebug na Firefoksie. Debuger Firebug wydaje się najskuteczniejszy w styczności ze skomplikowanymi problemami.
111
ROZDZIAŁ 5. WPROWADZENIE DO JAVASCRIPT
Biblioteki JavaScript Z JavaScript niezwykle łatwo korzystać, kiedy ma się do dyspozycji zestaw narzędzi lub bibliotekę tego języka. Zestawów takich nie brak, ale mogę w szczególności polecić dwa konkretne. Pierwszy — a zarazem ten, z którym mam najwięcej doświadczenia — to jQuery. jQuery i uzupełniający go jQuery UI są niezwykle popularne, aktywnie rozwijane oraz pełne użytecznych funkcji. Dzięki jQuery praca z JavaScript jest prostsza i o wiele przyjemniejsza. Drugi zestaw narzędzi to Dojo — główny konkurent jQuery. Dojo ma bardzo podobne funkcje do jQuery, jest szeroko stosowany i może się pochwalić równie dobrą obsługą. Z Dojo mam mniej doświadczenia niż z jQuery, ale wrażenia ze styczności mam pozytywne. jQuery pobierzesz z jquery.com, a Dojo z http://dojotoolkit.org. Może to wprawdzie wyglądać, jakbym usiłował Ci wciskać swoje książki, ale jeśli chcesz się dowiedzieć więcej o jQuery, sięgnij po Pro jQuery.
Podsumowanie Przedstawiłem Ci w tym rozdziale główne funkcje JavaScript, z których będziesz korzystał w pracy z tą książką. JavaScript jest integralnym elementem HTML5, a podstawowa znajomość tego języka i jego użytkowania jest konieczna.
112
CZĘŚĆ II
Elementy HTML
Skoro już jesteś przygotowany i odświeżyłeś swoją znajomość podstaw, możemy się przyjrzeć HTML5 bliżej. W tej części książki przedstawię Ci elementy HTML, włącznie z tymi, które dopiero pojawiły się w HTML5 lub uległy w tej wersji zmianie.
ROZDZIAŁ 6
Elementy HTML — kontekst
W najbliższych rozdziałach opiszę elementy HTML5. Wiele z nich istniało już w HTML 4, ale też w wielu przypadkach zmianie uległo znaczenie bądź sposób ich wykorzystywania. Zanim jednak przyjrzymy się elementom, chciałbym ująć ich temat w szerszym kontekście i ułożyć podstawy pod dalszy wywód. Znajomość charakteru elementów HTML jest nie mniej ważna niż znajomość właściwego ich stosowania.
Semantyka a prezentacja Jedna z głównych zmian HTML5 ma podłoże filozoficzne — rozdzielenie semantycznego znaczenia elementu od wpływu elementu na wygląd treści. W zasadzie jest to sensowny pomysł — używać elementów HTML do nadawania treści struktury i znaczenia, a kontrolować prezentację treści poprzez nakładanie na elementy stylów CSS. Nie każdy odbiorca dokumentów HTML musi je koniecznie wyświetlać, a oddzielając treść od jej prezentacji, sprawiasz, że kod HTML jest łatwiejszy do przetworzenia i łatwiej automatycznie przyswoić jego znaczenie. Większość elementów, które pojawiły się w HTML5, nadaje treści konkretne znaczenie. Elementu article (opisanego w rozdziale 10.) możesz użyć do oznaczenia samodzielnego fragmentu treści, który można rozpowszechniać, a elementu figure do oznaczenia obrazka. Wiele z elementów obecnych w HTML 4 zaistniało, kiedy nikt jeszcze nie myślał o oddzielaniu prezentacji od znaczenia. Stawia nas to w dziwnej sytuacji. Świetnym przykładem jest element b. W wersjach języka sprzed HTML5 element b nakazywał przeglądarce pogrubiać tekst zawarty pomiędzy znacznikiem otwierającym a zamykającym. W HTML5 znaczniki pełniące funkcję czysto prezentacyjną nie są pożądane, toteż trzeba było wymyślić nową definicję tego elementu. Element b oznacza ciąg tekstu oddzielony od otaczającej go treści, na który nie kładzie się dodatkowej emfazy ani któremu nie przypisuje się większego znaczenia, a którego standardową formą prezentacji typograficznej jest pogrubiony tekst. Przykładowo, mogą to być słowa kluczowe w streszczeniu dokumentu albo nazwy produktów w recenzji. — HTML: The Markup Language, w3c.org Jest to pokrętny sposób tłumaczenia tego, że element b poleca przeglądarce pogrubić tekst. Element ten nie ma żadnego znaczenia semantycznego — odnosi się w całości do prezentacji. Z kolei cała ta niejasna definicja mówi nam coś bardzo ważnego o HTML5: żyjemy w czasie przemian. Musimy zachować stare elementy, ponieważ są w powszechnym użytku, a pozbycie się elementów HTML 4 z HTML5 jest nie do pomyślenia, gdyż spowolniłoby to szybkość przyswajania języka przez odbiorców. Mamy zatem do czynienia ze standardem o dwóch prędkościach. Niektóre z elementów, zwłaszcza nowszych, mają wyłącznie znaczenie semantyczne. Inne, w znacznej mierze składające się z jednoliterowych znaczników, mają tak ugruntowaną
ROZDZIAŁ 6. ELEMENTY HTML — KONTEKST
pozycję, że jesteśmy gotowi nagiąć zasadę oddzielenia prezentacji od semantyki, choć wolimy nie mówić o tym na głos. Przy lekturze opisów elementów, które pojawią się już w następnym rozdziale, bądź pomny tej rozbieżności pomiędzy nowym a starym sposobem myślenia. Z pewnością pomoże Ci to zrozumieć charakter pewnych drobnych dziwactw, na jakie się natkniesz. Sugerowałbym Ci, że lepiej narażać się na hiperpoprawność semantyczną i — kiedy tylko ma to sens — unikać elementów służących w przeważającej mierze (lub wyłącznie) do określania wyglądu treści. Nie ma nic trudnego w zdefiniowaniu klas i nałożeniu odpowiednich stylów. Jeżeli będziesz korzystać ze stylów odnoszących się właściwie do rodzajów treści (a nie tylko określających to, jak chcesz, żeby treść wyglądała), uda Ci się zachować przynajmniej ducha poprawności semantycznej.
Jak dobierać elementy Pomijając już nawet kwestie związane z prezentacją — specyfikacja HTML5 bywa niejednoznaczna. Niektóre z elementów mają bardzo ogólne znaczenie, co na pierwszy rzut oka może zniechęcać. Elementy rzeczywiście mają ogólne znaczenie, ale wynika to z tego, że służą do oznaczania wielu różnych rodzajów treści. Kiedy piszę, to na ogół robię to na potrzeby książek takich jak ta, którą teraz czytasz. Kiedy słyszę pojęcia takie jak sekcja, artykuł, nagłówek czy ilustracja, to od razu myślę o strukturze i stylach, jakich moje wydawnictwo wymaga od autorów. Te same pojęcia mogą mieć różne znaczenie w zależności od rodzajów treści, do których się odnoszą. Specyfikacja, umowa i wpis na blogu mogą mieć sekcje, ale znaczenie tego terminu może być przy każdym z tych dokumentów zupełnie inne. Zamiast jednak tworzyć osobne definicje dla sekcji książki, sekcji specyfikacji, sekcji umowy i sekcji bloga, posługujemy się ogólnym terminem, który następnie odpowiednio interpretujemy. Istnieją pewne podstawowe zasady, do których przestrzegania bym Cię zachęcał przy doborze elementów do oznaczania treści. Omówię je w poniższych punktach.
Im mniej, tym lepiej Bardzo łatwo puścić wodze fantazji i zamieścić w dokumencie gigantyczne ilości znaczników. Wystarczy jednak skorzystać ze znaczników, które nadadzą treści znaczenie semantyczne. Jeżeli nie musisz definiować złożonych tytułów, nie musisz korzystać z elementu hgroup (opisanego w rozdziale 10.), a szczegółowe cytaty opatrzone elementem cite (rozdział 8.) wymagane są tylko w dokumentach, w których są rzeczywiście istotne (np. w artykułach prasowych). Określenie liczby znaczników do zastosowania wymaga pewnego doświadczenia, ale jest na to ogólna zasada. Zadaj sobie pytanie: do czego posłuży warstwa semantyczna danego elementu? Jeżeli nie mogę od razu znaleźć odpowiedzi, to rezygnuję z użycia elementu.
Nie nadużywaj elementów Każdy element służy do oznaczania jakiegoś konkretnego rodzaju treści — jest tak nawet w przypadku elementów prezentacyjnych, takich jak b. Przy oznaczaniu treści używaj elementów wyłącznie do tego, do czego są przeznaczone, i unikaj tworzenia własnej semantyki. Jeżeli nie możesz znaleźć elementu o odpowiadającym Ci znaczeniu, rozważ skorzystanie z któregoś ogólnego elementu (takiego jak span lub div) i globalnego atrybutu class do określenia jego znaczenia w dokumencie. Użycie klas nie musi się ograniczać do stylów CSS.
Wyrażaj się konkretnie i spójnie Powinieneś wybierać elementy, które określają treść możliwie precyzyjnie. Musisz więc przezwyciężyć pokusę, by tworzyć stronę, opierając się na ogólnych elementach, skoro istnieją elementy określające
116
ROZDZIAŁ 6. ELEMENTY HTML — KONTEKST
odpowiednie rodzaje treści. W HTML 4 panowała tendencja, by polegać na elementach div (opisanych w rozdziale 9.) przy tworzeniu struktury strony. Problemem było jednak to, że semantyka nie była od razu widoczna dla zapoznającego się z treścią odbiorcy. Możesz oczywiście utworzyć klasę article i używać jej do nakładania stylów, lecz klasa ta nie będzie tak jednoznaczna dla odbiorców, jak element article. Podobnie, kiedy już decydujesz się na użycie jakiegoś elementu, to korzystaj z niego w spójny sposób na przestrzeni całej strony, serwisu lub aplikacji internetowej. Ułatwi Ci to dalszą pracę ze znacznikami HTML, a innym przyswajanie sobie Twojego kodu.
Nie lekceważ odbiorcy Łatwo przyjąć założenie, że odbiorców Twojego kodu interesuje tylko to, jak strona jest wyświetlana w przeglądarce, i — co za tym idzie — nie musisz się przejmować dokładnością semantyczną kodu. U podstaw rozdziału semantyki od prezentacji leży założenie, że ułatwia to programom przetwarzanie kodu i — wobec tego — można spodziewać się dalszego rozpowszechnienia się takiego stylu użytkowania kodu HTML wraz z upowszechnieniem się HTML5. Zakładając, że nie musisz się przejmować dokładnością lub spójnością kodu, sprawiasz, że przetwarzanie go staje się trudniejsze, co z kolei ogranicza zakres zastosowań, jakie odbiorca mógłby znaleźć dla Twoich treści.
Struktura opisów elementów Opis każdego elementu składa się z tabeli zawierającej najważniejsze informacje, do których będziesz mógł się w każdej chwili odnieść, kiedy już będziesz opatrywał treść dokumentów znacznikami. W tabeli 6.1 znajduje się przykładowy opis elementu ol, którym oznacza się uporządkowane listy. (Szczegóły o listach w HTML znajdziesz w rozdziale 9.). Tabela 6.1. Element ol Element
ol
Typ elementu
Strukturalny
Dozwoleni rodzice
Każdy element, który może zawierać elementy strukturalne
Atrybuty lokalne
start, reversed, type
Zawartość
Brak lub dowolna liczba elementów li
Znaczniki
Otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
W HTML5 dodano atrybut reversed. Atrybuty start i type, z których zrezygnowano w HTML 4, przywrócono w HTML5, lecz mają teraz znaczenie semantyczne (a nie prezentacyjne). Zrezygnowano z atrybutu compact.
Domyślny styl prezentacji
ol { display: block; list-style-type: decimal; margin-before: 1em; margin-after: 1em; margin-start: 0; margin-end: 0; padding-start: 40px; }
Z tabel w tym rozdziale dowiesz się, jakie dany element może mieć elementy-rodziców, jakie treści może zawierać, jaki jest wymagany sposób formatowania znaczników i domyślny styl prezentacji oraz czy ów element jest nowy lub uległ zmianom w HTML5. Informacje o dopuszczalnych rodzicach i zawartości opierają się na kategoriach elementów, które opisałem w rozdziale 3. — głównie są to elementy strukturalne i treściowe.
117
ROZDZIAŁ 6. ELEMENTY HTML — KONTEKST
Spis elementów W poniższych tabelach znajdziesz streszczone opisy wszystkich elementów HTML5, które opisuję w kolejnych rozdziałach.
Elementy dokumentu i metadanych W tabeli 6.2 znajdują się krótkie opisy elementów dokumentu i metadanych, które przedstawiam szerzej w rozdziale 7. Służą one do tworzenia nadrzędnej struktury dokumentu HTML, podawania przeglądarce danych o dokumencie oraz definiowania skryptów, stylów CSS, a także określania, jaka treść ma być wyświetlana, gdy przeglądarka ma wyłączoną obsługę skryptów. Tabela 6.2. Elementy dokumentu i metadanych Element
Opis
Typ
Nowości i zmiany
base
Określa podstawę względnych adresów URL.
Metadane
Niezmieniony
body
Wskazuje treść dokumentu HTML.
Brak
Zmieniony
DOCTYPE
Wskazuje początek dokumentu HTML.
Brak
Zmieniony
head
Zawiera metadane dokumentu.
Brak
Brak
html
Wskazuje na początek kodu HTML w dokumencie.
Brak
Zmieniony
link
Określa relację z zewnętrznymi zasobami, przeważnie w rodzaju arkusza treści lub favikony.
Metadane
Zmieniony
meta
Podaje informacje o dokumencie.
Metadane
Zmieniony
noscript
Zawiera treść wyświetlaną, kiedy przeglądarka nie obsługuje skryptów lub kiedy ich obsługa jest wyłączona.
Metadane/Treściowy
Niezmieniony
script
Wskazuje blok skryptu — inline bądź w zewnętrznym pliku.
Metadane/Treściowy
Zmieniony
style
Wskazuje styl CSS.
Metadane
Zmieniony
title
Określa tytuł dokumentu.
Metadane
Brak
Elementy tekstowe Elementów tekstowych używa się do nadawania zasobom struktury i znaczenia. W tabeli 6.3 znajdują się krótkie opisy tych elementów, które omówię szerzej w rozdziale 8. Tabela 6.3. Elementy tekstowe Element
Opis
Typ
Nowości i zmiany
a abbr
Tworzy odnośnik.
Treściowy/Strukturalny
Zmieniony
Wskazuje skrót.
Treściowy
Niezmieniony
b
Wydziela ciąg tekstu bez wyróżniania go lub przydawania mu większej wartości.
Treściowy
Zmieniony
br
Określa łamanie wiersza.
Treściowy
Niezmieniony
118
ROZDZIAŁ 6. ELEMENTY HTML — KONTEKST
Tabela 6.3. Elementy tekstowe — ciąg dalszy Element
Opis
Typ
Nowości i zmiany
cite
Wskazuje tytuł innego tekstu.
Treściowy
Zmieniony
code
Wskazuje fragment kodu.
Treściowy
Niezmieniony
del
Wskazuje tekst, który usunięto z dokumentu.
Treściowy/Strukturalny
Nowy
dfn
Wskazuje definicję terminu.
Treściowy
Niezmieniony
em
Wskazuje ciąg tekstu, na który kładziona jest emfaza.
Treściowy
Niezmieniony
i
Wskazuje ciąg tekstu o innym charakterze niż otaczająca go treść, np. wyraz obcy.
Treściowy
Zmieniony
ins
Wskazuje tekst, który wstawiono do dokumentu.
Treściowy/Strukturalny
Nowy
kbd
Wskazuje tekst wprowadzany przez użytkownika.
Treściowy
Niezmieniony
mark
Wskazuje treści wyróżnione ze względu na ich istotność w innym kontekście.
Treściowy
Nowy
q
Wskazuje treści cytowane z innego źródła.
Treściowy
Niezmieniony
rp
Wskazuje tekst dodatkowy w elemencie ruby.
Treściowy
Nowy
rt
Wskazuje tekst oznaczenia w elemencie ruby.
Treściowy
Nowy
ruby
Wskazuje oznaczenia do zamieszczenia nad znakami pisma logograficznego lub po ich prawej stronie.
Treściowy
Nowy
s
Wskazuje tekst, który się zdezaktualizował.
Treściowy
Zmieniony
samp
Wskazuje kod podany przez program.
Treściowy
Niezmieniony
small
Wskazuje drobne pismo.
Treściowy
Zmieniony
span
Standardowy element, który nie ma własnego znaczenia semantycznego. Używaj go do nadawania treści atrybutów globalnych bez nadawania jej dodatkowego znaczenia semantycznego.
Treściowy
Niezmieniony
strong
Wskazuje, że tekst jest istotny.
Treściowy
Niezmieniony
sub
Wskazuje indeks dolny.
Treściowy
Niezmieniony
sup
Wskazuje indeks górny.
Treściowy
Niezmieniony
time
Wskazuje godzinę lub datę.
Treściowy
Nowy
u
Wydziela ciąg tekstu bez wyróżniania go lub przydawania mu większej wartości.
Treściowy
Zmieniony
var
Wskazuje zmienną programu lub systemu komputerowego.
Treściowy
Niezmieniony
wbr
Wskazuje miejsce, w którym można bezpiecznie złamać wiersz.
Treściowy
Nowy
119
ROZDZIAŁ 6. ELEMENTY HTML — KONTEKST
Grupowanie treści Elementy przedstawione w tabeli 6.4 służą do zestawiania powiązanych treści. Więcej o tych elementach przeczytasz w rozdziale 9. Tabela 6.4. Grupowanie elementów Element
Opis
Typ
Nowości i zmiany
blockquote
Wskazuje blok treści cytowanej z innego źródła.
Strukturalny
Niezmieniony
dd
Wskazuje definicję w obrębie elementu dl.
Brak
Niezmieniony
div
Standardowy element, który nie ma własnego znaczenia semantycznego. Jest to odpowiednik elementu strukturalnego span.
Strukturalny
Niezmieniony
dl
Wskazuje listę zawierającą serię terminów i definicji.
Strukturalny
Niezmieniony
dt
Wskazuje termin w obrębie elementu dl.
Brak
Niezmieniony
figcaption
Wskazuje podpis elementu figure.
Brak
Nowy
figure
Wskazuje ilustrację.
Strukturalny
Nowy
hr
Wskazuje zmianę tematyczną na poziomie akapitu.
Strukturalny
Zmieniony
li
Wskazuje element w obrębie elementu ul, ol lub menu.
Brak
Zmieniony
ol
Wskazuje uporządkowaną listę.
Strukturalny
Zmieniony
p
Wskazuje paragraf.
Strukturalny
Zmieniony
pre
Wskazuje treść, której formatowanie powinno być zachowane.
Strukturalny
Niezmieniony
ul
Wskazuje nieuporządkowaną listę elementów.
Strukturalny
Zmieniony
Dzielenie treści na sekcje Elementy przedstawione w tabeli 6.5 służą do rozdzielania treści tak, by wyizolować poszczególne koncepcje, idee bądź tematy. Elementy te są w większości nowe i w znacznej mierze ułatwiają oddzielanie znaczenia elementów od ich wyglądu. Więcej na ich temat przeczytasz w rozdziale 10. Tabela 6.5. Elementy służące do dzielenia treści Element
Opis
Typ
Nowości i zmiany
address
Wskazuje dane kontaktowe w odniesieniu do dokumentu lub artykułu (article).
Strukturalny
Nowy
article
Wskazuje samodzielny blok treści.
Strukturalny
Nowy
aside
Wskazuje treści luźno powiązane z otaczającym je materiałem.
Strukturalny
Nowy
details
Tworzy sekcję, którą użytkownik może powiększyć, by zapoznać się ze szczegółami.
Strukturalny
Nowy
footer
Wskazuje obszar stopki.
Strukturalny
Nowy
h1-h6
Wskazuje nagłówek.
Strukturalny
Niezmieniony
header
Wskazuje obszar nagłówków.
Strukturalny
Nowy
120
ROZDZIAŁ 6. ELEMENTY HTML — KONTEKST
Tabela 6.5. Elementy służące do dzielenia treści — ciąg dalszy Element
Opis
Typ
Nowości i zmiany
hgroup
Ukrywa w strukturze dokumentu wszystkie podane nagłówki, z wyjątkiem nagłówków najwyższego poziomu.
Strukturalny
Nowy
nav
Wskazuje duże nagromadzenie elementów nawigacyjnych.
Strukturalny
Nowy
section
Wskazuje istotne koncepcje lub tematy.
Strukturalny
Nowy
summary
Wskazuje tytuł lub opis treści w okalającym elemencie details.
Brak
Nowy
Tworzenie tabel Elementy z tabeli 6.6 służą do tworzenia tabel, czyli układania danych w siatce. Główną zmianą w HTML5 jest to, że nie możesz już korzystać z tabel do definiowania layoutu stron. Zamiast tego musisz używać właściwości tabelowych CSS, które opisuję w rozdziale 21. Tabela 6.6. Elementy tabel Element
Opis
Typ
Nowości i zmiany
caption
Umieszcza w tabeli podpis.
Brak
Zmieniony
col
Wskazuje kolumnę.
Brak
Zmieniony
colgroup
Wskazuje grupę kolumn.
Brak
Zmieniony
table
Wskazuje tabelę.
Strukturalny
Zmieniony
tbody
Wskazuje część główną tabeli.
Brak
Zmieniony
td
Wskazuje pojedynczą komórkę tabeli.
Brak
Zmieniony
tfoot
Wskazuje stopkę tabeli.
Brak
Zmieniony
th
Wskazuje pojedynczą komórkę nagłówka.
Brak
Zmieniony
thead
Wskazuje nagłówek tabeli.
Brak
Zmieniony
tr
Wskazuje rząd komórek.
Brak
Zmieniony
Tworzenie formularzy Elementy przedstawione w tabeli 6.7 służą do tworzenia formularzy HTML, które pobierają dane wejściowe od użytkownika. Ta dziedzina korzystania z HTML została w szczególnie uprzywilejowany sposób potraktowana w HTML5 — pojawiło się wiele nowych elementów i funkcji, w tym możliwość zatwierdzania danych wejściowych po stronie klienta, zanim jeszcze użytkownik je przekaże. Elementy HTML formularzy opisuję w rozdziałach 12., 13. i 14. Szczególnie interesujące są nowe rodzaje elementu input, które przedstawię w rozdziale 12., a szerzej omówię w rozdziale 13. Tabela 6.7. Elementy formularzy Element
Opis
Typ
Nowości i zmiany
button
Wskazuje przycisk służący do wysłania danych lub wyczyszczenia formularza (lub do innego celu).
Treściowy
Zmieniony
datalist
Określa zbiór sugerowanych wartości.
Strukturalny
Zmieniony
121
ROZDZIAŁ 6. ELEMENTY HTML — KONTEKST
Tabela 6.7. Elementy formularzy — ciąg dalszy Element
Opis
Typ
Nowości i zmiany
fieldset
Wskazuje grupę elementów formularza.
Strukturalny
Zmieniony
form
Wskazuje formularz HTML.
Strukturalny
Zmieniony
input
Wskazuje kontrolkę służącą do pobierania danych od użytkownika.
Treściowy
Zmieniony
keygen
Generuje klucz prywatny i publiczny.
Treściowy
Nowy
label
Wskazuje oznaczenie elementu formularza.
Treściowy
Zmieniony
legend
Wskazuje oznaczenie elementu fieldset.
Brak
Niezmieniony
optgroup
Wskazuje grupę powiązanych elementów option.
Brak
Niezmieniony
option
Wskazuje opcję, która ma być przedstawiona użytkownikowi.
Brak
Niezmieniony
output
Wskazuje wynik obliczenia.
Treściowy
Nowy
select
Przedstawia użytkownikowi określony zbiór opcji.
Treściowy
Zmieniony
textarea
Umożliwia użytkownikowi wprowadzenie wielowierszowego tekstu.
Treściowy
Zmieniony
Osadzanie zasobów Elementy z tabeli 6.8 służą do osadzania zasobów w dokumencie HTML. Niektóre z nich opiszę w rozdziale 15., a inne w dalszej części książki. Tabela 6.8. Elementy służące do osadzania zasobów Element
Opis
Typ
Nowości i zmiany
area
Wskazuje obszar mapy obrazu po stronie klienta.
Treściowy
Zmieniony
audio
Wskazuje zasoby audio.
Brak
Nowy
canvas
Tworzy płótno dynamicznej grafiki.
Treściowy/Strukturalny
Nowy
embed
Osadza zasoby w dokumencie HTML przy użyciu wtyczki.
Treściowy
Nowy
iframe
Osadza dokument w innym poprzez wytworzenie kontekstu.
Treściowy
Zmieniony
img
Osadza obraz.
Treściowy
Zmieniony
map
Określa definicję mapy obrazu po stronie klienta.
Treściowy/Strukturalny
Zmieniony
meter
Wyświetla wartość numeryczną w kontekście wybranego zakresu.
Treściowy
Nowy
object
Osadza zasoby w dokumencie HTML; może również służyć do tworzenia kontekstów przeglądania i tworzenia map obrazów po stronie klienta.
Treściowy/Strukturalny
Zmieniony
param
Wskazuje parametr, który zostaje przekazany wtyczce za pośrednictwem elementu object.
Brak
Niezmieniony
122
ROZDZIAŁ 6. ELEMENTY HTML — KONTEKST
Tabela 6.8. Elementy służące do osadzania zasobów — ciąg dalszy Element
Opis
Typ
Nowości i zmiany
progress
Wyświetla wyobrażenie postępu wykonywania jakiegoś procesu.
Treściowy
Nowy
source
Wskazuje zasoby medialne.
Brak
Nowy
svg
Wskazuje zasoby wektorowe.
Brak
Nowy
track
Wskazuje dodatkowe zasoby medialne, np. napisy do filmu.
Brak
Nowy
video
Wskazuje zasoby wideo.
Brak
Nowy
Niewdrożone elementy Istnieją dwa elementy, które nie są obecnie obsługiwane przez jakąkolwiek przeglądarkę, a które opisano pobieżnie w specyfikacjach HTML5. Są to elementy command i menu, których zadaniem jest ułatwienie pracy z menu i elementami interfejsu użytkownika. Nie mogę jednak odnieść się do nich w tej książce bardziej szczegółowo. Mam nadzieję, że nowocześniejsze wersje tych przeglądarek pozwolą na wypracowanie jakiegoś konsensusu w sprawie znaczenia tych elementów.
Podsumowanie W tym rozdziale ułożyłem podwaliny pod szczegółowe omówienia elementów HTML5 w dalszych rozdziałach. Podałem również skrócony spis, w którym znajdziesz opisy elementów, gdybyś kiedyś chciał sobie odświeżyć wiadomości. Kiedy już zaczniesz poznawać elementy i atrybuty HTML, pamiętaj o wskazówkach, które podałem na początku rozdziału: używaj możliwie wyspecjalizowanych elementów, nie nadużywaj ich oraz korzystaj z nich spójnie w obrębie dokumentu, witryny i aplikacji.
123
ROZDZIAŁ 6. ELEMENTY HTML — KONTEKST
124
ROZDZIAŁ 7
Tworzenie dokumentów HTML
W tym rozdziale przyjrzymy się najbardziej podstawowym elementom zdefiniowanym w HTML5: elementom dokumentu i metadanych. Są to elementy służące do utworzenia dokumentu HTML i opisania jego zawartości. Choć są to jedne z najmniej ciekawych elementów zdefiniowanych w HTML, to mają fundamentalne znaczenie. Możesz pominąć ten rozdział i wrócić do niego później — ale wróć koniecznie. W każdym dokumencie HTML wykorzystuje się przynajmniej kilka z tych elementów (a często wszystkie). Umiejętność prawidłowego korzystania z nich jest nieodzowna przy tworzeniu zgodnych ze standardami dokumentów HTML5. W tabeli 7.1 znajduje się streszczenie całego rozdziału. Tabela 7.1. Streszczenie rozdziału Problem
Rozwiązanie
Listing
Wskazanie, że dokument zawiera kod HTML5.
Użyj elementu doctype.
7.1
Wskazanie początku kodu HTML w dokumencie.
Użyj elementu html.
7.2
Wskazanie początku sekcji metadanych dokumentu HTML.
Użyj elementu head.
7.3
Wskazanie początku sekcji z treścią dokumentu HTML.
Użyj elementu body.
7.4
Określenie tytułu dokumentu HTML.
Użyj elementu title.
7.5
Zdefiniowanie adresu URL, do którego mają się odnosić względne adresy URL dokumentu.
Użyj elementu base.
7.6
Dodanie opisów danych zawartych w dokumencie HTML.
Użyj elementu meta.
7.7
Określenie kodowania znaków w dokumencie HTML.
Użyj elementu meta z atrybutem charset.
7.8
Określenie domyślnego arkusza stylów dla dokumentu HTML lub polecenie, by okresowo odświeżać zawartość strony.
Użyj elementu meta z atrybutem http-equiv.
7.9
Definiowanie stylów inline.
Użyj elementu style.
7.10 – 7.12
Wczytanie zewnętrznego zasobu, m.in. arkusza stylów lub favikony.
Użyj elementu link.
7.13 – 7.15
Wczytanie z wyprzedzeniem zasobu, który stanie się potrzebny.
Użyj elementu link z atrybutem rel o wartości prefetch.
7.16
ROZDZIAŁ 7. TWORZENIE DOKUMENTÓW HTML
Tabela 7.1. Streszczenie rozdziału — ciąg dalszy Problem
Rozwiązanie
Listing
Zdefiniowanie skryptu inline.
Użyj elementu script.
7.17
Wczytanie zewnętrznego pliku ze skryptem.
Użyj elementu script z atrybutem src.
7.18 – 7.19
Określenie, kiedy i w jaki sposób skrypt ma być wykonany.
Użyj elementu script z atrybutem async lub defer.
7.20 – 7.24
Zdefiniowanie treści wyświetlanych, kiedy brakuje obsługi JavaScript lub jest wyłączona.
Użyj elementu noscript.
7.25 – 7.26
Ustanowienie podstawowej struktury dokumentu Zacznijmy od elementów dokumentu, które określają postać dokumentu HTML i wskazują przeglądarce pierwotny kontekst. Istnieją tylko cztery elementy dokumentu, ale każdy dokument HTML musi je zawierać.
Element doctype Element doctype jest jedyny w swoim rodzaju. Każdy dokument HTML musi się zaczynać od elementu doctype — to on właśnie mówi przeglądarce, że będzie miała do czynienia z kodem HTML. Wprawdzie większość przeglądarek i tak prawidłowo wyświetla kod, nawet jeśli pominięto element doctype, ale oczekiwanie od przeglądarek takiego zachowania jest złym nawykiem. W tabeli 7.2 znajduje się opis tego elementu. Tabela 7.2. Element doctype Element
doctype
Typ elementu
Nie dotyczy
Dozwoleni rodzice
Brak
Atrybuty lokalne
Brak
Zawartość
Brak
Znaczniki
Pojedynczy znacznik otwierający
Nowość w HTML5
Nie
Zmiany w HTML5
DTD wymagany w HTML 4 nie jest używany w HTML5
Domyślny styl prezentacji
Brak
Elementu doctype w HTML5 można używać tylko w jeden sposób — taki, jaki widać w listingu 7.1. W toku pracy z tym rozdziałem będziemy dodawać kolejne elementy w celu utworzenia prostego, lecz pełnoprawnego dokumentu HTML5. W listingu 7.1 widnieje pierwszy wiersz. Listing 7.1. Zastosowanie elementu doctype
Element ten wskazuje przeglądarce dwie rzeczy: fakt, że ma do czynienia z kodem HTML, oraz wersję specyfikacji HTML, którą posłużono się do oznaczania treści. Nie musisz podawać numeru wersji — przeglądarka automatycznie wykryje, że używasz HTML5, jako że element ten ma nieco inną formę niż jego odpowiedniki z poprzednich wersji. Element doctype nie ma znacznika zamykającego. Wystarczy zamieścić pojedynczy znacznik na początku dokumentu.
126
ROZDZIAŁ 7. TWORZENIE DOKUMENTÓW HTML
Element html Element html, który dokładniej określa się mianem elementu głównego, wskazuje początek kodu HTML w dokumencie. Jego opis znajduje się w tabeli 7.3. Tabela 7.3. Element html Element
html
Typ elementu
Nie dotyczy
Dozwoleni rodzice
Brak
Atrybuty lokalne
manifest — szczegóły znajdziesz w rozdziale 40.
Zawartość
Jeden element head i jeden element body
Znaczniki
Znacznik otwierający i zamykający, okalające inne elementy
Nowość w HTML5
Nie
Zmiany w HTML5
W HTML5 dodano atrybut manifest; atrybut version występujący w HTML 4 wyszedł z użycia
Domyślny styl prezentacji
html { display: block; } html:focus { outline: none;}
Element html wskazuje początek kodu HTML w dokumencie. W listingu 7.2 widać przykład jego zastosowania. Listing 7.2. Zastosowanie elementu html
Pomijam treść i elementy.
Element head W elemencie head znajdują się metadane dokumentu. Metadane HTML dostarczają przeglądarce informacje o zawartości i znacznikach dokumentu, ale mogą również zawierać skrypty i odniesienia do zewnętrznych zasobów (takich jak arkusze stylów CSS). Z elementami metadanych zetkniesz się w dalszej części tego rozdziału. W tabeli 7.4 znajduje się opis elementu head. Tabela 7.4. Element head Element
head
Typ elementu
Nie dotyczy
Dozwoleni rodzice
html
Atrybuty lokalne
Brak
Zawartość
Wymagany jest jeden element title; inne elementy metadanych są opcjonalne
Znaczniki
Znacznik otwierający i zamykający, okalające inne elementy
Nowość w HTML5
Nie
Zmiany w HTML5
Brak
Domyślny styl prezentacji
Brak
127
ROZDZIAŁ 7. TWORZENIE DOKUMENTÓW HTML
W listingu 7.3 widać przykład zastosowania elementu head. Każdy dokument HTML powinien zawierać element head, w którym z kolei musi znajdować się element title — tak jak widać w listingu. Szczegóły o elemencie title znajdziesz w dalszej części rozdziału. Listing 7.3. Zastosowanie elementu head
Witaj
Element body Element body — w odróżnieniu od elementu head, zawierającego metadane i informacje o dokumencie — zawiera treść dokumentu HTML. Element body zawsze zamieszcza się po elemencie head, wobec czego jest drugim dzieckiem elementu html. W tabeli 7.5 znajduje się opis elementu body. Tabela 7.5. Element body Element
body
Typ elementu
Nie dotyczy
Dozwoleni rodzice
html
Atrybuty lokalne
Brak
Zawartość
Wszelkie elementy strukturalne i treściowe
Znaczniki
Wymagany znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Atrybuty alink, background, bgcolor, link, margintop, marginbottom, marginleft, marginright, marginwidth, text i vlink wyszły z użycia; efekty osiągane przez używanie tych atrybutów można uzyskać przy użyciu CSS
Domyślny styl prezentacji
body { display: block; margin: 8px; } body:focus { outline: none; }
W listingu 7.4 widać przykład zastosowania elementu body. Listing 7.4. Zastosowanie elementu body
Przykład
Lubię jabłka i pomarańcze.
Odwiedź stronę Helionu
W elemencie body zamieściłem krótki fragment treści. Poszczególne elementy, które w nim wykorzystałem (p, code i a), omówię w rozdziałach 8. i 9. Uzyskaliśmy już prosty, lecz pełnoprawny dokument HTML. Na rysunku 7.1 widać, jak prezentuje się na ekranie.
128
ROZDZIAŁ 7. TWORZENIE DOKUMENTÓW HTML
Rysunek 7.1. Wyświetlanie prostego dokumentu HTML w przeglądarce
Opatrzenie dokumentu elementami metadanych Elementy metadanych pozwalają na podanie informacji o dokumencie HTML. Nie stanowią wprawdzie właściwej treści, ale zawierają informacje na temat treści, które znajdują się po nich. Elementy metadanych zamieszcza się w elemencie head.
Określenie tytułu dokumentu Element title określa tytuł tudzież nazwę dokumentu. Przeglądarki zazwyczaj wyświetlają jego zawartość u góry zakładki lub okna przeglądarki. W tabeli 7.6 znajduje się opis elementu title. Tabela 7.6. Element title Element
title
Typ elementu
Metadane
Dozwoleni rodzice
head
Atrybuty lokalne
Brak
Zawartość
Tytuł dokumentu lub opis jego zawartości
Znaczniki
Znacznik otwierający i zamykający, okalające inne elementy
Nowość w HTML5
Nie
Zmiany w HTML5
Brak
Domyślny styl prezentacji
title { display: none; }
Każdy dokument HTML powinien mieć jeden element title, a tekst zawarty pomiędzy jego znacznikami powinien mieć jakieś znaczenie dla użytkownika. Musi przynajmniej pozwolić użytkownikowi na odróżnianie różnych zakładek lub okien oraz określenie, które z nich są częścią Twojej aplikacji internetowej. W listingu 7.5 widać przykład zastosowania elementu head. Listing 7.5. Element head
Przykład
Lubię jabłka i pomarańcze.
Odwiedź stronę Helionu
129
ROZDZIAŁ 7. TWORZENIE DOKUMENTÓW HTML
Wygląd elementu head w przeglądarce widać na rysunku 7.2. W tym przykładzie użyłem Google Chrome, ale efekt w innych przeglądarkach jest dość podobny.
Rysunek 7.2. Wygląd elementu title
Ustawienie podstawy dla względnych adresów URL Element base określa bazowy adres URL, względem którego określane są względne adresy zawarte w dokumencie HTML. Względny adres to taki, w którym pomija się elementy określające protokół, hosta i port, a odnosi się do innego adresu URL, określonego albo w elemencie base, albo względem adresu użytego do wczytania bieżącego dokumentu. Element base określa również sposób, w jaki otwierane są klikane linki, a także to, jak przeglądarka zachowuje się po wysłaniu formularza. (O formularzach HTML5 opowiem szerzej w rozdziale 12.). W tabeli 7.7 znajduje się opis elementu base. Tabela 7.7. Element base Element
base
Typ elementu
Metadane
Dozwoleni rodzice
head
Atrybuty lokalne
href, target
Zawartość
Brak
Znaczniki
Samotny znacznik
Nowość w HTML5
Nie
Zmiany w HTML5
Brak
Domyślny styl prezentacji
Brak
Dokument HTML powinien zawierać co najwyżej jeden element base. Jest to przeważnie jeden z pierwszych elementów zawartych w elemencie head — dzięki temu pewne jest, że podane w kolejnych elementach metadanych względne adresy URL odnoszą się do URL bazowego.
Atrybut href Atrybut href określa bazowy URL, do którego mają się odnosić względne adresy URL zamieszczone w dokumencie. W listingu 7.6 widać zastosowanie tego elementu w praktyce. Listing 7.6. Użycie atrybutu href w elemencie base
Przykład
130
ROZDZIAŁ 7. TWORZENIE DOKUMENTÓW HTML
Lubię jabłka i pomarańcze.
Odwiedź stronę Helionu Strona 2
W tym przykładzie podałem bazowy URL http://titan/pliki/. titan to nazwa folderu, w którym trzymam pliki, a w folderze pliki trzymam listingi, które są podanymi w tej książce przykładami. W dalszej części dokumentu utworzyłem odnośnik wykorzystujący względny URL page2.html. (Wykorzystanie elementu a omówię w rozdziale 8.). Kiedy użytkownik klika odnośnik, przeglądarka łączy bazowy URL z względnym URL w jeden adres http://titan/pliki/page2.html. Wskazówka Jeżeli nie skorzystasz z elementu base lub podasz bazowy URL przy użyciu atrybutu href, przeglądarka będzie odnosić wszelkie względne adresy URL do adresu bieżącego dokumentu. Przykładowo, gdybyś wczytał dokument znajdujący się pod adresem http://mojserwer.com/app/mojastrona.html, w którym znajdowałby się odnośnik z względnym adresem mojadrugastrona.html, przeglądarka spróbowałaby wczytać drugą stronę z całkowicie prawidłowego adresu http://mojserwer.com/app/mojadrugastrona.html.
Wykorzystanie atrybutu target Atrybut target mówi przeglądarce, jak otwierać adresy URL. Wartości podane dla tego atrybutu określają kontekst przeglądania. Z przykładami takich kontekstów i ich zastosowaniem zapoznasz się w rozdziałach 8. i 15., gdzie przyjrzymy się elementom a i iframe.
Opisanie dokumentu metadanymi Element meta pozwala na definiowanie różnych rodzajów metadanych dokumentu. Możesz go używać na wiele różnych sposobów, przy czym dokument HTML może zawierać wiele elementów meta. W tabeli 7.8 znajduje się opis elementów meta. Tabela 7.8. Element meta Element
meta
Typ elementu
Metadane
Dozwoleni rodzice
head
Atrybuty lokalne
name, content, charset, http-equiv
Zawartość
Brak
Znaczniki
Samotny znacznik
Nowość w HTML5
Nie
Zmiany w HTML5
Atrybut charset pojawił się w HTML5. W HTML 4 atrybutowi http-equiv można było nadać dowolną liczbę różnych wartości. W HTML5 zmieniono to tak, że jedynie wartości opisane w tabeli są dozwolone. Atrybut HTML 4 scheme wyszedł z użycia. Języka strony nie określa się już przy użyciu elementu meta; w dalszej części rozdziału pokażę Ci, jak się to robi w HTML5.
Domyślny styl prezentacji
Brak
131
ROZDZIAŁ 7. TWORZENIE DOKUMENTÓW HTML
W kolejnych punktach pokażę Ci różne sposoby wykorzystania elementu meta. Zauważ, że jednego elementu meta można użyć tylko na jeden z tych sposobów. Jeżeli chcesz skorzystać z kilku jego funkcji, to musisz dodać kilka elementów meta do elementu head.
Określanie par metadanych nazw i wartości Pierwszym sposobem na wykorzystanie elementu meta jest definiowanie par nazw i wartości. Służą do tego atrybuty name i content. W listingu 7.7 widnieje przykład ich użycia. Listing 7.7. Wykorzystanie elementu meta do zdefiniowania par nazw i wartości
Przykład
Lubię jabłka i pomarańcze.
Odwiedź stronę Helionu Strona 2
Atrybutem name określa się, do jakiego rodzaju metadanych odnosi się dany element, a atrybut content służy do podawania wartości. W tabeli 7.9 znajduje się lista predefiniowanych rodzajów metadanych, których możesz używać z elementem meta. Tabela 7.9. Predefiniowane typy metadanych do wykorzystania z elementem meta Nazwa metadanych
Opis
application name
Nazwa aplikacji internetowej, w której skład wchodzi bieżąca strona.
author
Imię autora bieżącej strony.
description
Opis bieżącej strony.
generator
Nazwa oprogramowania, które wygenerowało kod HTML (zazwyczaj używa się tego atrybutu przy generowaniu strony z użyciem frameworka, np. Ruby on Rails, ASP.NET itp.).
keywords
Zbiór oddzielonych przecinkiem ciągów, które opisują treść strony.
Poza pięcioma predefiniowanymi rodzajami metadanych możesz skorzystać również z rozszerzeń. Ich aktualną listę znajdziesz na stronie http://wiki.whatwg.org/wiki/MetaExtensions. Niektóre z nich są powszechnie używane, podczas gdy inne są dość wyspecjalizowane i bardzo rzadko używane. Typ metadanych robots jest przykładem często stosowanego rozwinięcia. Pozwala ono twórcy dokumentu HTML określić, jak dokument ma być traktowany przez wyszukiwarki. Oto przykład:
Rozpoznawane przez przeglądarki wartości to noindex (polecenie, by nie indeksować strony), noarchive (polecenie, by nie archiwizować strony i nie tworzyć jej kopii) oraz nofollow (polecenie, by nie podążać za odnośnikami zawartymi na stronie). Istnieje o wiele więcej rozszerzeń metadanych i zachęcam Cię do zapoznania się ze wspomnianą wyżej listą, by znaleźć takie, które przystają do Twojego projektu.
132
ROZDZIAŁ 7. TWORZENIE DOKUMENTÓW HTML
Wskazówka Metadane keywords były niegdyś głównym sposobem wskazywania wyszukiwarkom, jak kategoryzować treść strony i zamieszczać ją w rankingu. Dziś wyszukiwarki zwracają o wiele mniejszą uwagę na metadane keywords, jako że bywają nadużywane w celu fałszywego określania znaczenia i zawartości strony. Najlepszym sposobem na zwiększenie wartości Twoich treści dla wyszukiwarek jest skorzystanie z rad, które same podają — większość z nich oferuje wskazówki co do optymalizacji stron i witryn. Przewodnik Google znajdziesz pod adresem http:// support.google.com/webmasters/bin/answer.py?hl=en&hlrm=pl&answer=35291.
Określanie kodowania znaków Element meta może też posłużyć do określenia kodowania znaków składających się na treść dokumentu HTML. Przykład widnieje w listingu 7.8. Listing 7.8. Użycie elementu meta do określenia kodowania znaków
Przykład
Lubię jabłka i pomarańcze.
Odwiedź stronę Helionu Strona 2
W tym przykładzie zdefiniowałem dla strony kodowanie UTF-8. UTF-8 jest powszechnym systemem kodowania znaków, ponieważ pozwala na przedstawienie wszystkich znaków Unicode przy najmniejszym użyciu pamięci. (W chwili, gdy to piszę, około 50% wszystkich stron internetowych używa kodowania UTF-8).
Symulowanie nagłówków HTTP Ostatnim sposobem na wykorzystanie elementu meta jest nadpisanie wartości któregoś z nagłówków HTTP (Hypertext Transfer Protocol). HTTP jest tym, co przeważnie służy do przekazywania danych HTML pomiędzy serwerem a przeglądarką. Nie będę szerzej pisać o HTTP, ale wspomnę tylko, że każda odpowiedź ze strony serwera dotyczy serii nagłówków opisujących przeglądarce treść; ponadto przy użyciu elementu meta możesz symulować lub zastąpić trzy tego typu nagłówki. W listingu 7.9 widać formę, jaką wykorzystywane w tym celu elementy meta ogólnie przyjmują. Listing 7.9. Zastosowanie elementu meta do symulowania nagłówka HTTP
Przykład
133
ROZDZIAŁ 7. TWORZENIE DOKUMENTÓW HTML
Lubię jabłka i pomarańcze.
Odwiedź stronę Helionu Strona 2
Atrybutu http-equiv używa się do określenia symulowanego nagłówka, a atrybutu content do podania jego wartości. W tym przykładzie wybrałem nagłówek refresh i wartość 5 — nakazuje to przeglądarce odświeżać stronę co pięć sekund. Wskazówka Jeśli po wartości odświeżania zamieścisz średnik i adres URL, przeglądarka wczyta podany adres URL po minięciu określonego czasu. Przykład znajdziesz w punkcie „Element noscript”.
Dla atrybutu http-equiv dopuszczalne są trzy wartości, które podaję w tabeli 7.10. Tabela 7.10. Dopuszczalne wartości atrybutu http-equiv elementu meta Wartość atrybutu
Opis
refresh
Wskazuje mierzony w sekundach okres, po którym bieżąca strona ma być odświeżona — pobrana na nowo z serwera. Możesz również wskazać adres URL do wczytania, np.:
default-style
Wskazuje arkusz stylów, który powinien być użyty na stronie. Wartość atrybutu content musi się pokrywać z atrybutem title elementu script lub link znajdującego się w tym samym dokumencie.
content-type
Jest to inny sposób wskazania kodowania znaków w dokumencie HTML. Przykładowo:
Definiowanie stylów CSS Element style pozwala na definiowanie stylów CSS w dokumencie HTML inline zamiast używania elementu link, który umożliwia importowanie stylów z zewnętrznego arkusza stylów. W tabeli 7.11 znajduje się opis elementu style. Tabela 7.11. Element style Element
style
Typ elementu
Nie dotyczy
Dozwoleni rodzice
Dowolny element, który może zawierać metadane, head, div, noscript, section, article, aside
Atrybuty lokalne
type, media, scoped
Zawartość
Style CSS
Znaczniki
Znacznik otwierający i zamykający, okalające inne elementy
Nowość w HTML5
Nie
Zmiany w HTML5
W HTML5 pojawił się atrybut scoped
Domyślny styl prezentacji
Brak
134
ROZDZIAŁ 7. TWORZENIE DOKUMENTÓW HTML
W listingu 7.10 widnieje przykład zastosowania elementu style. Listing 7.10. Zastosowanie elementu style
Przykład
Lubię jabłka i pomarańcze.
Odwiedź stronę Helionu Strona 2
W tym przykładzie utworzyłem nowy styl elementu a. Sprawia on, że odnośnik wyświetlany jest z szarym tłem, białym tekstem i dopełnieniem. (Jeżeli dopiero zaczynasz pracę z CSS, podstawy znajdziesz w rozdziale 4., a szersze omówienie w rozdziale 16.). Rezultat zastosowania tego stylu widać na rysunku 7.3.
Rysunek 7.3. Zastosowanie elementu style do utworzenia stylu inline Element style możesz zamieszczać w różnych miejscach dokumentu HTML, a dokument może zawierać wiele elementów style. Nie musisz zatem definiować wszystkich stylów w sekcji head. Przydaje się to, kiedy tworzysz strony przy użyciu szablonów, gdyż możesz dzięki temu uzupełniać style podane w szablonie o style właściwe dla określonej strony.
Określanie rodzaju stylu Atrybut type pozwala wskazać przeglądarce rodzaj definiowanego stylu. Tymczasem przeglądarki obsługują jedynie style CSS, więc atrybut ten zawsze ma wartość text/css.
Określanie zakresu stylu Jeżeli w elemencie style znajduje się atrybut scoped, to styl nadawany jest jedynie rodzicowi i dzieciom elementu. Kiedy ten atrybut nie występuje, styl zdefiniowany w dowolnym miejscu dokumentu HTML odnosi się do wszystkich elementów tego dokumentu. 135
ROZDZIAŁ 7. TWORZENIE DOKUMENTÓW HTML
Ostrzeżenie W chwili, kiedy to piszę, żadna z najpopularniejszych przeglądarek nie obsługuje atrybutu scoped stylów.
Określanie właściwego medium stylu Atrybut media pozwala określić, kiedy styl ma być zastosowany do dokumentu. W listingu 7.11 widnieje przykład wykorzystania tego atrybutu. Listing 7.11. Zastosowanie atrybutu media elementu style
Przykład
Lubię jabłka i pomarańcze.
Odwiedź stronę Helionu Strona 2
W listingu zdefiniowałem dwa elementy style o różnych wartościach atrybutu media. Przeglądarka ma zastosować pierwszy styl, kiedy dokument HTML wyświetlany jest na ekranie, a drugi przy drukowaniu strony. Warunki określające sytuacje, w których style mają być używane, możesz sprecyzować bardzo dokładnie. Przede wszystkim, możesz określić właściwe urządzenie. Dopuszczalne wartości opisuję w tabeli 7.12. Przeglądarka interpretuje, do jakiej kategorii dane urządzenie przynależy. Niektóre rodzaje urządzeń (np. te określane wartościami screen i print) interpretowane są spójnie, lecz przy innych (np. urządzeniach handheld) występuje większa dowolność. Warto sprawdzić, czy docelowe przeglądarki postrzegają określone urządzenia tak samo jak Ty. Jeszcze większą precyzję mogą Ci zapewnić dodatkowe właściwości atrybutu media. W listingu 7.12 widać przykład ich zastosowania. Listing 7.12. Dookreślenie elementu style
Przykład
136
ROZDZIAŁ 7. TWORZENIE DOKUMENTÓW HTML
Tabela 7.12. Zdefiniowane wartości urządzeń atrybutu media elementu style Urządzenie
Opis
all
Używa stylu przy dowolnym urządzeniu; jest to wartość domyślna.
aural
Używa stylu przy syntezatorach mowy.
braille
Używa stylu przy monitorach brajlowskich.
handheld
Używa stylu przy urządzeniach mobilnych.
projection
Używa stylu przy rzutnikach.
print
Używa stylu przy tworzeniu podglądu wydruku i drukowaniu.
screen
Używa stylu przy wyświetlaniu treści na ekranie komputera.
tty
Używa stylu przy urządzeniach używających znaków o jednakowej szerokości (np. dalekopisach).
tv
Używa stylu przy wyświetlaczach telewizyjnych.
Lubię jabłka i pomarańcze.
Odwiedź stronę Helionu Strona 2
W powyższym listingu użyłem właściwości width do odróżnienia dwóch stylów. Pierwszy z nich ma być używany, kiedy szerokość okna przeglądarki wynosi mniej niż 500 pikseli, a drugi kiedy szerokość okna jest większa niż 500 pikseli. Gdybyś otworzył dokument HTML z listingu 7.12 w przeglądarce, a następnie zmienił rozmiar okna, to zobaczyłbyś, jaki to daje efekt (rysunek 7.4). Zauważ, że użyłem operatora AND do zestawienia urządzenia z właściwością. Poza operatorem AND możesz również używać NOT oraz przecinka (,) jako OR. Pozwala to na tworzenie złożonych i konkretnych warunków określających, kiedy styl ma być zastosowany. Właściwości w rodzaju width używa się zwykle z modyfikatorami min i max w celu zwiększenia ich elastyczności, choć można je pominąć przy bardzo szczegółowym określaniu parametrów okna. Dostępne właściwości wraz z modyfikatorami znajdziesz w tabeli 7.13. O ile nie jest napisane inaczej, owe właściwości możesz modyfikować członami min- i max-, jeżeli chcesz podawać zakresy zamiast konkretnych wartości. Podobnie jak w przypadku urządzeń, interpretacja tych właściwości leży w gestii przeglądarki, wobec czego mogą występować niespójności w rozpoznawaniu i wykrywaniu właściwości. Jeżeli Twoje style bazują na tych właściwościach, to musisz je dokładnie przetestować oraz zdefiniować zapasowy styl na wypadek, gdyby te właściwości okazały się nieobsługiwane.
137
ROZDZIAŁ 7. TWORZENIE DOKUMENTÓW HTML
Rysunek 7.4. Zastosowanie różnych stylów w zależności od szerokości okna przeglądarki Tabela 7.13. Właściwości atrybutu media elementu style Właściwość
Opis
Przykład
width height
Określa szerokość lub wysokość okna przeglądarki. Piksele określa się jednostkami px.
width:200px
device-width device-height
Określa szerokość lub wysokość całego ekranu (a nie tylko okna przeglądarki). Piksele wyraża się jednostkami px.
min-device-height:200px
resolution
Określa rozdzielczość urządzenia w jednostkach dpi (dots per inch — punkty na cal) lub dpcm (dots per centimeter — punkty na centymetr).
max-resolution:600dpi
orientation
Określa orientację urządzenia. Obsługuje wartości portrait (pionową) i landscape (poziomą). Właściwość nie łączy się z modyfikatorami.
orientation:portrait
aspect-ratio device-aspect-ratio
Określa format obrazu okna przeglądarki lub całego urządzenia. Wartości wyraża się stosunkiem szerokości do wysokości.
min-aspect-ratio:16/9
color monochrome
Określa, ile bitów przypada na piksel na kolorowym bądź monochromatycznym wyświetlaczu.
min-monochrome:2
color-index
Określa liczbę kolorów wyświetlanych przez ekran.
max-color-index:256
scan
Określa tryb skanowania telewizora. Obsługuje wartości progressive i interlace. Właściwość nie łączy się z modyfikatorami.
scan:interlace
grid
Określa, czy wyświetlacz urządzenia opiera się na siatce, tak jak w przypadku terminali znakowych i jednowierszowych wyświetlaczy pagerów. Właściwość obsługuje wartości 0 i 1, gdzie 1 oznacza wyświetlacz oparty na siatce. Właściwość nie łączy się z modyfikatorami.
grid:0
138
ROZDZIAŁ 7. TWORZENIE DOKUMENTÓW HTML
Wskazywanie zewnętrznych zasobów Element link tworzy związek między dokumentem HTML a zewnętrznym zasobem — zazwyczaj arkuszem stylów CSS. W tabeli 7.14 znajduje się opis elementu link. Tabela 7.14. Element link Element
link
Typ elementu
Metadane
Dozwoleni rodzice
head, noscript
Atrybuty lokalne
href, rel, href lang, media, type, sizes
Zawartość
Brak
Znaczniki
Samotny znacznik
Nowość w HTML5
Nie
Zmiany w HTML5
Dodano atrybut sizes; w HTML5 zrezygnowano z atrybutów charset, rev i target
Domyślny styl prezentacji
Brak
W elemencie link można zdefiniować sześć atrybutów lokalnych, które opisuję w tabeli 7.15. Najważniejszy z nich to rel, które określa charakter relacji między dokumentem HTML a zasobami, do których odnosi się link. Najczęściej występujące relacje opiszę poniżej. Tabela 7.15. Atrybuty lokalne elementu link Atrybut
Opis
href
Określa adres URL zasobów, do których odnosi się element link.
hreflang
Określa język zasobów.
media
Określa urządzenie, dla którego podane zasoby są przeznaczone. Można w nim wykorzystać wartości urządzeń i właściwości, które podałem w tabelach 7.10 i 7.11.
rel
Określa rodzaj relacji pomiędzy dokumentem a zasobami.
sizes
Określa rozmiar ikonek. Przedstawię Ci przykład, w którym użyto elementu link do wczytania favikony.
type
Określa typ MIME zasobów, np. text/css lub image/x-icon.
Wartość przypisana atrybutowi rel określa, jak przeglądarka ma się odnieść do elementu link. W tabeli 7.16 widnieją często podawane wartości atrybutu rel oraz ich opisy. Istnieją wprawdzie inne wartości rel, ale mamy tu do czynienia z niepewną dziedziną funkcjonalności HTML5. Najbardziej wyczerpujące definicje wartości rel znajdziesz pod adresem http://iana.org/assignments/link-relations/link-relations.xml.
Wczytywanie arkusza stylów W celu zademonstrowania, jak można do tego wykorzystać element link, utworzyłem arkusz stylów styles.css, którego treść widać w listingu 7.13. Listing 7.13. Plik styles.css a { background-color: grey; color: white; padding: 0.5em; }
139
ROZDZIAŁ 7. TWORZENIE DOKUMENTÓW HTML
Tabela 7.16. Wybrane wartości atrybutu rel elementu link Wartość
Opis
alternate
Linkuje do innej wersji dokumentu, np. w innym języku.
author
Linkuje do autora dokumentu.
help
Linkuje do zasobów pomocy związanych z bieżącym dokumentem.
icon
Wskazuje źródło ikonki. Przykład zastosowania znajdziesz w listingu 7.14.
license
Linkuje do licencji związanej z bieżącym dokumentem.
pingback
Wskazuje serwer pingback, co pozwala na uzyskiwanie powiadomień, kiedy inne strony publikują odnośniki do bloga.
prefetch
Pobiera zasoby z wyprzedzeniem. Przykład zastosowania znajdziesz w listingu 7.15.
stylesheet
Wczytuje zewnętrzny arkusz stylów CSS. Przykład zastosowania znajdziesz w listingu 7.13.
Powyższy styl CSS zastosowałem uprzednio przy użyciu elementu style, lecz tym razem zamieściłem go w zewnętrznym arkuszu stylów. Żeby z niego skorzystać, użyłem elementu link tak, jak to widać w listingu 7.14. Listing 7.14. Wykorzystanie elementu link do wczytania zewnętrznego arkusza stylów
Przykład
Lubię jabłka i pomarańcze.
Odwiedź stronę Helionu Strona 2
Możesz użyć wielu elementów link do wczytania wielu zewnętrznych zasobów. Zaletą zewnętrznych arkuszy stylów jest możliwość używania na przestrzeni wielu dokumentów jednego zbioru stylów bez konieczności powielania go. Przeglądarka wczytuje i nanosi style tak samo, jak gdyby właściwości CSS ujęte były w elemencie style (rysunek 7.5).
Rysunek 7.5. Nanoszenie stylów pobranych z zewnętrznego arkusza
140
ROZDZIAŁ 7. TWORZENIE DOKUMENTÓW HTML
Definiowanie favikony strony Pomijając arkusze CSS, elementu link używa się najczęściej do definiowania związanych ze stronami ikonek. Różne przeglądarki obsługują ikonki w różny sposób, ale zazwyczaj wyświetlają je w zakładkach stron i w liście ulubionych stron użytkownika. Dla przykładu pobierzmy favikonę strony Helionu — www.helion.pl. Jest to obraz o wymiarach 16×16 pikseli w formacie .ico. Format ten jest powszechnie obsługiwany przez przeglądarki. Ikonkę widać na rysunku 7.6. Plik nosi nazwę favicon.ico.
Rysunek 7.6. Favikona Helionu Można skorzystać z tej favikony, dodając do strony element link, tak jak w listingu 7.15. Listing 7.15. Dodanie favikony przy użyciu elementu link
Przykład
Lubię jabłka i pomarańcze.
Odwiedź stronę Helionu Strona 2
Przy wczytywaniu strony przeglądarka wczytuje i wyświetla favikonę, tak jak widać na rysunku 7.7. Na tym rysunku widać Google Chrome, które wyświetla favikonę u góry zakładki strony.
Rysunek 7.7. Favikona wyświetlona u góry zakładki strony Wskazówka Nie musisz używać elementu link, jeżeli favikona znajduje się pod adresem /favicon.ico (tj. w katalogu głównym serwera). Większość przeglądarek automatycznie pobiera ten plik przy wczytywaniu strony, nawet kiedy element link jest nieobecny.
141
ROZDZIAŁ 7. TWORZENIE DOKUMENTÓW HTML
Pobieranie zasobów z wyprzedzeniem Możesz polecić przeglądarce, by z wyprzedzeniem pobrała zasoby, które po niedługim czasie mogą być potrzebne. W listingu 7.16 widać, jak w tym celu zastosowano element link. Listing 7.16. Pobieranie zasobów z wyprzedzeniem
Przykład
Lubię jabłka i pomarańcze.
Odwiedź stronę Helionu Strona 2
Atrybutowi rel nadałem wartość prefetch oraz wskazałem, że strona page2.html ma być wczytana w oczekiwaniu na to, aż użytkownik kliknie odnośnik w celu wykonania jakiejś czynności, przy której ta strona jest wymagana. Uwaga Kiedy piszę te słowa, jedynie Firefox obsługuje pobieranie zasobów z wyprzedzeniem przy użyciu elementu link.
Wykorzystanie elementów skryptowych Istnieją dwa elementy skryptowe. Pierwszy, script, pozwala na definiowanie skryptów i kontrolowanie trybu ich wykonywania. Drugi, noscript, pozwala na określenie, co ma się dziać, jeśli przeglądarka nie obsługuje skryptów lub kiedy obsługa jest wyłączona. Wskazówka Element script przeważnie zamieszcza się w elemencie head, ale można go umieścić w dowolnym miejscu dokumentu HTML. Zalecałbym zamieszczanie wszystkich elementów script w sekcji head dokumentu, ponieważ ułatwia to zarządzanie nimi, a poza tym właśnie tam ludzie ich zwykle szukają.
Element script Element script pozwala na zamieszczanie na stronach skryptów zdefiniowanych inline lub pobieranych z zewnętrznych plików. JavaScript to najczęściej używany rodzaj skryptu i to właśnie na nim się skoncentruję, ale przeglądarki obsługują też inne języki skryptowe, w tym pozostałości po wojnach przeglądarek, o których wspomniałem w rozdziale 1. W tabeli 7.17 znajduje się opis elementu script. Na każdy definiowany bądź importowany skrypt przypada jeden element script.
142
ROZDZIAŁ 7. TWORZENIE DOKUMENTÓW HTML
Tabela 7.17. Element script Element
script
Typ elementu
Metadane/Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać metadane lub treść
Atrybuty lokalne
type, src, defer, async, charset
Zawartość
Deklaracje w języku skryptowym lub brak, jeżeli podaje się zewnętrzną bibliotekę skryptów
Znaczniki
Znacznik otwierający i zamykający; samozamykające znaczniki są niedozwolone, nawet przy odwoływaniu się do zewnętrznej biblioteki JavaScript
Nowość w HTML5
Nie
Zmiany w HTML5
Atrybut type jest w HTML5 opcjonalny; dodano atrybuty async i defer; atrybut language z HTML 4 jest w HTML5 nieważny
Domyślny styl prezentacji
Brak
Typ elementu script różni się w zależności od tego, gdzie jest użyty. Elementy script zamieszczone w elemencie head zaliczają się do metadanych, lecz kiedy są zamieszczone w innych elementach (np. body lub section), należą do treści. W kolejnych punktach pokażę Ci, jak używać elementów script do uzyskiwania różnorakich rezultatów. W tabeli 7.18 znajduje się opis atrybutów elementu script. Tabela 7.18. Atrybuty lokalne elementu script Atrybut
Opis
type
Wskazuje typ definiowanego lub przywoływanego skryptu. Przy skryptach JavaScript atrybut ten można pominąć.
src
Wskazuje adres URL zewnętrznego pliku skryptowego. Przykład zastosowania znajdziesz poniżej.
defer async
Wskazuje sposób wykonania skryptu. Przykład zastosowania znajdziesz poniżej. Atrybutów tych można używać jedynie w połączeniu z atrybutem src.
charset
Wskazuje kodowanie znaków zewnętrznego pliku skryptowego. Atrybutu tego można używać jedynie w połączeniu z atrybutem src.
Definiowanie skryptu inline Najprościej zdefiniować skrypt inline, co polega na zamieszczeniu deklaracji JavaScript na stronie HTML. W listingu 7.17 znajduje się przykład. Listing 7.17. Definiowanie skryptu inline
Przykład
Lubię jabłka i pomarańcze.
Odwiedź stronę Helionu Strona 2
Kiedy nie używasz atrybutu type, przeglądarka zakłada, że ma do czynienia z JavaScript. Ten prosty skrypt zapisuje tekst w dokumencie HTML. Skrypty domyślnie wykonywane są, kiedy tylko przeglądarka na nie natrafia. Efekt tego widać na rysunku 7.8, gdzie tekst skryptu zamieszczony jest w oknie przeglądarki przed zawartym w body elementem p.
Rysunek 7.8. Rezultat zastosowania prostego skryptu
Wczytanie zewnętrznej biblioteki skryptowej Skrypty możesz umieszczać w osobnych plikach i wczytywać je elementem script. Pliki te mogą być tak proste (tak jak w poniższym przykładzie) lub tak rozbudowane (jak w przypadku zaawansowanych bibliotek w rodzaju jQuery), jak tylko chcesz. W celu zademonstrowania działania zewnętrznego skryptu utworzyłem plik o nazwie simple.js, którego treść widać w listingu 7.18. Listing 7.18. Zawartość pliku skryptowego simple.js document.write("To jest tekst z zewnętrznego skryptu");
W pliku znajduje się pojedyncza deklaracja, podobna do tej, którą podałem w skrypcie inline. W listingu 7.19 widać, jak użyć atrybutu src w elemencie script do przywołania tego pliku. Listing 7.19. Wczytywanie zewnętrznego skryptu przy użyciu atrybutu src
Przykład
Lubię jabłka i pomarańcze.
144
ROZDZIAŁ 7. TWORZENIE DOKUMENTÓW HTML
Odwiedź stronę Helionu Strona 2
Wskazówka Element skryptowy musi być pusty, jeżeli ma określony atrybut src. Nie możesz użyć jednego elementu script do zdefiniowania skryptu inline i skryptu zewnętrznego.
Wartością atrybutu src jest adres URL pliku skryptu, który ma być wczytany. Plik simple.js umieściłem w tym samym katalogu, co plik HTML, więc mogłem w tym przykładzie użyć względnego URL. Efekt zastosowania skryptu widać na rysunku 7.9.
Rysunek 7.9. Rezultat zastosowania zewnętrznego skryptu Wskazówka Zauważ, że podałem znacznik zamykający elementu script, pomimo że sam element nie zawiera żadnej treści. Gdybym użył samozamykającego znacznika przy wywoływaniu zewnętrznego skryptu, przeglądarka zignorowałaby element i nie wczytałaby pliku.
Opóźnianie wykonania skryptu Atrybuty async i defer dają Ci pewną kontrolę nad sposobem wykonywania skryptu. Atrybut defer wskazuje przeglądarce, by nie wykonywała skryptu, dopóki cała strona nie zostanie wczytana i zinterpretowana. Aby zrozumieć korzyści wynikające ze stosowania atrybutu defer, musisz zwrócić uwagę na problem, który można dzięki niemu rozwiązać. W listingu 7.20 widnieje treść pliku skryptowego simple2.js, który zawiera jedną deklarację. Listing 7.20. Deklaracja zawarta w pliku skryptowym simple2.js document.getElementById("applecode").innerText = "wiśnie";
Poszczególne fragmenty tej deklaracji omówię w części IV książki. Na razie wystarczy wiedzieć, że skrypt znajduje element z atrybutem id o wartości applecode i zmienia jego zawartość tekstową na wiśnie. W listingu 7.21 widnieje dokument HTML, którego element script wywołuje plik skryptowy. Listing 7.21. Wywołanie pliku skryptowego
Przykład
145
ROZDZIAŁ 7. TWORZENIE DOKUMENTÓW HTML
Lubię jabłka i pomarańcze.
Odwiedź stronę Helionu Strona 2
Po wczytaniu tej strony nie uzyskasz pożądanego rezultatu (rysunek 7.10).
Rysunek 7.10. Problem z czasem wykonania skryptu Natrafiwszy na element script, przeglądarka domyślnie przerywa przetwarzanie dokumentu HTML, wczytuje plik skryptowy i wykonuje zawarte w nim instrukcje. Przeglądarka wznawia parsowanie kodu HTML dopiero po zakończeniu wykonywania skryptu. Oznacza to, że przeglądarka wczytuje i wykonuje deklarację z pliku simple2.js przed zinterpretowaniem reszty kodu dokumentu i wykryciem elementu code. Skrypt nie znajduje pożądanego elementu, toteż nie wprowadza żadnych zmian. Po wykonaniu skryptu przeglądarka interpretuje resztę kodu HTML i znajduje element code — za późno dla skryptu, który nie jest wykonywany po raz drugi. Problem ten ma oczywiste rozwiązanie w postaci zamieszczenia elementu script na końcu dokumentu, tak jak w listingu 7.22. Listing 7.22. Rozwiązanie problemu z czasem wykonywania skryptu poprzez przeniesienie elementu script
Przykład
Lubię jabłka i pomarańcze.
Odwiedź stronę Helionu Strona 2
146
ROZDZIAŁ 7. TWORZENIE DOKUMENTÓW HTML
Podejście to polega na uwzględnieniu sposobu, w jaki przeglądarka reaguje na elementy script, i zapewnieniu, że skrypt nie zostanie wczytany i wykonany, zanim nie zostaną przetworzone elementy, do których skrypt się odnosi. Jak widać na rysunku 7.11, wykonanie skryptu przyniosło pożądany rezultat.
Rysunek 7.11. Rezultat zastosowania skryptu na elemencie Jest to całkowicie poprawne podejście, ale w HTML5 można uzyskać dokładnie taki sam rezultat przy użyciu atrybutu defer. Kiedy przeglądarka trafia na element script z atrybutem defer, wstrzymuje się przed wczytaniem i wykonaniem skryptu do czasu ukończenia parsowania dokumentu HTML. W listingu 7.23 widnieje element script z atrybutem defer. Listing 7.23. Zastosowanie elementu script z atrybutem defer
Przykład
Lubię jabłka i pomarańcze.
Odwiedź stronę Helionu Strona 2
Rezultat jest taki sam, jak w przypadku przeniesienia skryptu na koniec dokumentu. Skrypt znajduje element code i zmienia jego zawartość tekstową, dając taki sam efekt, jaki widać na rysunku 7.11. Wskazówka Atrybutu defer możesz używać jedynie w odniesieniu do zewnętrznych plików skryptowych — nie działa na skrypty inline.
Asynchroniczne wykonywanie skryptów Atrybut async pozwala rozwiązać inny problem. Jak wspomniałem, natrafiwszy na element script, przeglądarka domyślnie przerywa parsowanie strony, by wczytać i wykonać skrypt. Wszystkie skrypty wykonywane są synchronicznie (tj. nic innego się nie dzieje podczas wczytywania i wykonywania skryptu) i po kolei.
147
ROZDZIAŁ 7. TWORZENIE DOKUMENTÓW HTML
Wykonywanie skryptów synchronicznie i po kolei ma sens jako domyślny sposób ich obsługi. Istnieją jednak pewne skrypty, którym nie jest to potrzebne i których działanie można usprawnić, wykorzystując atrybut async. Za dobry przykład może tu posłużyć skrypt śledzący. Tego typu skrypt może — przykładowo — raportować, jakie witryny odwiedzasz, aby reklamodawcy mogli Cię sprofilować na podstawie Twojego zachowania; może też zbierać statystyki o odwiedzinach na potrzeby narzędzi analitycznych. Tego typu skrypty są autonomiczne i zwykle nie wchodzą w interakcję z elementami dokumentu HTML. Opóźnienie parsowania strony w oczekiwaniu na wczytanie takiego skryptu, a następnie na to, by przesłał serwerowi raport, w ogóle nie ma sensu. Kiedy używasz atrybutu async, przeglądarka wczytuje i wykonuje skrypt asynchronicznie, jednocześnie parsując pozostałe elementy dokumentu HTML, w tym również inne elementy script. Zastosowanie tego atrybutu do właściwego skryptu może znacząco ulepszyć efektywność wczytywania strony. W listingu 7.24 widnieje atrybut async dodany do elementu script. Listing 7.24. Zastosowanie elementu async
Przykład
Lubię jabłka i pomarańcze.
Odwiedź stronę Helionu Strona 2
Ważnym efektem zastosowania atrybutu async jest to, że zamieszczone na stronie skrypty mogą być wykonane w innej kolejności, niż zostały zdefiniowane. Z tego powodu async nie nadaje się do skryptów, które odnoszą się do funkcji lub wartości definiowanych przez inne skrypty.
Element noscript Element noscript pozwala na zdefiniowanie treści pokazywanych użytkownikowi, który wyłączył JavaScript lub który korzysta z przeglądarki pozbawionej obsługi tego języka. W tabeli 7.19 znajduje się opis elementu. Podobnie jak w przypadku elementu script, typ elementu noscript zależy od jego umiejscowienia w dokumencie. Choć obsługa JavaScript jest dziś powszechna, to nadal istnieją pewne wyspecjalizowane przeglądarki, które są jej pozbawione. Tymczasem użytkownik sam może również zdezaktywować obsługę JavaScript w przeglądarce — wielkie korporacje często zabraniają pracownikom korzystania z treści JavaScript. Element noscript pozwala na obsłużenie takich użytkowników poprzez podanie im treści niewymagających JavaScript do działania albo chociaż wytłumaczenie, że bez JavaScript nie mają możliwości skorzystania ze strony. W listingu 7.25 widnieje element noscript z prostym komunikatem. Listing 7.25. Zastosowanie elementu noscript
148
ROZDZIAŁ 7. TWORZENIE DOKUMENTÓW HTML
Tabela 7.19. Element noscript Element
noscript
Typ elementu
Metadane/treściowy/strukturalny
Dozwoleni rodzice
Dowolny element, który może zawierać metadane, treść lub elementy strukturalne
Atrybuty lokalne
Brak
Zawartość
Elementy treściowe i strukturalne
Znaczniki
Wymagany znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Brak
Domyślny styl prezentacji
Brak
Przykład
Wymagany JavaScript!
Strona działa nieprawidłowo z powodu braku obsługi JavaScript
Lubię jabłka i pomarańcze.
Odwiedź stronę Helionu Strona 2
Rezultat zastosowania elementu noscript widać na rysunku 7.12. Aby uzyskać ten efekt, wyłączyłem obsługę JavaScript w Google Chrome i wczytałem plik HTML z powyższego listingu.
Rysunek 7.12. Rezultat zastosowania elementu noscript
149
ROZDZIAŁ 7. TWORZENIE DOKUMENTÓW HTML
Zauważ, że reszta strony została przetworzona normalnie i elementy treści są widoczne. Wskazówka Na stronie możesz umieścić wiele elementów noscript, aby odpowiadały poszczególnym zakresom funkcji skryptów. Podejście to jest bardzo użyteczne przy zapisie zapasowego kodu, który nie opiera się na JavaScript.
Jeśli przeglądarka nie obsługuje JavaScript, to można ją też przekierować pod inny adres URL. W tym celu należy w elemencie noscript zamieścić element meta, tak jak w listingu 7.26. Listing 7.26. Zastosowanie elementu noscript do przekierowania przeglądarki użytkownika
Przykład
Lubię jabłka i pomarańcze.
Odwiedź stronę Helionu Strona 2
Jeżeli użytkownik, którego przeglądarka nie obsługuje JavaScript lub ma wyłączoną obsługę, spróbuje wczytać tę stronę, to zostanie przekierowany pod adres www.helion.pl.
Podsumowanie W tym rozdziale przedstawiłem Ci elementy dokumentu i metadanych. Nie są to szczególnie dynamiczne ani ciekawe elementy HTML5, lecz są niezwykle ważne. Umiejętność definiowania podstawowych elementów dokumentu HTML jest nieodzowna, jeżeli chcesz uzyskać możliwie najlepszy rezultat, szczególnie w zakresie kontroli nad wykonywaniem skryptów przy użyciu elementu script i zarządzania stylami przy użyciu elementów style i link.
150
ROZDZIAŁ 8
Elementy tekstowe
Przejdziemy teraz od elementów ogólnej struktury dokumentów do czegoś o wiele bardziej szczegółowego: elementów tekstowych. Treści oznaczone tymi elementami zyskują strukturę i znaczenie. Zrozumiesz to lepiej, kiedy zapoznasz się z przedstawionymi w tym rozdziale przykładami. Specyfikacja HTML5 jasno mówi, że z elementów należy korzystać wyłącznie z powodu ich wartości semantycznej. Dla ułatwienia życia specyfikacja jednocześnie stwierdza, że obstylowanie kojarzone z tymi elementami składa się częściowo na znaczenie semantyczne niektórych z nich. To wymijające podejście, ale jednocześnie ułatwia zachowanie kompatybilności ze starszymi wersjami HTML. Niektóre z tych elementów mają bardzo konkretne znaczenie. Przykładowo, element cite służy wyłącznie do cytowania tytułów innych źródeł, np. książek bądź filmów. Tymczasem inne elementy często służą mniej konkretnym celom i — wbrew założeniom standardu HTML5 — mają wyraźne znaczenie prezentacyjne. Zalecam przyjąć pragmatyczne podejście. Po pierwsze, używaj elementów służących do konkretnych zadań, o ile takowe są dostępne. Po drugie, unikaj używania elementów, które dawniej służyły wyłącznie celom prezentacyjnym i którym wstecznie przypisano znaczenie semantyczne (np. elementu b), a prezentacją zarządzaj przy użyciu CSS. Wreszcie, niezależnie od ostatecznego doboru elementów, używaj ich spójnie w całym kodzie. W tabeli 8.1 znajduje się streszczenie całego rozdziału. Tabela 8.1. Streszczenie rozdziału Problem
Rozwiązanie
Listing
Utworzenie odnośnika do innego dokumentu.
Użyj elementu a z absolutnym lub względnym adresem URL jako wartością atrybutu href.
8.1, 8.2
Utworzenie odnośnika do elementu w dokumencie.
Użyj elementu a z selektorem ID docelowego elementu.
8.3
Wskazanie tekstu bez wyróżniania go lub przydawania mu większej wartości.
Użyj elementu b lub u.
8.4, 8.9
Nadanie emfazy.
Użyj elementu em.
8.5
Wskazanie terminu naukowego lub wyrazu obcego.
Użyj elementu i.
8.6
Wskazanie nieścisłości lub błędu.
Użyj elementu s.
8.7
Wskazanie ważnego tekstu.
Użyj elementu strong.
8.8
Wskazanie drobnego pisma.
Użyj elementu small.
8.10
Wskazanie indeksu górnego lub dolnego.
Użyj elementu sup lub sub.
8.11
ROZDZIAŁ 8. ELEMENTY TEKSTOWE
Tabela 8.1. Streszczenie rozdziału — ciąg dalszy Problem
Rozwiązanie
Listing
Wskazanie łamania wiersza lub możliwości łamania wiersza.
Użyj elementu br lub wbr.
8.12, 8.13
Wskazanie kodu, danych z programu, zmiennej bądź danych wpisanych przez użytkownika.
Użyj elementu code, var, samp lub kbd.
8.14
Wskazanie skrótu.
Użyj elementu abbr.
8.15
Wskazanie definicji terminu.
Użyj elementu dfn.
8.16
Wskazanie cytatu.
Użyj elementu q.
8.17
Zacytowanie tytułu innego źródła.
Użyj elementu cite.
8.18
Określenie oznaczeń ruby dla języków wschodnioazjatyckich.
Użyj elementów ruby, rt i rp.
8.19
Określenie kierunku ciągu tekstu.
Użyj elementu bdo.
8.20
Wyizolowanie ciągu tekstu na potrzeby określenia jego kierunku.
Użyj elementu bdi.
8.21, 8.22
Nadanie treści globalnego atrybutu.
Użyj elementu span.
8.23
Wskazanie treści istotnych w innym kontekście.
Użyj elementu mark.
8.24
Wskazanie tekstu, który dodano do dokumentu lub który z niego usunięto.
Użyj elementów ins i del.
8.25
Wskazanie godziny lub daty.
Użyj elementu time.
8.26
Tworzenie odnośników Odnośniki są kluczową funkcją języka HTML i pozwalają użytkownikom poruszać się po treści, zarówno w obrębie jednego dokumentu, jak i po różnych stronach. Odnośniki tworzy się elementem a, którego opis znajduje się w tabeli 8.2. Tabela 8.2. Element a Element
a
Typ elementu
Uznawany jest za element treściowy, kiedy zawiera treść właściwą lub elementy treściowe, a za element struktury, kiedy zawiera elementy struktury
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe
Atrybuty lokalne
href, hreflang, media, rel, target, type
Zawartość
Treść właściwa i elementy strukturalne
Znaczniki
Wymagany znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Element ten może teraz zawierać zarówno elementy treściowe, jak i strukturalne. Dodano atrybut media. Przywrócono atrybut target, który usunięto w HTML 4. Element a bez wartości href może być w HTML5 użyty do oznaczenia miejsca, w którym ma się pojawić odnośnik. Atrybuty id, coords, shape, urn, charset, methods i rev są nieaktualne.
152
ROZDZIAŁ 8. ELEMENTY TEKSTOWE
Tabela 8.2. Element a — ciąg dalszy a:link, a:visited { color: blue; text-decoration: underline; cursor: auto; }
Domyślny styl prezentacji
a:link:active, a:visited:active { color: blue; }
Element a obsługuje sześć atrybutów lokalnych, które opisuję w tabeli 8.3. Najważniejszy z nich to href, o czym przekonasz się dalej. Tabela 8.3. Atrybuty lokalne elementu a Atrybut
Opis
href
Określa URL zasobów, do których element a się odnosi.
hreflang
Określa język zasobów, do których element się odnosi.
media
Określa urządzenie, na które podane w odnośniku zasoby są przeznaczone. Atrybut ten wykorzystuje wartości atrybutów device i właściwości, które opisałem w rozdziale 7.
rel
Określa rodzaj relacji pomiędzy dokumentem a zasobami, do których odsyła odnośnik. Atrybut ten może mieć te same wartości, co atrybut rel elementu link, opisany w rozdziale 7.
target
Określa kontekst przeglądania, w jakim załączone zasoby należy otworzyć.
type
Określa typ MIME zasobów, do których odsyła odnośnik, np. text/html.
Tworzenie odnośników zewnętrznych Odnośniki do innych dokumentów HTML tworzy się, nadając atrybutowi href URL zaczynający się od http://. Kiedy użytkownik klika odnośnik, przeglądarka wczytuje podaną stronę. W listingu 8.1 widnieje element a użyty jako odnośnik do zewnętrznych zasobów. Listing 8.1. Zastosowanie elementu a jako odnośnika do zewnętrznych zasobów
Przykład
Lubię jabłka i pomarańcze.
W tym przykładzie utworzyłem dwa elementy a, które są odnośnikami do artykułów na Wikipedii. Po kliknięciu odnośnika przeglądarka pobiera artykuł i pokazuje go użytkownikowi. Domyślny styl prezentacji odnośników widać na rysunku 8.1.
153
ROZDZIAŁ 8. ELEMENTY TEKSTOWE
Rysunek 8.1. Domyślny wygląd odnośników Nie wszystkie adresy URL muszą prowadzić do stron internetowych. Choć protokół http jest najszerzej używaną formą URL, przeglądarki obsługują także inne protokoły, jak https i ftp. Jeżeli chcesz, by odnośnik odsyłał do adresu e-mailowego, to możesz użyć protokołu mailto, np. mailto:
[email protected]. Wskazówka Elementem a możesz również tworzyć odnośniki oparte na obrazach, czyli takie, przy których użytkownik klika obraz zamiast tekstu. Wymaga to użycia elementu img. Szczegóły o elemencie img i przykład zastosowania odnośnika opartego na obrazie znajdziesz w rozdziale 15.
Tworzenie względnych odnośników Jeżeli wartość atrybutu href nie zaczyna się od uznanego protokołu (w rodzaju http://), to przeglądarka traktuje element a jako względny odnośnik. Przeglądarka domyślnie zakłada, że docelowe zasoby i bieżący dokument znajdują się w tej samej lokalizacji. W listingu 8.2 widnieje przykład względnego adresu URL. Listing 8.2. Zastosowanie względnego adresu URL w odnośniku
Przykład
Lubię jabłka i pomarańcze. Inne moje ulubione owoce znajdziesz tutaj.
W tym przykładzie atrybutowi href nadałem wartość fruitlist.html. Kiedy użytkownik klika odnośnik, przeglądarka używa adresu URL bieżącego dokumentu do określenia, w jaki sposób wczytać podaną stronę. Przykładowo, jeżeli bieżący dokument pobrano z adresu http://www.mojastrona.com/dokumenty/ przyklad.html, to przeglądarka powinna wczytać stronę docelową z adresu http://www.mojastrona.com/ dokumenty/fruitlist.html. Wskazówka Domyślne zachowanie przeglądarki możesz zmienić, zamieszczając w elemencie base (opisanym w rozdziale 7.) inny bazowy adres URL.
154
ROZDZIAŁ 8. ELEMENTY TEKSTOWE
Tworzenie odnośników wewnętrznych Możesz tworzyć odnośniki, które przenoszą widok okna przeglądarki na inny element. Robi się to przy użyciu selektora ID rodem z CSS — # — tak jak widać w listingu 8.3. Listing 8.3. Tworzenie odnośników wewnętrznych
Przykład
Lubię jabłka i pomarańcze. Inne moje ulubione owoce znajdziesz tutaj.
Lubię też banany, mango, wiśnie, morele, śliwki, gruszki i winogrona.
Utworzyłem odnośnik z href o wartości #fruits. Kiedy użytkownik klika odnośnik, przeglądarka szuka w dokumencie elementu, którego atrybut id ma wartość fruits. Jeżeli element nie jest w danej chwili widoczny na ekranie, przeglądarka przewinie do niego dokument. Wskazówka Kiedy przeglądarka nie znajduje elementu z pożądaną wartością atrybutu id, zaczyna szukać od nowa, lecz atrybutu name o odpowiedniej wartości.
Określanie kontekstu przeglądania Atrybutem target możesz wskazać przeglądarce, gdzie linkowane zasoby mają być wyświetlone. Przeglądarka domyślnie używa okna, zakładki lub ramki, w której wyświetlany jest dany dokument; oznacza to, że wczytywany dokument pojawia się na miejscu poprzedniego. Masz jednak inne możliwości. W tabeli 8.4 znajduje się opis wartości obsługiwanych przez atrybut target. Tabela 8.4. Wartości atrybutu target elementu a Atrybut
Opis
_blank
Otwiera dokument w nowym oknie (lub zakładce).
_parent
Otwiera dokument w ramce-rodzicu.
_self
Otwiera dokument w bieżącym oknie; domyślna opcja.
_top
Otwiera dokument na powierzchni całego okna.
Otwiera dokument w podanej ramce.
Każda z tych wartości określa kontekst przeglądania. Wartości _blank i _self nie trzeba szczególnie objaśniać. Pozostałe z kolei odnoszą się do ramek, które omówię w rozdziale 15.
155
ROZDZIAŁ 8. ELEMENTY TEKSTOWE
Oznaczanie treści podstawowymi elementami tekstowymi Pierwszy zestaw elementów tekstowych, któremu się przyjrzymy, istnieje już w HTML od dłuższego czasu. Niektóre z tych elementów odpowiadały kiedyś za formatowanie tekstu, ale wraz z rozwojem HTML i oddzieleniem prezentacji od ogólnej semantyki uzyskały ogólniejsze znaczenie.
Wskazywanie słów kluczowych i nazw produktów Element b służy do wyszczególniania ciągów tekstu bez wyróżniania ich i przydawania im szczególnego znaczenia. Przykłady podane w specyfikacji HTML5 są słowami kluczowymi w streszczeniu dokumentu oraz nazwami produktów w recenzji. W tabeli 8.5 znajduje się opis elementu b. Tabela 8.5. Element b Element
b
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe
Atrybuty lokalne
Brak
Zawartość
Treść właściwa
Znaczniki
Wymagany znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Element b miał w HTML 4 znaczenie wyłącznie prezentacyjne; w HTML5 ma semantyczne znaczenie, które opisałem już wcześniej, a jego aspekt prezentacyjny sprowadzono do roli konwencji stylistycznej
Domyślny styl prezentacji
b { font-weight: bolder; }
Element b działa w bardzo prosty sposób: treści zawarte pomiędzy znacznikiem początkowym i końcowym są wydzielone z otaczających je treści. Treści te są zazwyczaj przedstawiane pogrubionym pismem, ale styl nadawany elementom b możesz zmienić przy użyciu CSS. W listingu 8.4 widać przykład zastosowania elementu b. Listing 8.4. Zastosowanie elementu b
Przykład
Lubię jabłka i pomarańcze.
Domyślny styl prezentacji elementu b widać na rysunku 8.2.
156
ROZDZIAŁ 8. ELEMENTY TEKSTOWE
Rysunek 8.2. Zastosowanie elementu b
Wyróżnianie Element em przedstawia ciąg wyróżnionego tekstu. Używa się go do wskazania odbiorcy kontekstu, w jakim ma postrzegać sens zdania lub akapitu. Przykład znajdziesz pod tabelą 8.6, w której znajduje się opis elementu em. Tabela 8.6. Element em Element
em
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe
Atrybuty lokalne
Brak
Zawartość
Treść właściwa
Znaczniki
Wymagany znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Brak
Domyślny styl prezentacji
em { font-style: italic; }
W listingu 8.5 widać przykład zastosowania elementu em. Listing 8.5. Zastosowanie elementu em
Przykład
Lubię jabłka i pomarańcze.
Element ten jest domyślnie wyświetlany jako pochylony, jak widać na rysunku 8.3. W tym przykładzie wyróżniłem słowo „i”. Kiedy zastanawiasz się nad wykorzystaniem elementu em, powinieneś przeczytać zdanie na głos i rozważyć, na jakie pytanie to zdanie może odpowiadać. Przykładowo, wyobraź sobie pytanie: „Skoro lubisz jabłka, to czy nie lubisz pomarańczy?”. Można na nie odpowiedzieć:
157
ROZDZIAŁ 8. ELEMENTY TEKSTOWE
Rysunek 8.3. Zastosowanie elementu em „Lubię jabłka i pomarańcze”. Odczytując to zdanie na głos i z akcentem na i, dajesz jasno do zrozumienia, że jabłka nie są Twoim jedynym ulubionym owocem. Gdyby jednak spytać: „Jakie owoce lubisz poza jabłkami?”, to mógłbyś odpowiedzieć: „Lubię jabłka i pomarańcze”. W tym przypadku położyłbyś nacisk na ostatnie słowo, wskazując, że to właśnie pomarańcze są innym owocem, który lubisz. Ten wariant mógłbyś przedstawić w HTML następująco: Lubię jabłka i pomarańcze.
Wskazywanie wyrazów obcych i terminów technicznych Element i wskazuje ciąg tekstu o innym charakterze niż otaczająca go treść. To dość luźna definicja, ale typowym przykładem są słowa z języków obcych, terminy techniczne i naukowe, czy nawet czyjeś myśli (w odróżnieniu od mowy). W tabeli 8.7 znajduje się opis elementu i. Tabela 8.7. Element i Element
i
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe
Atrybuty lokalne
Brak
Zawartość
Treść właściwa
Znaczniki
Wymagany znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Element i miał w HTML 4 znaczenie wyłącznie prezentacyjne; w HTML5 ma semantyczne znaczenie, które opisałem już wcześniej, a jego aspekt prezentacyjny sprowadzono do roli konwencji stylistycznej
Domyślny styl prezentacji
i { font-style: italic; }
W listingu 8.6 widać przykład zastosowania elementu i. Listing 8.6. Zastosowanie elementu i
Przykład
158
ROZDZIAŁ 8. ELEMENTY TEKSTOWE
Lubię jabłka i pomarańcze. Szczególnie jednak lubię mandarynki, których właściwa nazwa naukowa to citrus reticulata.
Efekt zastosowania elementu i widać na rysunku 8.4. Zauważ, że domyślny styl prezentacji elementu i jest taki sam, jak dla elementu em. Jest to świetny przykład tego, że znaczenie elementu jest niezależne od jego wyglądu.
Rysunek 8.4. Zastosowanie elementu i
Wskazywanie nieścisłości i poprawek Element s służy do określania ciągów błędnego lub nieścisłego tekstu. Domyślnie wyświetlany jest jako przekreślony tekst. W tabeli 8.8 znajduje się opis tego elementu. Tabela 8.8. Element s Element
s
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe
Atrybuty lokalne
Brak
Zawartość
Treść właściwa
Znaczniki
Wymagany znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Element s miał w HTML 4 znaczenie wyłącznie prezentacyjne; w HTML5 ma semantyczne znaczenie, które opisałem już wcześniej, a jego aspekt prezentacyjny sprowadzono do roli konwencji stylistycznej
Domyślny styl prezentacji
s { text-decoration: line-through; }
W listingu 8.7 widać przykład zastosowania elementu s. Listing 8.7. Zastosowanie elementu s
Przykład
159
ROZDZIAŁ 8. ELEMENTY TEKSTOWE
Lubię jabłka i pomarańcze. Szczególnie jednak lubię mandarynki, których właściwa nazwa naukowa to citrus reticulata. Pomarańcze kosztują w moim sklepie osiedlowym 1 złoty za sztukę 3 złote za kilogram.
Domyślny styl prezentacji elementu s widać na rysunku 8.5.
Rysunek 8.5. Zastosowanie elementu s
Wskazywanie ważnego tekstu Element strong wskazuje ciąg ważnego tekstu. W tabeli 8.9 znajduje się jego opis. Tabela 8.9. Element strong Element
strong
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe
Atrybuty lokalne
Brak
Zawartość
Treść właściwa
Znaczniki
Wymagany znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Brak
Domyślny styl prezentacji
strong { font-weight: bolder; }
W listingu 8.8 widać przykład zastosowania elementu strong. Listing 8.8. Zastosowanie elementu strong
Przykład
160
ROZDZIAŁ 8. ELEMENTY TEKSTOWE
Lubię jabłka i pomarańcze.
Uwaga! Od zjedzenia zbyt wielu pomarańczy można dostać zgagi.
Usunąłem część tekstu z poprzednich przykładów, żeby listing był bardziej przejrzysty. Domyślny styl prezentacji elementu strong widać na rysunku 8.6. Element strong wyświetlany jest tak samo jak element b. Ważne jest jednak, aby wybrać właściwy element do oznaczania treści — zauważ, że element b nie służy do wskazywania ważnych treści.
Rysunek 8.6. Zastosowanie elementu strong
Podkreślanie tekstu Element u służy do wyszczególniania ciągów tekstu bez wyróżniania ich i przydawania im szczególnego znaczenia. To dość luźna definicja, ponieważ element u pełnił wcześniej wyłącznie rolę prezentacyjną (tj. podkreślał tekst) i nie miał znaczenia semantycznego. Nadal jest to element prezentacyjny, który służy do podkreślania tekstu. Choć można zmienić tę właściwość przy użyciu CSS, nie polecam takiego sposobu modyfikowania elementów — korzystaj raczej z elementu span. W tabeli 8.10 znajduje się opis elementu u. Tabela 8.10. Element u Element
u
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe
Atrybuty lokalne
Brak
Zawartość
Treść właściwa
Znaczniki
Wymagany znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Element u miał w HTML 4 znaczenie wyłącznie prezentacyjne; w HTML5 ma semantyczne znaczenie, które opisałem już wcześniej, a jego aspekt prezentacyjny sprowadzono do roli konwencji stylistycznej
Domyślny styl prezentacji
u { text-decoration:underline; }
Domyślny styl prezentacji elementu u przypomina styl elementu a, przez co podkreślone teksty mogą się mylić użytkownikom z odnośnikami. Żeby nie dopuszczać do takich sytuacji, w miarę możliwości unikaj stosowania elementu u. W listingu 8.9 widać przykład zastosowania tego elementu.
161
ROZDZIAŁ 8. ELEMENTY TEKSTOWE
Listing 8.9. Zastosowanie elementu u
Przykład
Lubię jabłka i pomarańcze.
Uwaga! Od zjedzenia zbyt wielu pomarańczy można dostać zgagi.
Domyślny styl prezentacji tego elementu widać na rysunku 8.7.
Rysunek 8.7. Zastosowanie elementu u
Pomniejszony tekst Element small wskazuje drobne pismo i często oznacza się nim objaśnienia i deklaracje o zrzeczeniu się odpowiedzialności. W tabeli 8.11 znajduje się opis tego elementu. Tabela 8.11. Element small Element
small
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe
Atrybuty lokalne
Brak
Zawartość
Treść właściwa
Znaczniki
Wymagany znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Element small miał w HTML 4 znaczenie wyłącznie prezentacyjne; w HTML5 ma semantyczne znaczenie, które opisałem już wcześniej, a jego aspekt prezentacyjny sprowadzono do roli konwencji stylistycznej
Domyślny styl prezentacji
small { font-size: smaller; }
162
ROZDZIAŁ 8. ELEMENTY TEKSTOWE
W listingu 8.10 widnieje przykład zastosowania tego elementu. Listing 8.10. Element small
Przykład
Pomarańcze kosztują w moim sklepie osiedlowym 1 złoty za sztukę (netto)
Domyślny styl prezentacji tego elementu widać na rysunku 8.8.
Rysunek 8.8. Zastosowanie elementu small
Indeksy górne i dolne Elementy sup i sub służą do wskazywania indeksów górnych i dolnych. Korzystanie z indeksu górnego jest w niektórych językach konieczne, a obydwa indeksy wykorzystuje się w prostych wyrażeniach matematycznych. Obydwa te elementy opisane są w tabeli 8.12. Tabela 8.12. Elementy sup i sub Element
sup i sub
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe
Atrybuty lokalne
Brak
Zawartość
Treść właściwa
Znaczniki
Wymagany znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Brak
Domyślny styl prezentacji
sub { vertical-align: sub;font-size: smaller; } sup { vertical-align: super;font-size: smaller;}
W listingu 8.11 widać przykład zastosowania elementów sub i sup.
163
ROZDZIAŁ 8. ELEMENTY TEKSTOWE
Listing 8.11. Zastosowanie elementów sup i sub
Przykład
Wartość x1 wynosi y3.
Domyślny styl prezentacji tego elementu widać na rysunku 8.9.
Rysunek 8.9. Zastosowanie elementów sup i sub
Łamanie wiersza Do łamania wierszy możesz się posłużyć dwoma elementami: br i wbr.
Wymuszanie łamania wiersza Element br wskazuje miejsce łamania wiersza. Domyślny styl prezentacji tego elementu polega na przeniesieniu następujących po nim treści do kolejnego wiersza. Opis elementu br znajduje się w tabeli 8.13. Tabela 8.13. Element br Element
br
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe
Atrybuty lokalne
Brak
Zawartość
Nie dotyczy
Znaczniki
Samotny znacznik
Nowość w HTML5
Nie
Zmiany w HTML5
Nie
Domyślny styl prezentacji
Znajdująca się po nim treść zostaje przeniesiona do nowego wiersza; tego efektu nie można uzyskać przy użyciu CSS
164
ROZDZIAŁ 8. ELEMENTY TEKSTOWE
W listingu 8.12 widnieje przykład zastosowania elementu br. Listing 8.12. Zastosowanie elementu br
Przykład
Natenczas Wojski chwycił na taśmie przypięty
Swój róg bawoli, długi, cętkowany, kręty
Jak wąż boa, oburącz do ust go przycisnął,
Wzdął policzki jak banię, w oczach krwią zabłysnął
Uwaga Elementu br należy używać tylko wtedy, kiedy treść wymaga zaczynania tekstu od nowego wiersza, tak jak w listingu 8.12. Nie wolno z niego korzystać do tworzenia akapitów lub innych zestawień treści — do tego służą inne elementy, które opiszę w rozdziałach 9. i 10.
Na rysunku 8.10 widnieje przykład treści oznaczonych elementem br.
Rysunek 8.10. Zastosowanie elementu br
Wskazanie odpowiedniego miejsca na łamanie wiersza Element wbr jest nowością w HTML5. Służy do wskazywania miejsc, w których przeglądarka może przełamywać ciągi tekstowe o długości przekraczającej rozmiar okna, przy czym to przeglądarka ostatecznie rozstrzyga, czy w tym miejscu rzeczywiście następuje złamanie wiersza. Element wbr jedynie wskazuje odpowiednie miejsca łamania wierszy. W tabeli 8.14 znajduje się jego opis. W listingu 8.13 widać przykład zastosowania elementu wbr do wskazania przeglądarce, jak prawidłowo wyświetlić długie słowo. Listing 8.13. Zastosowanie elementu wbr
Przykład
165
ROZDZIAŁ 8. ELEMENTY TEKSTOWE
Tabela 8.14. Element wbr Element
wbr
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe
Atrybuty lokalne
Brak
Zawartość
Nie dotyczy
Znaczniki
Samotny znacznik
Nowość w HTML5
Tak
Zmiany w HTML5
Nie
Domyślny styl prezentacji
Znajdująca się po nim treść zostaje przeniesiona do nowego wiersza, jeżeli wymagają tego okoliczności
Oto bardzo długie słowo: dwustudziewięćdziesięciodziewięcioipółpiętrowiec. Prawidłowe wyświetlanie długich wyrazów można wspomóc elementem wbr.
Aby w pełni zrozumieć wartość elementu wbr, musiałbyś się przyjrzeć, jak przeglądarka działa, gdy go nie ma w kodzie. Na rysunku 8.11 widnieje przykład interpretowania treści, której nie oznaczono tym elementem.
Rysunek 8.11. Zawijanie wierszy bez elementu wbr Kiedy brakuje elementu wbr, przeglądarka traktuje długie słowa jako spójne ciągi. Wskutek tego na końcu pierwszego wiersza pojawia się dużo niepotrzebnie pustego miejsca. Dodając element wbr tak jak w listingu 8.13, dajesz przeglądarce więcej możliwości (rysunek 8.12).
Rysunek 8.12. Zawijanie wierszy z elementem wbr
166
ROZDZIAŁ 8. ELEMENTY TEKSTOWE
Kiedy używasz elementu wbr, przeglądarka traktuje długie słowa jako ciągi mniejszych fragmentów, co pozwala jej na zawijanie wierszy w sposób bardziej estetyczny. Element wbr wskazuje przeglądarce, gdzie łamanie wiersza byłoby najbardziej odpowiednie.
Przedstawianie danych wejściowych i wyjściowych Istnieją pewne cztery elementy, które przypominają o tym, że HTML zrodził się w głowach ześwirowanych komputerowców. Służą bowiem do przedstawiania danych wejściowych i wyjściowych. Ich opisy znajdziesz w tabeli 8.15. Żaden z nich nie posiada lokalnych atrybutów, a ponadto ani nie pojawił się dopiero w HTML5, ani nie uległ w tej wersji żadnym zmianom. Tabela 8.15. Elementy tekstowe danych wejściowych i wyjściowych Element
Opis
Domyślny styl prezentacji
code
Wskazuje fragment kodu komputerowego.
code { font-family: monospace; }
var
Wskazuje zmienną w kontekście programistycznym lub miejsce, w które należy wstawić konkretną wartość.
var { font-style: italic; }
samp
Wskazuje dane wyjściowe programu lub systemu komputerowego.
samp { font-family: monospace; }
kbd
Wskazuje podane przez użytkownika dane wejściowe.
kbd { font-family: monospace; }
W listingu 8.14 widać przykład zastosowania tych czterech elementów w dokumencie. Listing 8.14. Zastosowanie elementów code, var, samp i kbd
Przykład
var fruits = ["jabłka", "pomarańcze", "mango", "wiśnie"];
document.writeln("Lubię " + fruits.length + " owoce");
Zmienna w tym przykładzie nosi nazwę fruits
Ciąg wyjściowy to Lubię 4 owoce
Kiedy zostałem spytany o ulubiony owoc, podałem wiśnie
Domyślny styl prezentacji tych elementów widać na rysunku 8.13. Zauważ, że trzy z nich charakteryzują się jednakowym stylem. Elementu p (który opiszę w rozdziale 9.) użyłem, by nadać treści strukturę.
Odwołania, cytaty, definicje i skróty Kolejne cztery elementy służą do wskazywania odwołań, cytatów, definicji i skrótów. Stosuje się je powszechnie w pracach naukowych.
167
ROZDZIAŁ 8. ELEMENTY TEKSTOWE
Rysunek 8.13. Zastosowanie elementów code, var, samp i kbd
Skróty Element abbr służy do wskazywania skrótów; w atrybucie title podaje się natomiast rozwinięcie skrótu. Opis tego elementu znajdziesz w tabeli 8.16. Tabela 8.16. Element abbr Element
abbr
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe
Atrybuty lokalne
Brak, ale globalny atrybut title użyty z tym elementem ma szczególne znaczenie
Zawartość
Treść właściwa
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Brak
Domyślny styl prezentacji
Brak
W listingu 8.15 widnieje przykład zastosowania elementu abbr. Listing 8.15. Zastosowanie elementu abbr
Przykład
Lubię jabłka i pomarańcze. IKC nadzoruje obrót cytrusami.
Element abbr nie ma żadnego domyślnego stylu prezentacji, toteż zawarta w nim treść nie jest w żaden sposób wyszczególniona.
168
ROZDZIAŁ 8. ELEMENTY TEKSTOWE
Definicje Element dfn wskazuje definicje terminów, czyli sens lub znaczenie słowa bądź zwrotu. Jego opis znajduje się w tabeli 8.17. Tabela 8.17. Element dfn Element
dfn
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe
Atrybuty lokalne
Brak, ale globalny atrybut title użyty z tym elementem ma szczególne znaczenie
Zawartość
Tekst lub jeden element abbr
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Brak
Domyślny styl prezentacji
Brak
Korzystając z elementu dfn, należy przestrzegać pewnych zasad. Jeżeli element dfn oznaczony jest atrybutem title, to wartość tego atrybutu musi odnosić się do definiowanego terminu. Przykład zastosowania elementu dfn w taki sposób widać w listingu 8.16. Listing 8.16. Zastosowanie elementu dfn
Przykład
Lubię jabłka i pomarańcze. IKC nadzoruje obrót cytrusami.
Jabłko — jadalny, kulisty owoc jabłoni o soczystym i chrupkim miąższu, spożywany na surowo, a także po obróbce kulinarnej.
Jeżeli element dfn zawiera element abbr, to skrót jest definiowanym terminem. Jeżeli atrybut title nie występuje, a w elemencie zawarta jest treść tekstowa, to tekst jest definiowanym terminem. Element ten nie ma żadnego domyślnego stylu prezentacji, toteż zawarta w nim treść nie jest w żaden sposób wyszczególniona.
Cytowanie treści z innego źródła Element q wskazuje treść cytowaną z innego źródła. Jego opis znajduje się w tabeli 8.18. Podana w poprzednim punkcie definicja jabłka wzięta jest z Wikipedii, toteż należy zamieścić w tekście stosowne odniesienie. Atrybut cite służy do wskazania adresu URL dokumentu źródłowego, tak jak w listingu 8.17.
169
ROZDZIAŁ 8. ELEMENTY TEKSTOWE
Tabela 8.18. Element q Element
q
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe
Atrybuty lokalne
cite
Zawartość
Treść właściwa
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Brak
Domyślny styl prezentacji
q { display: inline; } q:before { content: open-quote; } q:after { content: close-quote; }
Listing 8.17. Zastosowanie elementu q
Przykład
Lubię jabłka i pomarańcze. IKC nadzoruje obrót cytrusami.
Jabłko — jadalny, kulisty owoc jabłoni o soczystym i chrupkim miąższu, spożywany na surowo, a także po obróbce kulinarnej.
Domyślny styl prezentacji elementu q wykorzystuje selektory pseudoelementów CSS :before i :after, by otoczyć cudzysłowami cytowany tekst (rysunek 8.14). O selektorach pseudoelementów przeczytasz w rozdziałach 17. i 18.
Rysunek 8.14. Zastosowanie elementu q
170
ROZDZIAŁ 8. ELEMENTY TEKSTOWE
Odwołania do innych źródeł Element cite określa tytuł cytowanego źródła, np. książki, artykułu, filmu lub wiersza. Jego opis znajduje się w tabeli 8.19. Tabela 8.19. Element cite Element
cite
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe
Atrybuty lokalne
Brak
Zawartość
Treść właściwa
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Elementem cite nie wolno już przytaczać imion, lecz jedynie tytuł cytowanego źródła
Domyślny styl prezentacji
cite { font-style: italic; }
W listingu 8.18 widnieje przykład zastosowania elementu cite. Listing 8.18. Element cite
Przykład
Lubię jabłka i pomarańcze. IKC nadzoruje obrót cytrusami.
Jabłko — jadalny, kulisty owoc jabłoni o soczystym i chrupkim miąższu, spożywany na surowo, a także po obróbce kulinarnej.
Moja ulubiona książka o owocach to Fruit: Edible, Inedible, Incredible Stuppy’ego i Kesselera.
Domyślny styl prezentacji widać na rysunku 8.15.
Elementy obsługi językowej Istnieje pięć elementów HTML (z czego cztery pojawiły się dopiero w HTML5) służących do pracy z pismem logograficznym. Opisuję je w poniższych punktach.
171
ROZDZIAŁ 8. ELEMENTY TEKSTOWE
Rysunek 8.15. Zastosowanie elementu cite
Elementy ruby, rt i rp Znaki ruby są oznaczeniami zamieszczanymi nad znakami pisma logograficznego (takiego jak chińskie lub japońskie) lub po ich prawej stronie, a służą ułatwieniu czytelnikowi właściwego wymawiania słów. Element ruby wskazuje ciąg tekstu zawierającego znaki ruby. Opis tego elementu znajduje się w tabeli 8.20. Tabela 8.20. Element ruby Element
ruby
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe
Atrybuty lokalne
Brak
Zawartość
Treść właściwa oraz elementy rt i rp
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Tak
Zmiany w HTML5
Nie dotyczy
Domyślny styl prezentacji
ruby { text-indent: 0; }
Elementu ruby używa się w połączeniu z elementami rt i rp, które również pojawiły się w HTML5. Element rt określa znaki ruby, a element rp otaczające je nawiasy, które wyświetlane są w przeglądarkach pozbawionych obsługi oznaczeń ruby. Nie znam żadnego języka zapisywanego pismem logograficznym, więc nie mogę podać przykładu opartego na logogramach. Mogę za to pokazać na przykładzie języka polskiego, w jaki sposób takie oznaczenia wyświetlane są w przeglądarkach. W listingu 8.19 znajduje się właśnie taki przykład. Listing 8.19. Zastosowanie elementów ruby, rt i rp
Przykład
Lubię jabłka i pomarańcze.
172
ROZDZIAŁ 8. ELEMENTY TEKSTOWE
IKC nadzoruje obrót cytrusami.
Jabłko — jadalny, kulisty owoc jabłoni o soczystym i chrupkim miąższu, spożywany na surowo, a także po obróbce kulinarnej.
Niektóre pomarańcze to GMO (genetycznie modyfikowane organizmy)
Kiedy dokument wyświetlany jest w przeglądarce obsługującej notację ruby, elementy rp wraz z zawartością są pomijane, a na ekranie wyświetlane są oznaczenia zawarte w elementach rt (rysunek 8.16).
Rysunek 8.16. Zastosowanie elementów ruby, rt i rp Kiedy dokument wyświetlany jest w przeglądarce pozbawionej obsługi notacji ruby, na ekranie wyświetlana jest zawartość elementów rp i rt. W chwili, kiedy to piszę, Firefox nie obsługuje notacji ruby. Wygląd tego rodzaju treści w Firefoksie widać na rysunku 8.17.
Rysunek 8.17. Znaki ruby w przeglądarce pozbawionej obsługi tej notacji
Element bdo Element bdo jednoznacznie określa kierunek zapisu treści, niezależnie od domyślnego kierunku, jakiego przeglądarka używa. W tabeli 8.21 znajduje się opis tego elementu. Element bdo musi być używany z atrybutem dir, który obsługuje wartości rtl (wskazującą kierunek od prawej do lewej) oraz ltr (wskazującą kierunek od lewej do prawej). W listingu 8.20 widać przykład zastosowania elementu bdo.
173
ROZDZIAŁ 8. ELEMENTY TEKSTOWE
Tabela 8.21. Element bdo Element
bdo
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe
Atrybuty lokalne
Brak, ale konieczne jest podanie globalnego atrybutu dir
Zawartość
Treść właściwa
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Brak
Domyślny styl prezentacji
Brak
Listing 8.20. Zastosowanie elementu bdo
Przykład
Lubię jabłka i pomarańcze. IKC nadzoruje obrót cytrusami.
Oto tekst zapisany od lewej do prawej: Lubię pomarańcze
Oto tekst zapisany od prawej do lewej: Lubię pomarańcze
Sposób wyświetlania treści tych elementów widać na rysunku 8.18.
Rysunek 8.18. Zastosowanie elementu bdo
Element bdi Element bdi wskazuje ciąg tekstu wydzielonego z otaczających go treści w celu wskazania jego kierunku. Opis tego elementu znajduje się w tabeli 8.22.
174
ROZDZIAŁ 8. ELEMENTY TEKSTOWE
Tabela 8.22. Element bdi Element
bdi
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe
Atrybuty lokalne
Brak
Zawartość
Treść właściwa
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Tak
Zmiany w HTML5
Nie dotyczy
Domyślny styl prezentacji
Brak
Używa się go przy wyświetlaniu treści, które nie dostarczają informacji o kierunku. W takich sytuacjach przeglądarka określa kierunek automatycznie, co może prowadzić do błędnego formatowania treści na stronie. W listingu 8.21 widnieje prosty przykład takiego problemu. Listing 8.21. Tekst bez elementu bdi
Przykład
Lubię jabłka i pomarańcze. Oto imiona użytkowników i spis owoców, które kupili w tym tygodniu.
Adam: 3 jabłka i 2 pomarańcze
أبو كريم: 2 jabłka
Marcin: 6 jabłek
Pojawienie się imienia zapisanego alfabetem arabskim sprawia, że algorytm określający kierunek tekstu decyduje, iż liczba 2 powinna być wyświetlona przed imieniem, a nie po nim (rysunek 8.19).
Rysunek 8.19. Rezultat działania algorytmu kierunkowego przy różnych formatach zapisu
175
ROZDZIAŁ 8. ELEMENTY TEKSTOWE
Temu problemowi można zaradzić, korzystając z elementu bdi, tak jak to widać w listingu 8.22. Listing 8.22. Element bdi
Przykład
Lubię jabłka i pomarańcze. Oto imiona użytkowników i spis owoców, które kupili w tym tygodniu.
Adam: 3 jabłka i 2 pomarańcze
: 2 jabłka
Marcin: 6 jabłek
Poprawki naniesione dzięki zastosowaniu tego elementu widać na rysunku 8.20.
Rysunek 8.20. Zastosowanie elementu bdi
Pozostałe elementy tekstowe Są jeszcze cztery inne elementy, które nie przystają w pełni do pozostałych grup. Opisuję je w kolejnych punktach.
Wskazywanie zwyczajnego ciągu tekstu Element span sam w sobie pozbawiony jest znaczenia. Używa się go do określania fragmentów treści atrybutami globalnymi. Opis tego elementu znajduje się w tabeli 8.23. W listingu 8.23 widnieje element span z atrybutem class, który pozwala odnieść się do tego ciągu w stylu CSS.
176
ROZDZIAŁ 8. ELEMENTY TEKSTOWE
Tabela 8.23. Element span Element
span
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe
Atrybuty lokalne
Brak
Zawartość
Treść właściwa
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Brak
Domyślny styl prezentacji
Brak
Listing 8.23. Zastosowanie elementu span
Przykład
Lubię
jabłka i
pomarańcze.
Zastosowany styl widać na rysunku 8.21.
Rysunek 8.21. Element span użyty do nałożenia stylów
Podświetlanie tekstu Element mark jest nowością w HTML5 i wskazuje ciąg tekstu podświetlony ze względu na jego istotne znaczenie w innym kontekście. Opis tego elementu znajduje się w tabeli 8.24.
177
ROZDZIAŁ 8. ELEMENTY TEKSTOWE
Tabela 8.24. Element mark Element
mark
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe
Atrybuty lokalne
Brak
Zawartość
Treść właściwa
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Tak
Zmiany w HTML5
Nie dotyczy
Domyślny styl prezentacji
mark { background-color: yellow; color: black; }
W listingu 8.24 widnieje przykład zastosowania elementu mark. Listing 8.24. Zastosowanie elementu mark
Przykład
Wyrazy homofoniczne to takie, które wymawia się jednakowo, lecz różnią się znaczeniem i pisownią. Oto przykład:
Jerzy, ale tu dużo jeży!
Domyślny styl wyświetlania widać na rysunku 8.22.
Rysunek 8.22. Zastosowanie elementu mark
Wskazywanie dodanych lub usuniętych treści Dodany do dokumentu lub usunięty z niego tekst wskazuje się elementami ins i del. Element ins, wskazujący dodaną treść, opisany jest w tabeli 8.25.
178
ROZDZIAŁ 8. ELEMENTY TEKSTOWE
Tabela 8.25. Element ins Element
ins
Typ elementu
Uznawany jest za element treściowy, kiedy zawiera treść właściwą lub elementy treściowe, a za element struktury, kiedy zawiera elementy struktury
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe lub struktury
Atrybuty lokalne
cite, datetime
Zawartość
Treść tekstowa lub strukturalna, w zależności od typu rodzica
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Tak
Zmiany w HTML5
Nie dotyczy
Domyślny styl prezentacji
ins { text-decoration: underline; }
Element del, wskazujący usuniętą treść, opisany jest w tabeli 8.26. Tabela 8.26. Element del Element
del
Typ elementu
Uznawany jest za element treściowy, kiedy zawiera treść właściwą lub elementy treściowe, a za element struktury, kiedy zawiera elementy struktury
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe lub struktury
Atrybuty lokalne
cite, datetime
Zawartość
Treść właściwa lub strukturalna, w zależności od typu elementu-rodzica
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Tak
Zmiany w HTML5
Nie dotyczy
Domyślny styl prezentacji
del { text-decoration: line-through; }
Elementy ins i del obsługują te same atrybuty lokalne. Atrybut cite wskazuje adres URL dokumentu tłumaczącego, dlaczego tekst dodano lub usunięto, a datetime wskazuje, kiedy wprowadzono zmianę. Elementy ins i del w użyciu widać w listingu 8.25. Listing 8.25. Zastosowanie elementów del i ins
Przykład
Wyrazy homofoniczne to takie, które wymawia się jednakowo, lecz różnią się znaczeniem i pisownią. Oto przykład:
Jerzy, ale tu dużo jeży!
179
ROZDZIAŁ 8. ELEMENTY TEKSTOWE
Morze pójdziemy nad może? Może pójdziemy nad morze?
Domyślny styl prezentacji widać na rysunku 8.23.
Rysunek 8.23. Zastosowanie elementów ins i del
Wskazywanie godzin i dat Element time służy do podawania godzin i dat. Opis tego elementu znajduje się w tabeli 8.27. Tabela 8.27. Element time Element
time
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe
Atrybuty lokalne
datetime, pubdate
Zawartość
Treść właściwa
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Tak
Zmiany w HTML5
Nie dotyczy
Domyślny styl prezentacji
Brak
Jeżeli w elemencie występuje boolowski atrybut pubdate, to przyjmuje się, że element time wskazuje datę publikacji całego dokumentu HTML lub najbliższego elementu article (który opiszę w rozdziale 10.). Atrybut datetime wskazuje datę lub godzinę w formacie określonym standardem RFC3339, który znajdziesz pod adresem http://tools.ietf.org/html/rfc3339. Użycie atrybutu datetime pozwala na podanie w elemencie daty w czytelnej dla odbiorcy formie, jednocześnie zapewniając, że komputer będzie mógł jednoznacznie przetworzyć dane o dacie lub godzinie. W listingu 8.26 widać przykład zastosowania elementu time. Listing 8.26. Zastosowanie elementu time
Przykład
180
ROZDZIAŁ 8. ELEMENTY TEKSTOWE
Do dziś pamiętam najsmaczniejsze jabłko, jakie zjadłem. Kupiłem je siódmego grudnia o trzeciej.
Podsumowanie W tym rozdziale przedstawiłem Ci elementy tekstowe, które służą do nadawania treści struktury i znaczenia. Znajdują się wśród nich zarówno elementy najprostsze, jak i bardziej złożone; widoczny jest konflikt między dążeniem do oddzielenia znaczenia od prezentacji w HTML5 a pragnieniem zachowania kompatybilności z HTML 4. Koniecznie dobieraj elementy tekstowe na podstawie ich znaczenia, a nie domyślnych stylów prezentacji. Możesz przecież obudowywać treści stylami CSS, wykorzystując sposoby, jakich dotąd nie znałeś, a użytkownicy będą widzieć na swoich ekranach dziwne rzeczy, jeżeli nie oznaczysz treści spójnie i poprawnie.
181
ROZDZIAŁ 8. ELEMENTY TEKSTOWE
182
ROZDZIAŁ 9
Grupowanie treści
W tym rozdziale opiszę elementy HTML służące do grupowania powiązanych treści, co wpływa dodatnio na strukturę i znaczenie treści dokumentu. Są to przede wszystkim elementy strukturalne, z jednym wyjątkiem: elementem a, którego klasyfikacja zależna jest od rodzaju zawartej w nim treści. W tabeli 9.1 znajduje się streszczenie całego rozdziału. Tabela 9.1. Streszczenie rozdziału Problem
Rozwiązanie
Listing
Wskazanie akapitu.
Użyj elementu p.
9.2
Nadanie globalnych atrybutów fragmentowi treści bez dodatkowego grupowania w jakikolwiek sposób.
Użyj elementu div.
9.3
Przedstawienie treści sformatowanej tak, jak widnieje w kodzie źródłowym dokumentu HTML.
Użyj elementu pre.
9.4
Wskazanie treści zacytowanej z innego źródła.
Użyj elementu blockquote.
9.5
Wskazanie zmiany tematycznej na poziomie akapitu.
Użyj elementu hr.
9.6
Utworzenie listy, w której kolejność elementów jest istotna.
Użyj elementów ol i li.
9.7
Utworzenie listy, w której kolejność elementów nie jest istotna.
Użyj elementów ul i li.
9.8
Utworzenie uporządkowanej listy, której elementy nie są ponumerowane po kolei.
Określ atrybut value dla elementu li zawartego w elemencie ol.
9.9
Utworzenie listy terminów i ich definicji.
Użyj elementów dl, dt i dd.
9.10
Utworzenie listy o specyficznej numeracji.
Użyj elementu ul w połączeniu z selektorem CSS :before i właściwością counter.
9.11
Wskazanie ilustracji (i opcjonalnego podpisu).
Użyj elementów figure i figcaption.
9.12
ROZDZIAŁ 9. GRUPOWANIE TREŚCI
Konieczność grupowania treści Przeglądarki interpretujące kod HTML kondensują większe ilości odstępów w pojedyncze odstępy. Ta właściwość jest ogólnie przydatna, ponieważ pozwala na oddzielenie rozkładu kodu w dokumencie HTML od rozkładu treści w oknie przeglądarki. Blok treści w listingu 9.1 jest dłuższy niż w którymkolwiek z wcześniejszych przykładów. Listing 9.1. Większa ilość treści w dokumencie HTML
Przykład
Lubię jabłka i pomarańcze. Lubię też banany, mango, wiśnie, morele, śliwki, gruszki i winogrona. Inne moje ulubione owoce znajdziesz tutaj.
Uwaga! Od zjedzenia zbyt wielu pomarańczy można dostać zgagi. Szczególnie jednak lubię mandarynki, których właściwa nazwa naukowa to citrus reticulata. Pomarańcze kosztują w moim sklepie osiedlowym 1 złoty za sztukę 3 złote za kilogram. IKC nadzoruje obrót cytrusami. Do dziś pamiętam najsmaczniejsze jabłko, jakie jadłem. Kupiłem je siódmego grudnia o trzeciej.
Tekst znajdujący się w elemencie body rozłożony jest na wiele wierszy. Niektóre z nich są wcięte, a pomiędzy niektórymi z nich znajdują się puste wiersze. Przeglądarka zupełnie ignoruje tę strukturę tekstu i wyświetla całą treść tak, jakby była jednym ciągiem (rysunek 9.1).
Rysunek 9.1. Przeglądarka kondensuje odstępy w dokumencie HTML
184
ROZDZIAŁ 9. GRUPOWANIE TREŚCI
Elementy opisane w kolejnych punktach pozwolą Ci ustrukturyzować dokument poprzez grupowanie powiązanych treści. Istnieje wiele różnych podejść do grupowania treści — od tworzenia prostych akapitów po sporządzanie rozbudowanych list.
Tworzenie akapitów Element p wskazuje akapit. Akapity to bloki tekstowe składające się z pojedynczych bądź wielu powiązanych zdań, odnoszących się do jakiegoś zagadnienia. Akapity mogą się też składać ze zdań traktujących o różnych zagadnieniach, lecz powiązanych przewodnim motywem. W tabeli 9.2 znajduje się opis tego elementu. Tabela 9.2. Element p Element
p
Typ elementu
Strukturalny
Dozwoleni rodzice
Dowolny element, który może zawierać elementy strukturalne
Atrybuty lokalne
Brak
Zawartość
Treść właściwa
Znaczniki
Wymagany znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Atrybut align wyszedł z użycia w HTML5; jego użycie przestało być zalecane w HTML 4
Domyślny styl prezentacji
p { display: block; margin-before: 1em; margin-after: 1em; margin-start: 0; margin-end: 0; }
W listingu 9.2 widnieje przykład zastosowania elementu p. Listing 9.2. Zastosowanie elementu p
Przykład
Lubię jabłka i pomarańcze. Lubię też banany, mango, wiśnie, morele, śliwki, gruszki i winogrona. Inne moje ulubione owoce znajdziesz tutaj.
Uwaga! Od zjedzenia zbyt wielu pomarańczy można dostać zgagi.
Szczególnie jednak lubię mandarynki, których właściwa nazwa naukowa to citrus reticulata. Pomarańcze kosztują w moim sklepie osiedlowym 1 złoty za sztukę 3 złote za kilogram.
IKC nadzoruje obrót cytrusami.
185
ROZDZIAŁ 9. GRUPOWANIE TREŚCI
Do dziś pamiętam najsmaczniejsze jabłko, jakie jadłem. Kupiłem je siódmego grudnia o trzeciej.
W elemencie body zamieściłem kilka elementów p w celu zgrupowania powiązanych zdań i nadania treści jakiejś struktury. Wielokrotne odstępy w obrębie poszczególnych elementów p są jednak kondensowane, wobec czego przekształcają się w pojedyncze odstępy, co widać na rysunku 9.2.
Rysunek 9.2. Rezultat zastosowania elementu p
Element div Element div nie ma konkretnego znaczenia. Służy do tworzenia struktury i nadawania znaczenia treści, kiedy inne elementy HTML okazują się niewystarczające. Znaczenie określasz, przypisując mu (opisane w rozdziale 3.) globalne atrybuty — przeważnie class lub id. Tabela 9.3. Element div Element
div
Typ elementu
Strukturalny
Dozwoleni rodzice
Dowolny element, który może zawierać elementy strukturalne
Atrybuty lokalne
Brak
Zawartość
Treść właściwa
Znaczniki
Wymagany znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Żadne, choć należy starać się zamiast niego używać wprowadzonych w HTML5 elementów w rodzaju article i section
Domyślny styl prezentacji
div { display: block; }
186
ROZDZIAŁ 9. GRUPOWANIE TREŚCI
Ostrzeżenie Elementu div powinieneś używać tylko w ostateczności, kiedy inne elementy posiadające własne znaczenie semantyczne nie przystają do warunków sytuacji. Zanim postanowisz skorzystać z elementu div, rozważ użycie nowych elementów HTML5, takich jak article i section (które opiszę w rozdziale 10.). Element div nie jest sam w sobie zły, ale powinieneś dążyć do tego, by zamieszczać w swoich dokumentach HTML5 jak najwięcej informacji semantycznych.
Element div jest strukturalnym odpowiednikiem elementu span. Nie ma on żadnego konkretnego znaczenia, dzięki czemu może służyć do nadawania dokumentowi autorskiej, specyficznej struktury. Tworzenie takiej struktury jest jednak problematyczne o tyle, że jej znaczenie jest właściwe dla danej strony lub aplikacji internetowej, ale nie jest jasne dla innych. Może to prowadzić do trudności, kiedy kod HTML jest przetwarzany lub stylizowany przez niezależnych uczestników. W listingu 9.3 widnieje przykład zastosowania elementu div. Listing 9.3. Zastosowanie elementu div
Przykład
Lubię jabłka i pomarańcze. Lubię też banany, mango, wiśnie, morele, śliwki, gruszki i winogrona. Inne moje ulubione owoce znajdziesz tutaj.
Szczególnie jednak lubię mandarynki, których właściwa nazwa naukowa to citrus reticulata. Pomarańcze kosztują w moim sklepie osiedlowym 1 złoty za sztukę 3 złote za kilogram.
Uwaga! Od zjedzenia zbyt wielu pomarańczy można dostać zgagi.
IKC nadzoruje obrót cytrusami.
Do dziś pamiętam najsmaczniejsze jabłko, jakie jadłem. Kupiłem je siódmego grudnia o trzeciej.
187
ROZDZIAŁ 9. GRUPOWANIE TREŚCI
W tym przykładzie ukazałem nieco odmienny sposób użycia elementu div, polegający na grupowaniu wielu elementów różnego typu w celu nadania im spójnego stylu. Wprawdzie obydwu elementom p zawartym w elemencie div mogłem nadać atrybut class, ale przyjęte przeze mnie podejście jest prostsze i opiera się na zasadach dziedziczenia stylów (które opisałem w rozdziale 4.).
Preformatowana treść Element pre pozwala zmienić sposób, w jaki przeglądarka obsługuje treść — wskazuje jej, by nie kondensować odstępów i zachować formatowanie. Przydaje się to, kiedy wejściowe formatowanie treści jakiejś sekcji jest istotne. Nie powinieneś jednak używać tego elementu do innych celów, gdyż wpływa on negatywnie na elastyczność kontrolowania prezentacji, jaką zapewniają elementy i style. W tabeli 9.4 znajduje się opis elementu pre. Tabela 9.4. Element pre Element
pre
Typ elementu
Strukturalny
Dozwoleni rodzice
Dowolny element, który może zawierać elementy strukturalne
Atrybuty lokalne
Brak
Zawartość
Treść właściwa
Znaczniki
Wymagany znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Brak
Domyślny styl prezentacji
pre { display: block; font-family: monospace; white-space: pre; margin: 1em 0; }
Element pre bywa szczególnie przydatny, kiedy używa się go wraz z elementem code. Przykładowo, formatowanie bywa zwykle ważne w językach programowania i nie ma sensu odtwarzać go przy użyciu innych elementów. W listingu 9.4 widnieje przykład zastosowania elementu pre. Listing 9.4. Zastosowanie elementu pre
Przykład
var fruits = ["jabłka", "pomarańcze", "mango", "wiśnie"];
188
ROZDZIAŁ 9. GRUPOWANIE TREŚCI
for (var i = 0; i < fruits.length; i++) { document.writeln("Lubię " + fruits[i]); }
Lubię jabłka i pomarańcze. Lubię też banany, mango, wiśnie, morele, śliwki, gruszki i winogrona. Inne moje ulubione owoce znajdziesz tutaj.
Szczególnie jednak lubię mandarynki, których właściwa nazwa naukowa to citrus reticulata. Pomarańcze kosztują w moim sklepie osiedlowym 1 złoty za sztukę 3 złote za kilogram.
W listingu 9.4 wprowadziłem element pre z kodem JavaScript. Kod ten nie jest wykonywany, gdyż jest zawarty w elemencie script, lecz jego formatowanie zostaje zachowane. Przeglądarka nie zmienia formatowania treści znajdującej się w elemencie pre — oznacza to, że spacje i tabulatory we wszystkich linijkach wyświetlane są w oknie przeglądarki. Z tego względu poszczególne deklaracje zawarte w elemencie pre nie są wcięte zgodnie ze strukturą całego dokumentu HTML. Sposób, w jaki przeglądarka wyświetla tak sformatowaną treść, zobaczysz na rysunku 9.3.
Rysunek 9.3. Wyświetlanie preformatowanej treści w elemencie pre
Cytowanie innych źródeł Element blockquote wskazuje blok treści zacytowanej z innego źródła. Element ten służy podobnemu celowi, co opisany w rozdziale 8. element q, ale zazwyczaj korzysta się z niego przy większych ilościach cytowanych treści. W tabeli 9.5 znajduje się opis tego elementu. Atrybutu cite można użyć do podania adresu URL źródła cytowanych treści, tak jak widać to w listingu 9.5.
189
ROZDZIAŁ 9. GRUPOWANIE TREŚCI
Tabela 9.5. Element blockquote Element
blockquote
Typ elementu
Strukturalny
Dozwoleni rodzice
Dowolny element, który może zawierać elementy strukturalne
Atrybuty lokalne
cite
Zawartość
Treści strukturalne
Znaczniki
Wymagany znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Brak
Domyślny styl prezentacji
blockquote { display: block; margin-before: 1em; margin-after: 1em; margin-start: 40px; margin-end: 40px; }
Listing 9.5. Zastosowanie elementu blockquote
Przykład
Lubię jabłka i pomarańcze. Lubię też banany, mango, wiśnie, morele, śliwki, gruszki i winogrona. Inne moje ulubione owoce znajdziesz tutaj.
Szczególnie jednak lubię mandarynki, których właściwa nazwa naukowa to citrus reticulata. Pomarańcze kosztują w moim sklepie osiedlowym 1 złoty za sztukę 3 złote za kilogram.
Smak dojrzałych jabłek jest słodko-kwaskowaty, rozmaite odmiany mogą być bardziej lub mniej słodkie lub kwaśne. Jabłka są kształtem zbliżone do kuli, z zagłębieniem na szczycie, z którego wystaje ogonek, na którym jabłko rośnie na drzewie, oraz z wylotem gniazda nasiennego u dołu. Przeciętne jabłko waży około 150 gramów. Świeże, nieuszkodzone jabłka zawierają pewną ilość witaminy C (8 mg w 100 g świeżego jabłka), większość innych witamin i minerałów, dużą ilość błonnika roślinnego, kwercetynę (44 mg w 1 kg jabłek), a także pektynę (1—1,5 g w 100 g świeżego jabłka). Przy obróbce cieplnej jabłek witaminy wodorozpuszczalne ulegają rozkładowi. Jabłka można spożywać tuż po zebraniu, z zachowaną skórką lub obrane. Środek jabłka ze sztywnymi błonkami oraz gniazdem nasiennym najczęściej nie jest spożywany i przy obróbce jest usuwany przy procesie zwanym "gniazdowaniem jabłek". Jabłka przy obróbce można kroić, siekać, ucierać, mielić, gotować, piec, wyciskać z soku lub suszyć.
Uwaga! Od zjedzenia zbyt wielu pomarańczy można dostać zgagi.
IKC nadzoruje obrót cytrusami.
190
ROZDZIAŁ 9. GRUPOWANIE TREŚCI
Do dziś pamiętam najsmaczniejsze jabłko, jakie jadłem. Kupiłem je siódmego grudnia o trzeciej.
Domyślny styl prezentacji tego elementu widać na rysunku 9.4.
Rysunek 9.4. Zastosowanie elementu blockquote Wskazówka Na rysunku 9.4 widać, że przeglądarka ignoruje formatowanie określone w obrębie elementu blockquote. Cytowaną treść możesz ustrukturyzować, dodając inne elementy grupujące, takie jak p czy hr (co przedstawiam w kolejnym przykładzie).
Przejścia tematyczne Element hr wskazuje przejście tematyczne na poziomie akapitu. Jest to kolejny element, którego osobliwa definicja wynika z potrzeby oddzielenia semantyki od prezentacji. W HTML 4 element hr wskazywał poziomą linię (dosłownie — linię ciągnącą się w poprzek strony). W HTML5 element hr wskazuje przejście do osobnego, lecz powiązanego tematu. Jego domyślny styl prezentacji w HTML5 to pozioma linia. W tabeli 9.6 znajduje się opis tego elementu. Trudno jednoznacznie stwierdzić na podstawie specyfikacji HTML5, jakie zastosowanie elementu hr jest poprawne, ale podane są w niej dwa przykłady: przejście do kolejnej sceny opowieści oraz przejście do kolejnego tematu w sekcji podręcznika. W listingu 9.6 widnieje przykład zastosowania tego elementu.
191
ROZDZIAŁ 9. GRUPOWANIE TREŚCI
Tabela 9.6. Element hr Element
hr
Typ elementu
Strukturalny
Dozwoleni rodzice
Dowolny element, który może zawierać elementy strukturalne
Atrybuty lokalne
Brak
Zawartość
Brak
Znaczniki
Void
Nowość w HTML5
Nie
Zmiany w HTML5
W HTML 4 element hr miał wyłącznie znaczenie prezentacyjne. W HTML5 ma on opisane powyżej znaczenie semantyczne, a jego aspekt prezentacyjny sprowadzono do roli konwencji stylistycznej. Ponadto, w HTML5 z użycia wyszły następujące atrybuty lokalne: align, width, noshade, size i color.
Domyślny styl prezentacji
hr { display: block; margin-before: 0.5em; margin-after: 0.5em; margin-start: auto; margin-end: auto; border-style: inset; border-width: 1px; }
Listing 9.6. Zastosowanie elementu hr
Przykład
Lubię jabłka i pomarańcze. Lubię też banany, mango, wiśnie, morele, śliwki, gruszki i winogrona. Inne moje ulubione owoce znajdziesz tutaj.
Szczególnie jednak lubię mandarynki, których właściwa nazwa naukowa to citrus reticulata. Pomarańcze kosztują w moim sklepie osiedlowym 1 złoty za sztukę 3 złote za kilogram.
Smak dojrzałych jabłek jest słodko-kwaskowaty, rozmaite odmiany mogą być bardziej lub mniej słodkie lub kwaśne. Jabłka są kształtem zbliżone do kuli, z zagłębieniem na szczycie, z którego wystaje ogonek, na którym jabłko rośnie na drzewie, oraz z wylotem gniazda nasiennego u dołu. Przeciętne jabłko waży około 150 gramów.
Świeże, nieuszkodzone jabłka zawierają pewną ilość witaminy C (8 mg w 100 g świeżego jabłka), większość innych witamin i minerałów, dużą ilość błonnika roślinnego, kwercetynę (44 mg w 1 kg jabłek), a także pektynę (1—1,5 g w 100 g świeżego jabłka).
Przy obróbce cieplnej jabłek witaminy wodorozpuszczalne ulegają rozkładowi. Jabłka można spożywać tuż po zebraniu, z zachowaną skórką lub obrane. Środek jabłka ze sztywnymi błonkami oraz gniazdem nasiennym najczęściej nie jest
192
ROZDZIAŁ 9. GRUPOWANIE TREŚCI
spożywany i przy obróbce jest usuwany przy procesie zwanym "gniazdowaniem jabłek". Jabłka przy obróbce można kroić, siekać, ucierać, mielić, gotować, piec, wyciskać z soku lub suszyć.
Uwaga! Od zjedzenia zbyt wielu pomarańczy można dostać zgagi.
IKC nadzoruje obrót cytrusami.
Do dziś pamiętam najsmaczniejsze jabłko, jakie jadłem. Kupiłem je siódmego grudnia o trzeciej.
W powyższym przykładzie zamieściłem kilka elementów hr w elemencie blockquote, by nadać treści strukturę. Na rysunku 9.5 widać, jak to wpływa na wygląd treści.
Rysunek 9.5. Elementy hr dodane do treści w elemencie blockquote
Grupowanie treści w listach W HTML zdefiniowane są pewne elementy, którymi można się posłużyć do tworzenia list. W poniższych punktach omówię tworzenie list uporządkowanych i nieuporządkowanych, a także list definicji.
Element ol Element ol określa uporządkowaną listę. Pozycje listy wskazuje się elementem li, który opiszę w kolejnym punkcie. Opis elementu ol znajduje się w tabeli 9.7. W listingu 9.7 widnieje przykład zastosowania elementu ol do utworzenia prostej, uporządkowanej listy.
193
ROZDZIAŁ 9. GRUPOWANIE TREŚCI
Tabela 9.7. Element ol Element
ol
Typ elementu
Strukturalny
Dozwoleni rodzice
Dowolny element, który może zawierać elementy strukturalne
Atrybuty lokalne
start, reversed, type
Zawartość
Dowolna liczba elementów li (choć żaden nie jest wymagany)
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
W HTML5 pojawił się atrybut reversed. Atrybuty start i type, których używania odradzano w HTML 4, przywrócono w HTML5, nadając im jednak znaczenie raczej semantyczne niż prezentacyjne. Atrybut compact wyszedł z użycia.
Domyślny styl prezentacji
ol { display: block; list-style-type: decimal; margin-before: 1em; margin-after: 1em; margin-start: 0; margin-end: 0; padding-start: 40px; }
Listing 9.7. Utworzenie prostej listy przy użyciu elementu ol
Przykład
Lubię jabłka i pomarańcze. Lubię też:
banany mango wiśnie śliwki brzoskwinie winogrona Inne moje ulubione owoce znajdziesz tutaj.
Wygląd tej listy w przeglądarce widać na rysunku 9.6. Możesz określić sposób zarządzania pozycjami listy przy użyciu atrybutów obsługiwanych przez element ol. Atrybut start służy do określania liczby porządkowej pierwszej pozycji na liście. Gdy atrybut ten nie jest zdefiniowany, pierwszej pozycji przypisana jest liczba porządkowa 1. Atrybut type służy do wskazywania oznaczeń właściwych dla danych pozycji na liście. W tabeli 9.8 widnieją wartości obsługiwane przez ten atrybut.
194
ROZDZIAŁ 9. GRUPOWANIE TREŚCI
Rysunek 9.6. Prosta, uporządkowana lista Tabela 9.8. Wartości obsługiwane przez atrybut type elementu ol Wartość
Opis
Przykład
1
Liczby dziesiętne (domyślna)
1., 2., 3., 4.
a
Małe litery
a., b., c., d.
A
Wielkie litery
A., B., C., D.
i
Małe liczby rzymskie
i., ii., iii., iv.
I
Wielkie liczby rzymskie
I., II., III., IV.
Kiedy podany jest atrybut reversed, kolejność listy jest malejąca. Kiedy jednak piszę te słowa, żadna z popularnych przeglądarek nie obsługuje tego atrybutu.
Element ul Element ul służy do tworzenia nieuporządkowanych list. Podobnie jak w przypadku elementu ol, pozycje w elemencie ul określa się elementem li, który opiszę poniżej. W tabeli 9.9 znajduje się opis elementu ul. Tabela 9.9. Element ul Element
ul
Typ elementu
Strukturalny
Dozwoleni rodzice
Dowolny element, który może zawierać elementy strukturalne
Atrybuty lokalne
Brak
Zawartość
Dowolna liczba elementów li (choć żaden nie jest wymagany)
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Atrybuty type i compact wyszły z użycia
Domyślny styl prezentacji
ul { display: block; list-style-type: disc; margin-before: 1em; margin-after: 1em; margin-start: 0; margin-end: 0; padding-start: 40px; }
195
ROZDZIAŁ 9. GRUPOWANIE TREŚCI
Element ul może zawierać elementy li. Nie obsługuje on żadnych atrybutów, a wygląd listy określa się przy użyciu CSS. Przykład zastosowania elementu ul widać w listingu 9.8. Listing 9.8. Zastosowanie elementu ul
Przykład
Lubię jabłka i pomarańcze. Lubię też:
- banany
- mango
- wiśnie
- śliwki
- brzoskwinie
- winogrona
Inne moje ulubione owoce znajdziesz tutaj.
Każda pozycja z listy wyświetlana jest po punkcie. Wygląd punktu możesz określić właściwością CSS list-style-type, którą opiszę w rozdziale 24. Domyślny styl prezentacji (wykorzystujący styl disc) widać
na rysunku 9.7.
Rysunek 9.7. Domyślny styl prezentacji elementu ul
Element li Element li wskazuje pozycję w liście. Można go używać z elementami ul, ol i menu (przy czym menu nie jest jeszcze obsługiwany przez popularne przeglądarki). W tabeli 9.10 znajduje się opis elementu li.
196
ROZDZIAŁ 9. GRUPOWANIE TREŚCI
Tabela 9.10. Element li Element
li
Typ elementu
Nie dotyczy
Dozwoleni rodzice
ul, ol, menu
Atrybuty lokalne
value (obsługiwany jedynie, kiedy li jest dzieckiem ol)
Zawartość
Treści strukturalne
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Użycie atrybutu value przestało być zalecane w HTML 4, ale przywrócono go w HTML5
Domyślny styl prezentacji
li { display: list-item; }
Element li jest bardzo prosty. Wskazuje pozycję na liście w obrębie elementu-rodzica. Można jednak skorzystać z atrybutu value do tworzenia uporządkowanych list o nieciągłej numeracji, tak jak w listingu 9.9. Listing 9.9. Uporządkowana lista o nieciągłej numeracji
Przykład
Lubię jabłka i pomarańcze. Lubię też:
banany mango wiśnie śliwki brzoskwinie winogrona Inne moje ulubione owoce znajdziesz tutaj.
Kiedy przeglądarka trafia na element li z atrybutem value, na podstawie jej wartości określa numerację dalszego ciągu listy, co widać na rysunku 9.8.
Listy definicji Lista definicji składa się z par terminów i opisów, tj. określonej liczby terminów, którym towarzyszą podane definicje. Do tworzenia list definicji używa się trzech elementów: dl, dt i dd. Elementy te nie obsługują żadnych atrybutów i nie uległy zmianie w HTML5. W tabeli 9.11 znajduje się ich opis.
197
ROZDZIAŁ 9. GRUPOWANIE TREŚCI
Rysunek 9.8. Uporządkowana lista o nieciągłej numeracji Tabela 9.11. Elementy listy definicji Element
Opis
Domyślny styl prezentacji
dl
Wskazuje listę definicji
dl { display: block; margin-before: 1em; margin-after: 1em; margin-start: 0; margin-end: 0; }
dt
Wskazuje definiowany termin
dt { display: block; }
dd
Wskazuje definicję
dd { display: block; margin-start: 40px; }
Przykład zastosowania powyższych elementów widnieje w listingu 9.10. Zauważ, że na jeden element dt może przypadać kilka elementów dd, co pozwala na podawanie kilku definicji jednego terminu.
Listing 9.10. Lista definicji
Przykład
Lubię jabłka i pomarańcze. Lubię też:
Jabłko Owoc ziarnkowy jabłoni Malus domestica Banan Beznasienny owoc bananowca Musa acuminata Wiśnia Pestkowiec drzewa rodzaju Prunus
198
ROZDZIAŁ 9. GRUPOWANIE TREŚCI
Inne moje ulubione owoce znajdziesz tutaj.
Listy o specyficznej numeracji Obsługa list w HTML jest bardziej elastyczna, niż mogłoby się wydawać. Listy o rozbudowanej numeracji można tworzyć przy użyciu elementu ul w połączeniu z dwoma elementami CSS: właściwością counter i selektorem :before. Właściwość counter i selektor :before (oraz towarzyszący mu selektor :after) opiszę w rozdziale 17. Nie chcę się w tym rozdziale szczególnie zagłębiać w kwestię CSS, toteż poniżej znajdziesz przykład, do którego będziesz mógł wrócić już po przeczytaniu rozdziałów traktujących o CSS albo kiedy tylko odczujesz potrzebę tworzenia zaawansowanych list. W listingu 9.11 widnieje lista, w której osadzone są jeszcze dwie inne listy. Wszystkie trzy ponumerowane są w arbitralnie określony sposób. Listing 9.11. Zagnieżdżone listy o specyficznej numeracji
Przykład
Lubię jabłka i pomarańcze. Lubię też:
- banany
- mango, a w tym:
- odmianę Haden
- odmianę Keitt
- odmianę Kent
- wiśnie
- śliwki, a w tym:
- odmianę Elephant Heart
- odmianę Stanley
- odmianę Seneca
199
ROZDZIAŁ 9. GRUPOWANIE TREŚCI
- brzoskwinie
- winogrona
Inne moje ulubione owoce znajdziesz tutaj.
Wygląd tych list w przeglądarce widać na rysunku 9.9.
Rysunek 9.9. Listy ponumerowane specyficznie przy użyciu CSS W powyższym przykładzie trzeba zwrócić uwagę na kilka rzeczy. Wszystkie listy w tym dokumencie HTML są nieuporządkowane i utworzone przy użyciu elementu ul. Pozwala to na wyłączenie standardowego stylu punktu (przy użyciu właściwości list-style-type) i oparcie się na treści wybranej selektorem :before. Zauważ, że wartości pozycji listy zewnętrznej (tj. listy owoców) zaczynają się od 7 i wzrastają o 2. Czegoś takiego nie można zrobić, używając standardowego elementu ol. Właściwość CSS counter jest wprawdzie nieco niewygodna w użyciu, ale za to bardzo elastyczna. Wreszcie, zwróć też uwagę na to, że numeracja list wewnętrznych (podających odmiany mango i śliwek) jest ciągła. Podobny efekt można uzyskać, korzystając albo z atrybutu value elementu li, albo atrybutu start elementu ol. Tymczasem przy obydwu tych podejściach trzeba z wyprzedzeniem wiedzieć, ile pozycji znajdzie się na liście, co nie zawsze jest możliwe, kiedy pracuje się z aplikacjami internetowymi.
Ilustracje Ostatni z elementów grupujących odnosi się do ilustracji. HTML5 definiuje ilustrację jako „samodzielny fragment treści, opcjonalnie opatrzony podpisem, do którego główny wątek dokumentu odnosi się jak do jednolitego elementu, a który można oddzielić od głównego wątku dokumentu bez wpływu na sens jego ogólnej treści”. Jest to dość ogólna definicja, którą można odnieść do wielu innych rzeczy poza ilustracjami jako takimi. Ilustracje wskazuje się elementem figure, którego opis znajduje się w tabeli 9.12.
200
ROZDZIAŁ 9. GRUPOWANIE TREŚCI
Tabela 9.12. Element figure Element
figure
Typ elementu
Strukturalny
Dozwoleni rodzice
Dowolny element, który może zawierać elementy strukturalne
Atrybuty lokalne
Brak
Zawartość
Treści strukturalne i, opcjonalnie, jeden element figcaption
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Tak
Zmiany w HTML5
Nie dotyczy
Domyślny styl prezentacji
figure { display: block; margin-before: 1em; margin-after: 1em; margin-start: 40px; margin-end: 40px; }
Element figure może opcjonalnie zawierać element figcaption, który określa podpis ilustracji. W tabeli 9.13 znajduje się opis elementu figcaption. Tabela 9.13. Element figcaption Element
figcaption
Typ elementu
Nie dotyczy
Dozwoleni rodzice
figure
Atrybuty lokalne
Brak
Zawartość
Treści strukturalne
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Tak
Zmiany w HTML5
Nie dotyczy
Domyślny styl prezentacji
figcaption { display: block; }
Przykład zestawienia elementów figure i figcaption widać w listingu 9.12. Listing 9.12. Zastosowanie elementów figure i figcaption
Przykład
Lubię jabłka i pomarańcze.
Listing 23. Zastosowanie elementu code var fruits = ["jabłka", "pomarańcze", "mango", "wiśnie"];
document.writeln("Lubię " + fruits.length);
201
ROZDZIAŁ 9. GRUPOWANIE TREŚCI
Inne moje ulubione owoce znajdziesz tutaj.
W powyższym przykładzie zastosowałem element figure do utworzenia ilustracji opartej na elemencie code. Elementu figcaption użyłem, żeby dodać podpis. Zauważ, że element figcaption musi być pierwszym lub ostatnim dzieckiem elementu figure. Wygląd tych elementów w przeglądarce widać na rysunku 9.10.
Rysunek 9.10. Zastosowanie elementów figure i figcaption
Podsumowanie W tym rozdziale przedstawiłem Ci elementy HTML służące do grupowania powiązanych treści — czy to w akapit, długi cytat z innego źródła, czy też w listę. Opisane w tym rozdziale elementy są niezmiernie przydatne i łatwe w użyciu, choć sprawne korzystanie z bardziej zaawansowanych opcji obsługi list może wymagać pewnej wprawy.
202
ROZDZIAŁ 10
Tworzenie sekcji
W tym rozdziale przedstawię Ci elementy służące do wskazywania sekcji treści, czyli — de facto — oddzielania od siebie tematów i myśli. Wiele z tych elementów pojawiło się dopiero w HTML5 i razem tworzą fundament, który może pozwolić na ostateczne oddzielenie znaczenia elementów od ich prezentacji. Niestety, oznacza to, że trudno przedstawić je w działaniu, ponieważ ich wpływ na wygląd treści jest żaden bądź zupełnie minimalny. Wobec tego w wielu przykładach zastosowałem style CSS, by lepiej oddać strukturę i zmiany bazujące na tych elementach. Nie będę w tym rozdziale tłumaczył znaczenia stylów CSS. W rozdziale 4. umieściłem spis najważniejszych funkcji CSS, a opisy poszczególnych właściwości CSS znajdziesz w rozdziale 16. i kolejnych. W tabeli 10.1 znajduje się streszczenie całego rozdziału. Tabela 10.1. Streszczenie rozdziału Problem
Rozwiązanie
Listing
Wskazanie nagłówka.
Użyj elementów h1 – h3.
10.1
Wskazanie grupy nagłówków, spośród których tylko pierwszy uwzględniany jest w modelu struktury dokumentu.
Użyj elementu hgroup.
10.2, 10.3
Wskazanie istotnego tematu lub myśli.
Użyj elementu section.
10.4
Wskazanie nagłówka i stopki.
Użyj elementów header i footer.
10.5
Wskazanie zbioru elementów nawigacyjnych.
Użyj elementu nav.
10.6
Wskazanie głównego tematu lub myśli, które można przekazywać niezależnie od kontekstu całego dokumentu.
Użyj elementu article.
10.7
Wskazanie treści luźno powiązanej z otaczającymi ją treściami.
Użyj elementu aside.
10.8
Wskazanie informacji kontaktowych dla danego dokumentu lub artykułu.
Użyj elementu address.
10.9
Utworzenie sekcji, którą użytkownik może rozwinąć, by poznać więcej szczegółów.
Użyj elementu details lub summary.
10.10
ROZDZIAŁ 10. TWORZENIE SEKCJI
Podstawowe nagłówki Element h1 określa nagłówek. W HTML występuje hierarchia nagłówków, w której h1 jest najwyższy poziomem. Pozostałe elementy nagłówków to h2, h3 i kolejne, aż do h6. W tabeli 10.2 znajduje się opis elementów h1 – h6. Tabela 10.2. Elementy h1 – h6 Element
h1 – h6
Typ elementu
Strukturalny
Dozwoleni rodzice
Element hgroup bądź dowolny element, który może zawierać elementy strukturalne
Atrybuty lokalne
Brak
Zawartość
Treść właściwa
Znaczniki
Wymagany znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Brak
Domyślny styl prezentacji
Style wymienione w tabeli 10.3
Nagłówki o jednakowym poziomie standardowo stosuje się w celu dzielenia treści na fragmenty tematyczne o własnych sekcjach. Nagłówki niższych poziomów standardowo służą do oznaczania różnych aspektów jednego tematu. Dodatkową zaletą tych elementów jest to, że tworzą one model struktury dokumentu — dzięki temu użytkownik może się rozeznać co do ogólnego charakteru dokumentu, zwyczajnie przeglądając nagłówki i przechodząc do interesujących go fragmentów na podstawie hierarchii nagłówków. W listingu 10.1 widnieje przykład zastosowania elementów h1 – h3. Listing 10.1. Zastosowanie elementów h1 – h3
Przykład
Moje ulubione owoce Lubię jabłka i pomarańcze. Inne owoce Lubię też banany, mango, wiśnie, morele, śliwki, gruszki i winogrona. Więcej informacji Inne moje ulubione owoce znajdziesz tutaj. Moje ulubione sporty
Lubię pływać, jeździć rowerem i biegać. Ćwiczę na swój pierwszy triathlon, a jest to ciężka praca.
Rodzaje triathlonu Istnieją różne rodzaje triathlonu — sprinterski, olimpijski itd. Jaki triathlon mnie interesuje Chcę startować w olimpijskim, który składa się z następujących konkurencji:
pływania na dystansie 1,5 km 204
ROZDZIAŁ 10. TWORZENIE SEKCJI
jazdy rowerem na dystansie 40 km biegania na dystansie 10 km W listingu zamieściłem jedynie nagłówki h1, h2 i h3, ponieważ rzadko trafiają się treści, które wymagałyby dalszej hierarchizacji. Wyjątki zdarzają się w przypadku treści bardzo szczegółowych i technicznych, w rodzaju umów i specyfikacji. Zazwyczaj jednak wystarczają maksymalnie dwa lub trzy poziomy nagłówków. Przykładowo, sam w swoich książkach korzystam z trzech poziomów hierarchii nagłówków. Choć szablony mojego wydawnictwa udostępniają tych poziomów pięć, to redaktorom niewygodnie się pracuje, kiedy decyduję się używać nagłówków czwartego i piątego poziomu. Wygląd elementów h1, h2 i h3 w przeglądarce widać na rysunku 10.1.
Rysunek 10.1. Elementy h1, h2 i h3 wyświetlone domyślnymi stylami Jak widać na rysunku, nagłówki kolejnych poziomów różnią się stylistycznie. W tabeli 10.3 widnieją domyślne style prezentacji wszystkich elementów nagłówka. Nie musisz ściśle przestrzegać hierarchii elementów h1 – h6, ale wszelkie odstępstwa mogą być dla użytkownika mylące. Hierarchie nagłówków są tak wszechobecne, że użytkownicy mają określone oczekiwania co do ich formy.
Ukrywanie podtytułów Element hgroup umożliwia traktowanie zbiorów elementów nagłówkowych jako jednolitych fragmentów, które nie wpływają na model struktury dokumentu HTML. Opis tego elementu znajduje się w tabeli 10.4. Element hgroup pozwala na poradzenie sobie z często występującym problemem podtytułów. Wyobraź sobie, że chcę utworzyć sekcję dokumentu „Owoce, które lubię” z podtytułem „Czyli jak polubiłem cytrusy”. Mógłbym użyć elementów h1 i h2, tak jak w listingu 10.2.
205
ROZDZIAŁ 10. TWORZENIE SEKCJI
Tabela 10.3. Style prezentacji elementów h1 – h6 Element
Domyślny styl prezentacji
h1
h1 { display: block; font-size: 2em; margin-before: 0.67em; margin-after: 0.67em; margin-start: 0; margin-end: 0; font-weight: bold; }
h2
h2 { display: block; font-size: 1.5em; margin-before: 0.83em; margin-after: 0.83em; margin-start: 0; margin-end: 0; font-weight: bold; }
h3
h3 { display: block; font-size: 1.17em; margin-before: 1em; margin-after: 1em; margin-start: 0; margin-end: 0; font-weight: bold; }
h4
h4 { display: block; margin-before: 1.33em; margin-after: 1.33em; margin-start: 0; margin-end: 0; font-weight: bold; }
h5
h5 { display: block; font-size: .83em; margin-before: 1.67em; margin-after: 1.67em; margin-start: 0; margin-end: 0; font-weight: bold; }
h6
h6 { display: block; font-size: .67em; margin-before: 2.33em; margin-after: 2.33em; margin-start: 0; margin-end: 0; font-weight: bold; }
Tabela 10.4. Element hgroup Element
hgroup
Typ elementu
Strukturalny
Dozwoleni rodzice
Dowolny element, który może zawierać elementy strukturalne
Atrybuty lokalne
Brak
Zawartość
Jeden lub więcej elementów nagłówków (h1 – h6)
Znaczniki
Wymagany znacznik otwierający i zamykający
Nowość w HTML5
Tak
Zmiany w HTML5
Nie dotyczy
Domyślny styl prezentacji
hgroup { display: block; }
Listing 10.2. Zastosowanie elementów h1 i h2 do utworzenia tytułu z podtytułem
Przykład
Moje ulubione owoce Czyli jak pokochałem cytrusy Lubię jabłka i pomarańcze. Inne owoce Lubię też banany, mango, wiśnie, morele, śliwki, gruszki i winogrona. Więcej informacji Inne moje ulubione owoce znajdziesz tutaj. Moje ulubione sporty
Lubię pływać, jeździć rowerem i biegać. Ćwiczę na swój pierwszy triathlon, a jest to ciężka praca.
Rodzaje triathlonu Istnieją różne rodzaje triathlonu — sprinterski, olimpijski itd. Jaki triathlon mnie interesuje
206
ROZDZIAŁ 10. TWORZENIE SEKCJI
Chcę startować w olimpijskim, który składa się z następujących konkurencji:
pływania na dystansie 1,5 km jazdy rowerem na dystansie 40 km biegania na dystansie 10 km Problem w tym, że nie ma tu możliwości odróżnienia elementu h2, który jest podtytułem, od elementu h2, który jest nagłówkiem niższego poziomu. Gdyby napisać skrypt, który by tworzył model dokumentu na podstawie jego elementów h1 – h6, to wynik byłby nieprecyzyjny: Owoce, które lubię Czyli jak polubiłem cytrusy Inne owoce Więcej informacji Moje ulubione sporty Rodzaje triathlonu Jaki triathlon mnie interesuje
Wynikałoby z tego, że Czyli jak polubiłem cytrusy jest nagłówkiem, a nie podtytułem. Element hgroup pozwala zaradzić temu problemowi, tak jak widać to w listingu 10.3. Listing 10.3. Zastosowanie elementu hgroup
Przykład
Moje ulubione owoce Czyli jak pokochałem cytrusy
Lubię jabłka i pomarańcze. Inne owoce Lubię też banany, mango, wiśnie, morele, śliwki, gruszki i winogrona. Więcej informacji Inne moje ulubione owoce znajdziesz tutaj. Moje ulubione sporty
Lubię pływać, jeździć rowerem i biegać. Ćwiczę na swój pierwszy triathlon, a jest to ciężka praca.
Rodzaje triathlonu Istnieją różne rodzaje triathlonu — sprinterski, olimpijski itd. Jaki triathlon mnie interesuje
207
ROZDZIAŁ 10. TWORZENIE SEKCJI
Chcę startować w olimpijskim, który składa się z następujących konkurencji:
pływania na dystansie 1,5 km jazdy rowerem na dystansie 40 km biegania na dystansie 10 km Położenie elementu hgroup w hierarchii h1 – h6 określone jest przez pierwszy nagłówek będący dzieckiem tego elementu. Przykładowo, hgroup w powyższym listingu traktowany jest jako h1, ponieważ h1 jest jego pierwszym dzieckiem. Jedynie pierwszy element h1 – h6 uwzględniany jest w modelu struktury, przez co model ów wygląda następująco: Owoce, które lubię Inne owoce Więcej informacji Moje ulubione sporty Rodzaje triathlonu Jaki triathlon mnie interesuje
Element h2 nie jest już mylący — element hgroup wskazuje, że należy go zignorować. Drugim problemem, z jakim trzeba się zmierzyć, jest sprawienie, by podtytuł odróżniał się wizualnie od standardowych elementów h2. W listingu zdefiniowałem kilka prostych stylów, czego rezultat widać na rysunku 10.2. O tym, jak działają selektory CSS, przeczytasz w rozdziale 17.
Rysunek 10.2. Uwypuklenie charakteru relacji pomiędzy elementami-dziećmi hgroup Nie sugeruję wprawdzie, żebyś trzymał się takiego surowego stylu, ale sam pewnie widzisz, że charakter relacji pomiędzy elementami-dziećmi hgroup można uwypuklić, zmniejszając margines między elementami nagłówka i nadając im tła o jednakowej barwie.
208
ROZDZIAŁ 10. TWORZENIE SEKCJI
Tworzenie sekcji Element section jest nowością w HTML5 i służy określaniu sekcji dokumentu. Elementy nagłówkowe pozwalają wprawdzie na tworzenie sugerowanych sekcji, ale to właśnie ten element pozwala na ich wyszczególnienie i odłączenie od elementów h1 – h6. Korzystanie z elementu section nie wiąże się z żadnymi jasno określonymi zasadami, ale z reguły powinno się w nim zawierać treść, która powinna się znaleźć w modelu struktury dokumentu bądź jego spisie treści. Elementy section zazwyczaj zawierają jeden lub więcej akapitów oraz nagłówek, choć nie jest on konieczny. W tabeli 10.5 znajduje się opis tego elementu. Tabela 10.5. Element section Element
section
Typ elementu
Strukturalny
Dozwoleni rodzice
Dowolny element, który może zawierać elementy strukturalne. Element section nie może być dzieckiem elementu address.
Atrybuty lokalne
Brak
Zawartość
Elementy style i treści strukturalne.
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Tak
Zmiany w HTML5
Nie dotyczy
Domyślny styl prezentacji
section { display: block; }
W listingu 10.4 widać przykład zastosowania elementu section. Listing 10.4. Zastosowanie elementu section
Przykład
Moje ulubione owoce Czyli jak pokochałem cytrusy
Lubię jabłka i pomarańcze.
Inne owoce Lubię też banany, mango, wiśnie, morele, śliwki, gruszki i winogrona.
Więcej informacji
209
ROZDZIAŁ 10. TWORZENIE SEKCJI
Inne moje ulubione owoce znajdziesz tutaj.
Moje ulubione sporty
Lubię pływać, jeździć rowerem i biegać. Ćwiczę na swój pierwszy triathlon, a jest to ciężka praca.
Rodzaje triathlonu Istnieją różne rodzaje triathlonu — sprinterski, olimpijski itd. Jaki triathlon mnie interesuje Chcę startować w olimpijskim, który składa się z następujących konkurencji:
pływania na dystansie 1,5 km jazdy rowerem na dystansie 40 km biegania na dystansie 10 km W powyższym listingu podałem trzy kolejno zagnieżdżone elementy section. Zauważ, że nagłówek każdej z tych sekcji jest elementem h1. Kiedy używasz elementów section, przeglądarka odpowiada za rozpracowanie hierarchii elementów nagłówkowych, dzięki czemu (przynajmniej teoretycznie) Ty sam nie musisz określać i pilnować utrzymywania właściwej sekwencji elementów h1 – h6. Obsługa tej funkcji w różnych przeglądarkach bywa w praktyce nieco inna. Google Chrome, Internet Explorer 9 (IE9) i Firefox potrafią wyprowadzić sugerowaną hierarchię i opracować względny ranking wszystkich elementów h1, tak jak widać to na rysunku 10.3.
Rysunek 10.3. Zastosowanie elementów section z osadzonymi elementami h1 w Chrome
210
ROZDZIAŁ 10. TWORZENIE SEKCJI
Nie jest źle, ale wystarczy się przyjrzeć, by okazało się, że tekst elementu h1 — tj. zwrot Moje ulubione owoce — jest mniejszy od tekstu użytego w znajdującym się na tym samym poziomie hierarchii drugim nagłówku h1, zawierającym zwrot Moje ulubione sporty. Wynika to z tego, że niektóre przeglądarki (w tym Chrome i Firefox) nakładają na elementy h1 (oraz h2 – h6) inne style, kiedy te znajdują się w elementach section, article, aside i nav (które zresztą opiszę w dalszej części rozdziału). Ten nowy styl jest taki sam, jak domyślny styl wyświetlania elementu h2. IE9 nie nadaje innego stylu, co widać na rysunku 10.4. To jest właśnie poprawne zachowanie.
Rysunek 10.4. Zastosowanie elementu section z osadzonymi elementami h1 w Internet Explorer Co więcej, nie wszystkie przeglądarki prawidłowo obsługują tworzenie sugerowanej hierarchii osadzonych kolejno elementów nagłówkowych tego samego typu. Na rysunku 10.5 widać, jak Opera obsługuje te elementy. Safari robi tak samo — ignoruje hierarchię stworzoną przez elementy section. Style nadawane przez Chrome i Firefox możesz nadpisać, tworząc własne style, które mają pierwszeństwo nad stylami przeglądarek (co objaśniłem w rozdziale 4.). Internet Explorer zachowuje się wzorowo. Z kolei niewiele można zrobić z Operą i Safari. Dopóki obsługa tej całkiem przydatnej funkcji w najpopularniejszych przeglądarkach nie stanie się spójniejsza, należy używać jej ostrożnie.
Nagłówki i stopki Element header wskazuje nagłówek sekcji. Może on zawierać dowolną treść, w tym również logo. Zazwyczaj znajduje się w nim jeden element h1 – h6 bądź hgroup; mogą się w nim też znajdować elementy nawigacyjne sekcji. Poczytaj o elemencie nav (który omówię dalej w punkcie „Blok nawigacyjny”), jeżeli chcesz się bliżej zapoznać z elementami nawigacyjnymi. Opis elementu header znajduje się w tabeli 10.6. Element footer jest uzupełnieniem elementu header i określa stopkę sekcji. W elemencie footer zwykle umieszcza się skrótowe informacje o sekcji oraz ewentualnie szczegóły o autorze, prawach autorskich, linki do powiązanych treści, logo oraz deklaracje o zrzeczeniu się odpowiedzialności. W tabeli 10.7 znajduje się opis tego elementu.
211
ROZDZIAŁ 10. TWORZENIE SEKCJI
Rysunek 10.5. Zastosowanie elementu section z osadzonymi elementami h1 w Operze Tabela 10.6. Element header Element
header
Typ elementu
Strukturalny
Dozwoleni rodzice
Dowolny element, który może zawierać elementy strukturalne. Element header nie może być potomkiem elementu address, footer bądź innego elementu header.
Atrybuty lokalne
Brak
Zawartość
Treści strukturalne
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Tak
Zmiany w HTML5
Nie dotyczy
Domyślny styl prezentacji
header { display: block; }
Przykład zastosowania elementów header i footer widać w listingu 10.5. Listing 10.5. Zastosowanie elementów header i footer
Przykład
212
ROZDZIAŁ 10. TWORZENIE SEKCJI
Tabela 10.7. Element footer Element
footer
Typ elementu
Strukturalny
Dozwoleni rodzice
Dowolny element, który może zawierać elementy strukturalne. Element header nie może być potomkiem elementu address, header bądź innego elementu footer.
Atrybuty lokalne
Brak
Zawartość
Treści strukturalne
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Tak
Zmiany w HTML5
Nie dotyczy
Domyślny styl prezentacji
header { display: block; }
Rzeczy, które lubię Adam Freeman
Moje ulubione owoce Czyli jak pokochałem cytrusy
Lubię jabłka i pomarańcze.
Inne owoce Lubię też banany, mango, wiśnie, morele, śliwki, gruszki i winogrona.
Więcej informacji Inne moje ulubione owoce znajdziesz tutaj.
213
ROZDZIAŁ 10. TWORZENIE SEKCJI
Moje ulubione sporty
Lubię pływać, jeździć rowerem i biegać. Ćwiczę na swój pierwszy triathlon, a jest to ciężka praca.
Rodzaje triathlonu Istnieją różne rodzaje triathlonu — sprinterski, olimpijski itd.
Jaki triathlon mnie interesuje Chcę startować w olimpijskim, który składa się z następujących konkurencji:
pływania na dystansie 1,5 km jazdy rowerem na dystansie 40 km biegania na dystansie 10 km ©2011, Adam Freeman. Odwiedź stronę Helionu
W tym przykładzie zdefiniowałem trzy elementy header. Kiedy nagłówek jest dzieckiem elementu body, zakłada się, że jest nagłówkiem całego dokumentu (uważaj jednak — nie ma on nic wspólnego z elementem head, który opisałem w rozdziale 7.). Kiedy element header jest częścią sekcji (sugerowanej bądź jednoznacznie zdefiniowanej elementem section), to jest on jej nagłówkiem. Nadałem temu dokumentowi kilka stylów, aby uwypuklić hierarchiczne relacje pomiędzy poszczególnymi sekcjami i nagłówkami. Widać to na rysunku 10.6.
Rysunek 10.6. Zastosowanie elementu header Zwróć uwagę na zróżnicowanie wielkości tekstu. To prawdopodobnie z tego powodu Google Chrome i Firefox zmieniają formatowanie elementów h1 – h6, które znajdują się w elemencie section. Służy to odróżnieniu nagłówków h1 najwyższego poziomu od tych, które osadzone są w wydzielonych sekcjach. Nie usprawiedliwia to wprawdzie przesadnych zmian w formatowaniu, ale przynajmniej tłumaczy nam, dlaczego tak się dzieje. Efekt zastosowania elementu footer widać na rysunku 10.7.
214
ROZDZIAŁ 10. TWORZENIE SEKCJI
Rysunek 10.7. Dodanie elementu footer
Blok nawigacyjny Element nav określa sekcję dokumentu, w której znajdują się odnośniki do innych stron i innych części tej samej strony. Rzecz jasna, nie wszystkie linki muszą się znajdować w elemencie nav. Element ten służy do wskazania głównych sekcji nawigacyjnych dokumentu. W tabeli 10.8 znajduje się jego opis. Tabela 10.8. Element nav Element
nav
Typ elementu
Strukturalny
Dozwoleni rodzice
Dowolny element, który może zawierać elementy strukturalne; nav nie może jednak być potomkiem elementu address
Atrybuty lokalne
Brak
Zawartość
Treści strukturalne
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Tak
Zmiany w HTML5
Nie dotyczy
Domyślny styl prezentacji
nav { display: block; }
W listingu 10.6 widnieje przykład zastosowania elementu nav. Listing 10.6. Zastosowanie elementu nav
Przykład
215
ROZDZIAŁ 10. TWORZENIE SEKCJI
Rzeczy, które lubię Adam Freeman
Spis treści
- Moje ulubione owoce
- Moje ulubione sporty
- Rodzaje triathlonu
- Jaki triathlon mnie interesuje
Moje ulubione owoce Czyli jak pokochałem cytrusy
Lubię jabłka i pomarańcze.
Inne owoce Lubię też banany, mango, wiśnie, morele, śliwki, gruszki i winogrona.
Więcej informacji Inne moje ulubione owoce znajdziesz tutaj.
Moje ulubione sporty
Lubię pływać, jeździć rowerem i biegać. Ćwiczę na swój pierwszy triathlon, a jest to ciężka praca.
Rodzaje triathlonu Istnieją różne rodzaje triathlonu — sprinterski, olimpijski itd.
Jaki triathlon mnie interesuje Chcę startować w olimpijskim, który składa się z następujących konkurencji:
pływania na dystansie 1,5 km jazdy rowerem na dystansie 40 km biegania na dystansie 10 km 216
ROZDZIAŁ 10. TWORZENIE SEKCJI
Więcej informacji: Więcej o owocach Więcej o triathlonie
©2011, Adam Freeman. Odwiedź stronę Helionu
Zamieściłem w dokumencie kilka elementów nav, aby nadać mu pewną elastyczność. Pierwszy element nav zawiera elementy pozwalające użytkownikowi na poruszanie się po dokumencie. Użyłem elementów ul, li i a do utworzenia hierarchicznego zestawu odnośników wewnętrznych. Wygląd tak sformatowanej strony widać na rysunku 10.8.
Rysunek 10.8. Zastosowanie elementu nav do utworzenia bloku odnośników wewnętrznych Zamieściłem ten element nav w głównym elemencie header dokumentu. Nie jest to konieczne, ale lubię w ten sposób wskazywać, że użytkownik ma do czynienia z głównym elementem nav. Zauważ, że podałem również element h1. Element nav może zawierać dowolne elementy struktury, nie tylko odnośniki. Na końcu dokumentu umieściłem drugi element nav, w którym znajdują się linki odsyłające użytkownika do innych źródeł informacji. Wygląd tego elementu w przeglądarce widać na rysunku 10.9.
Rysunek 10.9. Zastosowanie elementu nav do utworzenia bloku odnośników zewnętrznych W elemencie style zamieściłem style, które pozwoliły mi wyróżnić obydwa bloki nav. Domyślny styl prezentacji elementu nav nie wskazuje wyraźnie jego treści.
217
ROZDZIAŁ 10. TWORZENIE SEKCJI
Artykuły Element article wskazuje w dokumencie HTML samodzielny fragment treści, który z założenia można by przekazywać i wykorzystywać niezależnie od pozostałej części strony (np. w ramach dystrybucji kanałami RSS). Nie oznacza to, że trzeba ją przekazywać niezależnie, lecz że samodzielność treści wskazuje, kiedy należy tego elementu używać. Dobrymi przykładami takich treści są — w rzeczy samej — artykuły i wpisy na blogach. W tabeli 10.9 znajduje się opis elementu article. Tabela 10.9. Element article Element
article
Typ elementu
Strukturalny
Dozwoleni rodzice
Dowolny element, który może zawierać elementy strukturalne; article nie może jednak być potomkiem elementu address
Atrybuty lokalne
Brak
Zawartość
Elementy style i treści strukturalne
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Tak
Zmiany w HTML5
Nie dotyczy
Domyślny styl prezentacji
article { display: block; }
W listingu 10.7 znajduje się przykład zastosowania elementu article. Listing 10.7. Zastosowanie elementu article
Przykład
218
ROZDZIAŁ 10. TWORZENIE SEKCJI
Rzeczy, które lubię Adam Freeman
Spis treści
- Moje ulubione owoce
- Moje ulubione sporty
Moje ulubione owoce Czyli jak pokochałem cytrusy
Lubię jabłka i pomarańcze.
Inne owoce Lubię też banany, mango, wiśnie, morele, śliwki, gruszki i winogrona.
Więcej informacji Inne moje ulubione owoce znajdziesz tutaj.
Więcej informacji: Więcej o owocach
Moje ulubione sporty Boli, ale nie poddaję się
Lubię pływać, jeździć rowerem i biegać. Ćwiczę na swój pierwszy triathlon, a jest to ciężka praca.
Rodzaje triathlonu Istnieją różne rodzaje triathlonu — sprinterski, olimpijski itd.
Jaki triathlon mnie interesuje Chcę startować w olimpijskim, który składa się z następujących konkurencji:
pływania na dystansie 1,5 km jazdy rowerem na dystansie 40 km biegania na dystansie 10 km 219
ROZDZIAŁ 10. TWORZENIE SEKCJI
Więcej informacji: Więcej o triathlonie
©2011, Adam Freeman. Odwiedź stronę Helionu
W tym przykładzie zmieniłem strukturę dokumentu tak, by bardziej przystawała do stylu właściwego blogom (choć z pewnością czytywałeś ciekawsze blogi od tego, który tu prezentuję). Główna treść dokumentu podzielona jest na trzy części. Pierwsza z nich to nagłówek header, który znajduje się poza poszczególnymi wpisami i pod który podłączona jest reszta dokumentu. Druga część to stopka footer, która jest przeciwwagą dla nagłówka i dostarcza użytkownikowi pewne podstawowe informacje dotyczące reszty treści. Nowością jest trzecia część: elementy article. W tym przykładzie każdy artykuł opisuje jakiś rodzaj rzeczy, które lubię. Spełniają one zatem warunki samodzielności, albowiem każde z tych omówień jest autonomiczne i może być rozpowszechniane z zachowaniem sensu niezależnie od reszty treści. Znowu, dodałem kilka stylów, aby wyszczególnić wygląd definiowanych tymi elementami sekcji, czego efekt widać na rysunku 10.10.
Rysunek 10.10. Zastosowanie elementu article Element article odznacza się równą elastycznością w użyciu, co pozostałe nowe elementy semantyczne. Możesz osadzać w sobie kolejne takie elementy, by wskazać pierwotny artykuł oraz kolejne aktualizacje bądź komentarze. Podobnie jak w przypadku innych elementów, wartość article zależna jest od kontekstu — to, co nadaje sensowną strukturę jednemu rodzajowi treści, może być zupełnie bezużyteczne przy innego rodzaju treściach. Konieczne jest zachowanie rozsądku i dbanie o spójność.
Paski boczne Element aside wskazuje treści luźno powiązane z treścią elementu, w którym jest osadzony — jest odpowiednikiem ramki w książce bądź czasopiśmie. Jego treść ma jakiś związek z resztą strony, artykułu
220
ROZDZIAŁ 10. TWORZENIE SEKCJI
article lub sekcji section, ale nie wchodzi w skład głównego wątku. Może zawierać jakieś dodatkowe szczegóły, zbiór linków do pokrewnych artykułów itp. Opis elementu aside znajduje się w tabeli 10.10.
Tabela 10.10. Element aside Element
aside
Typ elementu
Strukturalny
Dozwoleni rodzice
Dowolny element, który może zawierać elementy strukturalne; aside nie może jednak być potomkiem elementu address
Atrybuty lokalne
Brak
Zawartość
Elementy style i treści strukturalne
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Tak
Zmiany w HTML5
Nie dotyczy
Domyślny styl prezentacji
aside { display: block; }
W listingu 10.8 widać przykład zastosowania elementu aside. Dodałem takowy do jednego z artykułów i obstylowałem tak, by wyglądał jak prosta ramka w czasopiśmie. Listing 10.8. Dodanie i obstylowanie elementu aside
Przykład
221
ROZDZIAŁ 10. TWORZENIE SEKCJI
Rzeczy, które lubię Adam Freeman
Spis treści
- Moje ulubione owoce
- Moje ulubione sporty
Moje ulubione owoce Czyli jak pokochałem cytrusy
Dlaczego owoce są zdrowe
Oto dlaczego każdy powinien jadać więcej owoców:
Owoce mają wiele witamin Owoce są źródłem błonnika Owoce są niskokaloryczne Lubię jabłka i pomarańcze.
Inne owoce Lubię też banany, mango, wiśnie, morele, śliwki, gruszki i winogrona.
Więcej informacji Inne moje ulubione owoce znajdziesz tutaj.
Więcej informacji: Więcej o owocach
Moje ulubione sporty Boli, ale nie poddaję się
222
ROZDZIAŁ 10. TWORZENIE SEKCJI
Lubię pływać, jeździć rowerem i biegać. Ćwiczę na swój pierwszy triathlon, a jest to ciężka praca.
Rodzaje triathlonu Istnieją różne rodzaje triathlonu — sprinterski, olimpijski itd.
Jaki triathlon mnie interesuje Chcę startować w olimpijskim, który składa się z następujących konkurencji:
pływania na dystansie 1,5 km jazdy rowerem na dystansie 40 km biegania na dystansie 10 km Więcej informacji: Więcej o triathlonie
©2011, Adam Freeman. Odwiedź stronę Helionu
Rezultat zastosowania opatrzonego stylami elementu aside widać na rysunku 10.11. Na potrzeby przykładu zamieściłem w dokumencie dodatkowy tekst, żeby struktura treści była bardziej widoczna.
Rysunek 10.11. Zastosowanie obstylowanego elementu aside
Dane kontaktowe Element address służy do podawania danych kontaktowych właściwych dla dokumentu lub elementu article. W tabeli 10.11 znajduje się opis tego elementu.
223
ROZDZIAŁ 10. TWORZENIE SEKCJI
Tabela 10.11. Element address Element
address
Typ elementu
Strukturalny
Dozwoleni rodzice
Dowolny element, który może zawierać elementy strukturalne
Atrybuty lokalne
Brak
Zawartość
Treści strukturalne; potomkami tego elementu nie mogą być elementy h1 – h6, section, header, footer, nav, article i aside
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Tak
Zmiany w HTML5
Nie dotyczy
Domyślny styl prezentacji
address { display: block; font-style: italic; }
Uznaje się, że element address będący potomkiem elementu article podaje dane kontaktowe związane z tym artykułem. Kiedy natomiast address jest dzieckiem elementu body (i nie jest osadzony w pośrednim elemencie article), to uznaje się, że podaje on dane kontaktowe odnoszące się do całego dokumentu. Elementu address nie wolno używać do podawania adresów, które nie są danymi kontaktowymi związanymi z dokumentami lub artykułami. Przykładowo, nie można używać tego elementu w obrębie właściwej treści dokumentu do podawania adresów klientów i użytkowników. W listingu 10.9 widnieje przykład zastosowania tego elementu. Listing 10.9. Zastosowanie elementu address ...
Rzeczy, które lubię Adam Freeman
Masz pytania lub uwagi? Napisz
Spis treści
- Moje ulubione owoce
- Moje ulubione sporty
...
W nagłówku dokumentu zamieściłem element address, zawierający adres e-mailowy, pod którym użytkownicy czy też czytelnicy mogą się ze mną skontaktować. Rezultat widać na rysunku 10.12.
Sekcja szczegółów Element details tworzy w dokumencie sekcję, którą użytkownik może rozwinąć, by zapoznać się z dodatkowymi szczegółami jakiegoś tematu. Opis tego elementu znajduje się w tabeli 10.12.
224
ROZDZIAŁ 10. TWORZENIE SEKCJI
Rysunek 10.12. Zastosowanie elementu address Tabela 10.12. Element details Element
details
Typ elementu
Strukturalny
Dozwoleni rodzice
Dowolny element, który może zawierać elementy strukturalne
Atrybuty lokalne
open
Zawartość
Treści strukturalne i (opcjonalnie) element summary
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Tak
Zmiany w HTML5
Nie dotyczy
Domyślny styl prezentacji
details { display: block; }
Element details zazwyczaj zawiera element summary, który określa oznaczenie lub tytuł sekcji szczegółów. W tabeli 10.13 znajduje się opis elementu summary. Tabela 10.13. Element summary Element
summary
Typ elementu
Nie dotyczy
Dozwoleni rodzice
Element details
Atrybuty lokalne
Brak
Zawartość
Treść właściwa
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Tak
Zmiany w HTML5
Nie dotyczy
Domyślny styl prezentacji
summary { display: block; }
W listingu 10.10 wykorzystano obydwa te elementy. Listing 10.10. Zastosowanie elementów summary i details
Przykład
225
ROZDZIAŁ 10. TWORZENIE SEKCJI
Rzeczy, które lubię Adam Freeman
Moje ulubione sporty Boli, ale nie poddaję się
Lubię pływać, jeździć rowerem i biegać. Ćwiczę na swój pierwszy triathlon, a jest to ciężka praca.
Rodzaje triathlonu Istnieją różne rodzaje triathlonu — sprinterski, olimpijski itd. Chcę startować w olimpijskim, który składa się z następujących konkurencji:
pływania na dystansie 1,5 km jazdy rowerem na dystansie 40 km biegania na dystansie 10 km Wygląd tych elementów w przeglądarce widać na rysunku 10.13. Nie wszystkie przeglądarki obsługują element details prawidłowo; m.in. IE9 ma z tym problemy. Jak widać na rysunku, w przeglądarce pojawia się kontrolka, która po aktywowaniu otwiera i wyświetla zawartość elementu details. Kiedy element details jest zamknięty, widoczna jest jedynie treść elementu summary. Jeżeli chcesz, aby element details był automatycznie otwierany przy pierwszym wczytaniu strony, zastosuj atrybut open.
226
ROZDZIAŁ 10. TWORZENIE SEKCJI
Rysunek 10.13. Zastosowanie elementów details i summary
Podsumowanie W tym rozdziale przedstawiłem Ci elementy służące do tworzenia sekcji w dokumentach i wydzielania samodzielnych treści. Większość z nich pojawiła się dopiero w HTML5 i choć korzystanie z nich nie jest wymogiem tworzenia poprawnych dokumentów HTML5, to należą one do najważniejszych usprawnień w zakresie ulepszenia semantyki HTML.
227
ROZDZIAŁ 10. TWORZENIE SEKCJI
228
ROZDZIAŁ 11
Elementy tabel
W tym rozdziale przedstawię Ci elementy HTML służące do tworzenia tabel. Tabele służą przede wszystkim do wyświetlania danych w dwuwymiarowych siatkach, choć we wcześniejszych wersjach HTML powszechnie z nich korzystano przy definiowaniu layoutu stron. W HTML5 takie zastosowanie jest niedozwolone i należy wobec tego korzystać z nowej funkcji obsługi tabel przez CSS (którą omówię w rozdziale 21.). W tabeli 11.1 znajduje się streszczenie całego rozdziału. Tabela 11.1. Streszczenie rozdziału Problem
Rozwiązanie
Listing
Utworzenie podstawowej tabeli.
Użyj elementów table, tr i td.
11.1, 11.2
Dodanie komórek nagłówków do tabeli.
Użyj elementu th.
11.3
Odróżnienie nagłówków kolumn i rzędów.
Użyj elementów thead i tbody.
11.4, 11.5
Dodanie stopki do tabeli.
Użyj elementu tfoot.
11.6
Utworzenie nieregularnej siatki tabeli.
Użyj atrybutu span, obsługiwanego przez elementy th i td.
11.7 – 11.9
Powiązanie komórek z nagłówkami na potrzeby technologii asystujących.
Użyj atrybutu headers, obsługiwanego przez elementy td i th.
11.10
Dodanie podpisu do tabeli.
Użyj elementu caption.
11.11
Definiowanie kolumn tabeli zamiast rzędów.
Użyj elementów colgroup i col.
11.12, 11.13
Wskazanie, że tabela nie służy jako podstawa layoutu strony.
Użyj atrybutu border obsługiwanego przez element table.
11.14
Podstawowa tabela table, tr i td to trzy elementy, które musi zawierać każda tabela. Są też inne, które omówię w dalszej części rozdziału, ale zacząć musisz od tych powyżej. Pierwszy, table, leży u podstaw obsługi treści tabelowych
w HTML i wskazuje tabelę w dokumencie HTML. W tabeli 11.2 znajduje się opis tego elementu. Kolejnym podstawowym elementem tabelowym jest tr, który wskazuje rząd tabeli. Tabele HTML bazują na rzędach, a nie na kolumnach, toteż każdy rząd trzeba wskazywać osobno. Opis tego elementu znajduje się w tabeli 11.3. Ostatnim z trzech podstawowych elementów jest td, który wskazuje komórkę tabeli. Jego opis znajduje się w tabeli 11.4.
ROZDZIAŁ 11. ELEMENTY TABEL
Tabela 11.2. Element table Element
table
Typ elementu
Strukturalny
Dozwoleni rodzice
Dowolny element, który może zawierać elementy strukturalne
Atrybuty lokalne
border
Zawartość
Elementy caption, colgroup, thead, tbody, tfoot, tr, th i td
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Atrybuty summary, align, width, bgcolor, cellpadding, cellspacing, frame i rules wyszły z użycia. Należy zamiast nich korzystać z CSS. Wartość atrybutu border musi wynosić 1. Grubość obramowania określa się następnie w CSS.
Domyślny styl prezentacji
table { display: table; border-collapse: separate; border-spacing: 2px; border-color: gray; }
Tabela 11.3. Element tr Element
tr
Typ elementu
Nie dotyczy
Dozwoleni rodzice
Elementy table, thead, tfoot i tbody
Atrybuty lokalne
Brak
Zawartość
Jeden lub więcej elementów td i th
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Atrybuty align, char, charoff, valign i bgcolor wyszły z użycia. Należy zamiast nich korzystać z CSS.
Domyślny styl prezentacji
tr { display: table-row; vertical-align: inherit; border-color: inherit;}
Tabela 11.4. Element td Element
td
Typ elementu
Nie dotyczy
Dozwoleni rodzice
Element tr
Atrybuty lokalne
colspan, rowspan, headers
Zawartość
Treść strukturalna
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Atrybut scope wyszedł z użycia. Zamiast niego korzysta się z atrybutu scope elementu th. Atrybuty abbr, axis, align, width, char, charoff, valign, bgcolor, height i nowrap wyszły z użycia. Należy zamiast nich korzystać z CSS.
Domyślny styl prezentacji
td { display: table-cell; vertical-align: inherit; }
Tych trzech elementów używa się w połączeniu do tworzenia tabel, tak jak w listingu 11.1.
230
ROZDZIAŁ 11. ELEMENTY TABEL
Listing 11.1. Tworzenie tabeli elementami table, tr i td
Przykład
Jabłka | Zielony | Średni |
Pomarańcze | Pomarańczowy | Duży |
W powyższym przykładzie utworzyłem element table składający się z dwóch rzędów (określonych dwoma elementami tr). W każdym rzędzie znajdują się trzy kolumny, określone elementami td. Element td może zawierać dowolne treści strukturalne, ale zdecydowałem się użyć zwyczajnego tekstu. Domyślny styl prezentacji tabeli widać na rysunku 11.1.
Rysunek 11.1. Prosta tabela Utworzona tabela jest bardzo prosta, ale widać na jej przykładzie podstawową strukturę. Przeglądarka odpowiada za określanie rozmiaru rzędów i kolumn tak, by utrzymać kształt tabeli. Spójrz, co się dzieje, kiedy w tabeli pojawia się dłuższy tekst, tak jak w listingu 11.2. Listing 11.2. Zamieszczenie dłuższej treści w komórce
Przykład
231
ROZDZIAŁ 11. ELEMENTY TABEL
Jabłka | Zielony | Średni |
Pomarańcze | Pomarańczowy | Duży |
Owoc granatowca | Dość zielonkawo-czerwonawy | Od średniego po duży |
Treść każdego z dodanych tutaj elementów td jest dłuższa od treści z poprzednich dwóch rzędów. Wyrównanie wielkości wszystkich komórek w przeglądarce widać na rysunku 11.2.
Rysunek 11.2. Komórki o rozmiarze dostosowanym do dłuższej treści Jedną z najprzyjemniejszych właściwości elementu table jest to, że nie musisz się zamartwiać kwestiami związanymi z rozmiarem komórek. Przeglądarka sama pilnuje, by szerokość kolumn była dopasowana choćby do najdłuższych treści, a wysokość rzędów dopasowana do wysokości najwyższej komórki.
Komórki nagłówków Element th wskazuje komórkę nagłówka, co pozwala odbiorcy na odróżnienie danych od opisów danych. W tabeli 11.5 znajduje się opis tego elementu. W listingu 11.3 widać, jak zamieściłem w tabeli elementy th, by opisać dane zawarte w elementach td. Listing 11.3. Umieszczenie w tabeli komórek nagłówkowych
Przykład
232
ROZDZIAŁ 11. ELEMENTY TABEL
Tabela 11.5. Element th Element
th
Typ elementu
Nie dotyczy
Dozwoleni rodzice
Element tr
Atrybuty lokalne
colspan, rowspan, scope, headers
Zawartość
Treść właściwa
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Atrybuty abbr, axis, align, width, char, charoff, valign, bgcolor, height i nowrap wyszły z użycia. Należy zamiast nich korzystać z CSS.
Domyślny styl prezentacji
th { display: table-cell; vertical-align: inherit; font-weight: bold; text-align: center; }
Pozycja | Nazwa | Kolor | Rozmiar |
Ulubiony: | Jabłko | Zielony | Średni |
Drugi ulubiony: | Pomarańcza | Pomarańczowy | Duży |
Trzeci ulubiony: | Owoc granatowca | Dość zielonkawo-czerwonawy | Od średniego po duży |
Jak widać, mogłem w poszczególnych rzędach zestawić elementy th i td, a także stworzyć rząd składający się z samych elementów th. Wygląd tej tabeli w przeglądarce widać na rysunku 11.3.
Rysunek 11.3. Umieszczone w tabeli komórki nagłówkowe
233
ROZDZIAŁ 11. ELEMENTY TABEL
Nadanie tabeli struktury Mamy już podstawową tabelę, ale także pewien problem. Przy tworzeniu stylu tabeli odróżnienie elementów th znajdujących się w osobnym rzędzie od tych, które zestawione są w rzędach z danymi, może być trudne. Nie jest to wprawdzie niemożliwe, ale wymaga dużej uwagi. Listing 11.4 przedstawia, jak można do tego problemu podejść. Listing 11.4. Odróżnienie elementów th w tabeli
Przykład
Pozycja | Nazwa | Kolor | Rozmiar |
Ulubiony: | Jabłko | Zielony | Średni |
Drugi ulubiony: | Pomarańcza | Pomarańczowy | Duży |
Trzeci ulubiony: | Owoc granatowca | Dość zielonkawo-czerwonawy | Od średniego po duży |
W tym przykładzie podałem jeden selektor, który odnosi się do wszystkich elementów th, oraz drugi styl, który odnosi się jedynie do tych elementów th, które są w obrębie elementu tr jedynym rodzajem dziecka. Efekt zastosowania tych stylów widać na rysunku 11.4.
Rysunek 11.4. Dodanie stylów odnoszących się do rzędów z elementami th 234
ROZDZIAŁ 11. ELEMENTY TABEL
Jest to całkowicie sprawne podejście, ale brakuje w nim elastyczności. Gdybym w rzędach tabeli zamieścił dodatkowe elementy th, drugi selektor stałby się nieaktywny, a sam bym naprawdę nie chciał majstrować przy selektorach przy każdej modyfikacji tabeli. Do rozwiązywania tego rodzaju problemów w elastyczny sposób służą elementy thead, tbody i tfoot. Umożliwiają one ustrukturyzowanie tabeli, czego główną korzyścią jest ułatwienie pracy z poszczególnymi fragmentami owej tabeli, zwłaszcza kiedy w grę wchodzą selektory CSS.
Wskazywanie nagłówków i części głównej tabeli Element tbody wskazuje zbiór rzędów składających się na część główną tabeli. Pozostałe części to rzędy nagłówków i stopek, które wkrótce omówię, a które wskazuje się elementami thead i tfoot. W tabeli 11.6 znajduje się opis elementu tbody. Tabela 11.6. Element tbody Element
tbody
Typ elementu
Nie dotyczy
Dozwoleni rodzice
Element table
Atrybuty lokalne
Brak
Zawartość
Dowolna liczba elementów tr (choć żaden nie jest wymagany)
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Atrybuty align, char, charoff i valign wyszły z użycia
Domyślny styl prezentacji
thead { display: table-header-group; vertical-align: middle; border-color: inherit; }
Nawiasem mówiąc, większość przeglądarek automatycznie wstawia element tbody w kod, kiedy przetwarzają element table, nawet jeżeli w dokumencie żadnego tbody nie ma. Oznacza to, że selektory CSS zdefiniowane przy założeniu, że tabela zachowa wejściową formę przy parsowaniu, mogą nie zadziałać. Przykładowo, w takiej sytuacji selektor table > tr nie zadziała, ponieważ pomiędzy elementami table i tr znajdzie się wstawiony przez przeglądarkę tbody. Aby zaradzić temu problemowi, musisz podawać selektory w rodzaju table > tbody > tr, table tr (bez znaku >) albo po prostu tbody > tr. Element thead określa jeden lub więcej rzędów, które opisują kolumny elementu table. Opis elementu thead znajduje się w tabeli 11.7. Tabela 11.7. Element thead Element
thead
Typ elementu
Nie dotyczy
Dozwoleni rodzice
Element table
Atrybuty lokalne
Brak
Zawartość
Dowolna liczba elementów tr (choć żaden nie jest wymagany)
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Atrybuty align, char, charoff i valign wyszły z użycia
Domyślny styl prezentacji
thead { display: table-header-group; vertical-align: middle; border-color: inherit; }
235
ROZDZIAŁ 11. ELEMENTY TABEL
Kiedy element thead nie występuje w kodzie, przeglądarka zakłada, że wszystkie elementy tr należą do części głównej tabeli. W listingu 11.5 zamieściłem w przykładowej tabeli elementy thead i tbody, a także dodałem bardziej elastyczne selektory CSS, których można dzięki nim używać. Listing 11.5. Zamieszczone w tabeli elementy thead i tbody
Przykład
Pozycja | Nazwa | Kolor | Rozmiar |
Ulubiony: | Jabłko | Zielony | Średni |
Drugi ulubiony: | Pomarańcza | Pomarańczowy | Duży |
Trzeci ulubiony: | Owoc granatowca | Dość zielonkawo-czerwonawy | Od średniego po duży |
Nie wygląda to na szczególnie istotną zmianę, ale ustrukturyzowana w ten sposób tabela znacznie ułatwia pracę z różnymi rodzajami komórek. Co więcej, zmniejsza to ryzyko, że tabela będzie się nieprawidłowo wyświetlać w przypadku wprowadzenia jakiejś modyfikacji stylistycznej.
Stopka Element tfoot wskazuje blok rzędów składających się na stopkę tabeli. W tabeli 11.8 znajduje się opis tego elementu. W listingu 11.6 widać, jak można wykorzystać element tfoot do utworzenia stopki elementu table. W wersjach HTML sprzed HTML5 element tfoot musiał się znajdować przed elementem tbody (bądź pierwszym elementem tr, jeżeli element tbody był nieobecny). W HTML5 element tfooter możesz zamieścić po elemencie tbody lub ostatnim elemencie tr, co jest bardziej spójne z tym, jak przeglądarki
236
ROZDZIAŁ 11. ELEMENTY TABEL
Tabela 11.8. Element tfoot Element
tfoot
Typ elementu
Nie dotyczy
Dozwoleni rodzice
Element table
Atrybuty lokalne
Brak
Zawartość
Dowolna liczba elementów tr (choć żaden nie jest wymagany)
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Element tfoot można teraz umieszczać przed elementami tbody i tr lub po nich. W HTML 4 element tfoot mógł się znajdować wyłącznie przed nimi. Atrybuty align, char, charoff i valign wyszły z użycia.
Domyślny styl prezentacji
tfoot { display: table-footer-group; vertical-align: middle; border-color: inherit; }
wyświetlają element table. W listingu 11.6 element tfoot zamieściłem przed tbody, choć nie jest to jedyne prawidłowe położenie. Wydaje mi się jednak, że zamieszczanie go przed tbody jest bardziej użyteczne przy automatycznym generowaniu kodu HTML z szablonów, a po tbody przy pisaniu kodu ręcznie. Listing 11.6. Zastosowanie elementu tfoot
Przykład
Pozycja | Nazwa | Kolor | Rozmiar |
Pozycja | Nazwa | Kolor | Rozmiar |
Ulubiony: | Jabłko | Zielony | Średni |
Drugi ulubiony: | Pomarańcza | Pomarańczowy | Duży |
237
ROZDZIAŁ 11. ELEMENTY TABEL
Trzeci ulubiony: | Owoc granatowca | Dość zielonkawo-czerwonawy | Od średniego po duży |
W stopce zamieściłem kopię rzędów z nagłówka. W dalszej części rozdziału powrócę jeszcze do stopki i ją rozbuduję. Dodałem też do jednego ze stylów drugi selektor, żeby obstylowanie elementów thead i tfoot było jednakowe. Stopkę widać na rysunku 11.5.
Rysunek 11.5. Zamieszczona w tabeli stopka
Nieregularne tabele Większość tabel to proste siatki, w których na jedną pozycję przypada jedna komórka. Bardziej skomplikowane dane niekiedy jednak wymagają tworzenia nieregularnych tabel, których komórki rozciągnięte są na kilka rzędów i kolumn. Takie tabele tworzy się przy użyciu atrybutów colspan i rowspan elementów td i th. W listingu 11.7 widnieje przykład wykorzystania tych atrybutów w tworzeniu nieregularnej tabeli. Listing 11.7. Nieregularna tabela
Przykład
238
ROZDZIAŁ 11. ELEMENTY TABEL
Pozycja | Nazwa | Kolor | Rozmiar i oddane głosy |
Ulubiony: | Jabłko | Zielony | Średni | 500 |
Drugi ulubiony: | Pomarańcza | Pomarańczowy | Duży | 450 |
Trzeci ulubiony: | Owoc granatowca | Granaty i wiśnie występują w różnych kolorach i kształtach. | 203 |
Czwarte ulubione: | Wiśnia | 75 |
Ananas | Brązowy | Bardzo duży |
© 2011 Adam Freeman — Instytut Analizy Owoców |
Atrybutu rowspan używa się, żeby rozciągnąć komórkę na więcej rzędów. Przypisana temu atrybutowi wartość określa liczbę rzędów obejmowanych przez daną komórkę. Atrybutu colspan używa się z kolei, żeby rozciągnąć komórkę na więcej kolumn. Wskazówka Wartości nadawane atrybutom rowspan i colspan muszą być liczbami całkowitymi. Niektóre przeglądarki wprawdzie uznają, że wartość 100% oznacza wszystkie rzędy i kolumny tabeli, ale nie jest to część standardu HTML5 i ten rodzaj obsługi nie jest powszechny.
W dokumencie zamieściłem kilka dodatkowych stylów, aby wyróżnić komórki rozciągające się na wiele rzędów lub kolumn (rysunek 11.6). Komórki te oznaczone są grubymi obwódkami. Atrybuty rowspan i colspan definiuje się w komórce znajdującej się w lewym górnym rogu fragmentu siatki, który chce się scalić. Jednocześnie należy usunąć te elementy td lub tr, które w innym wypadku byłyby w siatce obecne. Rozważmy przykład prostej tabeli, który widnieje w listingu 11.8.
239
ROZDZIAŁ 11. ELEMENTY TABEL
Rysunek 11.6. Komórki rozciągnięte na wiele rzędów i kolumn Listing 11.8. Prosta tabela
Przykład
Przedstawiona w tym przykładzie tabela jest regularną siatką 3×3 (rysunek 11.7). Jeżeli chcesz, żeby jedna komórka z kolumny środkowej rozciągała się na wszystkie trzy rzędy, to musisz nadać atrybut rowspan komórce 2, która znajduje się na górnym krańcu pożądanego obszaru siatki. (Komórka ta znajduje się też na lewym jego krańcu, lecz nie ma to tutaj szczególnego znaczenia). Musisz również usunąć komórki, których obszar zostanie pokryty przez rozciągniętą komórkę — w tym przypadku są to komórki 5 i 8. Naniesione zmiany widnieją w listingu 11.9.
240
ROZDZIAŁ 11. ELEMENTY TABEL
Rysunek 11.7. Regularna siatka Listing 11.9. Rozciągnięcie komórki na więcej niż jeden rząd
Przykład
Rezultat wprowadzenia tych zmian widać na rysunku 11.8. Przeglądarka odpowiada za określenie, w jaki sposób należy zestawić pozostałe komórki z rozciągniętą komórką. Ostrzeżenie Uważaj, by przypadkiem nie stworzyć nachodzących na siebie komórek. Element table służy do przedstawiania danych w tabelach. Tworzenie nachodzących na siebie komórek ma sens tylko, kiedy używa się tabeli do tworzenia layoutu — a to z kolei należy robić przy użyciu funkcji table CSS (którą omówię w rozdziale 21.).
241
ROZDZIAŁ 11. ELEMENTY TABEL
Rysunek 11.8. Rozciągnięcie komórki na trzy rzędy
Łączenie nagłówków z komórkami Elementy td i th obsługują atrybut headers, który ułatwia czytnikom ekranowym i innym technologiom asystującym przetwarzanie tabel. Wartością atrybutu headers powinna być wartość atrybutu id jednej lub więcej komórek th. W listingu 11.10 widnieje przykład zastosowania tego atrybutu. Listing 11.10. Zastosowanie atrybutu headers
Przykład
Pozycja | Nazwa | Kolor | Rozmiar i oddane głosy |
Ulubiony: | Jabłko | Zielony | Średni | 500 |
242
ROZDZIAŁ 11. ELEMENTY TABEL
© 2011 Adam Freeman — Instytut Analizy Owoców |
Globalne atrybuty id nadałem wszystkim elementom th znajdującym się w thead i tbody. Każdemu elementowi td i th w tbody nadałem atrybut headers, by powiązać komórki z nagłówkiem kolumny. W przypadku elementów td podałem również nagłówki rzędów (tj. nagłówki znajdujące się w pierwszej kolumnie po lewej).
Podpis tabeli Element caption pozwala na określenie podpisu dla elementu table. W tabeli 11.9 znajduje się opis elementu caption. Tabela 11.9. Element caption Element
caption
Typ elementu
Nie dotyczy
Dozwoleni rodzice
Element table
Atrybuty lokalne
Brak
Zawartość
Treści strukturalne (z wyjątkiem elementu table)
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Atrybut align wyszedł z użycia
Domyślny styl prezentacji
caption { display: table-caption; text-align: center; }
W listingu 11.11 widnieje przykład zastosowania elementu caption. Listing 11.11. Zastosowanie elementu caption
Przykład
Wyniki analizy owoców w roku 2011
Pozycja | Nazwa | Kolor | Rozmiar i oddane głosy |
Ulubiony: | Jabłko | Zielony | Średni | 500 |
Drugi ulubiony: | Pomarańcza | Pomarańczowy | Duży | 450 |
Trzeci ulubiony: | Owoc granatowca | Granaty i wiśnie występują w różnych kolorach i kształtach. | 203 |
Czwarte ulubione: | Wiśnia | 75 |
Ananas | Brązowy | Bardzo duży |
© 2011 Adam Freeman — Instytut Analizy Owoców |
Element table może zawierać tylko jeden element caption, lecz nie musi to być jego pierwsze dziecko. Niezależnie od miejsca w kodzie, w którym element ten występuje, podpis zawsze wyświetlany jest nad tabelą. Rezultat wprowadzenia podpisu (i obstylowania go) widać na rysunku 11.9.
244
ROZDZIAŁ 11. ELEMENTY TABEL
Rysunek 11.9. Podpis tabeli
Praca z kolumnami Praca z tabelami w HTML opiera się w pierwszej kolejności na tworzeniu rzędów. Poszczególne komórki tworzy się w obrębie elementów tr, a same tabele składają się z kolejnych rzędów. Utrudnia to stylizację kolumn tabel, zwłaszcza kiedy ma się do czynienia z nieregularnie rozmieszczonymi komórkami. Można zaradzić temu problemowi, wykorzystując elementy colgroup i col. Element colgroup określa zbiór kolumn. W tabeli 11.10 znajduje się opis tego elementu. Tabela 11.10. Element colgroup Element
colgroup
Typ elementu
Nie dotyczy
Dozwoleni rodzice
Element table
Atrybuty lokalne
span
Zawartość
Dowolna liczba elementów col, ale pod warunkiem że nie użyto atrybutu span
Znaczniki
Void, jeżeli zastosowano atrybut span; w innych przypadkach znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Atrybuty width, char, charoff i valign wyszły z użycia
Domyślny styl prezentacji
colgroup { display: table-column-group; }
W listingu 11.12 widnieje przykład zastosowania elementu colgroup. Listing 11.12. Zastosowanie elementu colgroup
Przykład
Wyniki analizy owoców w roku 2011
Pozycja | Nazwa | Kolor | Rozmiar i oddane głosy |
Ulubiony: | Jabłko | Zielony | Średni | 500 |
Drugi ulubiony: | Pomarańcza | Pomarańczowy | Duży | 450 |
Trzeci ulubiony: | Owoc granatowca | Granaty i wiśnie występują w różnych kolorach i kształtach. | 203 |
Czwarte ulubione: | Wiśnia | 75 |
Ananas | Brązowy | Bardzo duży |
© 2011 Adam Freeman — Instytut Analizy Owoców |
W powyższym przykładzie zdefiniowałem dwa elementy colgroup. Atrybut span określa, ile kolumn element colgroup obejmuje. Pierwszy colgroup w listingu obejmuje pierwsze trzy kolumny tabeli, a drugi kolejne dwie. Obydwu tym elementom nadałem globalny atrybut id. Ponadto zdefiniowałem style CSS wykorzystujące ich wartości id w charakterze selektorów. Rezultat widać na rysunku 11.10.
246
ROZDZIAŁ 11. ELEMENTY TABEL
Rysunek 11.10. Zastosowanie elementu colgroup Na rysunku widać kilka ważnych kwestii związanych z zastosowaniem elementu colgroup. Po pierwsze, style CSS nadawane elementom colgroup są mniej precyzyjne niż style nadawane bezpośrednio elementom tr, td i th. Można to poznać po tym, jak style przypisane elementom thead, tfoot i pierwszej kolumnie elementów th nie ulegają zmianie pod wpływem stylów nadanym elementom colgroup. Gdybym usunął wszystkie style poza tymi, które nadałem elementom colgroup, wygląd wszystkich komórek uległby stosownej modyfikacji (rysunek 11.11).
Rysunek 11.11. Usunięcie wszystkich stylów poza tymi, które nadano bezpośrednio elementom colgroup Po drugie, nieregularne komórki liczone są jako komórki kolumn, w których się zaczynają. Widać to na przykładzie trzeciego rzędu, w którym komórka obstylowana zgodnie z pierwszym elementem colgroup rozciąga się na obszar objęty drugim elementem colgroup. Wreszcie, element colgroup zawiera wszystkie komórki kolumny, włącznie z tymi, które znajdują się w elementach thead i tfoot, oraz odnosi się zarówno do elementów th, jak i td. Element colgroup jest nietypowy, ponieważ odnosi się do elementów znajdujących się poza nim. Z tego powodu nie można używać elementu colgroup jako podstawy precyzyjnych selektorów — selektor w rodzaju #colgroup1 > td nie odnosi się do żadnych elementów.
Wskazywanie pojedynczych kolumn Zamiast atrybutu span elementu colgroup możesz zastosować element col. Pozwala to na zdefiniowanie grupy kolumn oraz poszczególnych jej kolumn. W tabeli 11.11 znajduje się opis tego elementu.
247
ROZDZIAŁ 11. ELEMENTY TABEL
Tabela 11.11. Element col Element
col
Typ elementu
Nie dotyczy
Dozwoleni rodzice
Element colgroup
Atrybuty lokalne
span
Zawartość
Brak
Znaczniki
Void
Nowość w HTML5
Nie
Zmiany w HTML5
Atrybuty align, width, char, charoff i valign wyszły z użycia
Domyślny styl prezentacji
col { display: table-column; }
Stosowanie elementów col zapewnia większą kontrolę, gdyż umożliwia nadawanie stylów zarówno grupom kolumn, jak i pojedynczym ich kolumnom. Elementy col osadza się w elemencie colgroup, tak jak widać w listingu 11.13, przy czym każdy element col wskazuje jedną kolumnę. Listing 11.13. Zastosowanie elementu col
Przykład
Wyniki analizy owoców w roku 2011
Pozycja | Nazwa | Kolor | Rozmiar i oddane głosy |
Ulubiony: | Jabłko | Zielony | Średni | 500 |
248
ROZDZIAŁ 11. ELEMENTY TABEL
Drugi ulubiony: | Pomarańcza | Pomarańczowy | Duży | 450 |
Trzeci ulubiony: | Owoc granatowca | Granaty i wiśnie występują w różnych kolorach i kształtach. | 203 |
Czwarte ulubione: | Wiśnia | 75 |
Ananas | Brązowy | Bardzo duży |
© 2011 Adam Freeman — Instytut Analizy Owoców |
Atrybutu span można użyć do utworzenia elementu col obejmującego dwie kolumny w colgroup. Kiedy atrybut ten nie jest obecny, element col wskazuje pojedynczą kolumnę. W tym przykładzie nadałem styl elementowi colgroup oraz jednemu zawartemu w nim elementowi col. Rezultat widać na rysunku 11.12.
Rysunek 11.12. Zastosowanie elementów colgroup i col do obstylowania tabeli
Nadawanie obramowania elementowi table Element table obsługuje atrybut border. Wskazuje on przeglądarce, że element table został zastosowany do przedstawienia danych tabelowych, a nie do utworzenia layoutu. Większość przeglądarek, trafiwszy na atrybut border, rozrysowuje obramowania wokół elementu table i pojedynczych komórek tabeli. W listingu 11.14 widnieje przykład zastosowania atrybutu border.
249
ROZDZIAŁ 11. ELEMENTY TABEL
Listing 11.14. Zastosowanie atrybutu border
Przykład
Wyniki analizy owoców w roku 2011
Pozycja | Nazwa | Kolor | Rozmiar i oddane głosy |
Ulubiony: | Jabłko | Zielony | Średni | 500 |
Drugi ulubiony: | Pomarańcza | Pomarańczowy | Duży | 450 |
Trzeci ulubiony: | Owoc granatowca | Granaty i wiśnie występują w różnych kolorach i kształtach. | 203 |
Czwarte ulubione: | Wiśnia | 75 |
Ananas | Brązowy | Bardzo duży |
© 2011 Adam Freeman — Instytut Analizy Owoców |
250
ROZDZIAŁ 11. ELEMENTY TABEL
Atrybut border musi mieć przypisaną wartość 1 lub być pustym ciągiem (""). Nie określa on wyglądu obramowania — do tego służy CSS. Sposób, w jaki Google Chrome przetwarza atrybut border, widać na rysunku 11.13. Zauważ, że usunąłem w tym przykładzie element style, by ukazać rezultat zastosowania atrybutu.
Rysunek 11.13. Efekt podania atrybutu border w elemencie table Domyślne obramowanie nie jest zbyt estetyczne, wobec czego atrybutu border używa się zwykle w połączeniu z CSS. Wskazówka Nie musisz podawać w elemencie table atrybutu border, żeby móc zdefiniować obramowanie w CSS. Jeżeli jednak tego atrybutu nie podasz, przeglądarka będzie mogła założyć, że używasz tabeli do tworzenia layoutu i wyświetli ją w nieprzewidziany sposób. W chwili, kiedy to piszę, popularne przeglądarki nie przywiązują większej wagi do atrybutu border (poza tym, że traktują go jako polecenie, by wyświetlić domyślny styl obramowania), lecz z czasem może się to zmienić.
Pomimo że atrybut border sprawia, że przeglądarka nakłada obramowanie zarówno na tabelę, jak i na każdą jej komórkę, i tak musisz zdefiniować selektory CSS tak, by odnosiły się do konkretnych elementów, kiedy chcesz zmienić ich styl prezentacji. Możliwości tworzenia selektorów CSS są ogromne: możesz wystylizować zewnętrzne obramowanie tabeli, wskazując element table; wygląd nagłówka, części głównej i stopki elementami thead, tbody i tfoot; kolumny elementami colspan i col; pojedyncze komórki elementami th i td. W ostateczności możesz nawet zdefiniować elementy docelowe, używając do tego globalnych atrybutów id i class.
Podsumowanie W tym rozdziale przedstawiłem Ci obsługę tabel w HTML5. Najważniejszą zmianą, która pojawiła się w HTML5, jest to, że nie można już używać tabel do tworzenia layoutów — do tego służy obsługa tabel CSS, którą omówię w rozdziale 21. Pomijając jednak to ograniczenie, tabele są niezwykle elastyczne, łatwe w stylizacji i przyjemne w obsłudze.
251
ROZDZIAŁ 11. ELEMENTY TABEL
252
ROZDZIAŁ 12
Formularze
Formularze są mechanizmem HTML służącym do pobierania danych od użytkownika. Są one niesłychanie istotnym elementem aplikacji internetowych, lecz mimo to przez wiele lat funkcjonalność formularzy definiowana przez HTML nie nadążała za sposobami, w jakie rzeczywiście się ich używało. W HTML5 cały system formularzy został zreformowany i usprawniony, dzięki czemu standard jest już dostosowany do rzeczywistych praktyk. W tym rozdziale wstępnie scharakteryzuję formularze HTML. Zacznę od utworzenia bardzo prostego formularza, a następnie rozbuduję go tak, by zademonstrować, jak można konfigurować i kontrolować sposób, w jaki formularze działają. Przedstawię też skrypt Node.js, którego będziesz mógł używać do testowania swoich formularzy i sprawdzania danych przesyłanych z przeglądarki na serwer. W następnym rozdziale omówię zaawansowane funkcje formularzy, w tym m.in. zmiany, które pojawiły się w HTML5, a przyciągnęły najwięcej uwagi — nowe sposoby pobierania określonych typów danych od użytkownika oraz możliwość sprawdzania poprawności danych w przeglądarce. Są to istotne usprawnienia, aczkolwiek warto też zwrócić uwagę na wiele innych zmian. Rozdział ten i następny warto bardzo uważnie przeczytać. W chwili, kiedy piszę te słowa, obsługa formularzy HTML5 w popularnych przeglądarkach jest sprawna, lecz nie doskonała. Przed zdecydowaniem się na użycie poszczególnych funkcji warto wobec tego sprawdzać, jak powszechna jest ich obsługa. W tabeli 12.1 znajduje się streszczenie całego rozdziału. Tabela 12.1. Streszczenie rozdziału Problem
Rozwiązanie
Listing
Utworzenie podstawowego formularza.
Użyj elementów form, input i button.
12.1
Określenie adresu URL, pod jaki dane z formularza mają być przesłane.
Użyj atrybutu action elementu form (lub atrybutu formaction elementu button).
12.3 (i 12.15)
Określenie sposobu, w jaki dane z formularza mają być zakodowane przy przesłaniu na serwer.
Użyj atrybutu enctype elementu form (lub atrybutu formenctype elementu button).
12.4 (i 12.15)
Określenie funkcji autouzupełniania.
Użyj atrybutu autocomplete w elemencie form lub input.
12.5, 12.6
Wskazanie, gdzie ma być wyświetlona odpowiedź serwera.
Użyj atrybutu target w elemencie form (lub atrybutu formtarget w elemencie button).
12.7
Określenie nazwy formularza.
Użyj atrybutu name w elemencie form.
12.8
Nadanie etykiety elementowi input.
Użyj elementu label.
12.9
ROZDZIAŁ 12. FORMULARZE
Tabela 12.1. Streszczenie rozdziału — ciąg dalszy Problem
Rozwiązanie
Listing
Automatyczne uaktywnienie elementu input przy wczytaniu formularza.
Użyj atrybutu autofocus w elemencie input.
12.10
Dezaktywacja określonego elementu input.
Użyj atrybutu disabled w elemencie input.
12.11
Zgrupowanie elementów input.
Użyj elementu fieldset.
12.12
Dodanie opisu do elementu fieldset.
Użyj elementu legend.
12.13
Dezaktywowanie grupy elementów input.
Użyj atrybutu disabled w elemencie fieldset.
12.14
Wysłanie danych formularza elementem button.
Nadaj atrybutowi type wartość submit.
12.15
Wyczyszczenie formularza elementem button.
Nadaj atrybutowi type wartość reset.
12.16
Wykorzystanie elementu button jako kontrolki.
Nadaj atrybutowi type wartość button.
12.17
Powiązanie elementu spoza formularza z elementem form.
Użyj atrybutu form.
12.18
Podstawowy formularz Do utworzenia podstawowego formularza potrzeba trzech elementów: form, input i button. W listingu 12.1 widnieje dokument HTML z prostym formularzem. Listing 12.1. Prosty formularz HTML
Przykład
Zagłosuj
Wygląd tego formularza w przeglądarce widać na rysunku 12.1.
Rysunek 12.1. Podstawowy formularz w przeglądarce
254
ROZDZIAŁ 12. FORMULARZE
Powyższy formularz jest tak prosty, że nie ma z niego większego pożytku. Zapoznawszy się jednak z trzema podstawowymi elementami, możesz zacząć rozbudowywać formularz, aby uczynić go bardziej znaczącym i użytecznym.
Definiowanie formularza Element form wskazuje formularz w obrębie dokumentu HTML. Opis tego elementu znajduje się w tabeli 12.2. Tabela 12.2. Element form Element
form
Typ elementu
Strukturalny
Dozwoleni rodzice
Dowolny element, który może zawierać elementy strukturalne; nie może być jednak potomkiem innego elementu form
Atrybuty lokalne
action, method, enctype, name, accept-charset, novalidate, target, autocomplete
Zawartość
Treść strukturalna (szczególnie elementy label i input)
Znaczniki
Wymagany znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
W HTML5 pojawiły się atrybuty novalidate i autocomplete
Domyślny styl prezentacji
form { display: block; margin-top: 0em; }
W dalszej części rozdziału omówię wykorzystanie atrybutów elementu form do konfiguracji formularzy. Tymczasem wystarczy wiedzieć, że element form sygnalizuje przeglądarce, że ma do czynienia z formularzem HTML. Drugi istotny element to input, który umożliwia pobieranie danych od użytkownika. Na rysunku 12.1 widać, że element input wyświetlony jest w przeglądarce jako proste pole tekstowe, w którym użytkownik może coś napisać. Jest to najbardziej podstawowa forma elementu input i — jak się przekonasz — istnieje wiele możliwości pobierania danych od użytkownika (przy czym niektóre z co ciekawszych opcji pojawiły się w HTML5). Omówię je szerzej w rozdziale 13. Opis elementu input znajduje się w tabeli 12.3. Tabela 12.3. Element input Element
input
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą
Atrybuty lokalne
name, disabled, form, type oraz inne atrybuty odnoszące się do wartości atrybutu type
Zawartość
Brak
Znaczniki
Samotny znacznik
Nowość w HTML5
Nie, ale pojawiły się nowe typy danych wejściowych, do których uzyskuje się dostęp przy użyciu atrybutu type. (Więcej na ten temat przeczytasz w rozdziale 13.).
Zmiany w HTML5
W HTML5 pojawiły się nowe wartości atrybutu type, a także kilka nowych atrybutów, których używa się w połączeniu z określonymi wartościami type
Domyślny styl prezentacji
Brak. Wygląd tego elementu określa się atrybutem type.
255
ROZDZIAŁ 12. FORMULARZE
Istnieje 29 atrybutów, które można nadać elementowi input, w zależności od wartości określonej dla atrybutu type. Atrybuty te przedstawię i opiszę ich funkcje w ramach omówienia różnych sposobów pobierania danych od użytkowników w rozdziale 13. Wskazówka Dane od użytkownika możesz też pobierać przy użyciu elementów innych niż input. Przedstawię je i omówię w rozdziale 14.
Ostatni podstawowy element to button. Konieczne jest zapewnienie użytkownikowi jakiegoś sposobu wskazania przeglądarce, że podał już wszystkie dane i że można je przesłać serwerowi. Najczęściej robi się to przy użyciu elementu button (choć — jak dowiesz się w rozdziale 13. — można skorzystać z jeszcze innego mechanizmu). Opis tego elementu znajduje się w tabeli 12.4. Tabela 12.4. Element button Element
button
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą
Atrybuty lokalne
name, disabled, form, type, value, autofocus oraz inne atrybuty odnoszące się do wartości atrybutu type
Zawartość
Treść właściwa
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Pojawiły się nowe atrybuty, których używa się w połączeniu z określonymi wartościami type. (Szczegóły znajdziesz w punkcie „Element button”).
Domyślny styl prezentacji
Brak
Element button jest wielofunkcyjny, a możliwe sposoby jego wykorzystania omówię w dalszej części rozdziału, w punkcie „Element button”. Element button, zamieszczony w elemencie form i pozbawiony atrybutów, poleca przeglądarce, by przekazała serwerowi dane pobrane od użytkownika.
Oglądanie danych z formularza Potrzebny Ci jest serwer, na który przeglądarka będzie wysyłać dane. W związku z tym napisałem prosty skrypt Node.js, który generuje stronę HTML zawierającą dane pobrane przez formularz od użytkownika. W rozdziale 2. znajdziesz omówienie konfiguracji Node.js. W listingu 12.2 widnieje skrypt, z którego będziemy korzystać. Jak wspomniałem w rozdziale 2., nie będę się zagłębiał w szczegóły dotyczące skryptów wykonywanych po stronie serwera, ale ponieważ Node.js oparty jest na JavaScript, to możesz się bez trudności zorientować w działaniu tego skryptu, wspomagając się opisami języka JavaScript z rozdziału 5. i dokumentacją dostępną pod adresem http://nodejs.org. Listing 12.2. Skrypt formecho.js var http = require('http'); var querystring = require('querystring'); http.createServer(function (req, res) { switch(req.url) { case '/form': if (req.method == 'POST') { console.log("[200] " + req.method + " to " + req.url);
256
ROZDZIAŁ 12. FORMULARZE
var fullBody = ''; req.on('data', function(chunk) { fullBody += chunk.toString(); }); req.on('end', function() { res.writeHead(200, "OK", {'Content-Type': 'text/html'}); res.write('Dane'); res.write(''); res.write('Dane z formularza'); res.write('Nazwa | Wartość | '); var dBody = querystring.parse(fullBody); for (var prop in dBody) { res.write("
---|
" + prop + " | " + dBody[prop] + " |
"); } res.write('
'); res.end(); }); } else { console.log("[405] " + req.method + " to " + req.url); res.writeHead(405, "Metoda nie jest obsługiwana", {'Content-Type': 'text/html'}); res.end('405 - Metoda nie jest obsługiwana' + 'Metoda nie jest obsługiwana.'); } break; default: res.writeHead(404, "Nie znaleziono", {'Content-Type': 'text/html'}); res.end('404 — Nie znaleziono' + 'Nie znaleziono.'); console.log("[404] " + req.method + " to " + req.url); }; }).listen(8080);
Powyższy skrypt pobiera dane wysłane z przeglądarki i zwraca prosty dokument HTML, który wyświetla te dane w tabeli HTML. (Element table omówiłem w rozdziale 11.). Skrypt ten nasłuchuje port 8080 i obsługuje jedynie formularze wysłane z przeglądarki przy użyciu metody HTTP POST pod URL /form. Znaczenie portu 8080 i URL /form zrozumiesz, kiedy w dalszej części tego rozdziału przyjrzysz się atrybutom obsługiwanym przez element form. Omawiany skrypt zapisałem w pliku formecho.js. Skrypt uruchomiłem, wpisując w wierszu poleceń serwera titan następujące polecenie: bin\node.exe formecho.js
Titan używa Windows Server 2008 R2, więc konkretne polecenie uruchomienia Node.js może być inne, jeżeli korzystasz z innego systemu operacyjnego. Na rysunku 12.2 widać dane wyjściowe wyświetlane w przeglądarce po wpisaniu Jablka w polu tekstowym przykładowego formularza i naciśnięciu przycisku Zagłosuj. Dane przedstawiają tylko jedną pozycję, ponieważ w przykładowym formularzu znajduje się tylko jeden element input. Wartość podana w kolumnie Nazwa to fave, ponieważ taką właśnie wartość przypisałem atrybutowi name elementu input. Wartość w kolumnie Wartosc to Jablka, ponieważ to właśnie wpisałem w polu tekstowym przed naciśnięciem przycisku Zagłosuj. Przy tworzeniu coraz bardziej złożonych formularzy będę odtąd pokazywał dane wyjściowe w tabelach tworzonych skryptem Node.js.
257
ROZDZIAŁ 12. FORMULARZE
Rysunek 12.2. Oglądanie wysłanych przez przeglądarkę danych z formularza przy użyciu Node.js
Konfiguracja formularza Utworzyliśmy już dokument HTML z podstawowym formularzem i przy użyciu Node.js sprawdziliśmy dane wysłane na serwer. Przedstawię Ci teraz podstawowe opcje konfiguracji formularza i jego zawartości.
Konfiguracja atrybutu action formularza Atrybut action określa, gdzie przeglądarka wysyła pobrane od użytkownika dane po zatwierdzeniu formularza. Chciałem, żeby dane przesłano mojemu skryptowi Node.js, czyli żeby formularz wysłał dane pod adres URL /form i port 8080 mojego serwera titan. Wyraziłem to już w formularzu w listingu 12.1: ...
...
Jeżeli nie określisz atrybutu action w elemencie form, to przeglądarka wyśle dane formularza pod ten sam URL, z którego wczytano dokument HTML. Nie jest to tak bezużyteczne zachowanie, jak mogłoby się wydawać — polega na nim kilka popularnych frameworków służących do produkcji aplikacji internetowych. Jeżeli podasz względny adres URL, podana wartość zostanie dodana do adresu URL bieżącej strony. Jeżeli natomiast korzystasz z opisanego w rozdziale 7. elementu base, to zostanie dodana do wartości atrybutu href tego elementu. W listingu 12.3 widać przykład wykorzystania elementu base do określenia docelowego adresu przesyłu danych z formularza. Listing 12.3. Zastosowanie elementu base do określenia docelowego adresu dla danych z formularza
Przykład
Zagłosuj
258
ROZDZIAŁ 12. FORMULARZE
Ostrzeżenie Element base wpływa na wszystkie względne adresy URL w dokumencie HTML, a nie tylko na element form.
Konfiguracja metody HTTP Atrybut method określa, jaka metoda HTTP ma być wykorzystana w przesyłaniu danych formularza na serwer. Dopuszczalne wartości tego atrybutu to get i post, które są odpowiednikami metod HTTP GET i POST. Domyślną wartością niezdefiniowanego atrybutu method jest get, co jest dość niefortunne, ponieważ większość formularzy wykorzystuje metodę HTTP POST. W powyższym przykładzie widać, że dla elementu form podałem wartość post: ...
...
Żądania GET służą do prowadzenia zabezpieczonych interakcji. Innymi słowy, pozwalają na wielokrotne podawanie takich samych żądań bez żadnych niepożądanych efektów ubocznych. Żądania POST służą do prowadzenia niezabezpieczonych interakcji, czyli takich, w których przesłanie danych skutkuje zmianą jakiegoś stanu. Używa się ich najczęściej w aplikacjach internetowych. Powyższe konwencje określone są przez World Wide Web Consortium (W3C) i możesz się z nimi zapoznać pod adresem www.w3.org/Provider/Style/URI. Ogólnie przyjmuje się, że żądań GET powinno się używać do pobierania informacji wyłącznie do odczytu, a żądań POST we wszelkich czynnościach, które pociągają za sobą zmianę stanu aplikacji. Używanie właściwego rodzaju żądań jest istotne. Kiedy nie masz pewności, zachowaj ostrożność i używaj metody POST. Wskazówka Skrypt Node.js, którego używam w tym rozdziale, odpowiada tylko na żądania POST.
Konfiguracja kodowania danych Atrybut enctype określa, jak przeglądarka koduje dane i przedstawia je serwerowi. Atrybut ten obsługuje trzy wartości, które opisuję w tabeli 12.5. Tabela 12.5. Dozwolone wartości atrybutu enctype Wartość
Opis
application/x-www-form-urlencoded
Kodowanie to jest domyślnie używane, kiedy atrybut enctype nie jest zdefiniowany. Nie można używać tego kodowania do wczytywania plików na serwer.
multipart/form-data
Kodowanie to służy do wczytywania plików na serwer.
text/plain
Kodowanie to różni się w zależności od przeglądarki. Poniżej dowiesz się więcej na ten temat.
Aby zrozumieć, jak różne kodowania działają, musisz zamieścić w formularzu drugi element input, tak jak widać to w listingu 12.4. Listing 12.4. Dodanie elementu input do formularza
Przykład
259
ROZDZIAŁ 12. FORMULARZE
Zagłosuj
Drugi element input potrzebny jest do tego, żeby móc pobierać dwa elementy danych od użytkownika. Jak możesz się już domyślać, tworzę teraz formularz, który pozwoli użytkownikom głosować na ich ulubione owoce. Nowy element input służy do pobierania ich imion. Jak widać w powyższym listingu, wartość name tego elementu określiłem jako name. Aby zademonstrować efekt stosowania różnych sposobów kodowania formularza, zamieściłem w formularzu atrybut enctype i przypisałem mu kolejno wszystkie obsługiwane typy kodowania. W każdym przypadku podałem w polach tekstowych te same dane. W pierwszym polu tekstowym wpisywałem Jablka, a w drugim Adam Freeman (ze spacją pomiędzy imieniem i nazwiskiem).
Kodowanie application/x-www-form-urlencoded Jest to domyślne kodowanie i pasuje do każdego rodzaju formularza poza tymi, które służą do wczytywania plików na serwer. Nazwa i wartość każdego elementu danych kodowana jest tak samo jak adresy URL (i stąd bierze się człon urlencoded w nazwie). Oto jak wygląda kodowanie danych z przykładowego formularza: fave=Jablka&name=Adam+Freeman
Znaki specjalne zastępowane są odpowiednimi encjami HTML. Nazwy elementów danych i ich wartości oddzielone są znakami równości (=), a krotki danych i wartości oddzielone są od siebie etką (&).
Kodowanie multipart/form-data Kodowanie multipart/form-data wygląda inaczej. Jest bardziej rozwlekłe, a jego przetwarzanie jest bardziej skomplikowane, przez co zwykle używa się go w formularzach służących do wczytywania plików na serwer — czego nie można zrobić, wykorzystując domyślne kodowanie. Oto jak wygląda kodowanie danych z przykładowego formularza: ------WebKitFormBoundary2qgCsuH4ohZ5eObF Content-Disposition: form-data; name="fave" Apples ------WebKitFormBoundary2qgCsuH4ohZ5eObF Content-Disposition: form-data; name="name" Adam Freeman ------WebKitFormBoundary2qgCsuH4ohZ5eObF-fave=Jabłko name=Adam Freeman
Kodowanie text/plain Tego rodzaju kodowania należy używać ostrożnie. Nie ma żadnego formalnego wskazania co do tego, jaką postać mają przyjmować dane kodowane według tego schematu, a popularne przeglądarki kodują dane na
260
ROZDZIAŁ 12. FORMULARZE
różne sposoby. Google Chrome koduje je tak samo, jak przy schemacie application/x-www-form-urlencoded, podczas gdy Firefox koduje je następująco: fave=Apple name=Adam Freeman
Każdy element danych zamieszczany jest w jednym wierszu, a znaki specjalne nie są kodowane. Zalecam unikanie tego schematu kodowania, gdyż różnice obsługi w różnych przeglądarkach sprawiają, że jest nieprzewidywalne.
Określanie uzupełniania formularza Przeglądarki pomagają użytkownikowi, zapamiętując dane podane w formularzach i automatycznie proponując ponowne ich wykorzystanie w podobnych formularzach. W ten sposób użytkownik nie musi ciągle wprowadzać tych samych danych. Dobrym przykładem tej funkcji są dane osobowe i o adresie dostawy, które użytkownik podaje, robiąc zakupy w internecie. Każdy serwis ma własny koszyk zakupów i proces rejestracji, ale przeglądarka wykorzystuje dane podane w innych formularzach, żeby przyspieszyć całą procedurę. Przeglądarki wykorzystują różne techniki do określania, które dane należy ponownie wykorzystać, ale często polega to na sprawdzaniu atrybutu name elementów input. Automatyczne uzupełnianie formularzy jest z reguły korzystne dla użytkownika i nie ma większego znaczenia dla samej aplikacji internetowej. Niekiedy jednak możesz nie chcieć, żeby przeglądarka samodzielnie wypełniała formularz. W listingu 12.5 widać, jak zdezaktywować tę funkcję, używając atrybutu autocomplete w elemencie form. Listing 12.5. Zdezaktywowanie atrybutu autocomplete elementu form
Przykład
Zagłosuj
Atrybut autocomplete obsługuje dwie wartości: on i off. Wartość on zezwala przeglądarce na uzupełnienie formularza i jest wartością uznawaną za domyślną, kiedy nie definiujesz atrybutu. Możesz też określić to zachowanie konkretniej, nadając atrybut autocomplete poszczególnym elementom input, tak jak w listingu 12.6. Listing 12.6. Nadanie atrybutu autocomplete elementom input
Przykład
261
ROZDZIAŁ 12. FORMULARZE
Zagłosuj
Atrybut autocomplete elementu form określa domyślny sposób funkcjonowania elementów input w formularzu. W powyższym listingu autocomplete elementu form jest nieaktywny, lecz ten sam atrybut nadany pierwszemu elementowi input jest aktywny — jednak wyłącznie w tym jednym elemencie. Drugi element input, który nie ma zdefiniowanego atrybutu autocomplete, działa zgodnie z ogólnym ustawieniem formularza. autocomplete powinno być z reguły aktywne — użytkownicy przyzwyczajeni są do tego zachowania i w ramach transakcji internetowych zwykle muszą wypełnić kilka formularzy. Wyłączenie tej funkcji godzi w preferencje i przyzwyczajenia użytkowników. Wiem z doświadczenia, jak denerwujące jest robienie zakupów na serwisach, które nie używają tej funkcji, zwłaszcza w przypadku formularzy proszących o tak podstawowe dane, jak imię i adres. Na niektórych serwisach autouzupełnianie jest wyłączone dla pól z danymi o karcie kredytowej — to akurat ma jakiś sens, ale nawet w takich sytuacjach należy podchodzić do dezaktywacji ostrożnie i z namysłem.
Określenie docelowego miejsca wyświetlenia odpowiedzi formularza Po wysłaniu formularza przeglądarka domyślnie wyświetla odpowiedź serwera w miejscu strony, na której formularz się znajdował. Możesz zmienić to zachowanie przy użyciu atrybutu target elementu form. Działa on tak samo, jak atrybut target elementu a; wybierać możesz spośród miejsc docelowych podanych w tabeli 12.6. Tabela 12.6. Wartości atrybutu target elementu form Wartość
Opis
_blank
Przedstawia odpowiedź serwera w nowym oknie (lub zakładce).
_parent
Przedstawia odpowiedź serwera w ramce-rodzicu.
_self
Przedstawia odpowiedź serwera w bieżącym oknie (domyślna opcja).
_top
Przedstawia odpowiedź serwera na powierzchni całego okna.
Przedstawia odpowiedź serwera w podanej ramce.
Każda z tych wartości określa kontekst przeglądania. Wartości _blank i _self nie trzeba szczególnie objaśniać. Pozostałe z kolei odnoszą się do ramek, które omówię w rozdziale 15. W listingu 12.7 widać atrybut target zdefiniowany dla elementu form. Listing 12.7. Zastosowanie atrybutu target
Przykład
262
ROZDZIAŁ 12. FORMULARZE
Zagłosuj
W tym przykładzie wybrałem wartość _blank, która poleca przeglądarce, by odpowiedź serwera wyświetliła w nowym oknie lub zakładce. Zmianę widać na rysunku 12.3.
Rysunek 12.3. Wyświetlenie odpowiedzi serwera w nowej zakładce
Nazwa formularza Atrybut name pozwala na określenie unikalnej etykiety formularza, pozwalającej na rozróżnienie między nimi w pracy z Document Object Model (DOM). DOM przedstawię w rozdziale 25. Atrybut name różni się od atrybutu globalnego id. Atrybut id jest zazwyczaj wykorzystywany w dokumentach HTML jako selektor CSS. W listingu 12.8 widnieje element form ze zdefiniowanymi atrybutami name i id. Z myślą o prostocie obydwu atrybutom nadałem taką samą wartość. Listing 12.8. Nadanie atrybutów name i id elementowi form
Przykład
Zagłosuj
263
ROZDZIAŁ 12. FORMULARZE
Wartość atrybutu name nie jest przesyłana serwerowi po zatwierdzeniu formularza, wobec czego ma on znaczenie tylko w DOM i nie jest tak istotny jak atrybut name elementu input. Kiedy element input nie ma atrybutu name, dane podawane przez użytkownika nie są przesyłane serwerowi po zatwierdzeniu formularza.
Nadawanie formularzom etykiet Mamy już formularz służący do pobierania danych od użytkownika, lecz nie jest on zbyt łatwy w użyciu. Na rysunku 12.4 widać dodany w poprzednim punkcie element input.
Rysunek 12.4. Przykładowy formularz Od razu rzuca się w oczy brak wskazówek dla użytkownika, który musiałby przejrzeć kod źródłowy dokumentu, aby zorientować się co do funkcji każdego z pól tekstowych. Temu problemowi można zaradzić, korzystając z elementu label, który pozwala na ujęcie elementów formularza w jakimś kontekście. W tabeli 12.7 znajduje się opis elementu label. Tabela 12.7. Element label Element
label
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą
Atrybuty lokalne
for, form
Zawartość
Treść właściwa
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
W HTML5 wprowadzono atrybut form. W punkcie „Praca z elementami spoza formularza” przeczytasz więcej na jego temat.
Domyślny styl prezentacji
label { cursor: default; }
W listingu 12.9 widnieje przykład opatrzenia formularza stosownymi informacjami dla użytkownika. Listing 12.9. Zastosowanie elementu label
Przykład
Owoc:
264
ROZDZIAŁ 12. FORMULARZE
Imię:
Zagłosuj
Każdemu z elementów input przypisałem element label. Zauważ, że elementom input nadałem atrybuty id, których wartości podałem jako wartości atrybutów for elementów label. Na tym właśnie polega łączenie etykiet z polami wejściowymi, które ułatwia czytnikom i innym technologiom asystującym przetwarzanie formularzy. Wygląd etykiet widać na rysunku 12.5.
Rysunek 12.5. Przypisane formularzom etykiety W powyższym listingu elementy input osadzone są w elementach label. Nie jest to wymóg i obydwa te elementy można podać osobno. Elementy label i input zazwyczaj definiuje się osobno przy tworzeniu złożonych formularzy. Uwaga Utworzyłem bardzo prosty layout, zamieszczając w formularzu elementy p. Będę to robił w większości przykładów w tym rozdziale, ponieważ dzięki temu łatwiej będzie mi zaprezentować rezultaty dodawania kolejnych elementów do dokumentu HTML. Z funkcji obsługi tabel CSS, którą opiszę w rozdziale 21., możesz skorzystać do tworzenia ładniejszych formularzy. Element p omówiłem natomiast w rozdziale 9.
Automatyczne uaktywnianie elementów input Możliwe jest określenie, który element input ma być uaktywniony przy wyświetleniu formularza w przeglądarce. Pozwala to użytkownikowi na podanie wartości w aktywnym polu od razu, bez uprzedniego zaznaczania go. Służy do tego atrybut autofocus, którego zastosowanie widać w listingu 12.10. Listing 12.10. Zastosowanie atrybutu autofocus
Przykład
Owoc:
265
ROZDZIAŁ 12. FORMULARZE
Imię:
Zagłosuj
Kiedy tylko strona pojawia się na ekranie, pierwszy element input zostaje uaktywniony. Na rysunku 12.6 widać, jak Google Chrome wskazuje użytkownikowi aktywny element.
Rysunek 12.6. Automatyczne uaktywnianie elementu input Atrybut autofocus można nadać tylko jednemu elementowi. Gdybyś przypisał go kilku elementom input, przeglądarka skoncentrowałaby się na ostatnim oznaczonym w ten sposób elemencie.
Dezaktywacja poszczególnych elementów input Elementy input można dezaktywować tak, by użytkownik nie mógł wprowadzać do nich danych. Nie jest to takie dziwne, jak mogłoby się wydawać. W sytuacji, kiedy chcesz przedstawić jednakowy interfejs do obsługi kilku powiązanych zadań, niektóre z elementów input mogą nie być na poszczególnych etapach potrzebne. Do uaktywniania elementów w odpowiedzi na czynności podjęte przez użytkownika możesz również wykorzystać JavaScript. Typowym przykładem takiego postępowania jest uaktywnienie serii elementów input służących do pobrania adresu, kiedy użytkownik decyduje, że chce otrzymać przesyłkę na adres inny niż adres fakturowania. (Elementy te uaktywnia się w takich sytuacjach za pośrednictwem DOM, który omówię w rozdziałach 25. – 31. Kratki zaznaczania z kolei omówię w rozdziale 13.). Elementy input dezaktywuje się, przypisując im atrybut disabled, tak jak w listingu 12.11. Listing 12.11. Zastosowanie właściwości disabled elementu input
Przykład
Owoc:
Imię:
Zagłosuj
266
ROZDZIAŁ 12. FORMULARZE
W powyższym przykładzie atrybut disabled przypisałem elementowi input, służącemu do pobierania imienia użytkownika. Wygląd nieaktywnego elementu input w Google Chrome widać na rysunku 12.7. Inne przeglądarki przedstawiają takie elementy podobnie.
Rysunek 12.7. Zdezaktywowany element input
Grupowanie elementów formularza Przy tworzeniu bardziej rozbudowanych formularzy grupowanie niektórych ich elementów bywa dość wygodne. Dokonać tego można przy użyciu elementu fieldset, którego opis widnieje w tabeli 12.8. Tabela 12.8. Element fieldset Element
fieldset
Typ elementu
Strukturalny
Dozwoleni rodzice
Dowolny rodzic, który może zawierać elementy strukturalne — zwykle dziecko elementu form
Atrybuty lokalne
name, form, disabled
Zawartość
Opcjonalnie element legend wraz z treścią strukturalną
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
W HTML5 wprowadzono atrybut form. W punkcie „Praca z elementami spoza formularza” przeczytasz więcej na jego temat.
Domyślny styl prezentacji
fieldset { display: block; margin-start: 2px; margin-end: 2px; padding-before: 0.35em; padding-start: 0.75em; padding-end: 0.75em; padding-after: 0.625em; border: 2px groove; }
W listingu 12.12 widnieje przykład zastosowania elementu fieldset. W tym przykładzie zamieściłem w kodzie dodatkowe elementy input, aby pokazać, jak w elemencie fieldset można zamieścić część elementów formularza. Listing 12.12. Zastosowanie elementu fieldset
267
ROZDZIAŁ 12. FORMULARZE
Przykład
Imię:
Miasto:
#1:
#2:
#3:
Zagłosuj
Pierwszym elementem fieldset zgrupowałem dwa elementy input służące do pobierania danych od użytkownika, a drugim zgrupowałem trzy elementy input, za pośrednictwem których użytkownik może zagłosować na swoje trzy ulubione owoce. Domyślny styl prezentacji elementu fieldset widać na rysunku 12.8.
Rysunek 12.8. Zastosowanie elementu fieldset do zgrupowania elementów input
Nadanie elementowi fieldset etykiety Zgrupowanym elementom input mimo wszystko brakuje wartości informacyjnej. Można temu zaradzić, dodając element legend każdemu z elementów fieldset. W tabeli 12.9 znajduje się opis elementu legend. Element legend musi być pierwszym dzieckiem elementu fieldset, tak jak widać to w listingu 12.13.
268
ROZDZIAŁ 12. FORMULARZE
Tabela 12.9. Element legend Element
legend
Typ elementu
Nie dotyczy
Dozwoleni rodzice
Element fieldset
Atrybuty lokalne
Brak
Zawartość
Treść właściwa
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Nie
Domyślny styl prezentacji
legend { display: block; padding-start: 2px; padding-end: 2px; border: none; }
Listing 12.13. Zastosowanie elementu legend
Przykład
Wprowadź swoje dane osobowe Imię:
Miasto:
Zagłosuj na swoje trzy ulubione owoce #1:
#2:
#3:
Zagłosuj
Wygląd elementów legend widać na rysunku 12.9.
Dezaktywowanie grup elementów input przy użyciu elementu fieldset Omówiłem wcześniej, jak dezaktywuje się pojedyncze elementy input. Możliwe jest także zdezaktywowanie wielu elementów input za jednym zamachem, nadając atrybut disabled elementowi fieldset. Wtedy wszystkie elementy input zawarte w elemencie fieldset zostają zdezaktywowane, tak jak widać w listingu 12.14. Rezultat zdezaktywowania elementów input widać na rysunku 12.10.
269
ROZDZIAŁ 12. FORMULARZE
Rysunek 12.9. Zastosowanie elementu legend Listing 12.14. Dezaktywacja elementów input przy użyciu elementu fieldset
Przykład
Wprowadź swoje dane osobowe Imię:
Miasto:
Zagłosuj na swoje trzy ulubione owoce #1:
#2:
#3:
Zagłosuj
Element button Element button jest bardziej elastyczny, niż mogłoby się na pierwszy rzut oka wydawać. Elementu button można używać na trzy różne sposoby. O tych różnych sposobach funkcjonowania decydują trzy wartości atrybutu type, które opisuję w tabeli 12.10.
270
ROZDZIAŁ 12. FORMULARZE
Rysunek 12.10. Dezaktywacja elementów input przy użyciu elementu fieldset Tabela 12.10. Wartości atrybutu type elementu button Wartość
Opis
submit
Wskazuje, że przycisk służy do wysłania formularza.
reset
Wskazuje, że przycisk służy do wyczyszczenia formularza.
button
Wskazuje, że przycisk nie ma konkretnego znaczenia semantycznego.
Każdą z tych wartości wraz z ich funkcjami opiszę w kolejnych punktach.
Zastosowanie elementu button do wysyłania formularzy Kiedy nadajesz atrybutowi type wartość submit, naciśnięcie przycisku skutkuje wysłaniem danych z formularza, w którym przycisk się znajduje. Jest to domyślna wartość, kiedy atrybut type nie jest zdefiniowany. Kiedy używasz przycisku w tym celu, masz dostęp do dodatkowych atrybutów, które opisuję w tabeli 12.11. Powyższe atrybuty najczęściej pozwalają na nadpisanie lub uzupełnienie konfiguracji elementu form, określając tym samym wartości atrybutów action, method, enctype i target oraz kontrolując weryfikację danych po stronie klienta. Atrybuty te pojawiły się w HTML5. W listingu 12.15 widać przykład zdefiniowania ich w elemencie button. Listing 12.15. Zastosowanie atrybutów elementu button
Przykład
271
ROZDZIAŁ 12. FORMULARZE
Tabela 12.11. Dodatkowe atrybuty, które są dostępne, gdy atrybut type przycisku ma wartość submit Atrybut
Opis
form
Określa formularz (lub formularze), z którym przycisk jest powiązany. Więcej na ten temat przeczytasz w punkcie „Praca z elementami spoza formularza”.
formaction
Nadpisuje wartość atrybutu action elementu form oraz określa nowy adres URL, pod który dane z formularza mają być wysłane. Szczegółowy opis atrybutu action znajduje się w punkcie „Konfiguracja atrybutu action formularza” we wcześniejszej części rozdziału.
formenctype
Nadpisuje wartość atrybutu enctype elementu form oraz określa schemat kodowania danych z formularza. Szczegółowy opis atrybutu enctype znajduje się w punkcie „Konfiguracja kodowania danych” we wcześniejszej części rozdziału.
formmethod
Nadpisuje wartość atrybutu method elementu form. Szczegółowy opis atrybutu method znajduje się w punkcie „Konfiguracja metody HTTP” we wcześniejszej części rozdziału.
formtarget
Nadpisuje wartość atrybutu target elementu form. Szczegółowy opis atrybutu target znajduje się w punkcie „Określenie docelowego miejsca wyświetlenia odpowiedzi formularza” we wcześniejszej części rozdziału.
formnovalidate
Nadpisuje działanie atrybutu novalidate elementu form, aby określić, czy dokonać weryfikacji danych po stronie klienta. O weryfikacji danych wejściowych przeczytasz w rozdziale 14.
Owoc:
Imię:
Zagłosuj
Usunąłem w tym przykładzie atrybuty action i method z elementu form, a konfiguracji dokonałem przy użyciu atrybutów formaction i formmethod elementu button.
Zastosowanie elementu button do czyszczenia formularzy Kiedy nadajesz atrybutowi type wartość reset, naciśnięcie przycisku skutkuje wyzerowaniem wszystkich pól wejściowych formularza. Kiedy elementowi przypisana jest ta wartość, nie uzyskujesz dostępu do żadnych dodatkowych atrybutów. W listingu 12.16 widnieje przykład przycisku służącego do czyszczenia formularzy. Listing 12.16. Zastosowanie elementu button do czyszczenia formularzy
Przykład
272
ROZDZIAŁ 12. FORMULARZE
Owoc:
Imię:
Zagłosuj Reset
Rezultat wyzerowania formularza widnieje na rysunku 12.11.
Rysunek 12.11. Wyzerowanie formularza
Zastosowanie elementu button jako elementu generycznego Kiedy nadajesz atrybutowi type wartość button, tworzysz… zwyczajny przycisk. Taki przycisk nie ma żadnego znaczenia i nic się nie dzieje po jego naciśnięciu. W listingu 12.17 widnieje przykład wprowadzenia takiego elementu button do dokumentu HTML. Listing 12.17. Zastosowanie generycznego przycisku
Przykład
Owoc:
273
ROZDZIAŁ 12. FORMULARZE
Imię:
Zagłosuj Reset NIE NACISKAJ
Nie wygląda to na zbyt użyteczny sposób wykorzystania tego elementu, ale w rozdziale 30. pokażę Ci, że możesz użyć JavaScript, by naciśnięcie takiego przycisku prowadziło do wykonania jakiejś czynności. Dzięki temu masz możliwość definiowania wyspecjalizowanych funkcji na swoich stronach internetowych. Zauważ, że obstylowałem tekst zawarty w przycisku button. Taki tekst możesz oznaczyć dowolnymi elementami strukturalnymi. Rezultat zastosowania takiego rodzaju obstylowania widać na rysunku 12.12.
Rysunek 12.12. Dodanie generycznego przycisku
Praca z elementami spoza formularza W HTML 4 elementy input, button i inne elementy formularzowe musiały być zawarte w elemencie form, tak jak we wszystkich przedstawionych w tym rozdziale przykładach. W HTML5 nie ma już takiego ograniczenia, a z formularzami można powiązać elementy znajdujące się w dowolnych miejscach dokumentu. Używa się do tego atrybutu form, obsługiwanego przez elementy formularzowe w rodzaju input, button i inne, które opiszę w rozdziale 14. Aby powiązać element z formularzem, który nie jest jego przodkiem, nadajesz atrybutowi form tego elementu wartość tożsamą z wartością atrybutu id danego elementu form. W listingu 12.18 widnieje tego przykład. Listing 12.18. Zastosowanie atrybutu form
Przykład
Owoc:
274
ROZDZIAŁ 12. FORMULARZE
Imię:
Zagłosuj Reset
W powyższym przykładzie tylko jeden z elementów input jest potomkiem elementu form. Drugi element input i obydwa elementy button znajdują się poza elementem form, ale są z nim powiązane za pośrednictwem atrybutu form.
Podsumowanie W tym rozdziale omówiłem podstawy obsługi formularzy w HTML5. Pokazałem Ci, jak utworzyć formularz elementem form i skonfigurować jego działanie. Omówiłem podstawowy element input, który pozwala na pobieranie prostych danych tekstowych od użytkownika, oraz element button, który daje użytkownikowi możliwość wysłania lub wyczyszczenia formularza (którego można też użyć jako generycznego przycisku). W HTML5 pojawiły się pewne przydatne funkcje formularzy. Elementy nagłówków omówię w następnym rozdziale, aczkolwiek same najbardziej podstawowe zachowania formularzy zostały usprawnione. Możliwość połączenia elementu z formularzem, który nie jest przodkiem tego elementu, obsługa automatycznej aktywacji elementów oraz ulepszenia elementu button — to wszystko bardzo mile widziane nowości.
275
ROZDZIAŁ 12. FORMULARZE
276
ROZDZIAŁ 13
Konfiguracja elementu input
W poprzednim rozdziale omówiłem podstawy obsługi elementu input — prostego pola tekstowego, w którym użytkownik może podawać dane. Problem w tym, że użytkownik może podać w takim polu jakiekolwiek dane. W niektórych sytuacjach jest to całkowicie sensowne rozwiązanie, lecz niekiedy może Ci zależeć na otrzymaniu określonego rodzaju danych. W takich przypadkach możesz skonfigurować element input tak, by pobierał dane od użytkowników na różne sposoby. Element input można skonfigurować atrybutem type, który w HTML5 obsługuje 23 różne wartości. Po wybraniu odpowiedniej wartości type uzyskujesz dostęp do dodatkowych atrybutów. Element input obsługuje w sumie 30 atrybutów, a wielu z nich można używać jedynie w połączeniu z określonymi wartościami type. W tym rozdziale omówię wszystkie z dostępnych typów i towarzyszące im atrybuty. W tabeli 13.1 znajduje się streszczenie całego rozdziału. Tabela 13.1. Streszczenie rozdziału Problem
Rozwiązanie
Listing
Określenie wielkości i pojemności elementu input.
Użyj atrybutów size i maxlength.
13.1
Określenie początkowej wartości elementu input lub wskazówki co do wymaganego rodzaju danych.
Użyj atrybutów value i placeholder.
13.2
Podanie użytkownikowi sugerowanych wartości.
Użyj elementu datalist i atrybutu list elementu input.
13.3
Utworzenie elementów input przeznaczonych tylko do odczytu lub zdezaktywowanych.
Użyj atrybutów disabled i readonly.
13.4
Ukrycie znaków wpisywanych przez użytkownika.
Użyj elementu input typu password.
13.5
Tworzenie przycisków przy użyciu elementu input.
Użyj elementu input typu submit, reset lub button.
13.6
Ograniczenie rodzaju danych do wartości numerycznych.
Użyj elementu input typu number.
13.7
Ograniczenie rodzaju danych do określonego zakresu wartości numerycznych.
Użyj elementu input typu range.
13.8
Ograniczenie rodzaju danych do odpowiedzi prawda/fałsz.
Użyj elementu input typu checkbox.
13.9
ROZDZIAŁ 13. KONFIGURACJA ELEMENTU INPUT
Tabela 13.1. Streszczenie rozdziału — ciąg dalszy Problem
Rozwiązanie
Listing
Ograniczenie rodzaju danych do określonych opcji.
Użyj elementu input typu radio.
13.10
Ograniczenie rodzaju danych do określonego formatu ciągu.
Użyj elementu input typu email, tel lub url.
13.11
Ograniczenie rodzaju danych do godzin i dat.
Użyj elementu input typu datetime, datetime-local, date, month, time lub week.
13.12
Ograniczenie rodzaju danych do kolorów.
Użyj elementu input typu color.
13.13
Ograniczenie rodzaju danych do słów kluczowych wyszukiwania.
Użyj elementu input typu search.
13.14
Utworzenie niewidocznego dla użytkownika elementu input.
Użyj elementu input typu hidden.
13.15
Utworzenie przycisku zatwierdzającego w formie obrazu.
Użyj elementu input typu image.
13.16
Wczytanie pliku na serwer.
13.17 Użyj elementu input typu file i określ kodowanie formularza multipart/form-data.
Zastosowanie elementu input do podawania danych tekstowych Kiedy atrybutowi type przypisana jest wartość text, przeglądarka wyświetla jednowierszowe pole tekstowe. To ten sam styl elementu input, który widziałeś w poprzednim rozdziale — jest on wykorzystywany, kiedy atrybut type jest pominięty. W tabeli 13.2 znajduje się wypis atrybutów dostępnych dla tego typu elementu input (poza tymi, które już przedstawiłem w poprzednim rozdziale). W kolejnych punktach opiszę atrybuty obsługiwane przez elementy input typu text. Wskazówka Do tworzenia wielowierszowych pól tekstowych służy element textarea, który opiszę w rozdziale 14.
Określanie rozmiaru elementu Na wielkość pola tekstowego wpływają dwa atrybuty. Atrybut maxlength określa limit znaków, które użytkownik może podać, a size określa, ile znaków wyświetlanych jest w polu. Wartości obydwu tych atrybutów muszą być wyrażane dodatnimi liczbami całkowitymi. W listingu 13.1 widać przykład ich zastosowania. Listing 13.1. Zastosowanie atrybutów maxlength i size
Przykład
278
ROZDZIAŁ 13. KONFIGURACJA ELEMENTU INPUT
Tabela 13.2. Dodatkowe atrybuty typu text Nowość w HTML5
Atrybut
Opis
dirname
Określa kierunek tekstu. Więcej przeczytasz w punkcie „Określenie kierunku tekstu”.
Nie
list
Wskazuje id elementu datalist, który określa wartości elementu input. Więcej przeczytasz w punkcie „Lista danych”.
Tak
maxlength
Wskazuje maksymalną liczbę znaków, które użytkownik może podać w polu tekstowym. Więcej przeczytasz w punkcie „Określanie rozmiaru elementu”.
Nie
pattern
Wskazuje wyrażenie regularne na potrzeby weryfikacji danych wejściowych. Więcej przeczytasz w rozdziale 14.
Tak
placeholder
Tworzy wskazówkę odnoszącą się do tego, jakie dane wejściowe użytkownik powinien podać. Więcej przeczytasz w punkcie „Podawanie wartości i treści zastępczych”.
Tak
readonly
Definiuje pole tylko do odczytu, które nie może być edytowane przez użytkownika. Więcej przeczytasz w punkcie „Tworzenie pól tekstowych nieaktywnych i tylko do odczytu”.
Nie
required
Wskazuje, że użytkownik musi podać wartość na potrzeby weryfikacji danych wejściowych. Więcej przeczytasz w rozdziale 14.
Tak
size
Określa szerokość elementu wyrażoną w liczbie znaków widocznych w polu tekstowym. Więcej przeczytasz w punkcie „Określanie rozmiaru elementu”.
Nie
value
Określa początkową wartość pola tekstowego. Więcej przeczytasz w punkcie „Podawanie wartości i treści zastępczych”.
Nie
Imię:
Miasto:
Owoc:
Zagłosuj
Pierwszemu elementowi input nadałem atrybut maxlength o wartości 10. Oznacza to, że przeglądarka może dowolnie określić ilość miejsca na ekranie, jaką zajmuje pole tekstowe, ale użytkownik może podać najwyżej dziesięć znaków. Przeglądarka ignoruje wszelkie znaki, które przekraczają ten limit. Drugiemu elementowi input nadałem atrybut size, również o wartości 10. Sprawia to, że przeglądarka wyświetla pole tekstowe, które może zmieścić dziesięć znaków. Atrybut size nie określa limitu znaków, które użytkownik może podać.
279
ROZDZIAŁ 13. KONFIGURACJA ELEMENTU INPUT
Trzeciemu elementowi input nadałem obydwa atrybuty, tworząc pole o określonej szerokości i z limitem znaków, które można podać. Wpływ tych atrybutów na wygląd pól i sposób podawania danych widać na rysunku 13.1.
Rysunek 13.1. Zastosowanie atrybutów maxlength i size Na rysunku 13.1 widnieje layout strony oraz dane, które zostają przekazane serwerowi po zatwierdzeniu formularza. Na potrzeby tego przykładu skorzystałem z Firefoksa, ponieważ mój ulubiony Chrome nie obsługuje atrybutu size prawidłowo. Zwróć uwagę, że wartość podana dla city składa się z większej liczby znaków, niż widać na ekranie. Wynika to z tego, że atrybut size nie ogranicza liczby znaków, które użytkownik może podać, tylko liczbę znaków, które przeglądarka może wyświetlić.
Podawanie wartości i treści zastępczych Pola tekstowe z poprzednich przykładów były puste, choć wcale nie musi tak być. Możesz użyć atrybutu value do określenia domyślnej wartości pola, a atrybutu placeholder do podania wskazówki co do rodzaju danych, które użytkownik ma podać. W listingu 13.2 widnieje przykład zastosowania tych atrybutów. Listing 13.2. Zastosowanie atrybutów value i placeholder
Przykład
Imię:
Miasto:
280
ROZDZIAŁ 13. KONFIGURACJA ELEMENTU INPUT
Owoc:
Zagłosuj
Atrybutu placeholder możesz użyć, kiedy użytkownik ma podać dane, a chcesz mu wskazać, jakiego rodzaju dane mają to być. Atrybutem value możesz z kolei podać wartość domyślną — taką, którą użytkownik już wcześniej podał, albo wartość często wybieraną, która może być właściwa. Na rysunku 13.2 widnieje przykład wartości określonych tymi atrybutami.
Rysunek 13.2. Zastosowanie treści zastępczych i wartości domyślnych Wskazówka Po wyzerowaniu formularza przyciskiem button (który opisałem w rozdziale 12.) przeglądarka przywraca treści zastępcze i wartości domyślne.
Lista danych Atrybutowi list można nadać wartość tożsamą z wartością id elementu datalist. Element datalist służy do podawania użytkownikowi sugerowanych wartości, kiedy ma on podać dane w polu tekstowym. W tabeli 13.3 znajduje się opis tego elementu. Tabela 13.3. Element datalist Element
datalist
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą
Atrybuty lokalne
Brak
Zawartość
Elementy option i treść właściwa
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Tak
Zmiany w HTML5
Nie dotyczy
Domyślny styl prezentacji
Brak
281
ROZDZIAŁ 13. KONFIGURACJA ELEMENTU INPUT
Element datalist, który pojawił się w HTML5, służy do określenia zbioru wartości mających pomóc użytkownikowi w podaniu wymaganych danych. Różne rodzaje elementów input wykorzystują element datalist na różne sposoby. W przypadku elementów typu text zdefiniowane wartości wyświetlane są jako opcje autouzupełnienia. Sugerowane wartości podaje się przy użyciu elementu option, który opisuję w tabeli 13.4. Tabela 13.4. Element option Element
option
Typ elementu
Nie dotyczy
Dozwoleni rodzice
datalist, select, optgroup
Atrybuty lokalne
disabled, selected, label, value
Zawartość
Treść tekstowa
Znaczniki
Samotny znacznik albo otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Brak
Domyślny styl prezentacji
Brak
W listingu 13.3 widnieje przykład użycia elementów datalist i option do określenia sugerowanych wartości pola danych. Listing 13.3. Zastosowanie elementu datalist
Przykład
Imię:
Miasto:
Owoc:
Zagłosuj
282
ROZDZIAŁ 13. KONFIGURACJA ELEMENTU INPUT
Orzeźwiające pomarańcze
Wskazówka Do elementu option nawiążę jeszcze w rozdziale 14. przy omówieniu elementów select i optgroup.
Każdy element option osadzony w elemencie datalist określa jedną sugerowaną wartość danych. Atrybut value określa wartość, która zostanie zamieszczona w elemencie input, gdy użytkownik wybierze daną opcję (określoną elementem option). Nazwę opcji możesz określić atrybutem label lub zapisać ją pomiędzy znacznikami elementu option. Jak widzisz, tak w listingu 13.3 zrobiłem z elementami Jablka i Pomarancze. Na rysunku 13.3 widać, jak przeglądarka wyświetla elementy option osadzone w elemencie datalist.
Rysunek 13.3. Użycie listy danych z elementem input typu text W pracy z elementami input typu text postępuj ostrożnie przy określaniu wartości atrybutu label innych niż właściwa wartość opcji. Dla użytkownika może nie być jasne, dlaczego kliknięcie opcji Wspaniałe jabłka skutkuje wprowadzeniem słowa Jablka w polu tekstowym. Niektóre przeglądarki, takie jak Opera, nieco inaczej przedstawiają listy opcji, kiedy wartości label i value elementu różnią się od siebie (rysunek 13.4).
Rysunek 13.4. Opera wyświetla odmienne wartości atrybutów value i label Takie rozwiązanie jest nieco lepsze, choć może być dezorientujące. Poza tym zauważ, że choć wartość atrybutu label jest wykrywana, to przeglądarka ignoruje właściwą treść elementu option.
283
ROZDZIAŁ 13. KONFIGURACJA ELEMENTU INPUT
Tworzenie pól tekstowych nieaktywnych i tylko do odczytu Atrybuty readonly i disabled służą do tworzenia pól tekstowych, których użytkownik nie może edytować, przy czym pola te różnią się od siebie wyglądem. W listingu 13.4 widać przykład zastosowania obydwu tych atrybutów. Listing 13.4. Zastosowanie właściwości readonly i disabled
Przykład
Imię:
Miasto:
Owoc:
Zagłosuj
Na rysunku 13.5 widać, jak te atrybuty obsługiwane są w przeglądarce.
Rysunek 13.5. Zastosowanie atrybutów disabled i readonly Pierwszemu elementowi input w listingu 13.4 przypisałem atrybut disabled — jego pole tekstowe jest wobec tego przytłumione, a użytkownik nie może edytować jego zawartości. Drugiemu elementowi input
284
ROZDZIAŁ 13. KONFIGURACJA ELEMENTU INPUT
przypisałem atrybut readonly, co uniemożliwia użytkownikowi edycję tekstu, ale nie zmienia wyglądu pola tekstowego. Przy wysyłaniu formularza na serwer przesyłane są wartości określone dla atrybutu value (rysunek 13.6).
Rysunek 13.6. Dane pobrane z elementów input opatrzonych atrybutami disabled i readonly Zauważ, że dane podane dla elementów input opatrzonych atrybutem disabled nie są przesyłane na serwer. Jeżeli chcesz skorzystać z tego atrybutu i jednocześnie musisz zapewnić, by na serwer została przesłana wartość danego elementu input, rozważ dodanie elementu input typu hidden (o czym przeczytasz w punkcie „Zastosowanie elementu input do tworzenia ukrytych obiektów danych” w dalszej części tego rozdziału). Sugeruję, byś używał atrybutu readonly ostrożnie. Choć użytkownik może przejrzeć dane takiego elementu, to nic nie wskazuje, że pola nie można edytować; przeglądarka zwyczajnie ignoruje wpisywane dane, co może być dezorientujące.
Określenie kierunku tekstu Atrybut dirname pozwala na określenie nazwy danej przesyłanej na serwer oraz zawiera informację o kierunku zapisu podanego przez użytkownika tekstu. Kiedy piszę te słowa, żadna z popularnych przeglądarek nie obsługuje tego atrybutu.
Zastosowanie elementu input do pobierania haseł Nadanie wartości password atrybutowi type tworzy element input służący do pobierania haseł. Znaki wpisywane przez użytkownika zastępowane są na ekranie znakami maskującymi, np. asteriskami ( *). W tabeli 13.5 znajduje się lista dodatkowych atrybutów, których można używać, gdy atrybut type elementu ma wartość password. Wielu z nich można też używać z typem text — działają tak samo. W listingu 13.5 widnieje element typu password. Listing 13.5. Zastosowanie typu password
Przykład
285
ROZDZIAŁ 13. KONFIGURACJA ELEMENTU INPUT
Tabela 13.5. Dodatkowe atrybuty dostępne przy elemencie input typu password Nowość w HTML5
Atrybut
Opis
maxlength
Wskazuje maksymalną liczbę znaków, które użytkownik może podać w polu hasła. Więcej przeczytasz w punkcie „Określanie rozmiaru elementu”.
Nie
pattern
Wskazuje wyrażenie regularne na potrzeby weryfikacji danych wejściowych. Więcej przeczytasz w rozdziale 14.
Tak
placeholder
Tworzy wskazówkę odnoszącą się do tego, jakie dane wejściowe użytkownik powinien podać. Więcej przeczytasz w punkcie „Podawanie wartości i treści zastępczych”.
Tak
readonly
Definiuje pole hasła tylko do odczytu, które nie może być edytowane przez użytkownika. Więcej przeczytasz w punkcie „Tworzenie pól tekstowych nieaktywnych i tylko do odczytu”.
Nie
required
Wskazuje, że użytkownik musi podać dla elementu wartość na potrzeby weryfikacji danych wejściowych. Więcej przeczytasz w rozdziale 14.
Tak
size
Określa szerokość elementu wyrażoną w liczbie znaków widocznych w polu hasła. Więcej przeczytasz w punkcie „Określanie rozmiaru elementu”.
Nie
value
Określa pierwotną wartość pola hasła.
Nie
Imię:
Hasło:
Owoc:
Zagłosuj
W listingu 13.5 zdefiniowałem atrybut placeholder, który ma wskazać użytkownikowi, jakiego hasła się od niego oczekuje. Kiedy użytkownik zaczyna pisać, przeglądarka usuwa treść zastępczą, a każdy wpisany znak zastępuje kropką (choć znaki maskujące różnią się w zależności od przeglądarki). Rezultat widać na rysunku 13.7. Rzecz jasna, tylko podany przez użytkownika tekst jest maskowany na ekranie. Po wysłaniu formularza serwer otrzymuje hasło w formie tekstu jawnego, tak jak widać na rysunku 13.8, przedstawiającym odpowiedź skryptu Node.js. Ostrzeżenie Typ password elementu input nie zabezpiecza przekazywanego na serwer hasła. Podana przez użytkownika wartość przesyłana jest w postaci tekstu jawnego. Jeżeli bezpieczeństwo jest istotnym aspektem działania Twojej strony lub aplikacji (a powinno być), to powinieneś rozważyć wykorzystanie SSL/HTTPS do szyfrowania komunikacji pomiędzy przeglądarką a serwerem.
286
ROZDZIAŁ 13. KONFIGURACJA ELEMENTU INPUT
Rysunek 13.7. Zastosowanie elementu input typu password
Rysunek 13.8. Dane z formularza zawierającego pole hasła
Zastosowanie elementu input do tworzenia przycisków Typy submit, reset i button elementu input tworzą przyciski bardzo podobne do tych, które powstają przy użyciu opisanego w rozdziale 12. elementu button. W tabeli 13.6 znajduje się omówienie tych typów. Tabela 13.6. Typy elementu input, które tworzą przyciski Typ
Opis
Dodatkowe atrybuty
submit
Tworzy przycisk, który wysyła formularz.
formaction, formenctype, formmethod, formtarget, formnovalidate
reset
Tworzy przycisk, który oczyszcza formularz.
Brak
button
Tworzy przycisk, który nie wykonuje żadnej czynności.
Brak
Dodatkowe atrybuty, których można używać z elementem input typu submit, są takie same, jak w przypadku elementu button. Opisy i przykłady zastosowania tych atrybutów znajdziesz w rozdziale 12. Typy reset i button nie obsługują żadnych dodatkowych atrybutów.
287
ROZDZIAŁ 13. KONFIGURACJA ELEMENTU INPUT
Etykieta wyświetlana na przycisku utworzonym tego typu elementami input opiera się na wartości atrybutu value, tak jak widać w listingu 13.6. Listing 13.6. Zastosowanie elementu input do tworzenia przycisków
Przykład
Imię:
Hasło:
Owoc:
Na rysunku 13.9 widać, jak te przyciski wyglądają w przeglądarce. Jak widzisz, wyglądają tak samo, jak przyciski utworzone elementem button.
Rysunek 13.9. Zastosowanie elementów input do tworzenia przycisków
288
ROZDZIAŁ 13. KONFIGURACJA ELEMENTU INPUT
Tworzenie przycisków przy użyciu elementu input a button różni się tym, że w elemencie button można zamieścić sformatowany tekst (czego przykład znajdziesz w rozdziale 12.). Niektóre starsze przeglądarki, a w szczególności IE6, potrafią dość dziwnie parsować elementy button, przez co zwykło się raczej używać elementów input, które z reguły interpretowane są spójniej.
Zastosowanie elementu input do ograniczenia rodzaju danych wejściowych W HTML5 pojawiły się nowe wartości atrybutu type elementu input, które pozwalają na bardziej precyzyjne określenie rodzaju danych wymaganych od użytkownika. W kolejnych punktach przedstawię kolejno wszystkie nowe wartości type oraz przykłady ich zastosowania. W tabeli 13.7 znajduje się krótkie omówienie tych wartości. Tabela 13.7. Wartości atrybutu type ograniczające rodzaj danych Nowość w HTML5
Typ
Opis
checkbox
Ogranicza dopuszczalne dane wejściowe do kratki zaznaczania „prawda/fałsz”.
Nie
color
Ogranicza dopuszczalne dane wejściowe do kolorów.
Tak
date
Ogranicza dopuszczalne dane wejściowe do dat.
Tak
datetime
Ogranicza dopuszczalne dane wejściowe do dat globalnych i godziny według strefy czasowej.
Tak
datetime-local
Ogranicza dopuszczalne dane wejściowe do dat globalnych i godziny niezależnie od strefy czasowej.
Tak
email
Ogranicza dopuszczalne dane wejściowe do prawidłowo sformatowanych adresów e-mailowych.
Tak
month
Ogranicza dopuszczalne dane wejściowe do roku i miesiąca.
Tak
number
Ogranicza dopuszczalne dane wejściowe do liczby całkowitej lub zmiennoprzecinkowej.
Tak
radiobutton
Ogranicza dopuszczalne dane wejściowe do określonego zestawu opcji.
Nie
range
Ogranicza dopuszczalne dane wejściowe do określonego zakresu.
Tak
tel
Ogranicza dopuszczalne dane wejściowe do prawidłowo sformatowanego numeru telefonicznego.
Tak
time
Ogranicza dopuszczalne dane wejściowe do godziny.
Tak
week
Ogranicza dopuszczalne dane wejściowe do roku i tygodnia.
Tak
url
Ogranicza dopuszczalne dane wejściowe do w pełni kwalifikowanego adresu URL.
Tak
Niektóre z tych typów elementu input dają użytkownikom wyraziste wskazówki co do rodzaju ograniczeń danych, które użytkownik może podać lub wybrać (jak w przypadku typów checkbox i radiobutton). Inne typy, takie jak email i url, opierają się w działaniu na weryfikacji poprawności, którą omówię w rozdziale 14.
289
ROZDZIAŁ 13. KONFIGURACJA ELEMENTU INPUT
Zastosowanie elementu input do pobrania wartości numerycznej Wartość number atrybutu type generuje pole, które przyjmuje jedynie wartości numeryczne. Niektóre przeglądarki, w tym Chrome, wyświetlają również kontrolki strzałek, które pozwalają na zmniejszanie i zwiększanie wartości. W tabeli 13.8 znajduje się opis dodatkowych atrybutów, których można używać z tym typem elementu input. Tabela 13.8. Dodatkowe atrybuty używane z typem number Nowość w HTML5
Atrybut
Opis
list
Wskazuje wartość id elementu datalist, który zawiera wartości używane przez ten element. Więcej na temat elementu datalist przeczytasz w punkcie „Lista danych”.
Tak
min
Wskazuje minimalną wartość na potrzeby weryfikacji poprawności danych wejściowych (a także określa ograniczenia kontrolek liczbowych, jeżeli takowe są obecne). O weryfikacji danych wejściowych przeczytasz w rozdziale 14.
Tak
max
Wskazuje maksymalną wartość na potrzeby weryfikacji poprawności danych wejściowych (a także określa ograniczenia kontrolek liczbowych, jeżeli takowe są obecne). O weryfikacji danych wejściowych przeczytasz w rozdziale 14.
Tak
readonly
Sprawia, że pole danych jest tylko do odczytu i użytkownik nie może edytować jego zawartości. Więcej na ten temat przeczytasz w punkcie „Tworzenie pól tekstowych nieaktywnych i tylko do odczytu”.
Nie
required
Wskazuje, że użytkownik musi podać wartość, by dane wejściowe zostały zatwierdzone. Więcej na ten temat przeczytasz w rozdziale 14.
Tak
step
Określa wartość zwiększenia bądź zmniejszenia modyfikowanych wartości.
Tak
value
Wskazuje pierwotną wartość elementu.
Nie
Wartości atrybutów min, max, step i value można wyrazić liczbami całkowitymi lub ułamkami dziesiętnymi. Wartości 3 i 3.14 są zatem poprawne. W listingu 13.7 widać przykład zastosowania elementu input typu number. Listing 13.7. Zastosowanie elementu input typu number
Przykład
Imię:
Hasło:
290
ROZDZIAŁ 13. KONFIGURACJA ELEMENTU INPUT
Owoc:
Cena za sztukę w Twoim sklepie:
W listingu 13.7 proszę użytkownika o podanie ceny jego ulubionego owocu w pobliskim sklepie. Podałem minimalną wartość 1, maksymalną wartość 100, odstęp 1 oraz wartość początkową 1. Wygląd tego rodzaju elementów input widać na rysunku 13.10, gdzie przedstawiam zrzuty z Firefoksa i Chrome. Zwróć uwagę, że w Chrome widnieją małe kontrolki ze strzałkami, którymi można zmieniać wartość numeryczną — w Firefoksie ich nie ma.
Rysunek 13.10. Element input typu number w Chrome i Firefoksie
Zastosowanie elementu input do uzyskania liczby z podanego zakresu Wartości numeryczne można też pobierać przy użyciu elementu input typu range, który ogranicza dopuszczalne wartości do określonego zakresu. Typ range obsługuje ten sam zestaw atrybutów (omówionych w tabeli 13.8), co typ number, lecz przeglądarki wyświetlają te elementy inaczej. W listingu 13.8 widnieje przykład zastosowania typu range. Listing 13.8. Zastosowanie typu range elementu input
Przykład
291
ROZDZIAŁ 13. KONFIGURACJA ELEMENTU INPUT
Imię:
Hasło:
Owoc:
Cena za sztukę w Twoim sklepie: 1 100
Wygląd elementu input typu range w przeglądarce widać na rysunku 13.11.
Rysunek 13.11. Zastosowanie elementu input typu range
Zastosowanie elementu input do uzyskania wartości boolowskiej Element input typu checkbox tworzy kratkę zaznaczania, która służy do podejmowania wyborów typu „prawda/fałsz”. Ten typ elementu input obsługuje dodatkowe atrybuty, których opis znajduje się w tabeli 13.9.
292
ROZDZIAŁ 13. KONFIGURACJA ELEMENTU INPUT
Tabela 13.9. Dodatkowe atrybuty używane z typem checkbox Nowość w HTML5
Atrybut
Opis
checked
Sprawia, że kratka jest zaznaczona po wczytaniu strony lub wyzerowaniu formularza.
Nie
required
Wskazuje, że użytkownik musi zaznaczyć kratkę, by móc zatwierdzić dane. Więcej na ten temat przeczytasz w rozdziale 14.
Tak
value
Wskazuje wartość przesyłaną serwerowi, kiedy kratka jest zaznaczona; domyślna wartość to on.
Nie
W listingu 13.9 widnieje przykład zastosowania elementu input typu checkbox. Listing 13.9. Zastosowanie elementu input do utworzenia kratki zaznaczania
Przykład
Imię:
Hasło:
Owoc:
Czy jesteś wegetarianinem:
Wygląd tego rodzaju elementu input widać na rysunku 13.12. Z typem checkbox problem jest taki, że przy wysyłaniu danych z formularza serwer otrzymuje wartość tylko wtedy, kiedy kratka jest zaznaczona. Gdybym więc zatwierdził formularz w stanie takim, jaki widnieje na rysunku 13.12, to skrypt Node.js zwróciłby ramkę widoczną na rysunku 13.13.
293
ROZDZIAŁ 13. KONFIGURACJA ELEMENTU INPUT
Rysunek 13.12. Kratka zaznaczania utworzona elementem input
Rysunek 13.13. Dane pobrane z formularza widocznego na poprzednim rysunku Zauważ, że element password ma podaną wartość, ale checkbox nie; obecność wartości wskazuje, że użytkownik zaznaczył kratkę, tak jak widać na rysunku 13.14.
Rysunek 13.14. Wysłanie formularza z zaznaczoną kratką
294
ROZDZIAŁ 13. KONFIGURACJA ELEMENTU INPUT
Zastosowanie elementu input do tworzenia określonych list opcji Element input typu radio służy do tworzenia pól wyboru, które pozwalają użytkownikowi dokonać wyboru spomiędzy określonego zestawu opcji. Przydaje się to, kiedy pracujesz z niewielkimi zbiorami dopuszczalnych wartości. W tabeli 13.10 znajduje się opis dodatkowych atrybutów obsługiwanych przez ten rodzaj elementu input. Tabela 13.10. Dodatkowe atrybuty używane z typem radio Nowość w HTML5
Atrybut
Opis
checked
Sprawia, że kratka jest zaznaczona po wczytaniu strony lub wyzerowaniu formularza.
Nie
required
Wskazuje, że użytkownik musi zaznaczyć kratkę, by móc zatwierdzić dane. Więcej na ten temat przeczytasz w rozdziale 14.
Tak
value
Wskazuje wartość przesyłaną serwerowi, kiedy kratka jest zaznaczona.
Nie
Każdy element input typu radio określa jedną z opcji, które użytkownik może wybrać. Zbiór wzajemnie wykluczających się opcji tworzy się, nadając wszystkim elementom jednakową wartość atrybutu name. Przykład tego widnieje w listingu 13.10. Listing 13.10. Zastosowanie elementu input typu radio do utworzenia listy określonych opcji
Przykład
Imię:
Hasło:
Zagłosuj na swój ulubiony owoc
Jabłka
295
ROZDZIAŁ 13. KONFIGURACJA ELEMENTU INPUT
Pomarańcze
Wiśnie
W tym przykładzie utworzyłem trzy elementy input typu radio. Atrybut name wszystkich trzech ma wartość fave, wobec czego przeglądarka będzie je traktować jako powiązane. Wybranie jednej opcji wyklucza zatem pozostałe dwie. Atrybutem value określiłem wartość danych przesyłanych serwerowi po zatwierdzeniu formularza. Atrybutów fieldset i legend użyłem do tego, żeby wizualnie wskazać powiązanie tych trzech przycisków opcji (rozwiązanie to jest opcjonalne; elementy fieldset i legend omówiłem w rozdziale 12.). Pierwszemu elementowi typu radio nadałem atrybut checked, żeby zawsze była w nim zaznaczona któraś opcja. Wygląd tych elementów input widać na rysunku 13.15.
Rysunek 13.15. Zastosowanie elementu input do utworzenia serii przycisków wyboru Zaznaczony może być najwyżej jeden przycisk wyboru. Jeżeli element nie jest opatrzony atrybutem checked, a sam użytkownik nie wybiera żadnej opcji, to w ogóle nie trzeba zaznaczać żadnego pola. Podobnie jak w przypadku elementu input typu checkbox, żadna wartość nie zostaje przesłana serwerowi,
kiedy element nie jest zaznaczony — innymi słowy, żadne dane nie zostają przekazane, kiedy użytkownik nie dokonuje wyboru.
Zastosowanie elementu input do pobierania sformatowanych ciągów Nadanie atrybutowi type wartości email, tel lub url sprawia, że element input przyjmuje tylko prawidłowe adresy e-mailowe, numery telefoniczne lub adresy URL. Wszystkie te typy obsługują dodatkowe atrybuty, które opisuję w tabeli 13.11. Typ email obsługuje także atrybut multiple, który pozwala elementowi input na przyjmowanie wielu adresów e-mailowych. Wszystkich trzech typów elementów input użyłem w listingu 13.11.
296
ROZDZIAŁ 13. KONFIGURACJA ELEMENTU INPUT
Tabela 13.11. Dodatkowe atrybuty obsługiwane przez typy email, tel i url Nowość w HTML5
Atrybut
Opis
list
Wskazuje wartość id elementu datalist, który zawiera wartości używane przez ten element. Więcej na temat elementu datalist przeczytasz w punkcie „Lista danych”.
Tak
maxlength
Wskazuje maksymalną liczbę znaków, które użytkownik może podać w polu tekstowym. Więcej przeczytasz w punkcie „Określanie rozmiaru elementu”.
Nie
pattern
Wskazuje wyrażenie regularne na potrzeby weryfikacji danych wejściowych. Więcej przeczytasz w rozdziale 14.
Tak
placeholder
Tworzy wskazówkę odnoszącą się do tego, jakie dane wejściowe użytkownik powinien podać. Więcej przeczytasz w punkcie „Podawanie wartości i treści zastępczych”.
Tak
readonly
Definiuje pole tekstowe tylko do odczytu, które nie może być edytowane przez użytkownika.
Nie
required
Wskazuje, że użytkownik musi podać dla elementu wartość na potrzeby weryfikacji danych wejściowych. Więcej przeczytasz w rozdziale 14.
Tak
size
Określa szerokość elementu wyrażoną w liczbie znaków widocznych w polu tekstowym. Więcej przeczytasz w punkcie „Określanie rozmiaru elementu”.
Nie
value
Określa pierwotną wartość pola tekstowego. Więcej przeczytasz w punkcie „Podawanie wartości i treści zastępczych”. Przy typie email może to być pojedynczy adres lub wiele adresów oddzielonych przecinkami.
Nie
Listing 13.11. Zastosowanie typów email, tel i url
Przykład
Imię:
Hasło:
Email:
297
ROZDZIAŁ 13. KONFIGURACJA ELEMENTU INPUT
Telefon:
Strona domowa:
Te typy elementu input przedstawiane są użytkownikowi jako zwyczajne pola tekstowe i służą jedynie zatwierdzaniu podanych przez użytkownika danych, kiedy dane z formularza są wysyłane. Jest to część nowego sposobu obsługi weryfikacji danych do zatwierdzenia w HTML5, który opiszę szerzej w rozdziale 14. Jakość weryfikacji bywa różna. Wszystkie popularne przeglądarki dobrze sobie radzą z typem email i odpowiednio wykrywają prawidłowe adresy e-mailowe. Z typem url natomiast bywa różnie. Niektóre przeglądarki dodają do podawanych przez użytkowników adresów człon http:// na początku, a inne wymagają od użytkowników adresów zaczynających się od członu http://, ale nie weryfikują reszty adresu. Inne z kolei pozwalają użytkownikom na podawanie dowolnych wartości i w ogóle nie weryfikują danych. Typ tel ma najgorszą obsługę. W chwili, kiedy to piszę, żadna z popularnych przeglądarek nie oferuje sensownej weryfikacji.
Zastosowanie elementu input do pozyskiwania godzin i dat W HTML5 pojawiły się także typy elementu input służące do pobierania godzin i dat. Ich opis znajduje się w tabeli 13.12. Tabela 13.12. Typy elementu input służące do pobierania godzin i dat Typ
Opis
Przykład
datetime
Pozyskuje globalną datę i godzinę z informacją o strefie czasowej.
2011-07-19T16:49:39.491Z
datetime-local
Pozyskuje globalną datę i godzinę (bez informacji o strefie czasowej).
2011-07-19T16:49:39.491
date
Pozyskuje lokalną datę (bez godziny ani strefy czasowej).
2011-07-20
month
Pozyskuje dane o roku i miesiącu (bez dnia, godziny ani informacji o strefie czasowej).
2011-08
time
Pozyskuje godzinę.
17:49:44.746
week
Pozyskuje dane o tygodniu.
2011-W30
Z pracą z datami i godzinami wiążą się problemy, a — niestety — specyfikacja nowych typów elementu input nie jest bynajmniej idealna. Formaty dat opierają się na standardzie RFC 3339 (dostępnym pod
adresem http://tools.ietf.org/html/rfc3339), który opisuje rygorystyczne formatowanie sygnatur czasowych. Opisany w nim sposób przedstawiania dat znacząco różni się od wielu lokalnych wariacji, z których rzeczywiście się korzysta i których użytkownicy mogliby oczekiwać. Przykładowo, niewielu użytkowników
298
ROZDZIAŁ 13. KONFIGURACJA ELEMENTU INPUT
ma świadomość tego, że T w formacie datetime określa początek fragmentu czasu, a Z niezmienną strefę czasową Zulu. Wszystkie typy elementu input, które opisałem w tabeli 13.12, obsługują dodatkowe atrybuty opisane w tabeli 13.13. Tabela 13.13. Dodatkowe atrybuty obsługiwane przez elementy input pobierające dane o godzinie i dacie Nowość w HTML5
Atrybut
Opis
list
Wskazuje id elementu datalist, który określa wartości elementu input. Więcej przeczytasz w punkcie „Lista danych”.
Tak
min
Wskazuje minimalną wartość na potrzeby weryfikacji poprawności danych wejściowych (a także określa ograniczenia kontrolek liczbowych, jeżeli takowe są obecne). O weryfikacji danych wejściowych przeczytasz w rozdziale 14.
Tak
max
Wskazuje maksymalną wartość na potrzeby weryfikacji poprawności danych wejściowych (a także określa ograniczenia kontrolek liczbowych, jeżeli takowe są obecne). O weryfikacji danych wejściowych przeczytasz w rozdziale 14.
Tak
readonly
Sprawia, że pole danych jest tylko do odczytu i użytkownik nie może edytować jego zawartości.
Nie
required
Wskazuje, że użytkownik musi podać wartość, by dane wejściowe zostały zatwierdzone. Więcej na ten temat przeczytasz w rozdziale 14.
Tak
step
Określa wartość zwiększenia bądź zmniejszenia modyfikowanych wartości.
Tak
value
Wskazuje pierwotną wartość elementu.
Nie
W listingu 13.12 widnieje przykład zastosowania typu date. Listing 13.12. Zastosowanie typu date elementu input
Przykład
Imię:
Hasło:
Owoc:
299
ROZDZIAŁ 13. KONFIGURACJA ELEMENTU INPUT
Kiedy ostatnio kupiłeś owoc:
Obsługa tych nowych typów elementu input w przeglądarkach wciąż jest bardzo ograniczona. W chwili, kiedy to piszę, Opera może się pochwalić najlepszą obsługą, a ponadto oferuje selektor daty, co widać na rysunku 13.16.
Rysunek 13.16. Wybieranie daty w Operze Drugą najlepszą obsługę oferuje Chrome, który wyświetla taki sam rodzaj pola tekstowego, jak przy elemencie input typu number — z małymi kontrolkami zmiany wartości czasu. Pozostałe popularne przeglądarki wyświetlają jednowierszowe pole tekstowe i użytkownik już sam musi się domyślić, co ma wpisać. Jestem pewien, że możemy czekać na postępy w tej dziedzinie, ale na razie mogę Cię tylko zachęcić do przejrzenia selektorów dat dostępnych w popularnych bibliotekach JavaScript w rodzaju jQuery.
Zastosowanie elementu input do pobierania danych o kolorze Typ color elementu input ogranicza wybór danych wejściowych do kolorów. Ten typ obsługuje dodatkowy atrybut list, który omówiłem w punkcie „Lista danych” we wcześniejszej części rozdziału. Wartości kolorów wyraża się dokładnie siedmioma znakami: początkowym #, po którym występują trzy dwucyfrowe wartości szesnastkowe, określające wartości czerwonego, zielonego i niebieskiego (np. #FF1234). Nazwy kolorów CSS, takie jak red i black, nie są obsługiwane. Przykład użycia tego typu elementu input znajdziesz w listingu 13.13. Listing 13.13. Zastosowanie elementu input typu color
Przykład
300
ROZDZIAŁ 13. KONFIGURACJA ELEMENTU INPUT
Imię:
Hasło:
Ulubiony owoc:
Kolor:
W większości przeglądarek nie ma specjalistycznych opcji obsługi tego typu elementu input. W Google Chrome użytkownik wpisuje wartość i może otrzymać komunikat o problemach z formatowaniem przy próbie weryfikacji danych wejściowych (o czym opowiem w rozdziale 14.). Najlepszą obsługę oferuje Opera — udostępnia prosty próbnik kolorów, który można powiększyć do postaci pełnoprawnego okna selektora barw (rysunek 13.17).
Rysunek 13.17. Próbnik kolorów w Operze
301
ROZDZIAŁ 13. KONFIGURACJA ELEMENTU INPUT
Zastosowanie elementu input do pobierania haseł wyszukiwania Element input typu search przybiera postać jednowierszowego pola tekstowego, które przyjmuje hasła wyszukiwania. Dziwne jest to, że ten rodzaj elementu nic właściwie nie robi. Nie ma żadnych domyślnych ograniczeń rodzaju danych, które można mu podać, ani specjalnych funkcji, w rodzaju przeszukiwania bieżącej strony lub wykorzystania domyślnej wyszukiwarki użytkownika do przeprowadzenia kwerendy. Ten typ elementu input obsługuje te same dodatkowe atrybuty, co typ text. W listingu 13.14 widać przykład zastosowania tego elementu. Listing 13.14. Zastosowanie elementu input typu search
Przykład
Imię:
Hasło:
Ulubiony owoc:
Szukaj:
Przeglądarki mogą wyświetlać pola tekstowe w sposób, który jednoznacznie wskazuje na to, że należy w nich podawać słowa kluczowe. Google Chrome w tym celu wyświetla coś, co wygląda na standardowe pole tekstowe, dopóki użytkownik nie zaczyna w nim pisać — wtedy pojawia się w polu ikonka usuwania danych (rysunek 13.18). W chwili, kiedy to piszę, inne popularne przeglądarki obsługują ten rodzaj elementu input tak, jakby był zwyczajnym polem typu text.
302
ROZDZIAŁ 13. KONFIGURACJA ELEMENTU INPUT
Rysunek 13.18. Element input typu search w Google Chrome
Zastosowanie elementu input do tworzenia ukrytych obiektów danych Czasami konieczne jest zapewnienie, by pewne niewidoczne i nieedytowalne przez użytkownika dane zostały przekazane serwerowi po wysłaniu formularza. Z taką sytuacją mamy do czynienia, kiedy aplikacja internetowa wyświetla rekord z bazy danych, który użytkownik może edytować. Często na stronie trzeba wtedy umieścić klucz główny, żeby móc się z łatwością rozeznać, który rekord jest edytowany przez użytkownika — jednocześnie nie chcemy, by użytkownik widział tę informację. Do uzyskania tego efektu służy element input typu hidden. W listingu 13.15 widnieje przykład zastosowania elementu input tego typu. Listing 13.15. Zastosowanie elementu input typu hidden
Przykład
Imię:
Hasło:
Ulubiony owoc:
303
ROZDZIAŁ 13. KONFIGURACJA ELEMENTU INPUT
W tym przykładzie utworzyłem element input typu hidden z atrybutem name o wartości recordID oraz atrybutem value o wartości 1234. Kiedy strona wyświetla się w przeglądarce, element input nie jest w żaden sposób widoczny (rysunek 13.19).
Rysunek 13.19. Strona z ukrytym elementem input Kiedy użytkownik wysyła formularz, przeglądarka dołącza dane określone jako wartości atrybutów name i value elementu input typu hidden. Widać to na rysunku 13.20, na którym znajduje się odpowiedź
skryptu Node.js na formularz z poprzedniego rysunku.
Rysunek 13.20. Odpowiedź serwera, w której widać ukryte dane Ostrzeżenie Ten rodzaj elementu input nadaje się tylko do danych ukrywanych dla wygody lub polepszenia używalności, a nie poufnych i istotnych pod względem bezpieczeństwa. Użytkownik może przejrzeć elementy input typu hidden w kodzie źródłowym strony, a wartości przesyłane na serwer zapisane są tekstem jawnym. Większość frameworków aplikacji internetowych obsługuje zabezpieczanie poufnych danych na serwerze i powiązywanie ich z żądaniami na podstawie identyfikatorów sesji — zazwyczaj w postaci ciasteczek.
304
ROZDZIAŁ 13. KONFIGURACJA ELEMENTU INPUT
Zastosowanie elementu input do tworzenia map i przycisków graficznych Element input typu image pozwala na tworzenie przycisków graficznych, których kliknięciem zatwierdza się formularz. Ten typ elementu input obsługuje dodatkowe atrybuty widoczne w tabeli 13.14. Tabela 13.14. Dodatkowe atrybuty obsługiwane przez element input typu image Nowość w HTML5
Atrybut
Opis
alt
Określa opis tekstowy elementu. Przydaje się to użytkownikom korzystającym z technologii asystujących.
Nie
formaction
Podobnie jak w elemencie button, opisanym w rozdziale 12.
Tak
formenctype
Podobnie jak w elemencie button, opisanym w rozdziale 12.
Tak
formmethod
Podobnie jak w elemencie button, opisanym w rozdziale 12.
Tak
formtarget
Podobnie jak w elemencie button, opisanym w rozdziale 12.
Tak
formnovalidate
Podobnie jak w elemencie button, opisanym w rozdziale 12.
Tak
height
Określa wysokość obrazu w pikselach; kiedy atrybut jest nieobecny, obraz wyświetlany jest w swojej rzeczywistej wysokości.
Nie
src
Wskazuje adres URL obrazu, który ma być wyświetlony.
Nie
width
Określa szerokość obrazu w pikselach; kiedy atrybut jest nieobecny, obraz wyświetlany jest w swojej rzeczywistej szerokości.
Nie
W listingu 13.16 widnieje przykład zastosowania elementu input typu image. Listing 13.16. Zastosowanie elementu input typu image
Przykład
Imię:
Hasło:
Ulubiony owoc:
305
ROZDZIAŁ 13. KONFIGURACJA ELEMENTU INPUT
Wygląd tego typu elementu input w przeglądarce widać na rysunku 13.21.
Rysunek 13.21. Zastosowanie elementu input typu image Po kliknięciu obrazu przeglądarka wysyła formularz z dwoma elementami odnoszącymi się do elementu input typu image. Są to współrzędne x i y miejsca, w którym użytkownik kliknął, względem lewego górnego
rogu obrazu. Przekazywane dane widać na rysunku 13.22, na którym znajduje się odpowiedź skryptu Node.js na formularz z poprzedniego rysunku.
Rysunek 13.22. Odpowiedź Node.js na formularz zawierający element input typu image Współrzędne można wykorzystywać w obsłudze obrazów składających się z różnych obszarów, których kliknięcie wywołuje różne czynności i odpowiedzi.
306
ROZDZIAŁ 13. KONFIGURACJA ELEMENTU INPUT
Zastosowanie elementu input do wczytywania plików Ostatni typ elementu input to file, który umożliwia wczytywanie plików na serwer przy wysyłaniu formularza. Ten typ elementu input obsługuje dodatkowe atrybuty przedstawione w tabeli 13.15. Tabela 13.15. Dodatkowe atrybuty obsługiwane przez typ file elementu input Nowość w HTML5
Atrybut
Opis
accept
Określa zbiór akceptowanych typów MIME. Opis typów MIME znajduje się w specyfikacji RFC2046 (http://tools.ietf.org/html/rfc2046).
Nie
multiple
Wskazuje, że element input może posłużyć do wczytania więcej niż jednego pliku. Kiedy piszę te słowa, żadna z popularnych przeglądarek nie obsługuje tego atrybutu.
Tak
required
Wskazuje, że użytkownik musi podać wartość na potrzeby weryfikacji. Więcej na ten temat przeczytasz w rozdziale 14.
Tak
W listingu 13.17 widać przykład zastosowania elementu input typu file. Listing 13.17. Zastosowanie elementu input typu file do wczytywania plików
Przykład
Imię:
Hasło:
Ulubiony owoc:
307
ROZDZIAŁ 13. KONFIGURACJA ELEMENTU INPUT
Pliki można wczytywać tylko wtedy, kiedy formularz ma przypisany typ kodowania multipart/form-data. Jak widzisz, kodowanie elementu form określiłem atrybutem enctype. Wygląd elementu input widać na rysunku 13.23.
Rysunek 13.23. Element input typu file Kliknięciem przycisku Wybierz plik użytkownik otwiera okno wyboru pliku. Po wysłaniu formularza zawartość pliku zostaje przesłana na serwer.
Podsumowanie W tym rozdziale przedstawiłem Ci różne typy elementu input. Żaden inny element HTML nie ma tylu różnych funkcji, a każda strona i aplikacja internetowa, która opiera się na interakcji z użytkownikiem, szeroko używa elementu input. W następnym rozdziale przedstawię Ci kilka innych rodzajów elementów, które można wykorzystywać w formularzach. Pokażę Ci również nową funkcję weryfikacji danych w HTML5, która pozwala na sprawdzenie, czy użytkownik podał właściwy rodzaj danych, jeszcze przed wysłaniem formularza.
308
ROZDZIAŁ 14
Inne elementy formularzy i weryfikacja danych wejściowych W tym rozdziale dokończę omówienie formularzy HTML. W formularzach HTML można używać jeszcze pięciu innych elementów, które kolejno opiszę. Przedstawię również funkcje weryfikacji danych wejściowych, które pojawiły się w HTML5. Te nowe funkcje pozwalają na definiowanie ograniczeń dla podawanych przez użytkownika danych — przy ich użyciu można wstrzymać wysłanie formularza, aż użytkownik poda dane spełniające określone warunki. W tabeli 14.1 znajduje się streszczenie całego rozdziału. Tabela 14.1. Streszczenie rozdziału Problem
Rozwiązanie
Listing
Utworzenie listy opcji do przedstawienia użytkownikowi.
Użyj elementu select.
14.1, 14.2
Ustrukturyzowanie listy opcji w elemencie select.
Użyj elementu optgroup.
14.3
Pozyskanie wielowierszowego tekstu od użytkownika.
Użyj elementu textarea.
14.4
Wskazanie wyniku obliczenia.
Użyj elementu output.
14.5
Wygenerowanie pary kluczy — publicznego i prywatnego.
Użyj elementu keygen.
—
Sprawdzenie, czy użytkownik określił wartość w formularzu.
Użyj atrybutu required.
14.6
Sprawdzenie, czy wartość mieści się w określonym zakresie.
Użyj atrybutów min i max.
14.7
Sprawdzenie, czy wartość jest zgodna z wyrażeniem regularnym.
Użyj atrybutu pattern.
14.8, 14.9
Dezaktywacja weryfikacji danych wejściowych.
Użyj atrybutu novalidate lub formnovalidate.
14.10
Inne elementy formularzy W kolejnych punktach opiszę pozostałe pięć elementów, których można użyć w formularzu. Są to elementy select, optgroup, textarea, output i keygen.
Tworzenie list opcji Element select służy do tworzenia list opcji wyboru. Jest to bardziej zwięzły odpowiednik elementu input typu radiobutton, który przedstawiłem w rozdziale 13., a idealnie nadaje się do przedstawiania większych zbiorów opcji. W tabeli 14.2 znajduje się opis elementu select.
ROZDZIAŁ 14. INNE ELEMENTY FORMULARZY I WERYFIKACJA DANYCH WEJŚCIOWYCH
Tabela 14.2. Element select Element
select
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą
Atrybuty lokalne
name, disabled, form, size, multiple, autofocus, required
Zawartość
Elementy option i optgroup
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
W HTML5 pojawiły się atrybuty form, autofocus i required
Domyślny styl prezentacji
Wygląd tego elementu różni się w zależności od platformy i przeglądarki
Atrybuty name, disabled, form, autofocus i required działają tak samo, jak ich odpowiedniki obsługiwane przez elementy input. Atrybut size wskazuje, ile użytkownik ma mieć opcji do wyboru; atrybut multiple z kolei wskazuje, że użytkownik może wybrać więcej niż jedną wartość. Do określenia opcji służy element option — ten sam, którego używa się z opisanym w rozdziale 12. elementem datalist. W listingu 14.1 widnieje przykład zastosowania elementów select i option. Listing 14.1. Zastosowanie elementów select i option
Przykład
Imię:
Hasło:
Ulubiony owoc:
Jabłko Pomarańcza Wiśnia Gruszka
310
ROZDZIAŁ 14. INNE ELEMENTY FORMULARZY I WERYFIKACJA DANYCH WEJŚCIOWYCH
W listingu 14.1 zamieściłem element select i zdefiniowałem cztery elementy option, oznaczające podane użytkownikowi do wyboru opcje. Pierwszemu elementowi option nadałem atrybut selected, żeby był automatycznie zaznaczany po wczytaniu strony. Wygląd elementu select po wczytaniu strony oraz listy elementów option widać na rysunku 14.1.
Rysunek 14.1. Zastosowanie elementu select do przedstawienia użytkownikowi listy opcji Elementowi select można nadać atrybut size, aby przedstawiał użytkownikowi więcej niż jedną opcję, a atrybut multiple, żeby pozwolić użytkownikowi na zaznaczenie więcej niż jednej opcji. Przykład widnieje w listingu 14.2. Listing 14.2. Nadanie elementowi select atrybutów size i multiple
Przykład
Imię:
Hasło:
Ulubiony owoc:
311
ROZDZIAŁ 14. INNE ELEMENTY FORMULARZY I WERYFIKACJA DANYCH WEJŚCIOWYCH
Jabłko Pomarańcza Wiśnia Gruszka
W listingu 14.2 wprowadziłem atrybuty size i multiple, czego rezultatem jest efekt widoczny na rysunku 14.2. Więcej niż jedną opcję można wybrać, klikając kolejne pozycje z przytrzymanym przyciskiem ctrl. Zastosowałem również styl inline (tak jak opisałem w rozdziale 4.) do zmiany wyrównania elementu label tak, aby był wyrównany do górnej krawędzi elementu select (a nie dolnej, co jest ustawieniem domyślnym i wygląda dość dziwnie).
Rysunek 14.2. Zastosowanie elementu select do wyświetlenia i pozwolenia użytkownikowi na zaznaczenie więcej niż jednego elementu
Ustrukturyzowanie elementu select Element select możesz ustrukturyzować przy użyciu elementu optgroup. W tabeli 14.3 znajduje się opis elementu optgroup. Tabela 14.3. Element optgroup Element
optgroup
Typ elementu
Nie dotyczy
Dozwoleni rodzice
Element select
Atrybuty lokalne
label, disabled
Zawartość
Elementy option
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Brak
Domyślny styl prezentacji
Brak
312
ROZDZIAŁ 14. INNE ELEMENTY FORMULARZY I WERYFIKACJA DANYCH WEJŚCIOWYCH
Element optgroup służy do grupowania elementów option. Atrybut label służy do tworzenia etykiet grup elementów option, a zastosowanie atrybutu disabled uniemożliwia użytkownikowi wybranie któregokolwiek z elementów option zawartych w grupie optgroup. W listingu 14.3 widnieje przykład zastosowania elementu optgroup. Listing 14.3. Zastosowanie elementu optgroup
Przykład
Imię:
Hasło:
Ulubiony owoc:
Jabłko Pomarańcza
Wiśnia Gruszka
Na rysunku 14.3 widać strukturę nadaną liście zawierającej elementy option przy użyciu elementu optgroup. Etykiety optgroup pełnią jedynie funkcję strukturalną — użytkownik nie może ich zaznaczać.
Pobieranie wielowierszowego tekstu Element textarea tworzy wielowierszowe pole tekstowe, w którym użytkownik może wpisać więcej niż jeden wiersz tekstu. Opis tego elementu znajduje się w tabeli 14.4.
313
ROZDZIAŁ 14. INNE ELEMENTY FORMULARZY I WERYFIKACJA DANYCH WEJŚCIOWYCH
Rysunek 14.3. Zastosowanie elementu optgroup Tabela 14.4. Element textarea Element
textarea
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą — przeważnie jednak jest to element form
Atrybuty lokalne
name, disabled, form, readonly, maxlength, autofocus, required, placeholder, dirname, rows, wrap, cols
Zawartość
Tekst określający treść elementu
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
W HTML5 pojawiły się atrybuty form, autofocus, required, placeholder i wrap
Domyślny styl prezentacji
Brak
Atrybuty rows i cols określają wymiary pola textarea, a atrybutem wrap możesz określić, jak ma działać łamanie wiersza. Pozostałe atrybuty działają tak samo jak ich odpowiedniki obsługiwane przez element input, które opisałem w rozdziałach 12. i 13. W listingu 14.4 widać przykład zastosowania elementu textarea. Listing 14.4. Zastosowanie elementu textarea
Przykład
Imię:
314
ROZDZIAŁ 14. INNE ELEMENTY FORMULARZY I WERYFIKACJA DANYCH WEJŚCIOWYCH
Hasło:
Ulubiony owoc:
Jabłko Pomarańcza
Wiśnia Gruszka
Napisz, dlaczego to Twój ulubiony owoc
W listingu 14.4 zamieściłem element textarea o szerokości dwudziestu kolumn i pięciu rzędów. Wygląd tego elementu widać na rysunku 14.4.
Rysunek 14.4. Zastosowanie elementu textarea Atrybut wrap określa sposób łamania wiersza przy wysłaniu formularza. Gdy nadaje się mu wartość hard, tekst łamany jest tak, by żaden z przesłanych wierszy nie był dłuższy niż wartość podana dla atrybutu cols.
315
ROZDZIAŁ 14. INNE ELEMENTY FORMULARZY I WERYFIKACJA DANYCH WEJŚCIOWYCH
Wskazanie wyniku obliczenia Element output wskazuje wynik obliczenia. W tabeli 14.5 znajduje się jego opis. Tabela 14.5. Element output Element
output
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą
Atrybuty lokalne
name, form, for
Zawartość
Treść właściwa
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Tak
Zmiany w HTML5
Nie dotyczy
Domyślny styl prezentacji
output { display: inline; }
W listingu 14.5 widnieje przykład zastosowania elementu output. Listing 14.5. Zastosowanie elementu output
Przykład
Kalkulator cen x =
W listingu 14.5 wykorzystałem system zdarzeń JavaScript do utworzenia prostego kalkulatora. (O zdarzeniach przeczytasz więcej w rozdziale 30.). Widnieją tu dwa elementy input typu number. Podane przez użytkownika wartości elementu input zostają przemnożone, a rezultat pojawia się w elemencie output. Jego wygląd w przeglądarce widać na rysunku 14.5.
Generowanie par kluczy — publicznego i prywatnego Element keygen służy do generowania par kluczy prywatnego i publicznego. Jest to istotny aspekt kryptografii klucza publicznego, która — wraz z certyfikatami klientów i SSL — leży u podstaw bezpieczeństwa w sieci. Przy wysłaniu formularza generowana jest nowa para kluczy. Klucz publiczny przekazany zostaje serwerowi, a klucz prywatny zostaje zachowany przez przeglądarkę i dołączony do zbioru kluczy użytkownika. Opis elementu keygen znajduje się w tabeli 14.6.
316
ROZDZIAŁ 14. INNE ELEMENTY FORMULARZY I WERYFIKACJA DANYCH WEJŚCIOWYCH
Rysunek 14.5. Zastosowanie elementu output Tabela 14.6. Element keygen Element
keygen
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą
Atrybuty lokalne
challenge, keytype, autofocus, name, disabled, form
Zawartość
Brak
Znaczniki
Samotny znacznik
Nowość w HTML5
Tak
Zmiany w HTML5
Nie dotyczy
Domyślny styl prezentacji
Brak
Atrybuty name, disabled, form i autofocus działają tak samo jak ich odpowiedniki obsługiwane przez opisany w rozdziale 12. element input. Atrybut keytype określa algorytm służący do generowania pary kluczy, lecz obsługuje on jedynie wartość RSA. Atrybut challenge określa wyzwanie przesyłane serwerowi wraz z kluczem publicznym. Obsługa tego elementu nie jest powszechna, a poszczególne przeglądarki różnie go przedstawiają użytkownikom. Zalecam unikać używania tego elementu, dopóki jego obsługa nie stanie się lepsza.
Weryfikacja danych wejściowych Przy pobieraniu danych od użytkowników ryzykujesz tym, że otrzymasz takie dane, które do niczego się nie przydadzą. Użytkownik może zwyczajnie pomylić się albo może to wynikać z tego, że nie dość jasno określiłeś oczekiwany rodzaj informacji. W HTML5 pojawiła się obsługa weryfikacji danych wejściowych. Polega ona na podaniu przeglądarce podstawowych informacji co do rodzaju danych, jakich wymagasz. Przeglądarka na ich podstawie jeszcze przed zatwierdzeniem formularza sprawdza, czy użytkownik podał właściwe dane. Jeżeli z danymi jest jakiś problem, użytkownik zostaje poproszony o wprowadzenie poprawek i nie może wysłać formularza, dopóki tego nie zrobi. Idea weryfikacji w przeglądarce nie jest nowa, ale zanim pojawił się HTML5, trzeba było w tym celu korzystać z bibliotek JavaScript, np. świetnej wtyczki weryfikacyjnej jQuery. Wbudowana funkcja weryfikacji w HTML5 jest bez wątpienia wygodna, ale — jak się sam przekonasz — jest ona obsługiwana w podstawowym zakresie i niespójnie w poszczególnych przeglądarkach. Zaletą weryfikacji danych wejściowych w przeglądarce jest to, że użytkownik w razie wystąpienia problemów natychmiast otrzymuje dane zwrotne. Gdyby tej funkcji nie było, użytkownik po wysłaniu formularza musiałby poczekać na odpowiedź serwera, a następnie poprawić zgłoszone błędy. W pracy z powolnymi sieciami i przeładowanymi serwerami jest to powolny i frustrujący proces. Weryfikacją danych zarządza się przy użyciu atrybutów. W tabeli 14.7 widać, które atrybuty obsługiwane są przez które elementy i typy danych wejściowych.
317
ROZDZIAŁ 14. INNE ELEMENTY FORMULARZY I WERYFIKACJA DANYCH WEJŚCIOWYCH
Ostrzeżenie Weryfikacja danych wejściowych w przeglądarce jest raczej uzupełnieniem aniżeli substytutem weryfikacji po stronie serwera. Nie można zakładać, że użytkownicy korzystają z przeglądarek prawidłowo obsługujących weryfikację danych, a użytkownik o niegodziwych zamiarach może bez problemu napisać skrypt pozwalający mu wysyłać dane bezpośrednio na serwer z pominięciem weryfikacji w ogóle.
Tabela 14.7. Obsługa weryfikacji danych wejściowych Atrybut weryfikacji
Elementy
required
textarea, select, input (typy text, password, checkbox, radio, file, datetime, datetime-local, date, month, time, week, number, email, url, search i tel)
min, max
input (typy datetime, datetime-local, date, month, time, week, number i range)
pattern
input (typy text, password, email, url, search i tel)
Sprawdzenie, czy użytkownik podał wartość Najprostszy rodzaj weryfikacji danych wejściowych polega na sprawdzeniu, czy użytkownik podał wartość. Robi się to przy użyciu atrybutu required. Użytkownik nie może zatwierdzić formularza, dopóki nie poda takiej wartości — nie ma jednak żadnych ograniczeń co do tego, jaka ta wartość ma być. W listingu 14.6 widnieje przykład zastosowania atrybutu required. Listing 14.6. Zastosowanie atrybutu required
Przykład
Imię:
Hasło:
Akceptuję zasady i warunki
318
ROZDZIAŁ 14. INNE ELEMENTY FORMULARZY I WERYFIKACJA DANYCH WEJŚCIOWYCH
W listingu 14.6 nadałem atrybut required elementom input trzech typów. Użytkownik nie może wysłać formularza, dopóki nie poda wszystkich wartości. W przypadku typów text i password oznacza to, że użytkownik musi podać tekst w obydwu polach, a w przypadku elementu typu checkbox — zaznaczyć kratkę. Wskazówka Domyślna wartość określona atrybutem value spełnia warunek weryfikacji required. Jeżeli chcesz, żeby użytkownik sam musiał podać wartość, rozważ skorzystanie z atrybutu placeholder zamiast value. W rozdziale 12. przeczytasz więcej na ich temat.
Każda przeglądarka, która obsługuje weryfikację danych, robi to nieco inaczej, ale efekt zwykle jest jednakowy: kiedy użytkownik klika przycisk zatwierdzający formularz, pierwszy element, który jest oznaczony atrybutem required, a któremu nie podano wartości, zostaje oznaczony, by użytkownik zwrócił nań uwagę, wprowadził poprawkę i ponownie zatwierdził formularz. Jeżeli w formularzu występują jeszcze jakieś przeoczenia, to kolejny taki element zostaje zaznaczony. Proces ten powtarza się aż do momentu, kiedy wszystkim elementom oznaczonym atrybutem required zostają nadane wartości. Na rysunku 14.6 widać, jak Google Chrome zwraca uwagę użytkownika na przeoczenie.
Rysunek 14.6. Google Chrome zwraca uwagę użytkownika na wymagane pole System weryfikacji danych wejściowych w HTML5 jest stosunkowo mało rozwinięty, zwłaszcza jeśli jest się przyzwyczajonym do bardziej rozbudowanych funkcji oferowanych przez biblioteki w rodzaju jQuery. Przykładowo, w HTML5 problemy z danymi wejściowymi wskazywane są użytkownikowi po kolei. Jeżeli więc w formularzu jest wiele błędów, to użytkownik zmuszony jest je kolejno odkrywać i poprawiać przy każdej próbie ich zatwierdzenia. Nie ma żadnego ogólnego spisu błędów ani możliwości określenia wyglądu informacji o błędach.
Sprawdzenie, czy wartość mieści się w podanym zakresie Atrybutami min i max możesz się posłużyć, by dopilnować, aby wartości liczbowe i daty mieściły się w określonym przedziale. W listingu 14.7 przypisałem te atrybuty elementowi input typu number. Listing 14.7. Zastosowanie atrybutów min i max
Przykład
319
ROZDZIAŁ 14. INNE ELEMENTY FORMULARZY I WERYFIKACJA DANYCH WEJŚCIOWYCH
Imię:
Hasło:
Cena za sztukę w Twoim sklepie:
Nie trzeba definiować obydwu tych atrybutów. Możesz wprowadzić sam górny limit wartości atrybutem max albo sam dolny limit atrybutem min. Kiedy używasz ich obydwu, ograniczasz wybór do określonego przedziału. Wartości min i max są inkluzywne — przy atrybucie max o wartości 100 można podać dowolną wartość do 100 włącznie.
Na rysunku 14.7 widnieje wskazanie błędu w związku z zakresem wartości.
Rysunek 14.7. Błąd zakresu wartości Wskazówka Atrybuty min i max wpływają na weryfikację danych tylko wtedy, kiedy użytkownik podaje jakąś wartość. Przeglądarka pozwala bowiem użytkownikowi na zatwierdzenie formularza, kiedy pole tekstowe jest puste. Z tego względu często używa się tych atrybutów w połączeniu z atrybutem required, który omówiłem w poprzednim punkcie.
320
ROZDZIAŁ 14. INNE ELEMENTY FORMULARZY I WERYFIKACJA DANYCH WEJŚCIOWYCH
Sprawdzenie, czy wartość jest zgodna z wyrażeniem regularnym Atrybut pattern służy do sprawdzenia, czy wartość jest zgodna z wyrażeniem regularnym. W listingu 14.8 widnieje przykład jego zastosowania. Listing 14.8. Zastosowanie atrybutu pattern
Przykład
Imię:
Hasło:
W listingu 14.8 podałem prosty wzorzec, który ma zapewniać, by użytkownik podawał imię i nazwisko, oddzielone od siebie spacją. Nie jest to dobry sposób weryfikacji tego, czy podana wartość rzeczywiście jest imieniem, ponieważ wzorzec ten nie pasuje do zróżnicowania zapisu imion, ale dobrze ukazuje obsługę weryfikacji. Wygląd błędu weryfikacji widać na rysunku 14.8.
Rysunek 14.8. Błąd w weryfikacji wzorca Wskazówka Atrybut pattern wpływa na weryfikację danych tylko wtedy, kiedy użytkownik podaje jakąś wartość. Przeglądarka pozwala bowiem użytkownikowi na zatwierdzenie formularza, kiedy pole tekstowe jest puste. Z tego względu często używa się tego atrybutu w połączeniu z atrybutem required, który omówiłem wcześniej.
321
ROZDZIAŁ 14. INNE ELEMENTY FORMULARZY I WERYFIKACJA DANYCH WEJŚCIOWYCH
Sprawdzenie, czy wartość jest adresem e-mailowym lub URL Typy email i url elementu input, które omówiłem w rozdziale 13., pozwalają zapewnić, by użytkownik podał poprawny adres e-mailowy lub w pełni kwalifikowany adres URL, choć nie do końca — o ile obsługa typu email jest w miarę dobra, to typu url mogłaby być zdecydowanie lepsza. Takim elementom input można nadawać atrybut pattern, by dodatkowo ograniczyć wartości, które użytkownik może podać, np. adresy e-mailowe do określonej domeny. W listingu 14.9 widnieje tego przykład. Listing 14.9. Zastosowanie atrybutu pattern z elementem input typu email
Przykład
Imię:
Hasło:
Adres e-mail:
W listingu 14.9 wykorzystałem trzy rodzaje funkcji weryfikacyjnych. Nadanie elementowi input typu email zapewnia, że użytkownik poda prawidłowy adres e-mailowy. Atrybut required sprawia, że użytkownik musi podać jakąś wartość. Atrybut pattern pozwala zapewnić, by użytkownik podał adres e-mailowy z określonej domeny (domena.com). Dołączenie atrybutu pattern do elementu input typu email może się wydawać zbędne, ale element input mimo to sprawdza, czy wartość podana przed znakiem @ jest poprawną treścią adresu e-mailowego.
Dezaktywacja weryfikacji danych Czasami zdarzają się sytuacje, w których wolałbyś pozwolić użytkownikowi na wysłanie formularza bez uprzedniej weryfikacji treści, np. kiedy użytkownik chce zapisać postępy nieukończonego procesu. Chcesz, by użytkownik mógł zapisać te dane, które już podał, żeby później wznowić pracę. Byłoby to dość frustrujące, gdyby trzeba było najpierw poprawić wszystkie błędy.
322
ROZDZIAŁ 14. INNE ELEMENTY FORMULARZY I WERYFIKACJA DANYCH WEJŚCIOWYCH
Zatwierdzenie formularza bez weryfikacji można umożliwić, nadając atrybut novalidate elementowi form albo atrybut formnovalidate tym typom elementów button i input, które pozwalają na wysyłanie formularzy. W listingu 14.10 widnieje przykład dezaktywacji weryfikacji. Listing 14.10. Dezaktywacja weryfikacji danych
Przykład
Imię:
Hasło:
Adres e-mail:
W tym przykładzie umieściłem w dokumencie element input, który służy do wysłania formularza bez weryfikacji, co pozwala użytkownikowi na zapisanie postępów — rzecz jasna, o ile serwer przyjmuje dane z przeglądarki bez weryfikacji.
Podsumowanie W tym rozdziale przedstawiłem Ci pozostałe elementy formularzy i pokazałem funkcje weryfikacji danych, które pojawiły się w HTML5.
323
ROZDZIAŁ 14. INNE ELEMENTY FORMULARZY I WERYFIKACJA DANYCH WEJŚCIOWYCH
324
ROZDZIAŁ 15
Osadzanie zasobów
W tym rozdziale przedstawię Ci elementy służące do osadzania zasobów w dokumentach HTML. Do tej pory skupiałem się przede wszystkim na wykorzystaniu elementów HTML do nadawania dokumentom struktury i znaczenia. Omówione w tym rozdziale elementy pozwolą Ci na dodatkowe wzbogacenie dokumentów. Uwaga Niektóre z elementów HTML5, które służą do osadzania zasobów, omawiam w innych częściach książki. Więcej szczegółów na ten temat poznasz w punkcie „Inne elementy osadzające”.
W tabeli 15.1 znajduje się streszczenie całego rozdziału. Tabela 15.1. Streszczenie rozdziału Problem
Rozwiązanie
Listing
Osadzenie obrazu w dokumencie HTML.
Użyj elementu img lub object.
15.1, 15.9
Utworzenie odnośnika graficznego.
Osadź element img w elemencie a.
15.2
Utworzenie mapy obrazu działającej po stronie klienta.
Użyj elementu img lub object w połączeniu z elementami map i area.
15.3, 15.4, 15.10
Osadzenie innego dokumentu HTML.
Użyj elementu iframe.
15.5
Osadzenie zasobów przy użyciu wtyczki.
Użyj elementu embed lub object.
15.6 – 15.8
Utworzenie kontekstu przeglądania.
Użyj elementu object z atrybutem name, którego wartość określa nazwę kontekstu przeglądania.
15.11
Osadzenie zasobów audiowizualnych bez konieczności użycia wtyczki.
Użyj elementów audio, video, source i track. Więcej na ten temat przeczytasz w rozdziale 34.
—
Osadzenie grafiki w dokumencie HTML.
Użyj elementu canvas. Więcej na ten temat przeczytasz w rozdziałach 35. i 36.
—
ROZDZIAŁ 15. OSADZANIE ZASOBÓW
Osadzanie obrazów Element img umożliwia osadzenie obrazu w dokumencie HTML. Opis tego powszechnie używanego elementu HTML znajduje się w tabeli 15.2. Tabela 15.2. Element img Element
img
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą
Atrybuty lokalne
src, alt, height, width, usemap, ismap
Zawartość
Brak
Znaczniki
Samotny znacznik
Nowość w HTML5
Nie
Zmiany w HTML5
W HTML5 atrybuty border, longdesc, name, align, hspace i vspace wyszły z użycia
Domyślny styl prezentacji
Brak
Przy osadzaniu obrazu należy skorzystać z atrybutów src i alt, tak jak w listingu 15.1. Listing 15.1. Osadzanie obrazu
Przykład
Oto typowy symbol trzech konkurencji triathlonu.
Pierwszy symbol przedstawia pływanie, drugi kolarstwo, a trzeci bieganie.
Atrybut src wskazuje adres URL obrazu do osadzenia. W tym przypadku podałem URL względny do pliku graficznego triathlon.png. Atrybut alt określa treść zastępczą elementu img. Owa treść wyświetlana jest, kiedy z jakiegoś powodu niemożliwe jest wyświetlenie obrazu, np. dlatego, że nie można go zlokalizować, przeglądarka nie obsługuje jego formatu albo że przeglądarka lub urządzenie w ogóle nie wyświetla obrazów. Osadzony obraz widać na rysunku 15.1. Atrybuty width i height służą do określenia (mierzonego w pikselach) rozmiaru obrazu wyświetlanego elementem img. Obrazy wczytywane są dopiero po zinterpretowaniu całego kodu HTML — oznacza to, że w przypadku pominięcia tych atrybutów przeglądarka nie wie, ile miejsca na ekranie przeznaczyć na wyświetlenie obrazu. Przeglądarka w takiej sytuacji określa rozmiar obrazu na podstawie samego pliku, a następnie odpowiednio przestawia resztę treści. Takie zachowanie może być irytujące dla użytkownika, który już zaczął czytać treść zawartą w samym dokumencie HTML. Określając atrybuty width i height, pozwalasz przeglądarce na odpowiednie rozmieszczenie treści na stronie, pomimo że same obrazy wczytywane są na końcu.
326
ROZDZIAŁ 15. OSADZANIE ZASOBÓW
Rysunek 15.1. Osadzenie obrazu przy użyciu elementu img Ostrzeżenie Atrybuty width i height służą do wskazywania rzeczywistego rozmiaru obrazu, a nie takiego, jaki byś chciał. Nie należy ich używać do zmiany wielkości obrazów.
Osadzanie odnośników graficznych Elementu img używa się powszechnie w połączeniu z elementem a (opisanym w rozdziale 8.) do tworzenia odnośników graficznych. Takie odnośniki są odpowiednikami przycisków graficznych w formularzach, które omówiłem w rozdziale 12. W listingu 15.2 widnieje przykład zastosowania elementu img z elementem a. Listing 15.2. Zastosowanie elementów img i a do utworzenia mapy obrazkowej działającej po stronie serwera
Przykład
Oto typowy symbol trzech konkurencji triathlonu.
Pierwszy symbol przedstawia pływanie, drugi kolarstwo, a trzeci bieganie.
Jak widać na rysunku 15.2, przeglądarka nie wyświetla obrazu inaczej. Ważne jest zatem wskazanie użytkownikowi, że dany obraz jest odnośnikiem. Można to zrobić, używając CSS lub — lepiej — samej zawartości obrazu. Po kliknięciu obrazu przeglądarka przechodzi do adresu URL podanego dla atrybutu href elementu-rodzica a. Przypisując elementowi img atrybut ismap, tworzysz mapę obrazu przetwarzaną po stronie serwera, co sprawia, że kliknięty punkt obrazu dodawany jest do adresu URL. Przykładowo, kliknięcie
327
ROZDZIAŁ 15. OSADZANIE ZASOBÓW
Rysunek 15.2. Osadzenie obrazu w odnośniku obrazu w punkcie znajdującym się cztery piksele od górnego i dziesięć pikseli od lewego krańca obrazu skutkuje tym, że przeglądarka przechodzi pod następujący adres: http://titan/pliki/otherpage.html?10,4
Jest to — rzecz jasna — adres właściwy dla dokumentu wczytanego z mojego serwera titan, ponieważ adres podany w atrybucie href elementu a jest względnym adresem URL. W listingu 15.3 widnieje treść strony otherpage.html, zawierającej prosty skrypt, który wyświetla współrzędne miejsca kliknięcia. Listing 15.3. Zawartość strony otherpage.html
Druga strona
Współrzędna X: ??
Współrzędna Y: ??
Wynik kliknięcia widać na rysunku 15.3.
Rysunek 15.3. Współrzędne miejsca kliknięcia obrazu osadzonego w odnośniku Założeniem przyświecającym korzystaniu z mapy obrazu działającej po stronie serwera jest to, że serwer powinien reagować inaczej w zależności od tego, który obszar obrazu użytkownik kliknie — np. zwracać różne odpowiedzi. Kiedy element img pozbawiony jest atrybutu ismap, współrzędne kliknięcia nie są dołączane do adresu URL.
328
ROZDZIAŁ 15. OSADZANIE ZASOBÓW
Tworzenie mapy obrazu działającej po stronie klienta Możliwe jest utworzenie mapy obrazu działającej po stronie klienta, której klikanie w różne miejsca sprawia, że przeglądarka przechodzi pod różne adresy URL. Dzieje się to bez jakiejkolwiek obsługi ze strony serwera, wobec czego obszary obrazu i wykonywane czynności trzeba definiować przy użyciu elementów HTML. Podstawowym elementem mapy obrazu po stronie klienta jest map, który opisuję w tabeli 15.3. Tabela 15.3. Element map Element
map
Typ elementu
Uznawany jest za element treściowy, kiedy zawiera treść właściwą lub elementy treściowe, a za element struktury, kiedy zawiera elementy struktury
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą lub strukturalną
Atrybuty lokalne
name
Zawartość
Jeden lub więcej elementów area
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
Przypisany elementowi atrybut id musi mieć tę samą wartość, co atrybut name
Domyślny styl prezentacji
Brak
Element map zawiera jeden lub więcej elementów area, które wskazują klikalne obszary obrazu. Opis elementu area znajduje się w tabeli 15.4. Tabela 15.4. Element area Element
area
Typ elementu
Treściowy
Dozwoleni rodzice
Element map
Atrybuty lokalne
alt, href, target, rel, media, hreflang, type, shape, coords
Zawartość
Brak
Znaczniki
Samotny znacznik
Nowość w HTML5
Nie
Zmiany w HTML5
W HTML5 wprowadzono atrybuty rel, media i hreflang. Atrybut nohref wyszedł z użycia.
Domyślny styl prezentacji
area { display: none; }
Atrybuty elementu area można podzielić na dwie kategorie. Do pierwszej należą te dotyczące adresu URL, do którego przechodzi przeglądarka, kiedy użytkownik klika obszar obrazu zdefiniowany elementem area. Te atrybuty, które opisuję w tabeli 15.5, przypominają w działaniu swoje odpowiedniki obsługiwane przez inne elementy. Ciekawsze są jednak atrybuty wchodzące w skład drugiej kategorii: shape i coords, które służą wskazywaniu klikalnych obszarów obrazu. Atrybuty shape i coords działają w zestawieniu. Znaczenie atrybutu coords zależne jest od wartości atrybutu shape, co opisuję w tabeli 15.6.
329
ROZDZIAŁ 15. OSADZANIE ZASOBÓW
Tabela 15.5. Odnoszące się do adresu docelowego atrybuty elementu area Atrybut
Opis
href
Adres URL, do którego przechodzi przeglądarka po kliknięciu obszaru.
alt
Treść zastępcza. Por. atrybut elementu img o tej samej nazwie.
target
Kontekst przeglądania, w jakim adres URL ma być wyświetlony. Por. atrybut elementu base o tej samej nazwie (rozdział 7.).
rel
Opisuje relację pomiędzy dokumentem bieżącym a docelowym. Por. atrybut elementu link o tej samej nazwie (rozdział 7.).
media
Medium, w którym dany obszar jest obsługiwany. Por. atrybut elementu style o tej samej nazwie (rozdział 7.).
hreflang
Język dokumentu docelowego.
type
Typ MIME dokumentu docelowego.
Tabela 15.6. Wartości atrybutów shape i coords Wartość shape
Charakter i znaczenie wartości coords
rect
Ta wartość określa prostokątny obszar. Atrybut coords musi się składać z czterech oddzielonych przecinkami liczb całkowitych, określających odległość pomiędzy: • lewą krawędzią obrazu a lewą krawędzią prostokąta, • górną krawędzią obrazu a górną krawędzią prostokąta, • lewą krawędzią obrazu a prawą krawędzią prostokąta, • górną krawędzią obrazu a dolną krawędzią prostokąta.
circle
Ta wartość określa kolisty obszar. Atrybut coords musi się składać z trzech oddzielonych przecinkami liczb całkowitych, określających: • odległość pomiędzy lewą krawędzią obrazu a punktem środkowym koła, • odległość pomiędzy górną krawędzią obrazu a punktem środkowym koła, • promień koła.
poly
Ta wartość określa wielokątny obszar. Atrybut coords musi się składać z przynajmniej sześciu oddzielonych przecinkami liczb całkowitych, gdzie każda para określa jeden z punktów wielokąta.
default
Ta wartość wskazuje domyślny obszar, który obejmuje cały obraz. Atrybutowi coords nie trzeba nadawać żadnej wartości, kiedy atrybutowi shape przypisana jest wartość default.
Skoro już opisałem elementy, to mogę podać przykład ich użycia. Przedstawienie mapy obrazu jest problematyczne o tyle, że elementy area nie są widoczne na ekranie. Na rysunku 15.4 widać zatem dwa obszary obrazu triathlon.png, które chcę określić. W celu uproszczenia tego procesu postanowiłem nadać tym obszarom kształt prostokątny.
Rysunek 15.4. Rozplanowanie obszarów mapy obrazu Na podstawie tego planu można utworzyć mapę i obszary, tak jak w listingu 15.4.
330
ROZDZIAŁ 15. OSADZANIE ZASOBÓW
Listing 15.4. Utworzenie mapy obrazu
Przykład
Oto typowy symbol trzech konkurencji triathlonu.
Pierwszy symbol przedstawia pływanie, drugi kolarstwo, a trzeci bieganie.
Zwróć uwagę na to, że przypisałem elementowi img atrybut usemap. Wartością tego atrybutu musi być skrót, czyli ciąg zaczynający się od kratki (#), po której następuje wartość atrybutu name mapy, którą chcesz wykorzystać — w tym przypadku jest to #mymap. W ten sposób łączy się element map z obrazem. Kiedy użytkownik klika symbol pływania, przeglądarka przechodzi do strony swimpage.html. Kiedy użytkownik klika symbol kolarstwa, przeglądarka przechodzi do strony cyclepage.html. Kliknięcie jakiegokolwiek innego obszaru obrazu skutkuje przejściem do strony otherpage.html. Wskazówka Zauważ, że do tworzenia odnośników z mapami obrazu działającymi po stronie klienta nie trzeba używać elementu a.
Osadzanie innych dokumentów HTML Element iframe pozwala na osadzenie jednego dokumentu HTML w drugim. W tabeli 15.7 widnieje opis tego elementu. Tabela 15.7. Element iframe Element
iframe
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą
Atrybuty lokalne
src, srcdoc, name, width, height, sandbox, seamless
Zawartość
Treść tekstowa
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
W HTML5 wprowadzono atrybuty sandbox i seamless. Atrybuty longdesc, align, allowtransparency, frameborder, marginheight, marginwidth i scrolling wyszły z użycia.
Domyślny styl prezentacji
iframe { border: 2px inset; }
331
ROZDZIAŁ 15. OSADZANIE ZASOBÓW
W listingu 15.5 widnieje przykład zastosowania elementu iframe. Listing 15.5. Zastosowanie elementu iframe
Przykład
Rzeczy, które lubię
- Moje ulubione owoce
- Moje ulubione sporty
W tym przykładzie utworzyłem element iframe z atrybutem name o wartości frame. Tworzy to kontekst przeglądania o nazwie myframe. Mogę teraz wykorzystać ten kontekst przeglądania jako wartość atrybutu target innych elementów, a konkretnie a, form, button, input i base. Elementu a używam do utworzenia pary odnośników, które wczytują w elemencie iframe adresy URL określone dla ich atrybutów href. Widać to na rysunku 15.5.
Rysunek 15.5. Zastosowanie elementu iframe do osadzania zewnętrznych dokumentów HTML Atrybuty width i height określają rozmiar ramki w pikselach. Atrybut src określa adres URL, który jest wyświetlany po wczytaniu strony, a atrybut srcdoc pozwala na określenie zawartości ramki w kodzie strony.
332
ROZDZIAŁ 15. OSADZANIE ZASOBÓW
W HTML5 wprowadzono dwa nowe atrybuty elementu iframe. Pierwszy, seamless, nakazuje przeglądarce wyświetlać treści iframe tak, jakby były integralną częścią głównego dokumentu HTML. Na powyższym rysunku widać, że ramka domyślnie ma obramowanie i że w sytuacji, kiedy treść zajmuje więcej miejsca niż obszar określony atrybutami width i height, w ramce pojawia się pasek przewijania. Drugi atrybut, sandbox, nakłada na dokument HTML pewne ograniczenia. Kiedy element iframe opatrzony jest tym atrybutem bez żadnej określonej wartości, jak widać poniżej: ...
...
to w dokumencie wyłączone są następujące obiekty: • skrypty, • formularze, • wtyczki, • linki odnoszące się do innych kontekstów przeglądania. Ponadto, zawartość elementu iframe traktowana jest tak, jakby pochodziła z innego źródła niż reszta treści dokumentu HTML, przez co uwzględniane są dodatkowe zabezpieczenia. Poszczególne funkcje można odblokować, przypisując atrybutowi sandbox określone wartości: ...
...
W tabeli 15.8 znajdują się dopuszczalne wartości. Niestety, kiedy piszę te słowa, żadna z popularnych przeglądarek nie obsługuje atrybutów sandbox i seamless, przez co nie mogę podać przykładów ich zastosowania. Tabela 15.8. Wartości allow atrybutu sandbox elementu iframe Wartość
Opis
allow-forms
Uaktywnia formularze.
allow-scripts
Uaktywnia skrypty.
allow-top-navigation
Uaktywnia linki odnoszące się do kontekstów przeglądania najwyższego poziomu, co pozwala na przejście do innego dokumentu bądź otworzenie nowej zakładki lub okna.
allow-same-origin
Sprawia, że zawartość elementu iframe traktowana jest tak, jakby była pobrana z tego samego źródła, co reszta dokumentu.
Osadzanie zasobów przy użyciu wtyczek Elementy object i embed powstały w celu rozszerzenia możliwości oferowanych przez przeglądarki, poprzez dodanie obsługi wtyczek przetwarzających te treści, których przeglądarki nie przetwarzały samodzielnie. Elementy te wprowadzono w czasach wojen przeglądarek, o których wspomniałem w rozdziale 1., przy czym każdy z nich został stworzony przez inną stronę konfliktu. Do niedawna specyfikacja HTML 4 uwzględniała element object, ale nie embed, pomimo że był on szeroko używany. Aby wyrównać znaczenie tych elementów, w HTML5 wprowadzono obsługę embed. Możesz zatem korzystać z dwóch bardzo podobnych elementów, których obecność w specyfikacji służy zapewnieniu kompatybilności.
333
ROZDZIAŁ 15. OSADZANIE ZASOBÓW
Choć elementów object i embed używa się na ogół do obsługi wtyczek, można je też wykorzystywać do osadzania treści przetwarzanych bezpośrednio przez przeglądarkę, np. obrazów. W dalszej części tego podrozdziału pokażę Ci, dlaczego bywa to przydatne.
Zastosowanie elementu embed Zacznę od opisania elementu embed w tabeli 15.9. Tabela 15.9. Element embed Element
embed
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą
Atrybuty lokalne
src, type, height, width
Zawartość
Brak
Znaczniki
Samotny znacznik
Nowość w HTML5
Tak, choć od lat był szeroko używanym elementem, mimo że nieuwzględnionym w specyfikacji
Zmiany w HTML5
Nie dotyczy
Domyślny styl prezentacji
Brak
W listingu 15.6 widać przykład zastosowania elementu embed. Osadziłem tu film z www.youtube.com, w którym inżynierzy Google’a opowiadają o HTML5. Listing 15.6. Zastosowanie elementu embed
Przykład
Atrybut src określa lokalizację treści, a atrybut type jej typ MIME, dzięki czemu przeglądarka wie, co z nią zrobić. Atrybuty width i height określają obszar, jaki osadzone zasoby mają zajmować na ekranie. Wszelkie inne nadane atrybuty traktowane są jako parametry wtyczki obsługującej zasoby. W tym przypadku nadałem elementowi atrybut allowfullscreen, dzięki któremu można puścić film z wtyczki YouTube na całym ekranie. Wygląd tych treści widać na rysunku 15.6.
Zastosowanie elementów object i param Element object służy do tego samego, co element embed, ale działa nieco inaczej i ma pewne dodatkowe funkcje. W tabeli 15.10 znajduje się opis elementu object.
334
ROZDZIAŁ 15. OSADZANIE ZASOBÓW
Rysunek 15.6. Osadzenie filmu z YouTube Tabela 15.10. Element object Element
object
Typ elementu
Uznawany jest za element treściowy, kiedy zawiera treść właściwą lub elementy treściowe, a za element struktury, kiedy zawiera elementy struktury
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą lub strukturalną
Atrybuty lokalne
data, type, height, width, usemap, name, form
Zawartość
Dowolna liczba elementów param (choć żaden nie jest wymagany) i opcjonalne treści właściwe lub strukturalne jako treści zastępcze. W dalszej części rozdziału zapoznasz się z przykładem.
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Nie
Zmiany w HTML5
W HTML5 pojawił się atrybut form. Elementy archive, classid, code, codebase, codetype, declare, standby, align, hspace, vspace i border wyszły z użycia.
Domyślny styl prezentacji
Brak
W listingu 15.7 widnieje przykład wykorzystania elementu object do osadzenia tego samego filmu z YouTube, co w poprzednim przykładzie. Listing 15.7. Zastosowanie elementów object i param
Przykład
335
ROZDZIAŁ 15. OSADZANIE ZASOBÓW
Atrybut data określa lokalizację zasobów, a type, width i height działają tak samo, jak w elemencie embed. Parametry przekazywane wtyczce definiuje się przy użyciu elementu param. Każdy element param definiuje jeden parametr. Element ten opisany jest w tabeli 15.11. Atrybuty name i value określają nazwę i wartość parametru. Tabela 15.11. Element param Element
param
Typ elementu
Nie dotyczy
Dozwoleni rodzice
Element object
Atrybuty lokalne
name, value
Zawartość
Brak
Znaczniki
Samotny znacznik
Nowość w HTML5
Nie
Zmiany w HTML5
Brak
Domyślny styl prezentacji
param { display: none; }
Określenie treści zastępczej Jedną z zalet elementu object jest to, że można w nim podać treść wyświetlaną w sytuacji, kiedy określone zasoby nie są dostępne. W listingu 15.8 widnieje prosty przykład. Listing 15.8. Wykorzystanie treści zastępczej elementu object
Przykład
Ojej! Nie można wyświetlić tych zasobów
W powyższym przykładzie wskazałem w atrybucie data nieistniejący plik. Przeglądarka usiłuje wczytać nieistniejące zasoby i — kiedy jej się to nie udaje — wyświetla zamiast niej treść zawartą w elemencie object. Elementy param są w takiej sytuacji ignorowane, wobec czego na ekranie pojawia się jedynie treść właściwa i strukturalna, tak jak widać to na rysunku 15.7.
336
ROZDZIAŁ 15. OSADZANIE ZASOBÓW
Rysunek 15.7. Treść zastępcza elementu object Zauważ, że pominąłem w listingu atrybut type. Kiedy żaden taki atrybut nie jest obecny, przeglądarka próbuje określić typ zasobów na podstawie samych danych. Przy niektórych zestawieniach przeglądarek i wtyczek wtyczka i tak jest wczytywana, nawet jeśli nie można wyświetlić zawartej w niej treści. Wtedy na ekranie pojawia się pusty obszar, a treść zastępcza nie jest wykorzystana.
Inne zastosowania elementu object Choć elementu object używa się zazwyczaj do osadzania zasobów obsługiwanych przez wtyczki, utworzono go pierwotnie jako ogólny element mający zastępować inne elementy, m.in. img. W kolejnych punktach opiszę niektóre z innych sposobów na wykorzystanie tego elementu. Pomimo że funkcje te były obecne od jakiegoś czasu w specyfikacji HTML, nie każda przeglądarka obsługuje wszystkie z nich. Poniższe punkty uwzględniam tutaj dla porządku, ale mimo wszystko zalecam korzystać z bardziej wyspecjalizowanych elementów, takich jak s. Wskazówka Atrybut form umożliwia powiązanie elementu object z formularzami HTML (o których traktował rozdział 12.). Jest to nowość w HTML5. Obecnie żadna przeglądarka nie obsługuje tego atrybutu, a specyfikacja HTML5 nie mówi nic konkretnego o tym, jak ta funkcja miałaby działać.
Zastosowanie elementu object do osadzania obrazów Jak już wspomniałem, element object powstał m.in. po to, żeby zastępować elementy img. Możesz wobec tego używać elementu object do zamieszczania obrazów w dokumentach HTML. W listingu 15.9 widnieje przykład. Listing 15.9. Osadzenie obrazu przy użyciu elementu object
Przykład
W powyższym przykładzie odniosłem atrybut data do pliku graficznego, z którego korzystałem w poprzednich przykładach. Przeglądarka osadza obraz i wyświetla go tak samo, jak gdybym użył elementu img (rysunek 15.8).
337
ROZDZIAŁ 15. OSADZANIE ZASOBÓW
Rysunek 15.8. Osadzenie obrazu przy użyciu elementu object
Zastosowanie elementu object do tworzenia map obrazu działających po stronie klienta Elementu object możesz również używać do tworzenia map obrazu działających po stronie klienta. Atrybut usemap służy do powiązania elementu map z elementem object, tak jak widać to w listingu 15.10. Wykorzystałem do tego te same elementy map i area, których użyłem w tworzeniu mapy opartej na elemencie img. Listing 15.10. Utworzenie mapy obrazu działającej po stronie klienta przy użyciu elementu object
Przykład
Ostrzeżenie Nie wszystkie przeglądarki obsługują mapy obrazu oparte na elemencie object. Kiedy piszę te słowa, takiej obsługi pozbawiony jest Google Chrome i Apple Safari.
Zastosowanie elementu object jako kontekstu przeglądania Elementu object można użyć do osadzenia jednego dokumentu HTML w drugim, tak samo jak przy użyciu elementu iframe. Wykorzystanie atrybutu name tworzy kontekst przeglądania, który można wykorzystać z atrybutem target innych elementów, takich jak a i form. W listingu 15.11 widnieje tego przykład. Listing 15.11. Utworzenie kontekstu przeglądania przy użyciu elementu object
338
ROZDZIAŁ 15. OSADZANIE ZASOBÓW
Przykład
Rzeczy, które lubię
- Moje ulubione owoce
- Moje ulubione sporty
Funkcja ta działa tylko wtedy, kiedy wartość atrybutu type określona jest jako text/html, choć i tak nie wszystkie przeglądarki ją obsługują. W chwili, kiedy to piszę, Google Chrome i Apple Safari to jedyne popularne przeglądarki, które oferują taką obsługę.
Osadzanie wyobrażeń wartości liczbowych W HTML5 pojawiły się dwa nowe elementy, które pozwalają na zamieszczanie w dokumentach wyobrażeń wartości liczbowych.
Paski postępu Element progress służy do wskazywania postępów w ukończeniu zadania. W tabeli 15.12 znajduje się opis tego elementu. Tabela 15.12. Element progress Element
progress
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą
Atrybuty lokalne
value, max, form
Zawartość
Treść właściwa
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Tak
Zmiany w HTML5
Nie dotyczy
Domyślny styl prezentacji
Brak
339
ROZDZIAŁ 15. OSADZANIE ZASOBÓW
Atrybut value określa progresję w skali od zera do wartości atrybutu max. Kiedy atrybut max jest pominięty, skala rozciąga się od zera do 1. Postępy można wyrażać liczbami zmiennoprzecinkowymi w rodzaju 0.3 lub 30%. W listingu 15.12 widnieje element progress wraz z kilkoma przyciskami. Naciśnięcie przycisku zmienia wartość wyświetlaną przez element progress. Przyciski z elementem progress połączyłem za pomocą prostego kodu JavaScript. Wykorzystane tutaj techniki opiszę w części IV książki. Listing 15.12. Zastosowanie elementu progress
Przykład
30% 60% 90%
Wygląd paska postępu wyświetlającego kolejne wartości widać na rysunku 15.9.
Rysunek 15.9. Zastosowanie elementu progress
Przedstawienie wartości z zakresu Element meter służy do wyświetlania wartości w kontekście zakresu dopuszczalnych wartości. W tabeli 15.13 znajduje się jego opis.
340
ROZDZIAŁ 15. OSADZANIE ZASOBÓW
Tabela 15.13. Element meter Element
meter
Typ elementu
Treściowy
Dozwoleni rodzice
Dowolny element, który może zawierać treść właściwą
Atrybuty lokalne
value, min, max, low, high, optimum, form
Zawartość
Treść właściwa
Znaczniki
Znacznik otwierający i zamykający
Nowość w HTML5
Tak
Zmiany w HTML5
Nie dotyczy
Domyślny styl prezentacji
Brak
Atrybuty min i max określają wartości krańcowe zakresu i można je definiować liczbami zmiennoprzecinkowymi. Element meter wyświetlany jest w trzech stanach: „za mało”, „za dużo” i „prawidłowo”. Atrybut low określa wartość, poniżej której podawane wartości uznawane są za zbyt niskie, a atrybut high wartość, powyżej której wartości uznawane są za zbyt wysokie. Atrybutem optimum określa się „prawidłową” wartość. W listingu 15.13 widać przykład zastosowania tych atrybutów z elementem meter. Listing 15.13. Zastosowanie elementu meter
Przykład
30 60 90
W tym przykładzie elementy button nadają atrybutowi value elementu meter wartości znajdujące się we wszystkich trzech zakresach. Wygląd tego elementu w przeglądarce widać na rysunku 15.10.
341
ROZDZIAŁ 15. OSADZANIE ZASOBÓW
Rysunek 15.10. Zastosowanie elementu meter Atrybut optimum obecnie nie decyduje w żaden sposób o wyglądzie elementu meter. Przeglądarki obsługujące element meter odróżniają pod tym względem jedynie wartości niższe od wartości low i wyższe od wartości high, jak zresztą widać na rysunku.
Osadzanie innych elementów Do osadzania zasobów w dokumentach HTML służą też inne elementy, które omówię w dalszych rozdziałach. Dla porządku jednak wspominam o nich tutaj.
Osadzanie zasobów audiowizualnych W HTML5 znajduje się kilka nowych atrybutów, które obsługują osadzanie zasobów audiowizualnych w dokumencie HTML bez użycia wtyczek: audio, video, source i track. Omówię je szerzej w rozdziale 34.
Osadzanie grafiki Element canvas jest kolejną ważną funkcją, którą wprowadzono w HTML5. Pozwala on na zamieszczanie w dokumentach HTML dynamicznej grafiki i omówię go w rozdziałach 35. i 36.
Podsumowanie W tym rozdziale przedstawiłem elementy służące do wzbogacania dokumentów HTML osadzonymi zasobami — od prostych obrazów po rozbudowane i rozszerzalne zasoby obsługiwane wtyczkami.
342
CZĘŚĆ III
Kaskadowe arkusze stylów
W tej części zademonstruję, jak wykorzystać kaskadowe arkusze stylów (CSS) do określania wyglądu treści wyświetlanych w przeglądarce. CSS bywa zdumiewająco subtelny i ekspresyjny oraz pozwala na zarządzanie wyglądem treści z zaskakująco niewielkim wysiłkiem.
ROZDZIAŁ 16
Wprowadzenie do CSS
W najbliższych rozdziałach omówię właściwości zdefiniowane w CSS, czyli kaskadowych arkuszach stylów. Podstawy CSS scharakteryzowałem pokrótce w rozdziale 4., a w tym rozdziale — zanim jeszcze przejdę do szczegółów — zajmę się pewnymi ogólnymi sprawami.
Standaryzacja CSS CSS ma skomplikowaną przeszłość. W czasach, kiedy przeglądarki traktowano jako produkty sprzyjające fragmentacji rynku, producenci wykorzystywali CSS jako główne narzędzie do tworzenia funkcji występujących wyłącznie w ich produktach. Był to niezły bałagan — właściwości o jednakowych nazwach obsługiwane były różnie, a właściwości właściwe dla danych przeglądarek służyły do obsługi funkcji poszczególnych przeglądarek. Chodziło o to, by zmusić deweloperów do tworzenia stron i aplikacji działających tylko w wybranej przeglądarce. Szczęśliwie, przeglądarki obecnie konkurują ze sobą głównie w dziedzinie szybkości, łatwości obsługi i — w coraz większym stopniu — zgodności ze standardami takimi jak CSS. Jednocześnie proces standaryzacji, niestety, nie jest idealny. Jak się przekonasz w kolejnych rozdziałach, funkcjonalność CSS jest rozbudowana. Zamiast tworzyć jednolity standard, W3C (instytucja odpowiedzialna za standaryzację zarówno CSS, jak i HTML) postanowiło podzielić CSS3 na moduły, które rozwijają się niezależnie od siebie. Założenie jest świetne i z pewnością lepsze od przestrzegania jednolitości, lecz w związku z tym nie ma żadnego ogólnego standardu CSS3. Trzeba wobec tego rozważać zastosowanie każdego z modułów po kolei i decydować, czy są wystarczająco powszechnie obsługiwane, by warto było z nich korzystać. Kolejnym utrudnieniem jest to, że mało który z modułów CSS3 przeszedł do końca proces standaryzacji. Niektóre moduły, a w szczególności te, które wprowadzają do CSS nowe funkcje, są dopiero na wczesnym etapie standaryzacji i mogą się jeszcze zmienić. Właściwości mogą się pojawiać, zmieniać i znikać; moduły mogą być łączone lub wycofywane; relacje pomiędzy poszczególnymi modułami też mogą się zmieniać, jako że właściwości i wartości stosowane w różnych modułach często bywają współzależne. Niektóre z nowszych funkcji mogły już ulec zmianie od czasu wydania tej książki. W kolejnych rozdziałach omówię właściwości modułów, które sprawiają wrażenie stabilnych i po których można się spodziewać szybkiej implementacji w popularnych przeglądarkach. Funkcje te są w większości stabilne i można spokojnie przyjąć, że są obsługiwane przez najnowsze wersje przeglądarek. Żeby pomóc Ci w rozeznaniu się, czy dana właściwość jest odpowiednia dla Twoich projektów, w punkcie „Spis właściwości” podałem wypis wersji CSS, w których właściwości zostały wprowadzone. W okresach większej niestabilności definicji modułów przeglądarki obsługują funkcje używające prefiksów właściwych dla poszczególnych przeglądarek. Mimo wszystko i tak jest lepiej niż dawniej — takie próbne implementacje pozwalają pionierom na sprawdzenie, jak przeglądarki obsługują poszczególne
ROZDZIAŁ 16. WPROWADZENIE DO CSS
zestawy właściwości. Sam zazwyczaj unikam korzystania z działających w ten sposób właściwości, lecz niektóre funkcje CSS3 są tak istotne, że w podanych tu przykładach zdecydowałem się skorzystać z owych prefiksów. We wszystkich przypadkach implementacje właściwe konkretnym przeglądarkom przystają dość dobrze do specyfikacji. Każda przeglądarka używa innego prefiksu. Prefiksy najpopularniejszych przeglądarek znajdziesz w tabeli 16.1. Tabela 16.1. Prefiksy przeglądarek Przeglądarka
Prefiks
Chrome Safari
-webkit-
Opera
-o-
Firefox
-moz-
Internet Explorer
-ms-
Model polowy Jedną z koncepcji leżących u podstaw CSS jest model polowy. Wyświetlany na stronie element zajmuje prostokątny obszar, określany mianem pola elementu. Składa się ono z czterech części, co widać na rysunku 16.1.
Rysunek 16.1. Model polowy CSS Widoczne są dwie części: zawartość elementu i jego obramowanie. Dopełnienie to przestrzeń pomiędzy treścią a obramowaniem, a margines to przestrzeń między obramowaniem a innymi znajdującymi się na stronie elementami. Relacje pomiędzy tymi czterema częściami trzeba poznać, aby móc używać CSS jak najsprawniej. W kolejnych rozdziałach przedstawię Ci właściwości CSS pozwalające na definiowanie marginesów, dopełnień, obramowań oraz określanie ogólnego wyglądu treści. Element może zawierać inne elementy. W takim przypadku pole elementu-rodzica jest kontenerem elementu-dziecka. Ta relacja ukazana jest na rysunku 16.2. Do określenia wyglądu elementu możesz wykorzystać właściwości kontenera — dotyczy to nie tylko kaskadowych i dziedziczonych właściwości, ale także właściwości definiowanych dosłownie, tak jak w przypadku tworzenia układu elementów (co omówię w rozdziale 21.).
Spis selektorów Selektory CSS opiszę szerzej w rozdziałach 17. i 18. W tabeli 16.2 znajduje się spis selektorów wraz z krótkimi opisami i wypisem wersji CSS, w których się pojawiły.
346
ROZDZIAŁ 16. WPROWADZENIE DO CSS
Rysunek 16.2. Relacja pól rodzica i jego dzieci Tabela 16.2. Selektory CSS Selektor
Opis
*
Wersja CSS
Wybiera wszystkie elementy.
2
Wybiera elementy określonego typu.
1
.
Wybiera elementy określonej klasy.
1
#
Wybiera elementy o określonej wartości atrybutu id.
1
[atrybut]
Wybiera elementy, którym przypisano dany atrybut, niezależnie od jego wartości.
2
[atrybut="wartość"]
Wybiera elementy, którym przypisano dany atrybut o określonej wartości.
2
[atrybut^="wartość"]
Wybiera elementy, którym przypisano dany atrybut o wartości zaczynającej się podanym ciągiem.
3
[atrybut$="wartość"]
Wybiera elementy, którym przypisano dany atrybut o wartości kończącej się podanym ciągiem.
3
[atrybut*="wartość"]
Wybiera elementy, którym przypisano dany atrybut o wartości zawierającej podany ciąg.
3
[atrybut~="wartość"]
Wybiera elementy, którym przypisano dany atrybut o różnych wartościach, w tym tej, którą podano w selektorze.
2
[atrybut|="wartość"]
Wybiera elementy, którym przypisano dany atrybut o serii oddzielonych dywizem wartości, spośród których pierwsza to ta, którą podano w selektorze.
2
,
Wybiera podane elementy.
1
Wybiera elementy określone drugim selektorem, a które są potomkami elementów określonych pierwszym selektorem.
1
>
Wybiera elementy określone drugim selektorem, które są dziećmi elementów określonych pierwszym selektorem.
2
347
ROZDZIAŁ 16. WPROWADZENIE DO CSS
Tabela 16.2. Selektory CSS — ciąg dalszy Selektor
Opis
Wersja CSS
+
Wybiera elementy określone drugim selektorem, a które znajdują się bezpośrednio po elemencie określonym pierwszym selektorem.
2
~
Wybiera elementy określone drugim selektorem, a które znajdują się po elemencie określonym pierwszym selektorem.
3
::first-line
Wybiera pierwszy wiersz bloku tekstowego.
1
::first-letter
Wybiera pierwszą literę bloku tekstowego.
1
:before :after
Wstawia treść przed wybranym elementem lub po nim.
2
:root
Wybiera element główny dokumentu.
3
:first-child
Wybiera elementy będące pierwszymi dziećmi swoich rodziców.
2
:last-child
Wybiera elementy będące ostatnimi dziećmi swoich rodziców.
3
:only-child
Wybiera elementy będące jedynymi dziećmi swoich rodziców.
3
:only-of-type
Wybiera elementy będące jedynymi określonego typu dziećmi swoich rodziców.
3
:nth-child(n)
Wybiera elementy będące n-tymi dziećmi swoich rodziców.
3
:nth-last-child(n)
Wybiera elementy będące od końca n-tymi dziećmi swoich rodziców.
3
:nth-of-type(n)
Wybiera elementy będące n-tymi określonego typu dziećmi swoich rodziców.
3
:nth-last-of-type(n)
Wybiera elementy będące n-tymi od końca określonego typu dziećmi swoich rodziców.
3
:enabled
Wybiera odblokowane elementy.
3
:disabled
Wybiera zablokowane elementy.
3
:checked
Wybiera zaznaczone elementy.
3
:default
Wybiera domyślne elementy.
3
:valid :invalid
Wybiera elementy input o poprawnych lub niepoprawnych danych, na podstawie weryfikacji.
3
:in-range :out-of-range
Wybiera elementy input o wartościach znajdujących się w określonym zakresie lub poza nim.
3
:required :optional
Wybiera elementy input na podstawie tego, czy mają nadany atrybut required.
3
:link
Wybiera odnośniki.
1
:visited
Wybiera odnośniki do adresów odwiedzonych przez użytkownika.
1
:hover
Wybiera elementy znajdujące się na ekranie pod kursorem.
2
:active
Wybiera elementy uaktywniane przez użytkownika. Zazwyczaj są to elementy znajdujące się pod kursorem, kiedy klawisz myszy jest przytrzymany.
2
348
ROZDZIAŁ 16. WPROWADZENIE DO CSS
Tabela 16.2. Selektory CSS — ciąg dalszy Selektor
Opis
Wersja CSS
:focus
Wybiera aktywny element.
2
:not()
Neguje wybór, np. wybiera wszystkie elementy, które nie pasują do .
3
:empty
Wybiera elementy, które nie mają żadnych dzieci.
3
:lang()
Wybiera elementy na podstawie wartości ich atrybutu lang.
2
:target
Wybiera element, do którego odnosi się identyfikator URL.
3
Spis właściwości W rozdziałach 19. – 24. omówię właściwości CSS. W poniższych punktach znajdziesz krótkie opisy tych właściwości wraz z wypisami wersji, w których je wprowadzono.
Właściwości obramowania i tła W tabeli 16.3 znajduje się opis właściwości służących do określania obramowań i teł elementów. Omówię je szerzej w rozdziale 19. Tabela 16.3. Właściwości obramowania i tła Selektor
Opis
Wersja CSS
background
Określa wszystkie wartości tła.
1
background-attachment
Określa zaczepienie tła elementu; przydaje się w pracy z elementami o przewijanych obszarach.
1
background-clip
Określa obszar, na którym kolor lub obraz tła są widoczne.
3
background-color
Określa kolor tła.
1
background-image
Określa obraz tła.
1
background-origin
Określa miejsce, od którego obraz tła jest rozrysowywany.
3
background-position
Określa położenie obrazu w polu elementu.
1
background-repeat
Określa rodzaj powtórzeń obrazu tła.
1
background-size
Określa wielkość obrazu tła.
3
border
Określa wartości obramowania wszystkich krawędzi.
1
border-bottom
Określa wartości obramowania dolnej krawędzi.
1
border-bottom-color
Określa kolor obramowania dolnej krawędzi.
1
border-bottom-left-radius
Określa promień narożnika. Służy do tworzenia zakrzywionych obramowań.
3
border-bottom-right-radius
Określa promień narożnika. Służy do tworzenia zakrzywionych obramowań.
3
border-bottom-style
Określa styl obramowania dolnej krawędzi.
1
border-bottom-width
Określa szerokość obramowania dolnej krawędzi.
1
border-color
Określa kolor obramowania wszystkich krawędzi.
1
349
ROZDZIAŁ 16. WPROWADZENIE DO CSS
Tabela 16.3. Właściwości obramowania i tła — ciąg dalszy Selektor
Opis
Wersja CSS
border-image
Określa obraz wykorzystany jako krawędź.
3
border-image-outset
Określa obszar poza polem, na którym obramowanie ma być wyświetlane.
3
border-image-repeat
Określa rodzaj powtórzeń obrazu krawędzi.
3
border-image-slice
Określa fragmenty obrazu.
3
border-image-source
Określa źródło obrazu krawędzi.
3
border-image-width
Określa szerokość obrazu krawędzi.
3
border-left
Określa wartości obramowania lewej krawędzi.
1
border-left-color
Określa kolor obramowania lewej krawędzi.
1
border-left-style
Określa styl obramowania lewej krawędzi.
1
border-left-width
Określa szerokość obramowania lewej krawędzi.
1
border-radius
Określa zakrzywione narożniki obramowania.
3
border-right
Określa wartości obramowania prawej krawędzi.
1
border-right-color
Określa kolor obramowania prawej krawędzi.
1
border-right-style
Określa styl obramowania prawej krawędzi.
1
border-right-width
Określa szerokość obramowania prawej krawędzi.
1
border-style
Określa styl wszystkich krawędzi obramowania.
1
border-top
Określa wartości obramowania górnej krawędzi.
1
border-top-color
Określa kolor obramowania górnej krawędzi.
1
border-top-left-radius
Określa promień narożnika. Służy do tworzenia zakrzywionych obramowań.
3
border-top-right-radius
Określa promień narożnika. Służy do tworzenia zakrzywionych obramowań.
3
border-top-style
Określa styl obramowania górnej krawędzi.
1
border-top-width
Określa szerokość obramowania górnej krawędzi.
1
border-width
Określa szerokość obramowania.
1
box-shadow
Nadaje jeden lub więcej cieni.
3
outline-color
Określa kolor obrysu.
2
outline-offset
Określa odstęp obrysu od treści.
2
outline-style
Określa styl obrysu.
2
outline-width
Określa szerokość obrysu.
2
outline
Określa obrys jedną deklaracją.
2
Właściwości modelu polowego W tabeli 16.4 znajduje się spis właściwości służących do konfiguracji pola elementu. Omówię je szerzej w rozdziale 20.
350
ROZDZIAŁ 16. WPROWADZENIE DO CSS
Tabela 16.4. Podstawowe właściwości pola Selektor
Opis
Wersja CSS
box-sizing
Określa pole, do którego odnoszą się właściwości rozmiaru.
3
clear
Oczyszcza jedną lub obydwie krawędzie pływającego elementu.
1
display
Określa rodzaj pola elementu.
1
float
Wyrównuje element do lewej lub prawej krawędzi kontenera albo do krawędzi innego pływającego elementu.
1
height
Określa wysokość pola elementu.
1
margin
Określa margines wszystkich czterech krawędzi.
1
margin-bottom
Określa margines dolnej krawędzi pola.
1
margin-left
Określa margines lewej krawędzi pola.
1
margin-right
Określa margines prawej krawędzi pola.
1
margin-top
Określa margines górnej krawędzi pola.
1
max-height
Określa maksymalną wysokość elementu.
2
max-width
Określa maksymalną szerokość elementu.
2
min-height
Określa minimalną wysokość elementu.
2
min-width
Określa minimalną szerokość elementu.
2
overflow
Określa styl przepełnienia dla obydwu osi.
2
overflow-x
Określa obsługę przepełnienia osi x.
3
overflow-y
Określa obsługę przepełnienia osi y.
3
padding
Określa dopełnienie wszystkich czterech krawędzi.
1
padding-bottom
Określa dopełnienie dolnej krawędzi.
1
padding-left
Określa dopełnienie lewej krawędzi.
1
padding-right
Określa dopełnienie prawej krawędzi.
1
padding-top
Określa dopełnienie górnej krawędzi.
1
visibility
Określa widzialność elementu.
2
width
Określa szerokość elementu.
1
Właściwości layoutu W tabeli 16.5 znajduje się spis właściwości służących do tworzenia układu elementów. Opiszę je szerzej w rozdziale 21. Tabela 16.5. Właściwości layoutu Selektor
Opis
Wersja CSS
bottom
Określa oddalenie elementu od dolnej krawędzi.
2
column-count
Określa liczbę kolumn w wielokolumnowym układzie.
3
column-fill
Określa rozmieszczenie treści w kolumnach wielokolumnowego układu.
3
column-gap
Określa oddalenie między kolumnami w wielokolumnowym układzie.
3
351
ROZDZIAŁ 16. WPROWADZENIE DO CSS
Tabela 16.5. Właściwości layoutu — ciąg dalszy Selektor
Opis
Wersja CSS
column-rule
Określa odstępy między kolumnami w wielokolumnowym układzie.
3
column-rule-color
Określa kolor odstępów między kolumnami w wielokolumnowym układzie.
3
column-rule-style
Określa styl odstępów między kolumnami w wielokolumnowym układzie.
3
column-rule-width
Określa szerokość odstępów między kolumnami w wielokolumnowym układzie.
3
columns
Określa właściwości column-span i column-width w wielokolumnowym układzie.
3
column-span
Określa liczbę kolumn obejmowanych przez element w wielokolumnowym układzie.
3
column-width
Określa szerokość kolumn w wielokolumnowym układzie.
3
display
Określa sposób, w jaki elementy wyświetlane są na stronie.
1
flex-align flex-direction flex-order flex-pack
Te właściwości definiowane są przez elastyczny układ pól, lecz nie są jeszcze zaimplementowane.
3
left
Określa oddalenie elementu od lewej krawędzi.
2
position
Określa metodę pozycjonowania elementu.
2
right
Określa oddalenie elementu od prawej krawędzi.
2
top
Określa oddalenie elementu od górnej krawędzi.
2
z-index
Określa kolejność warstw pozycjonowanych elementów.
2
Właściwości tekstu W tabeli 16.6 znajduje się spis właściwości służących do stylizowania tekstu. Opiszę je szerzej w rozdziale 22. Tabela 16.6. Właściwości tekstu Selektor
Opis
Wersja CSS
@font-face
Określa font internetowy i jego źródło.
3
direction
Określa kierunek tekstu.
2
font
Określa szczegóły zastosowania fonta w ramach deklaracji zbiorczej.
1
font-family
Określa listę fontów do wykorzystania, w preferowanej kolejności.
1
font-size
Określa wielkość tekstu.
1
font-style
Określa, czy tekst jest normalny, pochylony, czy pogrubiony.
1
font-variant
Określa, czy tekst ma być wyświetlany kapitalikami.
1
font-weight
Określa grubość tekstu.
1
letter-spacing
Określa odstępy międzyliterowe.
1
line-height
Określa odstępy międzywierszowe.
1
352
ROZDZIAŁ 16. WPROWADZENIE DO CSS
Tabela 16.6. Właściwości tekstu — ciąg dalszy Selektor
Opis
Wersja CSS
text-align
Określa wyrównanie tekstu.
1
text-decoration
Określa dekorację tekstu.
1
text-indent
Określa wcięcie tekstu.
1
text-justify
Określa wyjustowanie tekstu.
3
text-shadow
Nadaje blokowi tekstu cień.
3
text-transform
Przekształca blok tekstu.
1
word-spacing
Określa odstęp międzywyrazowy.
1
Właściwości przejść, animacji i przekształceń W tabeli 16.7 znajduje się spis właściwości służących do zmiany wyglądu elementów, niekiedy stopniowo z upływem czasu. Opiszę je szerzej w rozdziale 23. Tabela 16.7. Tabela właściwości przejść, animacji i przekształceń Właściwość
Opis
Wersja CSS
@keyframes
Określa jedną lub więcej klatek kluczowych animacji.
3
animation
Określa animację w jednej deklaracji.
3
animation-delay
Określa opóźnienie przed odtworzeniem animacji.
3
animation-direction
Określa sposób, w jaki powtórzenia animacji są odgrywane.
3
animation-duration
Określa czas trwania animacji.
3
animation-iteration-count
Określa liczbę powtórzeń animacji.
3
animation-name
Określa nazwę zbioru klatek kluczowych animacji.
3
animation-play-state
Określa, czy animacja jest odgrywana, czy wstrzymana.
3
animation-timing-function
Określa funkcję służącą do obliczania wartości właściwości pomiędzy klatkami kluczowymi aplikacji.
3
transform
Określa przekształcenie elementu.
3
transform-origin
Określa punkt wyjścia przekształcenia.
3
transition
Określa przejście w jednej deklaracji.
3
transition-delay
Określa opóźnienie przed rozpoczęciem przejścia.
3
transition-duration
Określa czas trwania przejścia.
3
transition-property
Określa jedną lub więcej właściwości, które ulegają zmianie w ramach przejścia.
3
transition-timing-function
Określa funkcję służącą do obliczenia pośrednich wartości właściwości w ramach przejścia.
3
Inne właściwości W tabeli 16.8 znajduje się spis właściwości, które nie przystają do tematyki któregokolwiek z pozostałych rozdziałów. Opiszę je szerzej w rozdziale 24.
353
ROZDZIAŁ 16. WPROWADZENIE DO CSS
Tabela 16.8. Inne właściwości Właściwość
Opis
Wersja CSS
border-collapse
Określa styl wyświetlania obramowania sąsiadujących komórek tabeli.
2
border-spacing
Określa odstępy pomiędzy obramowaniami komórek tabeli.
2
caption-side
Określa położenie podpisu tabeli.
2
color
Określa kolor pierwszego planu elementu.
1
cursor
Określa styl kursora.
2
empty-cells
Określa styl rozrysowania obramowania wokół pustych komórek tabeli.
2
list-style
Określa styl listy w jednej deklaracji.
1
list-style-image
Określa obraz do wykorzystania w charakterze punktów listy.
1
list-style-position
Określa położenie punktu listy względem pozycji na liście.
1
list-style-type
Określa typ punktów w liście.
1
opacity
Określa przezroczystość elementu.
3
table-layout
Określa sposób definiowania rozmiaru tabeli.
2
Podsumowanie W tym rozdziale ułożyłem podwaliny pod kolejne rozdziały, w których omówię właściwości CSS. Podałem też spisy, po które będziesz mógł sięgnąć podczas pracy nad rzeczywistymi projektami wykorzystującymi CSS. Koniecznie musisz brać pod uwagę, w której wersji CSS dane właściwości zostały wprowadzone, kiedy rozważasz wykorzystanie różnych funkcji CSS w projektach. Jak wspomniałem na początku rozdziału, niektóre moduły CSS3 nie są jeszcze jasno określone, a inne nie są na tyle powszechnie obsługiwane, jak byśmy chcieli.
354
ROZDZIAŁ 17
Selektory CSS — część I
W rozdziale 4. objaśniłem, że selektory CSS służą do wskazywania, na które elementy ma być nałożony styl zawarty w elemencie style lub zewnętrznym arkuszu stylów. W tym i następnym rozdziale opiszę i przedstawię wykorzystanie głównych selektorów CSS3. Zobaczysz, jak łatwo wybierać elementy i określać zarówno szerokie, jak i bardzo konkretne warunki. Te selektory wprowadzano sukcesywnie w kolejnych wersjach CSS. Popularne przeglądarki obsługują je dość dobrze, ale ich obsługa w mniej popularnych przeglądarkach bywa niepełna. Przy omówieniu każdego selektora podaję wersję CSS, w której został wprowadzony, żebyś mógł się zorientować, czy możesz na nich polegać. W tabeli 17.1 znajduje się streszczenie całego rozdziału. Tabela 17.1. Streszczenie rozdziału Problem
Rozwiązanie
Listing
Wybranie wszystkich elementów.
Użyj selektora uniwersalnego.
17.1
Wybranie elementów według typu.
Użyj selektora typu.
17.2
Wybranie elementów według wartości globalnego atrybutu class.
Użyj selektora klasy.
17.3, 17.4
Wybranie elementów według wartości globalnego atrybutu id.
Użyj selektora id.
17.5
Wybranie elementów według atrybutów.
Użyj selektorów atrybutów.
17.6 – 17.8
Wybranie elementów zestawem selektorów.
Oddziel selektory przecinkiem.
17.9
Wybranie dziedziców elementu.
Oddziel selektory spacją.
17.10, 17.11
Wybranie dzieci elementu.
Użyj selektora >.
17.12
Wybranie braci elementu.
Użyj selektora + lub ~.
17.13, 17.14
Wybranie pierwszego wiersza bloku tekstu.
Użyj selektora ::first-line.
17.15
Wybranie pierwszej litery bloku tekstu.
Użyj selektora ::first-letter.
17.16
Zamieszczenie treści w elemencie.
Użyj selektora :before i :after.
17.17
Zamieszczenie treści numerycznej w elemencie.
Użyj funkcji counter.
17.18
ROZDZIAŁ 17. SELEKTORY CSS — CZĘŚĆ I
Podstawowe selektory CSS Pewne selektory są bardzo łatwe w użyciu. Myśl o nich jako selektorach podstawowych. Możesz ich używać do wybierania elementów dokumentu na wysokim poziomie bądź jako podstawy do tworzenia bardziej szczegółowych wyborów w zestawieniu z innymi selektorami (co omówię w dalszej części rozdziału). W poniższych punktach pokażę Ci, jak używać podstawowych selektorów.
Wybranie wszystkich elementów Selektor uniwersalny odnosi się do każdego elementu w dokumencie. Jest to najbardziej podstawowy selektor CSS, ale rzadko się go używa właśnie dlatego, że odnosi się do tylu elementów. W tabeli 17.2 znajduje się jego opis. Tabela 17.2. Selektor uniwersalny Selektor:
*
Odnosi się do:
Wszystkich elementów
Obecny od wersji CSS:
2
W listingu 17.1 widnieje przykład stylu wykorzystującego selektor uniwersalny. Listing 17.1. Zastosowanie selektora uniwersalnego
Przykład
Odwiedź stronę Helionu Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
Styl, który zdefiniowałem w listingu 17.1, tworzy cienkie czarne obramowanie wokół zaznaczonych elementów. Z tego selektora będę korzystał w tym rozdziale, żeby pokazywać, do czego poszczególne selektory się odnoszą. Rezultat widać na rysunku 17.1.
Rysunek 17.1. Zastosowanie uniwersalnego selektora CSS 356
ROZDZIAŁ 17. SELEKTORY CSS — CZĘŚĆ I
Jeżeli powyższy rysunek wydaje Ci się dziwny, to wynika to z tego, że selektor uniwersalny rzeczywiście odnosi się do każdego elementu dokumentu, w tym również elementów html i body. Jest on zatem efektywnym, lecz niewysublimowanym narzędziem, którego należy używać ostrożnie.
Wybieranie elementów według typu Wszystkie znajdujące się w dokumencie elementy określonego typu możesz wybrać, podając ów typ elementu jako selektor — jeżeli chcesz, na przykład, wybrać wszystkie elementy a, to podajesz selektor a. W tabeli 17.3 znajduje się opis tego selektora. Tabela 17.3. Selektor typu elementu Selektor:
Odnosi się do:
Wszystkich elementów określonego typu
Obecny od wersji CSS:
1
W listingu 17.2 widnieje przykład zastosowania tego selektora. Listing 17.2. Zastosowanie selektora typu elementów
Przykład
Odwiedź stronę Helionu Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
Efekt użycia selektora widać na rysunku 17.2.
Rysunek 17.2. Wybieranie elementów według typu Wskazówka Styl możesz nałożyć na więcej niż jeden element — w tym celu wystarczy podać nazwy elementów oddzielone przecinkami. Przykład tej techniki znajdziesz w punkcie „Łączenie selektorów”.
357
ROZDZIAŁ 17. SELEKTORY CSS — CZĘŚĆ I
Wybieranie elementów według klasy Selektor klasy umożliwia wybieranie elementów przypisanych do konkretnej klasy przy użyciu atrybutu globalnego class. W tabeli 17.4 znajduje się jego opis. Sam atrybut class opisałem w rozdziale 3. Tabela 17.4. Selektor klasy Selektor:
. lub *. .
Odnosi się do:
Elementów należących do podanej klasy. Gdy używa się go wraz z selektorem typu elementu, wybierane są wszystkie elementy określonego typu przypisane do podanej klasy.
Obecny od wersji CSS:
1
W listingu 17.3 widnieje przykład zastosowania tego selektora. Listing 17.3. Zastosowanie selektora klasy
Przykład
Odwiedź stronę Helionu Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
W listingu 17.3 użyłem selektora .class2, co poskutkowało wybraniem wszystkich elementów dowolnego typu przypisanych do klasy class2. Ten selektor można wyrazić na dwa sposoby: z uniwersalnym selektorem lub bez niego. Selektory *.class2 i .class2 są równoznaczne. Pierwsza forma jest dokładniejsza pod względem opisowym, ale to druga znajduje się w powszechnym użytku. Jest to typowa właściwość selektorów CSS. Przeglądając kolejne selektory, niechybnie dostrzeżesz, że każdy z nich działa jako filtr, zawężający zakres wyboru do coraz mniejszej liczby elementów. Te wszystkie selektory można ze sobą zestawiać, by uzyskiwać dokładne odniesienia. Różne techniki zestawiania selektorów przedstawię Ci w punkcie „Zestawianie selektorów”. W listingu 17.3 widnieją dwa elementy przypisane docelowej klasie: element a i element span. Rezultat zastosowania tego stylu widać na rysunku 17.3. Można też sprecyzować konkretniejsze warunki i ograniczyć wybór do pojedynczego, przypisanego do klasy elementu. Robi się to, zastępując selektor uniwersalny typem elementu, tak jak widać w listingu 17.4. Listing 17.4. Zastosowanie selektora klasy przy jednym typie elementu
Przykład
Odwiedź stronę Helionu Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
W tym przypadku zawęziłem zakres selektora tak, by odnosił się jedynie do elementów span o przypisanej klasie class2. Rezultat widać na rysunku 17.4.
Rysunek 17.4. Ograniczenie zakresu selektora class Wskazówka Jeżeli chcesz wybrać elementy należące do więcej niż jednej klasy, to możesz podać nazwy poszczególnych klas, oddzielając je kropką (np. span.class1.class2). W ten sposób wybierasz tylko te elementy, które są przypisane zarówno do class1, jak i class2.
Wybieranie elementów według id Selektor ID pozwala na wybieranie elementów według wartości ich globalnych atrybutów id, które opisałem w rozdziale 3. W tabeli 17.5 znajduje się opis tego selektora. Jak już wspomniałem w rozdziale 3., wartość atrybutu id danego elementu musi być wyjątkowa w skali całego dokumentu HTML. Selektor ID służy zatem do wybierania pojedynczych elementów. W listingu 17.5 widnieje przykład jego zastosowania.
359
ROZDZIAŁ 17. SELEKTORY CSS — CZĘŚĆ I
Tabela 17.5. Selektor elementów id Selektor:
# .#
Odnosi się do:
Elementu o określonej wartości atrybutu globalnego id.
Obecny od wersji CSS:
1
Listing 17.5. Zastosowanie selektora id
Przykład
Odwiedź stronę Helionu
Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
W tym przykładzie wybrałem element z id o wartości w3canchor. Rezultat widać na rysunku 17.5.
Rysunek 17.5. Wybór elementu selektorem id Wydawałoby się, że ten sam efekt można by uzyskać przy użyciu atrybutów style poszczególnych elementów. Nie sposób temu zaprzeczyć, aczkolwiek prawdziwą wartość tego selektora poznasz, kiedy już zestawisz go z innymi selektorami (co omówię w dalszej części rozdziału).
Wybieranie elementów według atrybutów Selektor atrybutów pozwala na przypisywanie właściwości na podstawie różnych aspektów atrybutów. Jego opis znajdziesz w tabeli 17.6. Przy użyciu uniwersalnego selektora (*) możesz wybrać wszystkie elementy (lub wszystkie elementy danego typu), których atrybuty są zgodne z podanym warunkiem. Częściej jednak pomija się selektor uniwersalny, a warunek podaje w nawiasach kwadratowych ([ i ]). W listingu 17.6 widnieje przykład zastosowania selektora atrybutów.
360
ROZDZIAŁ 17. SELEKTORY CSS — CZĘŚĆ I
Tabela 17.6. Selektor atrybutów Selektor:
[warunek] [warunek]
Odnosi się do:
Elementów, którym przypisano atrybuty zgadzające się z podanym warunkiem; obsługiwane typy warunków znajdziesz w tabeli 17.7.
Obecny od wersji CSS:
Różnie (p. tabela 17.7).
Listing 17.6. Zastosowanie selektora atrybutów
Przykład
Odwiedź stronę Helionu
Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
W listingu 17.6 użyłem najprostszego selektora atrybutów, który wybiera wszystkie elementy, którym przypisano atrybut href, niezależnie od jego wartości. W tym przykładzie przełożyło się to na wybranie wszystkich elementów a (rysunek 17.6).
Rysunek 17.6. Wybieranie elementów według atrybutów Możesz także tworzyć bardziej rozbudowane warunki wyboru atrybutów, czego przykłady widnieją w tabeli 17.7. Warunki te włączono do CSS w dwóch rzutach, toteż wskazuję, które z nich są obsługiwane od której wersji. Ostatnie dwa warunki należy dodatkowo omówić. Warunek ~= przydaje się w pracy z atrybutami, którym można przypisywać więcej niż jedną wartość, oddzielając je od siebie spacją, tak jak w przypadku atrybutu globalnego class. W listingu 17.7 widnieje przykład.
361
ROZDZIAŁ 17. SELEKTORY CSS — CZĘŚĆ I
Tabela 17.7. Warunki używane z selektorem atrybutów Warunek
Opis
Wersja CSS
[atrybut]
Wybiera elementy, którym przypisano dany atrybut, niezależnie od jego wartości; użyłem go w listingu 17.6.
2
[atrybut="wartość"]
Wybiera elementy, którym przypisano dany atrybut o określonej wartości.
2
[atrybut^="wartość"]
Wybiera elementy, którym przypisano dany atrybut o wartości zaczynającej się podanym ciągiem.
3
[atrybut$="wartość"]
Wybiera elementy, którym przypisano dany atrybut o wartości kończącej się podanym ciągiem.
3
[atrybut*="wartość"]
Wybiera elementy, którym przypisano dany atrybut o wartości zawierającej podany ciąg.
3
[atrybut~="wartość"]
Wybiera elementy, którym przypisano dany atrybut o różnych wartościach, w tym tej, którą podano w selektorze. W listingu 17.7 znajdziesz przykład.
2
[atrybut|="wartość"]
Wybiera elementy, którym przypisano dany atrybut o serii oddzielonych dywizem wartości, spośród których pierwsza to ta, którą podano w selektorze. W listingu 17.8 znajdziesz przykład.
2
Listing 17.7. Wybór oparty na jednej z wielu wartości
Przykład
Odwiedź stronę Helionu
Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
W listingu 17.7 użyłem globalnego atrybutu class, ponieważ jak dotąd nie przedstawiłem jeszcze innych atrybutów, które obsługują wiele wartości. Do wyboru elementów przynależących do określonych klas nie trzeba używać selektora atrybutów — selektor klasy automatycznie obsługuje zbiory klas. Sprecyzowałem dla selektora warunki sprawiające, że wybiera elementy z przypisanym atrybutem class o wartości class2. W listingu widnieją wyróżnione atrybuty class, a na rysunku 17.7 widać efekt zastosowania tego selektora. Warunek |= przydaje się, kiedy wartość atrybutu wyrażona jest informacjami oddzielonymi od siebie łącznikami. Przykładem tego jest atrybut globalny lang, którego można używać z określającymi odmiany języków specyfikatorami językowymi, np. en-us na określenie amerykańskiej odmiany angielskiego, a en-gb brytyjskiej. W listingu 17.8 widać przykład wybrania wszystkich elementów oznaczonych jako angielskie bez konieczności wymieniania wszystkich — dość licznych — odmian języka.
362
ROZDZIAŁ 17. SELEKTORY CSS — CZĘŚĆ I
Rysunek 17.7. Wybór oparty na wielowartościowym atrybucie Listing 17.8. Zastosowanie warunku |=
Przykład
Odwiedź stronę Helionu Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
Rezultat zastosowania tego selektora widać na rysunku 17.8. Zauważ, że selektor odnosi się do drugiego elementu a, który nie ma żadnego regionalnego oznaczenia (tj. wartość atrybutu lang to en, a nie en-us czy en-gb), a także tych, które takie oznaczenia mają.
Rysunek 17.8. Wybieranie elementów na podstawie atrybutu lang
Łączenie selektorów Wybór elementów można uściślić, tworząc zestawienia selektorów, które albo poszerzają zakres elementów, na które styl jest nakładany, albo odwrotnie — pozwalają na skrajne ograniczenie wyboru. W kolejnych punktach przedstawię Ci różne sposoby łączenia selektorów.
363
ROZDZIAŁ 17. SELEKTORY CSS — CZĘŚĆ I
Tworzenie zestawień selektorów Utworzenie listy oddzielonych przecinkami selektorów sprawia, że styl nadawany jest wszystkim elementom, do których odnoszą się poszczególne selektory. W tabeli 17.8 widnieje opis zestawienia selektorów. Tabela 17.8. Zestawienie selektorów Selektor:
, ,
Odnosi się do:
Zestawienia elementów, do których odnoszą się poszczególne selektory
Obecny od wersji CSS:
1
W listingu 17.9 widnieje przykładowe zestawienie selektorów. Listing 17.9. Tworzenie zestawień selektorów
Przykład
Odwiedź stronę Helionu
Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
W listingu 17.9 podałem selektor typu (a) oraz selektor atrybutu ([lang|="en"]), które oddzieliłem przecinkiem (a, [lang|="en"]). Przeglądarka przetwarza każdy selektor po kolei i nakłada styl na wybrane elementy. Możesz dowolnie łączyć i zestawiać różne rodzaje selektorów, które mogą odnosić się do zupełnie różnych elementów. Rezultat zastosowania selektora z listingu 17.9 widać na rysunku 17.9.
Rysunek 17.9. Zastosowanie zestawień selektorów Możesz zestawiać dowolną liczbę selektorów, oddzielając je od siebie przecinkami.
364
ROZDZIAŁ 17. SELEKTORY CSS — CZĘŚĆ I
Wybieranie potomków Selektor potomków służy do wybierania elementów zawartych w innym elemencie. Jego opis znajduje się w tabeli 17.9. Tabela 17.9. Selektor potomków Selektor:
Odnosi się do:
Elementów odpowiadających drugiemu selektorowi, które są potomkami elementów wybranych pierwszym selektorem.
Obecny od wersji CSS:
1
Przeglądarka najpierw używa pierwszego selektora, a następnie wybiera potomków wybranych elementów na podstawie drugiego selektora. Selektor potomków odnosi się do wszystkich elementów zawartych w elementach określonych pierwszym selektorem, nie tylko ich dzieci. W listingu 17.10 znajduje się przykład. Listing 17.10. Wybieranie potomków
Przykład
Odwiedź stronę Helionu
Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
Selektor w listingu 17.10 wybiera elementy span, będące potomkami elementów p. W tym przypadku mógłbym wprawdzie uzyskać ten sam rezultat, używając zwyczajnie elementu span, ale to podejście jest bardziej elastyczne, jak widać w listingu 17.11. Listing 17.11. Przykład bardziej złożonego selektora potomków
Przykład
365
ROZDZIAŁ 17. SELEKTORY CSS — CZĘŚĆ I
Imię | Miasto |
Adam Freeman | Londyn |
Joe Smith | Nowy Jork |
Anne Jones | Paryż |
Lubię jabłka i pomarańcze.
Imię | Miasto |
Peter Pererson | Boston |
Chuck Fellows | Paryż |
Jane Firth | Paryż |
W listingu 17.11 utworzyłem dwie proste tabele o własnych atrybutach id. Przy użyciu selektora ID wybrałem tabelę z atrybutem id o wartości mytable, a następnie wybrałem zawarte w nim elementy td. Rezultat widać na rysunku 17.10.
Rysunek 17.10. Wybieranie potomków Zauważ, że w tym przykładzie nie wybrałem dzieci, lecz pominąłem poziom elementów tr, by wybrać elementy td.
Wybieranie dzieci Uzupełnieniem selektora potomków jest selektor dzieci, który wybiera jedynie te elementy, które są osadzone bezpośrednio w określonych elementach. W tabeli 17.10 znajduje się opis tego selektora. Tabela 17.10. Selektor dzieci Selektor:
>
Odnosi się do:
Elementów odpowiadających drugiemu selektorowi, które są bezpośrednimi potomkami elementów wybranych pierwszym selektorem.
Obecny od wersji CSS:
2
366
ROZDZIAŁ 17. SELEKTORY CSS — CZĘŚĆ I
W listingu 17.12 widnieje przykład wyboru dzieci. Listing 17.12. Wybieranie elementów-dzieci
Przykład
Imię | Miasto |
Adam Freeman | Londyn |
Joe Smith | Nowy Jork |
Anne Jones | Paryż |
Lubię jabłka i pomarańcze.
Imię | Miasto |
Peter Pererson | Boston |
Chuck Fellows | Paryż |
Jane Firth | Paryż |
Zdefiniowałem tutaj zestawienie selektorów dzieci. Pierwszy szuka elementów span, które są dziećmi dowolnych elementów-dzieci elementu body. Drugi szuka elementów th, które są dziećmi elementów tr. Na rysunku 17.11 widać, które elementy zostały wybrane.
Rysunek 17.11. Wybieranie dzieci
367
ROZDZIAŁ 17. SELEKTORY CSS — CZĘŚĆ I
Wybieranie braci Elementy znajdujące się bezpośrednio po innych elementach można wybierać przy użyciu bezpośredniego selektora brata. W tabeli 17.11 znajduje się jego opis. Tabela 17.11. Bezpośredni selektor brata Selektor:
+
Odnosi się do:
Elementów odpowiadających drugiemu selektorowi, które znajdują się bezpośrednio po elemencie wybranym pierwszym selektorem.
Obecny od wersji CSS:
2
W listingu 17.13 widać przykład wybrania bezpośredniego selektora brata. Listing 17.13. Zastosowanie bezpośredniego selektora brata
Przykład
Odwiedź stronę Helionu Lubię jabłka i pomarańcze.
Odwiedź stronę W3C Odwiedź stronę Google
W listingu 17.13 selektor wybiera elementy a, które znajdują się bezpośrednio po elemencie p. Jak widać na rysunku 17.12, w listingu jest tylko jeden taki element — element a, który jest odnośnikiem do strony W3C.
Rysunek 17.12. Wybór bezpośrednich braci Warunek wyboru możesz nieco uogólnić, używając ogólnego selektora braci, który wybiera elementy znajdujące się po innym elemencie, lecz niekoniecznie bezpośrednio. W tabeli 17.12 znajduje się jego opis. W listingu 17.14 znajduje się przykład zastosowania ogólnego selektora braci.
368
ROZDZIAŁ 17. SELEKTORY CSS — CZĘŚĆ I
Tabela 17.12. Ogólny selektor braci Selektor:
~
Odnosi się do:
Elementów odpowiadających drugiemu selektorowi, które znajdują się po elemencie wybranym pierwszym selektorem.
Obecny od wersji CSS:
3
Listing 17.14. Zastosowanie ogólnego selektora braci
Przykład
Odwiedź stronę Helionu Lubię jabłka i pomarańcze.
Odwiedź stronę W3C Odwiedź stronę Google
Nie ograniczamy się tu do elementów, które znajdują się bezpośrednio po elemencie zdefiniowanym pierwszym selektorem — oznacza to, że drugi selektor wybiera w tym przykładzie dwa elementy a. Pominięty element a (prowadzący do strony http://www.helion.pl) nie jest wybrany, ponieważ znajduje się przed elementem p; wybierać możemy tylko tych braci, którzy znajdują się po nim. Rezultat zastosowania tego selektora widać na rysunku 17.13.
Rysunek 17.13. Zastosowanie ogólnego selektora braci
Selektory pseudoelementów Jak dotąd dokonywaliśmy wyborów na podstawie elementów podawanych w dokumentach HTML. Tymczasem CSS obsługuje również pseudoselektory, które są bardziej rozbudowane w działaniu, lecz nie odnoszą się bezpośrednio do zawartych w dokumencie elementów. Istnieją dwa rodzaje pseudoselektorów: pseudoelementów i pseudoklas. W tym podrozdziale opiszę i przedstawię selektory pseudoelementów. Jak można sądzić z samej nazwy, pseudoelementy nie istnieją, lecz są wygodnym narzędziem CSS, które ułatwia wybór.
369
ROZDZIAŁ 17. SELEKTORY CSS — CZĘŚĆ I
Selektor ::first-line Selektor ::first-line odnosi się do pierwszego wiersza bloku tekstowego. W tabeli 17.13 znajduje się jego opis. Tabela 17.13. Selektor pseudoelementu ::first-line Selektor:
::first-line
Odnosi się do:
Pierwszego wiersza bloku tekstowego.
Obecny od wersji CSS:
1
W listingu 17.15 widnieje przykład zastosowania selektora ::first-line. Listing 17.15. Zastosowanie selektora pseudoelementu ::first-line
Przykład
My w Polsce nie znamy pojęcia pokoju za wszelką cenę. Jest tylko jedna rzecz w życiu ludzi, narodów i państw, która jest bezcenną. Tą rzeczą jest honor.
Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
W tym przykładzie użyłem samego selektora, ale można go również używać jako modyfikatora innych selektorów. Przykładowo, gdybym chciał wybrać jedynie pierwsze wiersze elementów p, mógłbym zastosować selektor p::first-line. Wskazówka Selektor pseudoelementów poprzedzony jest dwoma dwukropkami (::), choć przeglądarki rozpoznają również selektory z jednym dwukropkiem (tj. :first-line zamiast ::first-line). Dzięki temu zachowana zostaje na potrzeby kompatybilności wstecznej spójność formy z selektorami pseudoklas, które opisałem we wcześniejszej części rozdziału.
Przy zmianach rozmiaru okna przeglądarka na bieżąco określa pierwszy wiersz. Oznacza to, że styl zawsze jest prawidłowo nanoszony na pierwszy wiersz tekstu, tak jak widać na rysunku 17.14.
Selektor ::first-letter Selektor ::first-letter wybiera pierwszą literę w bloku tekstowym. W tabeli 17.14 znajduje się jego opis.
370
ROZDZIAŁ 17. SELEKTORY CSS — CZĘŚĆ I
Rysunek 17.14. Przeglądarka zapewnia, by stylem opatrzony był zawsze pierwszy wiersz, nawet przy zmianie wielkości okna Tabela 17.14. Selektor pseudoelementu ::first-letter Selektor:
::first-letter
Odnosi się do:
Pierwszej litery bloku tekstowego.
Obecny od wersji CSS:
1
W listingu 17.16 widnieje przykład zastosowania tego selektora. Listing 17.16. Zastosowanie selektora pseudoelementu ::first-letter
Przykład
My w Polsce nie znamy pojęcia pokoju za wszelką cenę. Jest tylko jedna rzecz w życiu ludzi, narodów i państw, która jest bezcenną. Tą rzeczą jest honor.
Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
Rezultat zastosowania tego selektora widać na rysunku 17.15.
371
ROZDZIAŁ 17. SELEKTORY CSS — CZĘŚĆ I
Rysunek 17.15. Zastosowanie selektora ::first-letter
Selektory :before i :after Selektory :before i :after są nietypowe o tyle, że tworzą treść, którą następnie zamieszczają w dokumencie. Selektor :before przedstawiłem już w rozdziale 9., gdzie zastosowałem go do tworzenia niestandardowych list. Jego uzupełnieniem jest selektor :after, który dodaje treść po danym elemencie. W tabeli 17.15 znajduje się opis tych selektorów. Tabela 17.15. Selektory :before i :after Selektor
Opis
Wersja CSS
:before
Zamieszcza treść przed treścią wybranego elementu.
2
:after
Zamieszcza treść po treści wybranego elementu.
2
W listingu 17.17 widnieje przykład zastosowania tych atrybutów. Listing 17.17. Zastosowanie selektorów :before i :after
Przykład
Odwiedź stronę Helionu Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
W listingu 17.17 wybrałem elementy a oraz zastosowałem pseudoselektory :before i :after. Wraz z tymi selektorami należy podać treść do zamieszczenia w dokumencie — robi się to, określając wartość właściwości content. Jest to specjalna właściwość, której można używać jedynie z tymi selektorami. W tym
372
ROZDZIAŁ 17. SELEKTORY CSS — CZĘŚĆ I
przykładzie fraza Kliknij tu i zostaje zamieszczona przed elementami a, a wykrzyknik (!) po nich. Rezultat wprowadzenia tych zmian widać na rysunku 17.16.
Rysunek 17.16. Zastosowanie selektorów :before i :after
Licznik CSS Selektorów :before i :after często używa się z funkcją licznika CSS, która służy do generowania treści numerycznych. Przykład zastosowania liczników podałem już w rozdziale 9., przy tworzeniu niestandardowych list. Kolejny znajdziesz w listingu 17.18. Listing 17.18. Zastosowanie licznika CSS
Przykład
Odwiedź stronę Helionu Lubię jabłka i pomarańcze.
Lubię też mango i wiśnie.
Odwiedź stronę W3C
Do utworzenia licznika należy użyć specjalnej właściwości counter-reset i określić wartość oznaczającą nazwę licznika: counter-reset: paracount;
Powyższa deklaracja uruchamia licznik o nazwie paracount i nadaje mu wartość 1. Możesz określić inną wartość początkową, podając liczbę po nazwie licznika: counter-reset: paracount 10;
373
ROZDZIAŁ 17. SELEKTORY CSS — CZĘŚĆ I
Do zdefiniowania większej liczby liczników wystarczy podać dodatkowe nazwy (i ewentualnie wartości początkowe) w tej samej deklaracji counter-reset: counter-reset: paracount 10 othercounter;
Ta deklaracja tworzy licznik o nazwie paracount (o początkowej wartości 10) i licznik othercounter (o początkowej wartości 1). Uruchomiony licznik można podać jako wartość właściwości stylów, które wykorzystują selektory :before i :after: content: counter(paracount) ". ";
Ponieważ powyższej deklaracji użyto z selektorem składającym się z członu :after, rezultatem jest zamieszczenie bieżącej wartości licznika w dokumencie HTML przed każdym wybranym przez selektor elementem. W tym wypadku po każdej wartości zamieszczana jest kropka i spacja. Wartość domyślnie wyrażana jest jako dziesiętna liczba całkowita (1, 2, 3 itd.), ale możesz też określić inne formaty: content: counter(paracount, lower-alpha) ". ";
Dodatkowym argumentem licznika jest styl liczby. Możesz użyć dowolnej wartości właściwości list-style-type, które opisuję w rozdziale 24.
Przyrost wartości licznika określa się właściwością counter-increment. Wartość tej właściwości to nazwa licznika, którego wartość chcesz zmienić: counter-increment: paracount;
Wartość liczników domyślnie przyrasta o jeden, ale możesz podać inną wartość w deklaracji: counter-increment: paracount 2;
Rezultat zastosowania licznika w listingu 17.18 widać na rysunku 17.17.
Rysunek 17.17. Wykorzystanie liczników do generowania treści
Podsumowanie W tym rozdziale opisałem selektory i pseudoelementy CSS służące do wskazywania elementów, którym ma być przypisany styl. Selektory pozwalają na wybieranie elementów według ogólnych kryteriów, ale także na zawężanie wyboru elementów (co robi się, łącząc selektory). Pseudoelementy umożliwiają wygodne wybieranie treści, które w rzeczywistości nie istnieją w dokumencie. Z podobną zasadą funkcjonowania spotkasz się w kolejnym rozdziale, gdzie omówię pseudoklasy. Zapoznanie się z selektorami jest podstawą, jeżeli chcesz czerpać maksymalne korzyści z wykorzystania CSS. W kolejnych rozdziałach zetkniesz się z wieloma przykładami wykorzystania selektorów. Zachęcam Cię, byś poświęcił trochę czasu na samodzielne eksperymentowanie z nimi.
374
ROZDZIAŁ 18
Selektory CSS — część II
W tym rozdziale omówię kolejne selektory CSS i pokażę Ci, jak używać pseudoklas. Tak jak w przypadku pseudoelementów, nie są to klasy, do których przypisano elementy, lecz narzędzia ułatwiające wybieranie elementów na podstawie pewnych typowych charakterystyk. W tabeli 18.1 znajduje się streszczenie całego rozdziału. Tabela 18.1. Streszczenie rozdziału Problem
Rozwiązanie
Listing
Wybranie elementu głównego dokumentu.
Użyj selektora :root.
18.1
Wybranie dziecka.
Użyj selektora :first-child, :last-child, :only-child lub :only-of-type.
18.2 – 18.6
Wybranie określonego dziecka ze zbioru.
Użyj selektora :nth-child, :nth-last-child, :nth-of-type lub :nth-last-of-type.
18.7
Wybranie aktywnego bądź nieaktywnego elementu.
Użyj selektora :enabled lub :disabled.
18.8
Wybranie pola wyboru lub zaznaczonych kratek.
Użyj selektora :checked.
18.9
Wybranie domyślnego elementu.
Użyj selektora :default.
18.10
Wybranie elementów na podstawie weryfikacji danych.
Użyj selektora :valid lub :invalid.
18.11
Wybranie elementów wejściowych na podstawie zakresu.
Użyj selektorów :in-range i :out-of-range.
18.12
Wybranie elementów wejściowych na podstawie atrybutu required.
Użyj selektora :required lub :optional.
18.13
Wybranie odnośnika.
Użyj selektorów :link i :visited.
18.14
Wybranie elementu, nad którym znajduje się kursor.
Użyj selektora :hover.
18.15
Wybranie aktywowanego elementu.
Użyj selektora :active.
18.16
Wybranie sfokusowanego elementu.
Użyj selektora :focus.
18.17
Zanegowanie innego selektora.
Użyj selektora negacji.
18.18
ROZDZIAŁ 18. SELEKTORY CSS — CZĘŚĆ II
Tabela 18.1. Streszczenie rozdziału — ciąg dalszy Problem
Rozwiązanie
Listing
Wybranie elementów pozbawionych zawartości.
Użyj selektora :empty.
—
Wybranie elementów według języka.
Użyj selektora :lang.
18.19
Wybranie elementu, do którego odnosi się URL.
Użyj selektora :target.
18.20
Strukturalne selektory pseudoklas Strukturalne selektory pseudoklas pozwalają na wybieranie elementów na podstawie ich położenia w dokumencie. Selektory te poprzedzone są znakiem dwukropka (:), np. :empty. Możesz ich używać osobno lub w połączeniu z innymi selektorami, np. p:empty.
Selektor :root Selektor :root wybiera element główny dokumentu. Można go uznać za najmniej przydatny selektor pseudoklasy, ponieważ zawsze odnosi się do elementu html. W tabeli 18.2 znajduje się opis tego selektora. Tabela 18.2. Selektor :root Selektor:
:root
Odnosi się do:
Elementu głównego dokumentu, czyli html.
Obecny od wersji CSS:
2
W listingu 18.1 widnieje przykład zastosowania selektora :root. Listing 18.1. Zastosowanie selektora :root
Przykład
Odwiedź stronę Helionu Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
Rezultat zastosowania tego selektora widać na rysunku 18.1. Wokół elementu widnieje obramowanie, choć nie rzuca się to od razu w oczy.
376
ROZDZIAŁ 18. SELEKTORY CSS — CZĘŚĆ II
Rysunek 18.1. Zastosowanie selektora :root
Selektor dzieci Selektory dzieci służą do wybierania pojedynczych elementów bezpośrednio zawartych w innych elementach. W tabeli 18.3 znajduje się opis tych selektorów. Tabela 18.3. Selektory dzieci Selektor
Opis
Wersja CSS
:first-child
Wybiera elementy, które są pierwszymi dziećmi swoich rodziców.
2
:last-child
Wybiera elementy, które są ostatnimi dziećmi swoich rodziców.
3
:only-child
Wybiera elementy, które są jedynymi dziećmi swoich rodziców.
3
:only-of-type
Wybiera elementy, które są jedynymi określonego typu dziećmi swoich rodziców.
3
Selektor :first-child Selektor :first-child wybiera elementy będące pierwszymi dziećmi elementów, które je zawierają (czyli tzw. rodziców). W listingu 18.2 widnieje przykład zastosowania selektora :first-child. Listing 18.2. Zastosowanie selektora :first-child
Przykład
Odwiedź stronę Helionu Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
W listingu 18.2 użyłem selektora :first-child bez żadnych dodatkowych członów, wobec czego wybiera on wszystkie elementy, które są pierwszymi dziećmi swoich rodziców. Efekt widać na rysunku 18.2.
377
ROZDZIAŁ 18. SELEKTORY CSS — CZĘŚĆ II
Rysunek 18.2. Zastosowanie selektora :first-child Możesz dokonać bardziej szczegółowego wyboru, używając selektora :first-child jako modyfikatora i, ewentualnie, łącząc go z innymi selektorami. Przykład tego widać w listingu 18.3. Listing 18.3. Połączenie selektora :first-child z innymi
Przykład
Odwiedź stronę Helionu Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
Powyższy selektor odnosi się do wszystkich elementów span, które są pierwszymi dziećmi elementów p. W całym dokumencie znajduje się w tym przypadku tylko jeden taki element, a efekt widać na rysunku 18.3.
Rysunek 18.3. Połączenie selektora :first-child z innym
Selektor :last-child Selektor :last-child wybiera elementy będące ostatnimi dziećmi elementów, które je zawierają. W listingu 18.4 widnieje przykład zastosowania selektora :last-child. Na rysunku 18.4 widać, do których elementów ten selektor się odnosi. Zauważ, że wokół obszaru treści znajduje się obramowanie. Jest tak, ponieważ element body jest ostatnim dzieckiem elementu html — selektor wobec tego odnosi się też do niego.
378
ROZDZIAŁ 18. SELEKTORY CSS — CZĘŚĆ II
Listing 18.4. Zastosowanie selektora :last-child
Przykład
Odwiedź stronę Helionu Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
Rysunek 18.4. Zastosowanie selektora :last-child
Selektor :only-child Selektor :only-child wybiera elementy będące jedynymi dziećmi elementów, które je zawierają. W listingu 18.5 widnieje przykład zastosowania tego selektora. Listing 18.5. Zastosowanie selektora :only-child
Przykład
Odwiedź stronę Helionu Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
379
ROZDZIAŁ 18. SELEKTORY CSS — CZĘŚĆ II
Jedyny element z jednym dzieckiem to w tym przypadku p, który zawiera jeden element span. Na rysunku 18.5 widać, że jest to jedyny element, do którego ten selektor się odnosi.
Rysunek 18.5. Zastosowanie selektora :only-child
Selektor :only-of-type Selektor :only-of-type wybiera elementy będące jedynymi określonego typu dziećmi elementów, które je zawierają. W listingu 18.6 widnieje przykład zastosowania go. Listing 18.6. Zastosowanie selektora :only-of-type
Przykład
Odwiedź stronę Helionu Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
Na rysunku 18.6 widać elementy, do których ten selektor się odnosi. Jak widać, samodzielnie występujący selektor wybiera niemało elementów. W każdym dokumencie można się zwykle spotkać z wieloma elementami, które są jedynymi dziećmi swojego typu. Rzecz jasna, zakres wyboru możesz zawęzić, łącząc ten selektor z innymi.
Rysunek 18.6. Zastosowanie selektora :only-of-type
380
ROZDZIAŁ 18. SELEKTORY CSS — CZĘŚĆ II
Selektory n-tego dziecka Selektory n-tego dziecka działają podobnie do selektorów dzieci, które opisałem w poprzednim punkcie, lecz pozwalają na określenie elementu o wybranej wartości indeksowej. W tabeli 18.4 znajduje się ich omówienie. Tabela 18.4. Selektory n-tego dziecka Selektor
Opis
Wersja CSS
:nth-child(n)
Wybiera elementy, które są n-tymi dziećmi swoich rodziców.
3
:nth-last-child(n)
Wybiera elementy, które są n-tymi od końca dziećmi swoich rodziców.
3
:nth-of-type(n)
Wybiera elementy, które są n-tymi swojego typu dziećmi swoich rodziców.
3
:nth-last-of-type(n)
Wybiera elementy, które są n-tymi swojego typu od końca dziećmi swoich rodziców.
3
Każdy z tych selektorów wykorzystuje argument, który jest indeksem elementu; indeks zaczyna się od 1. W listingu 18.7 widać przykład zastosowania selektora :nth-child. Listing 18.7. Zastosowanie selektora :nth-child
Przykład
Odwiedź stronę Helionu Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
W listingu 18.7 wybrałem wszystkie elementy będące drugimi dziećmi elementu body. Jest tylko jeden taki element, jak widać na rysunku 18.7.
Rysunek 18.7. Zastosowanie elementu :nth-child
381
ROZDZIAŁ 18. SELEKTORY CSS — CZĘŚĆ II
Nie będę podawał przykładów użycia pozostałych selektorów n-tego dziecka, ponieważ działają tak samo jak ich zwyczajne odpowiedniki z taką różnicą, że podaje się przy nich wartość indeksową.
Selektory pseudoklas interfejsu użytkownika Selektory pseudoklas interfejsu umożliwiają wybieranie elementów na podstawie ich stanu. W tabeli 18.5 znajduje się opis selektorów interfejsu. Tabela 18.5. Selektory interfejsu użytkownika Selektor
Opis
Wersja CSS
:enabled
Wybiera aktywne elementy.
3
:disabled
Wybiera nieaktywne elementy.
3
:checked
Wybiera zaznaczone elementy.
3
:default
Wybiera domyślne elementy.
3
:valid :invalid
Wybiera poprawne lub niepoprawne elementy input na podstawie systemu weryfikacji danych.
3
:in-range :out-of-range
Wybiera elementy input o wartościach znajdujących się w określonym zasięgu lub poza nim.
3
:required :optional
Wybiera elementy input na podstawie tego, czy oznaczone są atrybutem required.
3
Wybieranie aktywnych bądź nieaktywnych elementów Niektóre elementy mogą znajdować się w stanie aktywnym lub nieaktywnym — to te, które służą do pobierania danych od użytkownika. Selektory :enabled i :disabled odnoszą się wyłącznie do elementów, które można zdezaktywować. W listingu 18.8 widnieje przykład zastosowania selektora :enabled. Listing 18.8. Zastosowanie selektora :enabled
Przykład
To jest aktywny element textarea To jest zdezaktywowany element textarea
W listingu 18.8 znajdują się dwa elementy textarea, z których jednemu przypisany jest atrybut disabled. Selektor :enabled wybiera pierwszy element textarea, ale drugiego nie, co widać na rysunku 18.8.
382
ROZDZIAŁ 18. SELEKTORY CSS — CZĘŚĆ II
Rysunek 18.8. Zastosowanie selektora :enabled
Wybieranie zaznaczonych elementów Pola wyboru i zaznaczone (przez użytkownika lub przy użyciu atrybutu checked) kratki można wybierać selektorem :checked. Trudno zademonstrować jego zastosowanie, ponieważ możliwości obstylowania kratek zaznaczania i pól wyboru są żadne. W listingu 18.9 widać przykład użycia tego selektora. Listing 18.9. Zastosowanie selektora :checked
Przykład
Czy lubisz jabłka:
Po zaznaczeniu kratki to pole robi się czerwone
Z ograniczonymi możliwościami stylizacji poradziłem sobie, używając selektora brata (omówionego w rozdziale 17.), by zmienić wygląd elementu span, znajdującego się obok kratki zaznaczania. Zmianę stanu od niezaznaczonego do zaznaczonego widać na rysunku 18.9. Nie ma żadnego określonego selektora niezaznaczonych elementów, ale można połączyć :checked z selektorem negacji, który opiszę w punkcie „Selektor negacji”.
383
ROZDZIAŁ 18. SELEKTORY CSS — CZĘŚĆ II
Rysunek 18.9. Wybranie zaznaczonych elementów
Wybieranie elementów domyślnych Element :default wybiera domyślne elementy z grupy podobnych elementów. Przykładowo, przycisk zatwierdzenia formularza zawsze jest domyślnym przyciskiem w formularzu. Przykład zastosowania selektora :default widać w listingu 18.10. Listing 18.10. Zastosowanie elementu :default
Przykład
Imię:
Zagłosuj Wyczyść
Tego selektora używa się najczęściej z właściwością outline, którą opiszę w rozdziale 19. Rezultat zastosowania go widać na rysunku 18.10.
384
ROZDZIAŁ 18. SELEKTORY CSS — CZĘŚĆ II
Rysunek 18.10. Zastosowanie selektora :default
Wybieranie elementów input o poprawnych i niepoprawnych wartościach Selektory :valid i :invalid odnoszą się do elementów input, które pomyślnie lub niepomyślnie przeszły weryfikację danych wejściowych. Więcej na temat weryfikacji danych wejściowych przeczytasz w rozdziale 14. W listingu 18.11 widnieje przykład ich zastosowania. Listing 18.11. Zastosowanie selektorów :valid i :invalid
Przykład
Imię:
Miasto:
Zagłosuj
W listingu 18.11 nadałem niepoprawnym elementom czerwony obrys, a poprawnym zielony. W dokumencie znajdują się dwa elementy input opatrzone elementem required. Oznacza to, że przechodzą weryfikację pomyślnie tylko wtedy, kiedy podana jest dla nich wartość. Rezultat zastosowania tych selektorów widać na rysunku 18.11.
385
ROZDZIAŁ 18. SELEKTORY CSS — CZĘŚĆ II
Rysunek 18.11. Wybieranie poprawnych i niepoprawnych elementów input Wskazówka Zauważ, że selektory odnoszą się również do przycisku zatwierdzenia formularza, przynajmniej w Chrome. Dzieje się tak, ponieważ selektor :valid działa na podstawie dość prostej logiki i wybiera wszelkie elementy input, które nie są niepoprawne. Do wykluczenia określonych elementów input możesz użyć selektorów atrybutów opisanych w rozdziale 17. albo bardziej konkretnych selektorów, np. takich, jakie opiszę poniżej.
Wybieranie elementów input na podstawie zakresów Dokładniejszy sposób wyboru elementów input opiera się na odniesieniach do dopuszczalnych zakresów ich wartości. Selektor :in-range odnosi się do elementów input o wartościach znajdujących się w określonym zakresie, a selektor :out-of-range do tych, których wartości są poza nim. W listingu 18.12 widnieje przykład zastosowania tych atrybutów. Listing 18.12. Zastosowanie selektorów :in-range i :out-of-range
Przykład
Cena za sztukę w Twoim sklepie:
386
ROZDZIAŁ 18. SELEKTORY CSS — CZĘŚĆ II
W chwili, kiedy to piszę, żadna z popularnych przeglądarek nie obsługuje selektora :out-of-range, a tylko Chrome i Opera obsługują selektor :in-range. Podejrzewam, że ta sytuacja niedługo ulegnie zmianie, jako że funkcje te związane są z obsługą HTML5, która prawdopodobnie się upowszechni. Rezultat zastosowania selektora :in-range widać na rysunku 18.12.
Rysunek 18.12. Zastosowanie selektora :in-range
Wybór elementów input według obecności atrybutu required Selektor :required odnosi się do elementów input o przypisanym atrybucie required, który wymusza na użytkowniku podanie wartości, by możliwe było zatwierdzenie formularza, do którego dany element input jest przypisany. Więcej na temat tego atrybutu przeczytasz w rozdziale 14. Selektor :optional wybiera elementy input, którym nie przypisano atrybutu required. W listingu 18.13 użyłem ich obydwu. Listing 18.13. Wybranie elementów input z atrybutem required i bez niego
Przykład
Cena za sztukę w Twoim sklepie:
Cena za sztukę w Twoim sklepie:
387
ROZDZIAŁ 18. SELEKTORY CSS — CZĘŚĆ II
W listingu 18.13 utworzyłem dwa elementy input typu number. Są niemalże identyczne poza tym, że pierwszemu przypisałem atrybut required. Rezultat zastosowania tych selektorów i powiązanych stylów widać na rysunku 18.13. Zauważ, że wybrany został również element input typu submit. Selektor :optional nie rozróżnia między różnymi typami elementu input.
Rysunek 18.13. Wybór wymaganych i opcjonalnych elementów input
Dynamiczne selektory pseudoklas Dynamiczne selektory pseudoklas odnoszą się do elementów na podstawie zmiennych stanów, w odróżnieniu od statycznego stanu dokumentu. Rozróżnienie pomiędzy statycznymi a dynamicznymi selektorami rozmyło się wraz z upowszechnieniem wykorzystania JavaScript do modyfikowania treści dokumentów i stanu elementów. Niemniej jednak wciąż uznaje się je za osobne kategorie selektorów.
Selektory :link i :visited Selektor :link odnosi się do linków, a :visited do linków do adresów, które użytkownik już odwiedził. W tabeli 18.6 znajduje się krótki opis tych selektorów. Tabela 18.6. Selektory :link i :visited Selektor
Opis
Wersja CSS
:link
Wybiera linki.
1
:visited
Wybiera odwiedzone linki.
1
Przeglądarki samodzielnie decydują o tym, przez jaki czas kliknięty link należy traktować jako odwiedzony. Linki powracają do „nieodwiedzonego” stanu, kiedy użytkownik czyści historię przeglądania lub kiedy historia sama się wyzerowuje. W listingu 18.14 widnieje przykład zastosowania tych selektorów. Listing 18.14. Zastosowanie selektorów :link i :visited
Przykład
Odwiedź stronę Helionu Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
W powyższym przykładzie należy jedynie zwrócić uwagę na to, że przy użyciu selektora :visited można nadać linkom tylko wybrane właściwości. Możesz zmienić kolor i font — i na tym właściwie koniec. Na rysunku 18.14 widać zmianę wyglądu odnośnika po jego odwiedzeniu. Zacząłem z parą nieodwiedzonych linków, po czym kliknąłem pierwszy z nich, by wejść na stronę http://www.helion.pl. Kiedy wróciłem na stronę z przykładu, odwiedzony link wyglądał inaczej.
Rysunek 18.14. Zastosowanie selektorów :link i :visited Wskazówka Selektor :visited odnosi się do każdego linka, którego atrybutowi href przypisany jest adres URL, który użytkownik już odwiedził z dowolnej strony, nie tylko Twojej. Selektora :visited najczęściej używa się do nanoszenia takich stylów, by odwiedzone linki wyglądały tak samo, jak nieodwiedzone.
Selektor :hover Selektor :hover odnosi się do każdego elementu, nad którym znajduje się kursor. Wybrane elementy zmieniają się, kiedy użytkownik porusza kursorem po dokumencie. W tabeli 18.7 znajduje się opis tego selektora. Przeglądarka sama interpretuje selektor :hover w sposób odpowiedni dla danego wyświetlacza, lecz zazwyczaj selektor ten odnosi się do ruchu kursora myszy w oknie. W listingu 18.15 znajduje się przykład jego zastosowania.
389
ROZDZIAŁ 18. SELEKTORY CSS — CZĘŚĆ II
Tabela 18.7. Selektor :hover :hover
Selektor: Odnosi się do:
Elementów znajdujących się pod kursorem.
Obecny od wersji CSS:
2
Listing 18.15. Zastosowanie selektora :hover
Przykład
Odwiedź stronę Helionu Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
Powyższy selektor odnosi się do wielu zagnieżdżonych elementów, co widać na rysunku 18.15.
Rysunek 18.15. Zastosowanie selektora :hover
Selektor :active Selektor :active odnosi się do elementów aktywowanych w danej chwili przez użytkownika. Również w tym przypadku przeglądarki mają dowolność w interpretowaniu tego, na czym owa aktywacja polega, ale zazwyczaj jest to sytuacja, kiedy naciśnięty jest klawisz myszy (lub kiedy użytkownik przyciska ekran dotykowy). W tabeli 18.8 znajduje się opis tego selektora. Tabela 18.8. Selektor :active Selektor:
:active
Odnosi się do:
Elementów aktywowanych przez użytkownika; zwykle są to elementy znajdujące się pod kursorem, kiedy naciśnięty jest klawisz myszy.
Obecny od wersji CSS:
2
390
ROZDZIAŁ 18. SELEKTORY CSS — CZĘŚĆ II
W listingu 18.16 znajduje się przykład zastosowania tego selektora. Listing 18.16. Zastosowanie selektora :active
Przykład
Odwiedź stronę Helionu Lubię jabłka i pomarańcze.
Cześć!
W listingu zamieściłem przycisk, aczkolwiek selektor :active nie odnosi się jedynie do interaktywnych elementów. Wybiera on wszystkie elementy, w obrębie których można nacisnąć przycisk myszy (rysunek 18.16).
Rysunek 18.16. Zastosowanie selektora :active
Selektor :focus Ostatnim dynamicznym selektorem pseudoklas jest :focus, który wybiera sfokusowane elementy. W tabeli 18.9 znajduje się jego opis. Tabela 18.9. Selektor :focus Selektor:
:focus
Odnosi się do:
Sfokusowanych elementów.
Obecny od wersji CSS:
2
W listingu 18.17 widnieje przykład zastosowania tego selektora.
391
ROZDZIAŁ 18. SELEKTORY CSS — CZĘŚĆ II
Listing 18.17. Zastosowanie selektora :focus
Przykład
Imię: Miasto:
Styl jest kolejno przypisywany elementom input, które uaktywniam. Rezultat widać na rysunku 18.17.
Rysunek 18.17. Rezultat zastosowania selektora :focus
Inne pseudoselektory Istnieją selektory, których nie można przyporządkować przedstawionym w tym rozdziale kategoriom. Omówię je kolejno w poniższych punktach.
Selektor negacji Selektor negacji pozwala na dokonanie inwersji wyboru. Jest to zaskakująco użyteczny, choć niedoceniany selektor. W tabeli 18.10 znajduje się opis selektora negacji. Listing 18.18 przedstawia selektor negacji w użyciu.
392
ROZDZIAŁ 18. SELEKTORY CSS — CZĘŚĆ II
Tabela 18.10. Selektor negacji Selektor:
:not()
Odnosi się do:
Dokonuje inwersji selektora.
Obecny od wersji CSS:
3
Listing 18.18. Zastosowanie selektora negacji
Przykład
Odwiedź stronę Helionu Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
Selektor ten odnosi się do wszystkich elementów a, których wartość atrybutu href nie zawiera ciągu helion. Rezultat widać na rysunku 18.18.
Rysunek 18.18. Zastosowanie selektora negacji
Selektor :empty Selektor :empty odnosi się do elementów pozbawionych dzieci. Jego opis znajduje się w tabeli 18.11. Trudno ukazać przykład jego zastosowania, ponieważ nie odnosi się on do treści. Tabela 18.11. Selektor :empty Selektor:
:empty
Odnosi się do:
Elementów pozbawionych dzieci.
Obecny od wersji CSS:
3
393
ROZDZIAŁ 18. SELEKTORY CSS — CZĘŚĆ II
Selektor :lang Selektor :lang wybiera elementy na podstawie atrybutu globalnego :lang (opisanego w rozdziale 3.). W tabeli 18.12 znajduje się opis tego selektora. Tabela 18.12. Selektor :lang Selektor:
:lang()
Odnosi się do:
Elementów na podstawie wartości globalnego atrybutu lang.
Obecny od wersji CSS:
2
W listingu 18.19 widnieje przykład zastosowania selektora :lang. Listing 18.19. Zastosowanie selektora :lang
Przykład
Odwiedź stronę Helionu
Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
W powyższym przykładzie selektor ten wybiera elementy, których atrybut lang wskazuje na to, że napisane są po angielsku. Rezultat zastosowania selektora :lang jest taki sam, jak w przypadku selektora |=, którego przykład użycia widnieje w listingu 17.8 w rozdziale 17.
Selektor :target W rozdziale 3. wspomniałem, że do adresu URL można dodać identyfikator fragmentu, by przejść bezpośrednio do elementu określonego wartością globalnego atrybutu id. Gdyby w dokumencie HTML przyklad.html znajdował się element z atrybutem id o wartości myelement, to mógłbyś bezpośrednio przejść do niego, podając adres przyklad.html#myelement. Selektor :target wybiera element, do którego odnosi się identyfikator fragmentu URL. W tabeli 18.13 znajduje się opis tego selektora. Tabela 18.13. Selektor :target Selektor:
:target
Odnosi się do:
Elementu oznaczonego identyfikatorem fragmentu.
Obecny od wersji CSS:
3
W listingu 18.20 widać przykład zastosowanie selektora :target.
394
ROZDZIAŁ 18. SELEKTORY CSS — CZĘŚĆ II
Listing 18.20. Zastosowanie selektora :target
Przykład
Odwiedź stronę Helionu Lubię jabłka i pomarańcze.
Odwiedź stronę W3C
Zmiany wyglądu elementów wywoływanych selektorem :target widać na rysunku 18.19.
Rysunek 18.19. Zastosowanie selektora :target
Podsumowanie W tym rozdziale przedstawiłem selektory CSS służące do wskazywania elementów, którym ma być przypisany styl. Selektory pozwalają na wybieranie ogólnych kategorii elementów, a łącząc selektory, możesz zawęzić wybór do konkretnych elementów. Zapoznanie się z selektorami jest podstawą efektywnego korzystania z CSS.
395
ROZDZIAŁ 18. SELEKTORY CSS — CZĘŚĆ II
396
ROZDZIAŁ 19
Obramowania i tła
W tym rozdziale przedstawię właściwości służące do określania wyglądu tła i obramowania elementu. Te powszechnie wykorzystywane funkcje zostały w CSS3 ulepszone. Przykładowo, można teraz tworzyć obramowania o zaokrąglonych narożnikach, używać obrazów jako obramowań i nadawać elementom cienie. Wydawałoby się, że to nic szczególnego, ale nieobecność tych funkcji w CSS wymusiła konieczność wynajdowania innych sposobów na uzyskiwanie odpowiednich efektów graficznych — z mieszanymi skutkami. W tabeli 19.1 znajduje się streszczenie całego rozdziału. Tabela 19.1. Streszczenie rozdziału Problem
Rozwiązanie
Listing
Nadanie elementowi obramowania.
Użyj właściwości border-width, border-style i border-color.
19.1
Nadanie obramowania pojedynczej krawędzi pola elementu.
Użyj właściwości odnoszących się do krawędzi, np. border-top-width, border-top-style i border-top-color.
19.2
Określenie stylu, koloru i szerokości obramowania jedną deklaracją.
Użyj właściwości border do określenia obramowania wszystkich krawędzi bądź właściwości border-top, border-bottom, border-left i border-right do określenia obramowania pojedynczej krawędzi.
19.3
Utworzenie obramowania o zaokrąglonych rogach.
Użyj właściwości border-radius lub jednej z powiązanych właściwości odnoszących się do poszczególnych krawędzi.
19.4, 19.5
Użycie obrazu do utworzenia krawędzi.
Użyj właściwości border-image lub jednej z właściwości odnoszących się do konkretnych krawędzi.
19.6, 19.7
Określenie koloru lub obrazu tła.
Użyj właściwości background-color lub background-image.
19.8
Określenie położenia obrazu tła.
Użyj właściwości background-position.
19.9
Określenie relacji pomiędzy tłem elementu a obszarem jego przewijania.
Użyj właściwości background-attachment.
19.10
Określenie pozycji początkowej tła i jego przycinania.
Użyj właściwości background-origin i background-clip.
19.11, 19.12
ROZDZIAŁ 19. OBRAMOWANIA I TŁA
Tabela 19.1. Streszczenie rozdziału — ciąg dalszy Problem
Rozwiązanie
Listing
Zdefiniowanie wszystkich właściwości tła jedną deklaracją.
Użyj właściwości background.
19.13
Nadanie elementowi cienia.
Użyj właściwości box-shadow.
19.14, 19.15
Nadanie obramowania Zacznijmy od właściwości definiujących obramowania. Używa się ich bardzo często i wykorzystamy je do stworzenia graficznej podstawy do dalszej pracy z właściwościami margin i padding w rozdziale 20. Do najważniejszych właściwości obramowania należą border-width, border-style i border-color, których opis znajduje się w tabeli 19.2. Tabela 19.2. Podstawowe właściwości obramowania Właściwość
Opis
Wartości
border-width
Określa szerokość obramowania.
Tabela 19.3
border-style
Określa styl obramowania.
Tabela 19.4
border-color
Określa kolor obramowania.
Przykład zastosowania tych właściwości widać w listingu 19.1. Listing 19.1. Podstawowe obramowanie
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
W listingu 19.1 określiłem akapit elementem p, a elementem style nadałem mu obramowanie, które zdefiniowałem właściwościami border-width, border-style i border-color.
398
ROZDZIAŁ 19. OBRAMOWANIA I TŁA
Szerokość obramowania Właściwości border-width możesz nadać wartość wyrażoną w typowych jednostkach miary, procentową albo podaną jako jedno z trzech skrótowych określeń. W tabeli 19.3 znajduje się ich opis. Domyślna wartość border-width to medium. Tabela 19.3. Wartości właściwości border-width Wartość
Opis
Określa szerokość obramowania wyrażoną jednostkami miary CSS, np. em, px i cm.
%
Określa szerokość obramowania wartością procentową szerokości obszaru, wokół którego obramowanie jest rozrysowywane.
thin medium thick
Określa szerokość obramowania według predefiniowanych wartości — od najcieńszego do najszerszego, choć dokładna szerokość jest inna w zależności od przeglądarki.
Styl obramowania Właściwości border-style można nadać jedną z wartości, które widnieją w tabeli 19.4. Domyślna wartość to none, czyli brak obramowania. Tabela 19.4. Wartości właściwości border-style Wartość
Opis
none
Nie rozrysowuje obramowania.
dashed
Obramowanie jest ciągiem prostokątnych kresek.
dotted
Obramowanie jest ciągiem kropek.
double
Obramowanie składa się z dwóch równoległych linii z odstępem pomiędzy nimi.
groove
Obramowanie sprawia wrażenie wgłębionego w stronę.
inset
Obramowanie wywołuje wrażenie, jakby obszar w jego obrębie był wgłębiony w stronę.
outset
Obramowanie wywołuje wrażenie, jakby obszar w jego obrębie wystawał ze strony.
ridge
Obramowanie sprawia wrażenie wystającego ze strony.
solid
Obramowanie składa się z pojedynczej, nieprzerwanej linii.
Wygląd wszystkich tych rodzajów obramowania widać na rysunku 19.1. Niektóre przeglądarki mają trudności z nadawaniem stylów obramowania opartych na dwóch kolorach, takich jak inset i outset, kiedy właściwości border-color nadana jest wartość black. Takie przeglądarki (w tym m.in. Google Chrome) używają koloru czarnego w charakterze obydwu tonów, co tworzy obramowanie wyglądające tak samo, jak w przypadku stylu solid. Inteligentniejsze przeglądarki — jak np. Firefox — wiedzą, że w takiej sytuacji należy użyć odcienia szarości. Aby uzyskać powyższy rysunek, który przedstawia przeglądarkę Chrome, nadałem właściwości border-color wartość gray dla stylów groove, inset, outset i ridge.
Nałożenie obramowania na jedną krawędź Na każdą krawędź elementu można nałożyć inne obramowanie, wykorzystując w tym celu bardziej szczegółowe właściwości, które opisuję w tabeli 19.5.
399
ROZDZIAŁ 19. OBRAMOWANIA I TŁA
Rysunek 19.1. Różne wartości właściwości border-style Tabela 19.5. Właściwości obramowania odnoszące się do poszczególnych krawędzi Właściwość
Opis
Wartości
border-top-width border-top-style border-top-color
Definiuje górną krawędź.
Takie same, jak dla ogólnych właściwości krawędzi.
border-bottom-width border-bottom-style border-bottom-color
Definiuje dolną krawędź.
Takie same, jak dla ogólnych właściwości krawędzi.
border-left-width border-left-style border-left-color
Definiuje lewą krawędź.
Takie same, jak dla ogólnych właściwości krawędzi.
border-right-width border-right-style border-right-color
Definiuje prawą krawędź.
Takie same, jak dla ogólnych właściwości krawędzi.
Powyższe właściwości możesz wykorzystywać do tworzenia całych obramowań lub łączyć je z ich ogólnymi odpowiednikami w celu nadpisania cech poszczególnych krawędzi. W listingu 19.2 widnieje przykład wykorzystania tych właściwości zgodnie z drugim podejściem. Listing 19.2. Zastosowanie właściwości odnoszących się do poszczególnych krawędzi
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Rezultat zastosowania tych właściwości widać na rysunku 19.2.
Rysunek 19.2. Nadawanie obramowania poszczególnym krawędziom
Właściwości zbiorcze obramowania Zamiast używać poszczególnych właściwości stylu, szerokości i koloru, możesz korzystać z właściwości zbiorczych, by podać wszystkie wartości w jednej deklaracji. W tabeli 19.6 znajduje się opis tych właściwości. Tabela 19.6. Właściwości zbiorcze border Właściwość
Opis
Wartości
border
Definiuje obramowanie wszystkich krawędzi.
border-top border-bottom border-left border-right
Definiuje obramowanie wybranej krawędzi.
Wartości tych właściwości możesz określić w jednej deklaracji, podając kolejno oddzielone spacjami wartości szerokości, stylu i koloru, tak jak w listingu 19.3. Listing 19.3. Zastosowanie właściwości zbiorczych obramowania
Przykład
401
ROZDZIAŁ 19. OBRAMOWANIA I TŁA
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Zwróć uwagę, że nie przypisałem właściwości border-top wartości koloru. Kiedy pomijasz którąś z wartości, przeglądarka używa takich, które przypisano wcześniej — w tym przypadku jest to kolor nadany zbiorczej właściwości border. Rezultat zastosowania tych właściwości widać na rysunku 19.3.
Rysunek 19.3. Zastosowanie właściwości zbiorczych obramowania
Obramowania z zaokrąglonymi rogami Obramowanie z zaokrąglonymi rogami możesz utworzyć przy pomocy funkcji radius, z którą powiązanych jest pięć właściwości. W tabeli 19.7 znajduje się opis każdej z nich. Tabela 19.7. Właściwości radius obramowania Właściwość
Opis
Wartości
border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius
Określa promień pojedynczego narożnika.
Para jednostek miary lub wartości procentowych. Wartości procentowe odnoszą się do długości i szerokości obramowania.
border-radius
Zbiorczo określa promienie wszystkich narożników.
Jedna lub cztery pary jednostek miary lub procentowych, oddzielone znakiem /.
Zaokrąglone narożniki definiuje się, podając dwie wartości promienia, czy to jako jednostki miary, czy wartości procentowe. Pierwsza wartość określa promień poziomy, a druga pionowy. Wartości procentowe odnoszą się do wielkości pola elementu w poziomie i pionie. Na rysunku 19.4 widać przykład wykorzystania wartości promienia do utworzenia zaokrąglonego narożnika.
402
ROZDZIAŁ 19. OBRAMOWANIA I TŁA
Rysunek 19.4. Określenie zaokrąglenia narożnika wartościami promienia Jak widać na rysunku, wartości promienia służą do utworzenia nałożonego na pole elementu owalu, który określa kształt narożnika. W listingu 19.4 wartości te podane są w deklaracji stylu. Listing 19.4. Utworzenie zaokrąglonego narożnika obramowania
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Kiedy podana jest tylko jedna wartość, to jest ona przypisana promieniowi zarówno poziomemu, jak i pionowemu. Wygląd narożnika obramowania widać na rysunku 19.5 — powiększyłem obszar, na którym znajduje się narożnik, by łatwiej było mu się przyjrzeć.
Rysunek 19.5. Utworzenie zaokrąglonego narożnika Wskazówka Zauważ, że widoczne na rysunku obramowanie nachodzi na tekst. Do tworzenia przestrzeni między treścią elementu a jego obramowaniem służą dopełnienia, które omówię w rozdziale 20.
403
ROZDZIAŁ 19. OBRAMOWANIA I TŁA
Właściwość zbiorcza border-radius pozwala nadać jedną wartość wszystkim czterem narożnikom bądź czterech pojedynczych wartości w jednej deklaracji, tak jak widać w listingu 19.5. Listing 19.5. Zastosowanie właściwości zbiorczej border-radius
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
W listingu 19.5 widnieją dwa akapity, którym przypisano dwie oddzielne deklaracje border-radius. W pierwszej podane są tylko dwie wartości, które odnoszą się do wszystkich czterech rogów obramowania. Zauważ, że wartości poziomych promieni oddzielone są od wartości pionowych znakiem /. W drugiej deklaracji podałem osiem wartości. Pierwsze cztery wartości określają poziome promienie każdego narożnika, a ostatnie cztery pionowe. Te zbiory wartości również są oddzielone znakiem /. Rezultat użycia tych deklaracji widać na rysunku 19.6. Wygląda dość dziwnie, ale dzięki temu widać, jak można pojedynczą deklaracją zdefiniować różne zaokrąglenia poszczególnych narożników oraz do woli zestawiać wartości procentowe i jednostki miary.
Obrazy w obramowaniu Nie trzeba się ograniczać do tworzenia obramowań przy użyciu właściwości border-style. Do tworzenia specjalnych obramowań elementów można też używać obrazów. Poszczególne cechy obramowania obrazkowego określa się pięcioma właściwościami, ale cechy całego obramowania można też zdefiniować w jednej deklaracji. W tabeli 19.8 znajduje się omówienie wszystkich sześciu właściwości.
404
ROZDZIAŁ 19. OBRAMOWANIA I TŁA
Rysunek 19.6. Zastosowanie właściwości zbiorczej border-radius Tabela 19.8. Właściwości border-image Właściwość
Opis
Wartości
border-image-source
Określa źródło obrazu.
none lub url()
border-image-slice
Określa odstępy między cięciami obrazu.
1 – 4 wartości procentowe lub w jednostkach miary, przy czym wartości odnoszą się do szerokości i wysokości obrazu.
border-image-width
Określa szerokość obramowania.
auto
border-image-outset
Określa obszar poza standardowym obramowaniem, na którym ma być wyświetlane obramowanie obrazkowe.
1 – 4 wartości procentowe lub w jednostkach miary.
border-image-repeat
Określa sposób, w jaki obraz wypełnia obszar obramowania.
Jedna lub dwie wartości spośród następujących: stretch, repeat i round.
border-image
Właściwość zbiorcza, która pozwala na podanie wszystkich wartości w jednej deklaracji.
Takie same, jak przy właściwościach szczegółowych; więcej przeczytasz poniżej.
1 – 4 wartości procentowe lub w jednostkach miary.
Niestety, kiedy piszę te słowa, popularne przeglądarki nie obsługują tych właściwości. Wprawdzie można tworzyć obramowania obrazkowe, ale jedynie przy użyciu właściwości zbiorczej oznaczonej prefiksami przeglądarkowymi, które opisałem w rozdziale 16.; IE w ogóle nie obsługuje tej funkcji. Z tego powodu mogę Ci zademonstrować użycie ogólnej funkcji, ale nie szczegółowych właściwości. Właściwości zbiorcze charakterystyczne dla poszczególnych przeglądarek działają tak samo jak właściwość border-image, więc nie powinieneś mieć żadnego problemu z przełożeniem przedstawionych w tym punkcie przykładów na standardowe właściwości, kiedy przeglądarki zaczną je obsługiwać.
Cięcie obrazu Cięcie obrazu jest podstawą wykorzystania obrazu jako obramowania. Podane wartości określają odstępy, według których przeglądarka dzieli obraz na dziewięć części. Na potrzeby wizualizacji stworzyłem obraz, który pozwoli nam zobaczyć, jak przeglądarka dzieli obraz na części i jak wykorzystuje każdą z nich. Widać go na rysunku 19.7.
405
ROZDZIAŁ 19. OBRAMOWANIA I TŁA
Rysunek 19.7. Obraz, który powstał na potrzeby wizualizacji działania funkcji obramowania Obraz ma wymiary 90×90 pikseli, a pojedyncze fragmenty 30×30 pikseli. Środkowy fragment jest przezroczysty. W celu podzielenia obrazu należy podać odległości od górnej, prawej, dolnej i lewej krawędzi obrazu, przedstawione jako konkretne długości lub wartości procentowe wielkości całego obrazu. Wszystkie cztery odstępy można zdefiniować osobno lub dwiema wartościami określającymi odstępy poziome i pionowe. Można też podać pojedynczą wartość, określającą wszystkie cztery odstępy. W tym przypadku podałem pojedynczą wartość 30px, tworząc tym samym odpowiednie fragmenty, tak jak widać na rysunku 19.8.
Rysunek 19.8. Cięcie obrazu obramowania W wyniku cięcia obrazu powstaje osiem fragmentów. Fragmenty oznaczone numerami 1, 3, 6 i 8 używane są jako narożniki, a numerami 2, 4, 5 i 7 jako krawędzie obramowania. W listingu 19.6 widnieją właściwości poszczególnych przeglądarek, służące do dzielenia obrazu i używania jego fragmentów jako obramowania. Listing 19.6. Wykorzystanie pociętego obrazu jako obramowania
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Każda z przedstawionych deklaracji właściwości używa tych samych argumentów. Do podania obrazu należy użyć funkcji url — przestrzeganie tej formuły jest konieczne, ponieważ specyfikacja CSS przewiduje możliwość wdrożenia innych sposobów pobierania obrazów. W każdym przypadku podałem pojedynczą wartość cięcia 30, co odpowiada rozmiarom fragmentów przykładowego obrazu. Zauważ, że przy określaniu odstępów cięć nie podaje się jednostek miary — zakłada się, że to piksele. Znak / służy do oddzielania wartości cięć od wartości określających szerokość obramowania. Dla każdego boku elementu można określić inną szerokość, ale w tym przypadku postanowiłem podać jedną wartość dla wszystkich czterech — 50px. Na rysunku 19.9 widać, jak obraz wygląda w Chrome; w Firefoksie i Operze jego wygląd jest taki sam.
Rysunek 19.9. Wykorzystanie obrazu jako obramowania Powyżej widać, jak przeglądarka wykorzystuje każdy z fragmentów obrazu. Fragmenty oznaczone numerami 2 i 7 są mało czytelne, ale to dlatego, że przypisane zostały górnej i dolnej krawędzi.
Styl powtórzeń fragmentów Na rysunku 19.9 widać, że fragmenty zostały rozciągnięte tak, by wypełniły obszar obramowania. Aby uzyskać inny efekt, wystarczy zmienić styl powtórzeń przy użyciu właściwości border-image-repeat; powtórzenia można też definiować przy użyciu właściwości zbiorczych. W tabeli 19.9 znajduje się opis wartości stylu powtórzeń. Kiedy piszę te słowa, z obsługą wartości stylów powtórzeń bywa różnie. Żadna z przeglądarek nie obsługuje wartości space, a Chrome nie obsługuje wartości round. W listingu 19.7 widać przykład zastosowania wartości repeat i round w Firefoksie do zmiany stylu powtórzeń obramowania.
407
ROZDZIAŁ 19. OBRAMOWANIA I TŁA
Tabela 19.9. Wartości właściwości border-image-repeat Wartość
Opis
stretch
Fragment rozciągany jest tak, by wypełnić cały obszar; jest to wartość domyślna.
repeat
Fragment jest powtarzany, by wypełnić cały obszar, przez co w obramowaniu mogą występować urwane fragmenty.
round
Fragment jest rozciągany i powtarzany, co pozwala zapobiec pojawianiu się urwanych fragmentów.
space
Fragment powtarzany jest bez cięcia poszczególnych fragmentów, a pozostała przestrzeń rozdzielana jest równomiernie.
Listing 19.7. Zastosowanie stylu repeat przy określaniu powtórzeń fragmentów obramowania
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
W listingu 19.7 pierwsza wartość określa styl powtórzeń w poziomie, a druga w pionie. Gdybym podał tylko jedną wartość, to zostałaby ona wykorzystana przy powtórzeniach poziomych i pionowych. Różnice pomiędzy tymi dwiema wartościami widać na rysunku 19.10.
Rysunek 19.10. Zastosowanie wartości round i repeat przy określaniu powtórzeń fragmentów obrazu obramowania
408
ROZDZIAŁ 19. OBRAMOWANIA I TŁA
Zauważ, że górna i dolna krawędź nie zawierają urwanych fragmentów. Cyfry 2 i 7 zostały nieco rozciągnięte i powtórzone, dzięki czemu nie są w żadnym miejscu urwane. Tymczasem cyfry występujące na obszarze lewej i prawej krawędzi, którym nadano styl repeat, są urwane.
Tła elementów Drugim widocznym obszarem pola elementu jest jego treść. W tym podrozdziale przedstawię Ci właściwości służące do stylizacji tego obszaru. (Szczegóły co do stylizacji samej treści omówię w rozdziale 22.). Ich opis znajduje się w tabeli 19.10. Tabela 19.10. Właściwości tła Właściwość
Opis
Wartości
background-color
Określa kolor tła elementu. Kolor wyświetlany jest pod obrazami.
background-image
Określa obrazy tła elementu. Jeżeli podany jest więcej niż jeden obraz, to każdy kolejny jest rozrysowywany za tym, który go poprzedza.
none lub url(obraz)
background-repeat
Określa styl powtórzeń obrazów.
Tabela 19.11
background-size
Określa wielkość obrazu tła.
Tabela 19.12
background-position
Określa położenie obrazu tła.
Tabela 19.13
background-attachment
Określa zaczepienie obrazów tła znajdujących się w elemencie z własnym obszarem widoku.
Tabela 19.14
background-clip
Określa obszar przycinania.
Tabela 19.15
background-origin
Określa pozycję początkową obrazu tła.
Tabela 19.15
background
Właściwość zbiorcza.
Omówienie znajdziesz poniżej.
Kolor i obraz tła Wybór tła elementu należy zacząć od określenia koloru lub obrazu tła (bądź i jednego, i drugiego) przy użyciu właściwości tła przedstawionych w listingu 19.8. Listing 19.8. Określenie koloru i obrazu tła
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
W tym przykładzie nadałem właściwości background-color wartość lightgray, a funkcję url zastosowałem do wczytania obrazu banana.png, przypisanego właściwości background-image. Rezultat widać na rysunku 19.11. Obraz tła zawsze jest rozrysowywany nad kolorem tła.
Rysunek 19.11. Kolor i obraz tła Powyższy obraz wprawdzie gryzie się z tekstem elementu, ale tak się zwykle dzieje, jeżeli obraz tła nie jest dobrany bardzo starannie. Zauważ, że obraz jest wielokrotnie powtórzony w poziomie. Efekt ten uzyskuje się przy użyciu właściwości background-repeat, której obsługiwane wartości opisane są w tabeli 19.11. Tabela 19.11. Wartości background-repeat Wartość
Opis
repeat-x
Powtarza obraz w poziomie; obraz może być urwany.
repeat-y
Powtarza obraz w pionie; obraz może być urwany.
repeat
Powtarza obraz w obydwu kierunkach; obraz może być urwany.
space
Obraz powtarzany jest aż do wypełnienia obszaru, lecz bez urywania fragmentów; pozostała przestrzeń rozkłada się równomiernie między powtórzonymi obrazami.
round
Obraz jest skalowany tak, by powtórzone fragmenty nie były urwane.
no-repeat
Obraz nie jest powtarzany.
Charakter powtórzeń można określić zarówno w poziomie, jak i w pionie. Kiedy podana jest tylko jedna wartość, przeglądarka używa jej w odniesieniu do obydwu kierunków. Wartości repeat-x i repeat-y to wyjątki — kiedy któraś z nich jest podana, przeglądarka używa stylu no-repeat jako drugiej wartości.
Rozmiar obrazu tła Podany przeze mnie obraz jest większy od elementu, więc użyłem właściwości background-size, by zmniejszyć go do wielkości 40×40 pikseli. Wielkość można też określać odnoszącymi się do szerokości i wysokości obrazu wartościami procentowymi, a także predefiniowanymi wartościami, które opisuję w tabeli 19.12.
410
ROZDZIAŁ 19. OBRAMOWANIA I TŁA
Tabela 19.12. Wartości background-size Wartość
Opis
contain
Obraz skalowany jest do największego rozmiaru, przy jakim może się zmieścić w obszarze wyświetlania, z jednoczesnym zachowaniem proporcji.
cover
Obraz skalowany jest do najmniejszego rozmiaru, przy jakim może się zmieścić w obszarze wyświetlania, z jednoczesnym zachowaniem proporcji.
auto
Domyślna wartość. Obraz wyświetlany jest w pełnym rozmiarze.
Zastosowanie wartości contain powoduje zeskalowanie obrazu tak, aby był w całości widoczny w obrębie elementu. Przeglądarka sama stwierdza, czy większa jest szerokość, czy długość obrazu, po czym skaluje według dłuższej osi. Z kolei wartość cover poleca przeglądarce, by skalowała obraz według krótszej osi, wobec czego nie cały obraz jest widoczny. Przykład zastosowania dwóch różnych stylów skalowania widać na rysunku 19.12.
Rysunek 19.12. Style skalowania contain i cover Wysokość obrazka z bananem jest większa od jego szerokości. Kiedy więc używasz wartości cover, obraz jest skalowany tak, by zachować szerokość obrazu, pomimo że nie widać jego pełnej wysokości. Rezultatem tego jest element u góry rysunku 19.12. Kiedy używasz wartości contain, obraz jest skalowany tak, by w pełni była widoczna jego najdłuższa oś — obraz jest zatem widoczny w całości, pomimo że nie zajmuje całego obszaru tła. Rezultatem tego jest element u dołu rysunku 19.12.
Położenie obrazu tła Właściwość background-position służy do wskazywania przeglądarce, gdzie powinna zamieścić obraz tła, i najbardziej się przydaje, kiedy nie używasz funkcji powtarzania obrazu. Przykład zastosowania tej właściwości widać w listingu 19.9. Listing 19.9. Określenie położenia obrazu tła
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Powyższa deklaracja wskazuje przeglądarce, by zaczęła rozrysowywać obraz tła w odległości 30 pikseli od lewej krawędzi i 10 pikseli od górnej. Położenie zdefiniowałem przy użyciu jednostek miary, choć mogłem też skorzystać z predefiniowanych wartości podanych w tabeli 19.13. Tabela 19.13. Wartości background-position Wartość
Opis
top
Umieszcza obraz przy górnej krawędzi.
left
Umieszcza obraz przy lewej krawędzi.
right
Umieszcza obraz przy prawej krawędzi.
bottom
Umieszcza obraz przy dolnej krawędzi.
center
Umieszcza obraz pośrodku obszaru.
Pierwsza wartość określa położenie obrazu w pionie — może to być top, bottom lub center. Druga wartość określa położenie poziome — może to być left, right lub center. Rezultat zastosowania deklaracji z powyższego przykładu widać na rysunku 19.13.
Rysunek 19.13. Określenie pozycji obrazu tła
Zaczepienie obrazu tła Kiedy nadajesz tło elementowi z własnym polem widoku, możesz określić jego zaczepienie. Dobrym przykładem takiego elementu jest textarea, który opisałem w rozdziale 14. — automatycznie pojawiają się w nim paski przewijania treści. Innym typowym przykładem jest element body (omówiony szczegółowo
412
ROZDZIAŁ 19. OBRAMOWANIA I TŁA
w rozdziale 7.), w którym pojawiają się paski przewijania, kiedy znajduje się w nim więcej treści, niż mieści się w oknie przeglądarki. Zaczepienie obrazu definiuje się właściwością background-attachment. W tabeli 19.14 znajdują się obsługiwane przez niego wartości. Tabela 19.14. Wartości background-attachment Wartość
Opis
fixed
Tło jest przyczepione do okna przeglądarki, czyli nie przewija się wraz z treścią.
local
Tło jest przyczepione do treści, czyli przewija się wraz z nią.
scroll
Tło jest przyczepione do elementu i nie przewija się z treścią.
W listingu 19.10 widnieje element textarea o zdefiniowanej właściwości background-attachment. Listing 19.10. Zastosowanie właściwości background-attachment
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Działania poszczególnych trybów przyczepienia nie mogę zademonstrować na rysunkach — to coś, co sam musisz zobaczyć w przeglądarce. Aby ujrzeć różnice w działaniu trybów fixed i scroll, otwórz przykładowy dokument HTML, zmień wielkość okna przeglądarki tak, by element textarea nie był w pełni widoczny, a następnie przewiń treść paskiem przeglądarki (ale nie paskiem elementu textarea).
Pozycja początkowa tła i styl przycinania Pozycja początkowa tła określa, na które miejsce w polu elementu nałożony ma być kolor lub obraz tła. Styl przycinania określa, w którym obszarze pola elementu kolor i obraz tła są rozrysowywane. Za te funkcje odpowiadają właściwości background-origin i background-clip, które obsługują te same trzy wartości, opisane w tabeli 19.15.
413
ROZDZIAŁ 19. OBRAMOWANIA I TŁA
Tabela 19.15. Wartości background-origin i background-clip Wartość
Opis
border-box
Kolor i obraz tła rozrysowywane są w obrębie obramowania.
padding-box
Kolor i obraz tła rozrysowywane są w obrębie pola dopełnienia.
content-box
Kolor i obraz tła rozrysowywane są w obrębie pola treści.
W listingu 19.11 widać przykład zastosowania właściwości background-origin. Listing 19.11. Zastosowanie właściwości background-origin
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
W listingu 19.11 użyłem wartości border-box, wobec czego przeglądarka rozrysowuje kolor i obraz tła od pola obramowania — i pod obramowaniem. Pod obramowaniem, ponieważ obramowanie zawsze jest rozrysowywane nad tłem. Rezultat widać na rysunku 19.14.
Rysunek 19.14. Zastosowanie właściwości background-origin
414
ROZDZIAŁ 19. OBRAMOWANIA I TŁA
Właściwość background-clip określa, która część tła jest widoczna, poprzez nałożenie pola przycinania. Elementy graficzne znajdujące się poza nim nie są wyświetlane. Właściwości tej możesz nadawać te same trzy wartości, co w przypadku background-origin, a rezultat ich połączenia widać w listingu 19.12. Listing 19.12. Zastosowanie właściwości background-clip
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Powyższa kombinacja poleca przeglądarce, by rozrysowała tło od pola obramowania, lecz nie wyświetlała tego, co znajduje się poza polem treści. Dość subtelny efekt widać na rysunku 19.15.
Rysunek 19.15. Zastosowanie właściwości border-origin i border-clip w zestawieniu
Właściwość zbiorcza background Właściwość background pozwala na określenie wszystkich szczegółowych wartości tła w pojedynczej deklaracji. Oto właściwy format deklaracji wartości tej właściwości, która odnosi się do właściwości szczegółowych:
415
ROZDZIAŁ 19. OBRAMOWANIA I TŁA
background:
Jest to dość rozwlekła deklaracja, ale możesz pomijać poszczególne wartości — przeglądarka używa wtedy wartości domyślnych. W listingu 19.13 widnieje przykład zastosowania właściwości zbiorczej background. Listing 19.13. Zastosowanie właściwości zbiorczej background
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Powyższa właściwość zbiorcza ma takie samo znaczenie, jak zbiór następujących właściwości szczegółowych: background-color: lightgray; background-position: top right; background-repeat: no-repeat; background-origin: border-box; background-position: content-box; background-attachment: local; background-image: url(banana.png);
Wskazówka Obecnie nie wszystkie przeglądarki obsługują tę właściwość.
Cienie Jedną z najbardziej wyczekiwanych funkcji CSS3 jest możliwość nadania cienia polu elementu. Służy do tego właściwość drop-shadow, którą omawiam w tabeli 19.16. Tabela 19.16. Właściwość drop-shadow Właściwość
Opis
Wartości
drop-shadow
Definiuje cień elementu.
Tabela 19.17
416
ROZDZIAŁ 19. OBRAMOWANIA I TŁA
Ogólna wartość elementu box-shadow składa się z następujących szczegółowych wartości: box-shadow: hoffset voffset blur spread color inset
Ich opis znajduje się w tabeli 19.17. Tabela 19.17. Wartości właściwości box-shadow Wartość
Opis
hoffset
Poziome oddalenie wyrażane jednostkami miary odległości. Wartość dodatnia przesuwa cień w prawo, a ujemna w lewo.
voffset
Pionowe oddalenie wyrażane jednostkami miary odległości. Wartość dodatnia przesuwa cień w dół, a ujemna w górę.
blur
(Opcjonalna). Określa promień rozmycia, wyrażany jednostkami miary odległości. Im większa wartość, tym bardziej rozmyta jest krawędź pola. Przy wartości domyślnej 0 krawędź pola jest ostra.
spread
(Opcjonalna). Określa promień szerokości cienia, wyrażany jednostkami miary odległości. Dodatnie wartości rozszerzają cień we wszystkie strony, a ujemne sprawiają, że cień ściągany jest ku polu.
color
(Opcjonalna). Kolor cienia. Przeglądarka sama wybiera kolor, kiedy ta wartość jest pominięta.
inset
(Opcjonalna). Sprawia, że cień znajduje się w obrębie pola. W listingu 19.15 znajdziesz tego przykład.
Ostrzeżenie Zastanów się dobrze, czy warto pominąć wartość color. Powinna to być wartość opcjonalna, której pominięcie pozwala przeglądarce na wykorzystanie domyślnej barwy, być może odpowiedniej dla systemu operacyjnego lub samej przeglądarki. Tymczasem w chwili, kiedy to piszę, przeglądarki oparte na Webkit nie rozrysowują cieni, kiedy kolor nie jest zdefiniowany. Z tego względu warto jednoznacznie określić barwę wartością box-shadow.
Przykład zastosowania tej właściwości widać w listingu 19.14. Listing 19.14. Utworzenie cienia
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
417
ROZDZIAŁ 19. OBRAMOWANIA I TŁA
Rezultat zastosowania tej właściwości widać na rysunku 19.16.
Rysunek 19.16. Przypisany elementowi cień W pojedynczej deklaracji box-shadow można definiować więcej niż jeden cień. Wystarczy oddzielić wartości kolejnych cieni przecinkami, tak jak widać w listingu 19.15. Listing 19.15. Nadanie elementowi więcej niż jednego cienia
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
W listingu 19.15 zdefiniowałem dwa cienie, przy czym jeden znajduje się wewnątrz elementu. Rezultat widać na rysunku 19.17.
Obrysy Obrysów można używać zamiast obramowań. Przydają się najbardziej, kiedy chcesz zwrócić użytkownikowi uwagę na jakiś element, np. przycisk, który trzeba nacisnąć, lub błąd w danych. Obrysy rysowane są na krawędziach pola obramowania. Główną różnicą między obramowaniem a obrysem jest to, że obrysy nie są traktowane jako część strony, przez co layout nie dostosowuje się do nich. W tabeli 19.18 znajduje się opis właściwości odnoszących się do obrysów.
418
ROZDZIAŁ 19. OBRAMOWANIA I TŁA
Rysunek 19.17. Nadanie elementowi więcej niż jednego cienia Tabela 19.18. Właściwości outline Właściwość
Opis
Wartości
outline-color
Określa kolor obrysu.
outline-offset
Określa oddalenie obrysu.
outline-style
Określa styl obrysu.
Takie same, jak właściwości border-style (tabela 19.4).
outline-width
Określa szerokość obrysu.
thin medium thick
outline
Właściwość zbiorcza, określająca obrys w jednej deklaracji.
W listingu 19.16 widać przykład zastosowania obrysu. Zamieściłem w tym przykładzie prosty skrypt, aby ukazać, jak obrysy mogą być rozrysowywane bez zmiany layoutu strony. Listing 19.16. Zastosowanie obrysu
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy
419
ROZDZIAŁ 19. OBRAMOWANIA I TŁA
uwzględnili niezliczone odmiany jabłek, pomarańczy i innych dokonać wyboru spośród tysięcy możliwości.
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad uwzględnili niezliczone odmiany jabłek, pomarańczy i innych dokonać wyboru spośród tysięcy możliwości.
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad uwzględnili niezliczone odmiany jabłek, pomarańczy i innych dokonać wyboru spośród tysięcy możliwości.
Wyłącz obrys Włącz obrys
owoców, musielibyśmy
pięćset odmian. Gdybyśmy owoców, musielibyśmy
pięćset odmian. Gdybyśmy owoców, musielibyśmy
Rezultat zastosowania obrysu widać na rysunku 19.18. Zauważ, że elementy nie zmieniają położenia. Jest tak, ponieważ obrysy nie zajmują przestrzeni w layoucie strony.
Rysunek 19.18. Nadanie elementowi obrysu
420
ROZDZIAŁ 19. OBRAMOWANIA I TŁA
Podsumowanie W tym rozdziale przedstawiłem Ci właściwości służące do tworzenia obramowań, teł i obrysów pola elementu. Obramowania można wybierać ze zbioru prostych stylów lub tworzyć je od początku przy użyciu obrazów. Techniką leżącą u podstaw tworzenia obramowań obrazkowych jest cięcie obrazu na fragmenty, które są następnie wykorzystywane do rozrysowywania różnych części obramowania. Obramowania możesz uzupełniać tłami. Pokazałem Ci, jak tworzyć tła składające się z kolorów i obrazów, oraz sposoby konfigurowania ich relacji z polem elementu w ogóle. Rozdział zakończyłem omówieniem cieni, które wraz z zaokrąglonymi narożnikami są najważniejszymi nowymi funkcjami CSS3 z dziedziny obramowań i teł.
421
ROZDZIAŁ 19. OBRAMOWANIA I TŁA
422
ROZDZIAŁ 20
Model polowy
W tym rozdziale omówię właściwości CSS służące do konfiguracji pola elementu. W rozdziale 16. objaśniłem, że model polowy to jedna z koncepcji leżących u podstaw CSS i można go używać zarówno w konfiguracji wyglądu elementów, jak i ogólnego układu dokumentu. W tabeli 20.1 znajduje się streszczenie całego rozdziału. Tabela 20.1. Streszczenie rozdziału Problem
Rozwiązanie
Listing
Określenie wielkości pola dopełnienia.
Użyj właściwości zbiorczej padding lub właściwości padding-top, padding-bottom, padding-left i padding-right.
20.1, 20.2
Określenie wielkości pola marginesu.
Użyj właściwości zbiorczej margin lub właściwości margin-top, margin-bottom, margin-left i margin-right.
20.3
Określenie wielkości elementu.
Użyj właściwości width i height.
20.4
Określenie, do których obszarów pola wymiary się odnoszą.
Użyj właściwości box-sizing.
20.4
Określenie ograniczeń rozmiaru elementu.
Użyj właściwości max-width, min-width, max-height i min-height.
20.5
Określenie obsługi przepełnienia.
Użyj właściwości overflow, overflow-x lub overflow-y.
20.6, 20.7
Określenie widoczności elementu.
Użyj właściwości visibility; zapoznaj się też z wartością none właściwości display.
20.8
Określenie sposobu wyświetlania elementu.
Użyj właściwości display.
—
Określenie rodzaju pola, by element był wyświetlany w osobnym bloku w pionie.
Użyj właściwości display o wartości block.
20.9
Określenie rodzaju pola elementu tak, żeby był wyświetlany tak jak wyraz w akapicie.
Użyj właściwości inline o wartości block.
20.10
Określenie rodzaju pola elementu tak, żeby był traktowany jako element liniowy w odniesieniu do otaczających go treści, a jako blokowy w stosunku do treści w nim zawartych.
Użyj właściwości display o wartości inline-block.
20.11
ROZDZIAŁ 20. MODEL POLOWY
Tabela 20.1. Streszczenie rozdziału — ciąg dalszy Problem
Rozwiązanie
Listing
Określenie rodzaju pola elementu tak, by sposób jego wyświetlania był zależny od otaczających go elementów.
Użyj właściwości display o wartości run-in.
20.12, 20.13
Ukrycie elementu i jego zawartości.
Użyj właściwości display o wartości none.
20.14
Przesunięcie elementu w lewo lub w prawo, aby znajdował się przy krawędzi okalającego go pola lub innego pływającego elementu.
Użyj właściwości display o wartości float.
20.15
Zapewnienie, by pływający element nie był umieszczany obok innego pływającego elementu.
Użyj właściwości display o wartości clear.
20.16
Dopełnienia Dopełnienia dodają pustą przestrzeń pomiędzy treścią elementu a jego obramowaniem. Można określać dopełnienia poszczególnych krawędzi pola treści lub skorzystać z właściwości zbiorczej padding do zdefiniowania wartości w ramach jednej deklaracji. Właściwości padding omówione są w tabeli 20.2. Tabela 20.2. Właściwości padding Właściwość
Opis
Wartości
padding-top
Określa dopełnienie przy górnej krawędzi.
lub
padding-right
Określa dopełnienie przy prawej krawędzi.
lub
padding-bottom
Określa dopełnienie przy dolnej krawędzi.
lub
padding-left
Określa dopełnienie przy lewej krawędzi.
lub
padding
Ta właściwość zbiorcza określa dopełnienie przy wszystkich krawędziach w jednej deklaracji.
Od jednej do czterech wartości lub
Określające dopełnienie wartości procentowe odnoszą się zawsze do szerokości kontenera — wysokość nie jest brana pod uwagę. W listingu 20.1 widać przykład nadania elementowi dopełnienia. Listing 20.1. Nadanie elementowi dopełnienia
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
W listingu 20.1 nadałem inne wielkości dopełnienia poszczególnym krawędziom pola, czego rezultat widać na rysunku 20.1. Właściwość background-clip (opisaną w rozdziale 19.) zdefiniowałem tak, by kolor tła nie nachodził na obszar dopełnienia, tym samym wyróżniając efekt graficzny dopełnienia.
Rysunek 20.1. Element z dopełnieniem Właściwości zbiorczej padding można użyć do określenia dopełnienia wszystkich czterech krawędzi w jednej deklaracji. Używając jej, możesz określić od jednej do czterech wartości. Cztery podane wartości definiują kolejno dopełnienie górnej, prawej, dolnej i lewej krawędzi. Kiedy któreś wartości są pominięte, przeglądarka wykorzystuje wartość, która najbardziej pasuje: kiedy brakuje wartości lewego dopełnienia, wykorzystana jest wartość prawego dopełnienia; kiedy brakuje wartości dolnego dopełnienia, wykorzystana jest wartość dopełnienia górnego. Jeżeli podana jest tylko jedna wartość, to określa ona dopełnienie wszystkich krawędzi. W listingu 20.2 widać przykład zastosowania właściwości zbiorczej padding. Utworzyłem w tym przykładzie także zaokrąglone narożniki, by pokazać, jak wykorzystać dopełnienie do zapewnienia, żeby obramowanie nie nachodziło na treść. Listing 20.2. Zastosowanie właściwości zbiorczej padding
Przykład
425
ROZDZIAŁ 20. MODEL POLOWY
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Wygląd obramowania i dopełnienia widać na rysunku 20.2.
Rysunek 20.2. Zastosowanie właściwości zbiorczej padding Gdyby zabrakło tu dopełnienia, obramowanie zostałoby narysowane na tekście, tak jak w przykładzie w rozdziale 19. Dopełnienie pozwala temu zapobiec, sprawiając, by między treścią a obramowaniem znalazło się wystarczająco dużo przestrzeni.
Marginesy Margines jest obszarem pomiędzy obramowaniem elementu a innymi znajdującymi się na stronie obiektami, w tym innymi elementami oraz elementem-rodzicem. W tabeli 20.3 znajduje się opis właściwości określających margines. Tabela 20.3. Właściwości margin Właściwość
Opis
Wartości
margin-top
Określa margines przy górnej krawędzi.
auto
margin-right
Określa margines przy prawej krawędzi.
auto
margin-bottom
Określa margines przy dolnej krawędzi.
auto
margin-left
Określa margines przy lewej krawędzi.
auto
margin
Ta właściwość zbiorcza określa margines przy wszystkich krawędziach w jednej deklaracji.
auto
426
ROZDZIAŁ 20. MODEL POLOWY
Podobnie jak przy właściwościach dopełnienia, wartości procentowe zawsze odnoszą się do szerokości kontenera, nawet gdy określają dopełnienie górnej i dolnej krawędzi. W listingu 20.3 widnieje przykład utworzenia marginesu. Listing 20.3. Nadanie elementom marginesów
Przykład
W listingu 20.3 utworzyłem dwa elementy img. Marginesom przy górnej i dolnej krawędzi nadałem wielkość 4px, a przy lewej i prawej krawędzi 20px. Utworzoną marginesami przestrzeń wokół elementów widać na rysunku 20.3, który przedstawia elementy img z marginesami i bez.
Rysunek 20.3. Rezultat nadania elementom marginesów Marginesy nie są zawsze wyświetlane, nawet kiedy nadajesz je przy użyciu którejś z właściwości marginesów. Przykładowo, kiedy margines jest zdefiniowany dla elementu z właściwością display o wartości inline, margines nie jest nadawany górnym i dolnym krawędziom. Właściwość display omówię w podrozdziale „Typy pola elementu” w dalszej części rozdziału.
Rozmiar elementu Przeglądarki określają rozmiary elementów, sugerując się ogólną postacią treści na stronie, przy czym muszą przestrzegać straszliwie szczegółowych zasad. Takiemu zachowaniu przeglądarki możesz zapobiec, korzystając z właściwości definiujących rozmiar, które omawiam w tabeli 20.4.
427
ROZDZIAŁ 20. MODEL POLOWY
Tabela 20.4. Właściwości size Właściwość
Opis
Wartości
width height
Określa szerokość i wysokość elementu.
auto
min-width min-height
Określa minimalną szerokość lub wysokość elementu.
auto
max-width max-height
Określa maksymalną szerokość lub wysokość elementu.
auto
box-sizing
Określa, która część pola elementu jest podstawą dla określenia wielkości.
content-box padding-box border-box margin-box
Domyślna wartość wszystkich tych właściwości to auto, która poleca przeglądarce, by sama określiła wysokość i szerokość elementu. Wymiary można też określać jednostkami miary lub wartościami procentowymi. Wartości procentowe obliczane są na podstawie szerokości kontenera, nawet kiedy obliczana jest wysokość. W listingu 20.4 widnieje przykład określenia wymiarów elementu. Listing 20.4. Określenie wymiarów elementu
Przykład
428
ROZDZIAŁ 20. MODEL POLOWY
W tym przykładzie znajdują się trzy kluczowe elementy. W elemencie div znajdują się dwa elementy img. Wygląd tych elementów w przeglądarce widać na rysunku 20.4.
Rysunek 20.4. Określenie rozmiaru elementu Element div jest dzieckiem elementu body. Kiedy określam szerokość div jako 75%, polecam przeglądarce, że szerokość elementu div ma wynosić 75% szerokości jego kontenera (w tym wypadku elementu body). Kiedy użytkownik zmienia rozmiar okna przeglądarki, zmianie ulegają również wymiary elementu body i — co za tym idzie — elementu div, który dostosowuje się do szerokości 75% swojego rodzica. Przykład tego widać na rysunku 20.5. Elementowi div nadałem obramowanie, aby łatwiej było się zorientować co do jego wymiarów.
Rysunek 20.5. Zmiana rozmiaru okna przeglądarki w ramach przedstawienia względnej relacji wymiarów Jak widać, szerokość elementu div zawsze jest równa 75% szerokości elementu body, który wypełnia całe okno przeglądarki. Wysokość elementu div określiłem jako 100px, co jest wartością bezwzględną i nie ulega zmianie wraz ze zmianami rozmiaru kontenera. Widać tu też, że część elementu div została ucięta, kiedy zmieniłem rozmiar okna tak, by było szerokie a krótkie. To samo w zasadzie zrobiłem z elementami img. Wartość width pierwszego z nich określona jest jako 50% szerokości kontenera — element zmienia zatem wymiary, by dostosować się do tej relacji, pomimo że powoduje to utratę pierwotnych proporcji. Drugiemu elementowi img nie nadałem określonej szerokości, przez co określenie jej leży wyłącznie w gestii przeglądarki. Szerokość domyślnie wywodzi się z wysokości w taki sposób, by zachować pierwotne proporcje. Wskazówka Zauważ, jak obrazy na rysunku 20.5 zachodzą na krawędzie elementu div. Zjawisko to określa się mianem przepełnienia. Sposoby kontrolowania przepełnienia omówię w dalszej części rozdziału.
Pole wymiarów Obydwa podane w przykładzie elementy img mają jednakową wartość height (50%), lecz mimo to wyglądają inaczej. Jest tak, ponieważ właściwością box-sizing zmieniłem obszar pola elementu, którego wielkość definiowana jest omówionymi wcześniej właściwościami.
429
ROZDZIAŁ 20. MODEL POLOWY
Wysokość i szerokość są domyślnie nadawane polu treści elementu. Oznacza to, że rzeczywista wielkość elementu z właściwością height o wartości 100px wynosi 100 pikseli plus wartości dopełnień, obramowań i marginesów górnej i dolnej krawędzi. Właściwość box-sizing pozwala na określenie, do którego obszaru pola elementu mają się odnosić właściwości decydujące o wielkości — dzięki temu nie musisz samodzielnie wyliczać wynikających z tego różnic. W tabeli 20.4 widnieją wartości obsługiwane przez tę właściwość. Wskazówka Właściwości odpowiedzialne za rozmiar często są używane do tworzenia layoutów. Takie podejście się sprawdza, ale o wiele lepiej skorzystać z funkcji tworzenia layoutów przy użyciu tabel. Szczegóły znajdziesz w rozdziale 21.
Określanie minimalnych i maksymalnych wielkości Właściwości min- i max- służą do określania ograniczeń, jakich przeglądarka musi przestrzegać przy określaniu rozmiaru elementów. Przeglądarka ma jednak pewną swobodę w określaniu rozmiaru elementów. W listingu 20.5 widnieje przykład zastosowania tych właściwości. Listing 20.5. Określa zakres wielkości
Przykład
W listingu 20.5 nadałem właściwości min-width i max-width pojedynczemu elementowi img oraz określiłem wstępną szerokość jako 50% kontenera. Przeglądarka może wobec tego swobodnie zmieniać rozmiar elementu w granicach podanych przeze mnie wartości, zachowując jednocześnie format obrazu, jak widać na rysunku 20.6. Na rysunku 20.6 widać, co się dzieje po zmniejszeniu okna. Im okno jest mniejsze, tym mniejszy staje się rozmiar obrazu — zachowana zostaje relacja proporcji pomiędzy elementem img a body. Po dojściu do minimalnej szerokości przeglądarka przestaje zmieniać rozmiar obrazu. Widać to w najmniejszym oknie przeglądarki, gdzie obraz jest przycięty dolną krawędzią okna. Uwaga Obsługa właściwości box-sizing różni się w zależności od przeglądarki.
430
ROZDZIAŁ 20. MODEL POLOWY
Rysunek 20.6. Określenie ograniczenia rozmiaru elementu właściwościami min- i max-
Przepełnienie Przy zmianie rozmiaru elementów w końcu trafiasz na sytuację, w której treści zajmują za dużo miejsca, by zmieścić się w polu treści elementu. W takich sytuacjach treść domyślnie i tak jest rozrysowywana, choćby i wychodziła poza pole elementu. W listingu 20.6 utworzyłem element o określonych wymiarach, które nie wystarczają do objęcia całej treści elementu. Listing 20.6. Utworzenie elementu, który jest za mały, by wyświetlić w nim całą treść
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Właściwościom width i height nadałem bezwzględne wartości, czego rezultat widać na rysunku 20.7. To zachowanie można zmienić przy użyciu właściwości overflow, których opis znajduje się w tabeli 20.5. Właściwości overflow-x i overflow-y określają styl obsługi przepełnień w poziomie i pionie; właściwość zbiorcza overflow pozwala na zdefiniowanie stylu obsługi w obydwu kierunkach w pojedynczej deklaracji. W tabeli 20.6 znajduje się opis wartości obsługiwanych przez tę właściwość. W listingu 20.7 widać przykład zastosowania właściwości przepełnienia.
431
ROZDZIAŁ 20. MODEL POLOWY
Rysunek 20.7. Domyślny wygląd elementu, którego treść zajmuje więcej miejsca niż sam element Tabela 20.5. Właściwości overflow Właściwość
Opis
Wartości
overflow-x overflow-y
Określenie stylu obsługi przepełnienia w poziomie i pionie.
Tabela 20.6
overflow
Właściwość zbiorcza.
overflow overflow-x overflow-y
Tabela 20.6. Wartości właściwości overflow Wartość
Opis
auto
Ta wartość poleca przeglądarce, by sama rozstrzygnęła, co należy zrobić. Zwykle oznacza to, że na ekranie pojawia się pasek przewijania, kiedy treść nie mieści się w polu treści elementu — i tylko wtedy (w odróżnieniu od zachowania określanego wartością scroll, która poleca, by pasek pojawiał się niezależnie od tego, czy jest potrzebny).
hidden
Treść przycinana jest tak, by jedynie jej część była widoczna w polu treści. Użytkownik nie ma żadnej możliwości zapoznania się z przyciętą treścią.
no-content
Treść nie jest wyświetlana, jeżeli nie można jej wyświetlić w pełni. Ta wartość nie jest obsługiwana przez popularne przeglądarki.
no-display
Treść jest ukrywana, jeżeli nie można jej wyświetlić w pełni. Ta wartość nie jest obsługiwana przez popularne przeglądarki.
scroll
Przeglądarka wyświetla mechanizm przewijania, który pozwala użytkownikowi na zapoznanie się z całą treścią. Jest to zwykle pasek przewijania, choć mechanizm może się różnić w zależności od przeglądarki i systemu. Pasek jest widoczny, nawet kiedy nie ma żadnego przepełnienia.
visible
Wartość domyślna. Zawartość elementu wyświetlana jest pomimo tego, że zajmuje więcej miejsca niż pole treści.
Listing 20.7. Określenie sposobu obsługi przepełnienia
Przykład
432
ROZDZIAŁ 20. MODEL POLOWY
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, dokonać wyboru spośród tysięcy możliwości.
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, dokonać wyboru spośród tysięcy możliwości.
odmian. Gdybyśmy musielibyśmy
odmian. Gdybyśmy musielibyśmy
W listingu 20.7 nadałem właściwości overflow akapitu first wartość hidden, a akapitu second wartość scroll. Rezultat widać na rysunku 20.8.
Rysunek 20.8. Zastosowanie właściwości overflow o wartościach hidden i scroll Wskazówka Obsługa przepełnień jest jednym z aspektów modułu CSS, którego ostateczna forma dopiero zostanie ustanowiona. Padają propozycje, by rozszerzyć zbiór właściwości przepełnienia o obsługę funkcji marquee, która polega na przewijaniu treści elementu z upływem czasu, tak by można było się zapoznać z nią w całości. Specyfikacja CSS3 przewiduje zastosowanie pewnych właściwości, których jeszcze żadna przeglądarka nie obsługuje: overflow-style, marquee-direction, marquee-loop, marquee-play-count, marquee-speed i marquee-style.
433
ROZDZIAŁ 20. MODEL POLOWY
Widoczność elementu Widoczność elementów określa się właściwością visibility, której opis znajduje się w tabeli 20.7. Sam pomysł ukrywania elementów może się wydawać dziwny, ale wykorzystując tę właściwość w JavaScript, można uzyskać dość zaawansowane efekty. Tabela 20.7. Właściwość visibility Właściwość
Opis
Wartości
visibility
Określa widoczność elementu.
collapse hidden visible
W tabeli 20.8 znajduje się opis wartości obsługiwanych przez właściwość visibility. Tabela 20.8. Wartości właściwości visibility Wartość
Opis
collapse
Element nie jest widoczny i nie zajmuje miejsca na stronie.
hidden
Element nie jest widoczny, ale mimo to zajmuje miejsce na stronie.
visible
Wartość domyślna — element jest widoczny.
W listingu 20.8 widnieje przykład zmiany widoczności elementu przy użyciu JavaScript i kilku elementów button (które omówiłem w rozdziale 12.).
Listing 20.8. Zastosowanie właściwości visibility
Przykład
Pozycja | Nazwa | Kolor | Rozmiar |
Ulubiony: | Jabłko | Zielony | Średni |
Drugi ulubiony: | Pomarańcza | Pomarańczowy | Duży |
Visible Collapse
434
ROZDZIAŁ 20. MODEL POLOWY
Hidden
Przedstawiony w tym przykładzie skrypt wyszukuje elementy z przypisaną właściwością id o wartości firstchoice i określa wartość właściwości visibility na podstawie tego, który z przycisków został uprzednio naciśnięty. W ten sposób można przełączać pomiędzy wartościami visible, hidden i collapse. Efekt zastosowania poszczególnych wartości widać na rysunku 20.9.
Rysunek 20.9. Rezultat zastosowania różnych wartości właściwości visibility Wartość collapse można określać jedynie dla elementów tabelowych w rodzaju tr i td, o których przeczytasz więcej w rozdziale 11. Niektóre przeglądarki, takie jak Chrome, w ogóle nie obsługują wartości collapse i dlatego na potrzeby rysunku 20.9 użyłem Firefoksa. Wskazówka Taki sam efekt, jaki uzyskuje się wartością collapse, można uzyskać, nadając wartość none właściwości display elementów nietabelowych oraz elementom tabelowym w przeglądarkach, które nie obsługują funkcji collapse. Właściwość display omówię poniżej.
Typy pola elementu Właściwość display pozwala na zmianę typu pola elementu, co z kolei zmienia sposób, w jaki element układany jest na stronie. Pewnie zauważyłeś, że niektóre elementy w przykładach z części II książki zostały obstylowane właściwością display. Wielu elementom nadaje się wartość domyślną, inline, ale niektóre mają inne wartości. Opis wartości obsługiwanych przez właściwość display znajduje się w tabeli 20.9. Powyższe wartości często okazują się niezrozumiałe, a wywierają niepośledni wpływ na layout dokumentów. Każdy z typów pól omówię w poniższych punktach.
Elementy blokowe Zastosowanie wartości block skutkuje utworzeniem elementu blokowego, czyli oddzielonego w pionie od otaczających go elementów. Taki efekt przeważnie uzyskuje się, łamiąc wiersz przed danym elementem i po nim, tworząc tym samym wrażenie odrębności owego elementu od jego otoczenia — tak jak oddzielone
435
ROZDZIAŁ 20. MODEL POLOWY
Tabela 20.9. Wartości właściwości display Wartość
Opis
inline
Pole wyświetlane jest tak jak wyraz w wierszu tekstu.
block
Pole wyświetlane jest jak akapit.
inline-block
Pole wyświetlane jest jak wiersz tekstu.
list-item
Pole wyświetlane jest jako pozycja na liście, zazwyczaj z poprzedzającym ją znakiem punktowym lub innym tego typu oznaczeniem (np. liczbą porządkową).
run-in
Typ pola jest inny w zależności od otaczających go elementów. Przykłady znajdziesz w listingach 20.12 i 20.13.
compact
Typ pola nie jest ani blokiem, ani markerem (takim, jaki powstaje, kiedy używa się typu list-type). Kiedy piszę te słowa, popularne przeglądarki nie obsługują tej wartości.
flexbox
Ta wartość odnosi się do układów elastycznych pól, które omówię w rozdziale 21.
table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption
Te wartości określają położenie elementów w tabeli; więcej na ten temat przeczytasz w rozdziale 21.
ruby ruby-base ruby-text ruby-base-group ruby-text-group
Te wartości określają rozmieszczenie tekstu w ramach notacji ruby.
none
Element staje się niewidzialny i nie zajmuje miejsca na stronie.
są od siebie akapity książki. Domyślny styl wyświetlania elementu p — wskazującego akapit — zawiera właściwość display o wartości block, lecz możesz tę wartość nadać dowolnemu elementowi, tak jak widać w listingu 20.9. Listing 20.9. Właściwość display o wartości block
Przykład
436
ROZDZIAŁ 20. MODEL POLOWY
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek. Podczas podróży do Azji uderzyła mnie rozmaitość odmian bananów — wiele z nich miało wyjątkowy smak i można je było dostać wyłącznie w niedużych regionach.
Wpływ, jaki elementy blokowe wywierają na layout, widać na przykładzie dwóch różnych rodzajów elementów. Pierwszy to element p, którego domyślna wartość właściwości display to block; więcej na temat elementu p przeczytasz w rozdziale 9. Chciałem również pokazać, że tę wartość można nadać każdemu elementowi, toteż zamieściłem w kodzie element span, któremu w elemencie style ową wartość nadałem. Rezultat widać na rysunku 20.10.
Rysunek 20.10. Nadanie wartości block właściwości display Widziałeś już wcześniej, jak element p wygląda na ekranie. Elementom w tym przykładzie nadałem obramowanie, żeby ich pionowe oddzielenie było bardziej wyraźne. Zauważ, że element span, któremu nadałem wartość block, również wyróżnia się z pola elementu p, w którym jest zawarty.
Elementy liniowe Zastosowanie wartości inline skutkuje utworzeniem elementu liniowego, czyli wyświetlanego w taki sposób, by nie wyróżniał się graficznie od otaczających go treści, np. tak jak słowo w wierszu tekstu. W listingu 20.10 widać przykład zastosowania tej wartości, także w odniesieniu do elementów p, które są domyślnie elementami blokowymi. Listing 20.10. Właściwość display o wartości inline
437
ROZDZIAŁ 20. MODEL POLOWY
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek. Podczas podróży do Azji uderzyła mnie rozmaitość odmian bananów — wiele z nich miało wyjątkowy smak i można je było dostać wyłącznie w niedużych regionach.
Wartość inline nadałem elementom p i span, czego rezultat widać na rysunku 20.11. Elementy p nie są od siebie oddzielone, a element span wyświetlany jest w większym ciągu tekstu.
Rysunek 20.11. Nadanie wartości inline właściwości display Kiedy wartość inline jest w użyciu, przeglądarka ignoruje niektóre inne, takie jak width, height i margin. W listingu zdefiniowałem wartości tych trzech właściwości dla elementu span, ale — jak widać — nie zostały one ostatecznie wykorzystane przy tworzeniu layoutu.
438
ROZDZIAŁ 20. MODEL POLOWY
Elementy liniowo-blokowe Zastosowanie wartości inline-block skutkuje utworzeniem elementu, którego pole ma mieszane właściwości pól typu block i inline. Element nie jest zatem oddzielony w pionie od innych elementów, a jego treść występuje w jednej linii z otaczającymi ją treściami. Jednocześnie jednak wnętrze pola traktowane jest jako element block, którego właściwości takie jak width, height i margin są aktywne. Rezultat widać w listingu 20.11. Listing 20.11. Zastosowanie wartości inline-block
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek. Podczas podróży do Azji uderzyła mnie rozmaitość odmian bananów — wiele z nich miało wyjątkowy smak i można je było dostać wyłącznie w niedużych regionach.
W tym listingu zmieniłem jedynie wartość właściwości display elementu span, ale różnica efektu graficznego jest znacząca, ponieważ pominięte wcześniej (kiedy właściwość display miała wartość inline) właściwości zostały zastosowane do elementów. Rezultat widać na rysunku 20.12.
Elementy run-in Zastosowanie wartości run-in skutkuje utworzeniem elementu, którego typ jest zależny od tego, jakie elementy go otaczają. Zdarzają się trzy sytuacje, w których przeglądarka musi sama określić charakter pola elementu run-in. 1. Jeżeli element run-in zawiera element, którego właściwość display ma wartość block, to staje się on elementem blokowym.
439
ROZDZIAŁ 20. MODEL POLOWY
Rysunek 20.12. Nadanie właściwości display wartości inline-block 2. W innym wypadku, jeżeli kolejny brat elementu run-in jest elementem blokowym, to element run-in staje się pierwszym elementem liniowym w obrębie brata. Ten warunek przedstawię w listingu 20.12. 3. W innym wypadku element run-in traktowany jest jako element blokowy. Spośród tych trzech warunków najbardziej warto omówić drugi. W listingu 20.12 widnieje element run-in, którego brat jest elementem blokowym.
Listing 20.12. Element run-in z bratem, który jest elementem blokowym
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Na rysunku 20.13 widać, jak element run-in jest traktowany jako część następującego po nim bloku. Muszę tu jednak zwrócić uwagę, że nie wszystkie przeglądarki obsługują tę funkcję poprawnie.
440
ROZDZIAŁ 20. MODEL POLOWY
Rysunek 20.13. Element run-in z elementem blokowym jako bratem Jeżeli brat nie jest elementem blokowym, to element run-in traktowany jest jako blok. Przykład tego widać w listingu 20.13. Listing 20.13. Element run-in z elementem liniowym jako bratem
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
W tym przykładzie element run-in wyświetlony jest jako element blokowy, tak jak widać na rysunku 20.14.
Rysunek 20.14. Element run-in wyświetlony jako element blokowy
441
ROZDZIAŁ 20. MODEL POLOWY
Ukrywanie elementów Wartość none poleca przeglądarce, by nie wyświetlała pola danego elementu ani jego potomków. Kiedy właściwość display ma wartość none, element nie zajmuje miejsca na stronie. W listingu 20.14 widnieje dokument HTML, w którym zawarto prosty skrypt, przełączający wartość właściwości display elementu p między block a none. Listing 20.14. Zastosowanie wartości none właściwości display
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek. Podczas podróży do Azji uderzyła mnie rozmaitość odmian bananów — wiele z nich miało wyjątkowy smak i można je było dostać wyłącznie w niedużych regionach.
Block None
Na rysunku 20.15 widać, jak zastosowanie wartości none skutkuje usunięciem elementu z layoutu.
Pływające pola Właściwość float służy do tworzenia pływającego pola, które ulega przemieszczeniu w określoną stronę, aż jego lewa lub prawa krawędź zetknie się z krawędzią kontenera lub innego pływającego pola. W tabeli 20.10 znajduje się opis tej właściwości. W tabeli 20.11 znajduje się opis wartości obsługiwanych przez właściwość float. W listingu 20.15 widnieje przykład zastosowania właściwości float.
442
ROZDZIAŁ 20. MODEL POLOWY
Rysunek 20.15. Rezultat nadania wartości none właściwości display Tabela 20.10. Właściwość float Właściwość
Opis
Wartości
float
Określa styl pływania elementu.
left right none
Tabela 20.11. Wartości właściwości display Wartość
Opis
left
Element ulega przesunięciu tak, by jego lewa krawędź zetknęła się z lewą krawędzią kontenera lub prawą krawędzią innego pływającego pola.
right
Element ulega przesunięciu tak, by jego prawa krawędź zetknęła się z prawą krawędzią kontenera lub lewą krawędzią innego pływającego pola.
none
Element nie pływa.
Listing 20.15. Zastosowanie właściwości float
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
443
ROZDZIAŁ 20. MODEL POLOWY
Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.
Podczas podróży do Azji uderzyła mnie rozmaitość odmian bananów — wiele z nich miało wyjątkowy smak i można je było dostać wyłącznie w niedużych regionach.
Left Right None
W tym przykładzie znajduje się kilka elementów p — właściwość float dwóch z nich ma wartość left. Oznacza to, że są one przemieszczane w lewo, aż zetkną się z krawędzią kontenera lub innego pływającego elementu. Ponieważ dwa elementy ulegają przemieszczeniu, pierwszy z nich przesuwa się do krawędzi kontenera, a drugi do krawędzi pierwszego. Rezultat widać na rysunku 20.16.
Rysunek 20.16. Właściwość float o wartości left Wskazówka Zauważ, że kiedy odnoszę się do właściwości float w JavaScript, to muszę korzystać z członu cssFloat. O obstylowaniu elementów w JavaScript opowiem szerzej w rozdziale 29.
Zauważ, jak reszta treści oblewa pływające elementy. W tym przykładzie utworzyłem również kilka elementów button oraz załączyłem prosty skrypt, który zmienia wartość float dwóch elementów p na
444
ROZDZIAŁ 20. MODEL POLOWY
podstawie tego, który przycisk został naciśnięty. Po naciśnięciu przycisku Right elementy przemieszczają się w prawo, tak jak widać na rysunku 20.17. Zwróć uwagę na kolejność elementów: pierwszy podany w dokumencie element znajduje się wtedy najdalej po prawej.
Rysunek 20.17. Właściwość float o wartości right Ostatni przycisk, None, wyłącza pływanie elementów, nadając ich właściwościom float wartość none. Przywraca to domyślne zachowanie pól elementów. Element p jest domyślnie elementem blokowym; rezultat widać na rysunku 20.18.
Rysunek 20.18. Właściwość float o wartości none
Zapobieganie stykaniu się elementów Pływające elementy domyślnie stykają się ze sobą. Można temu zapobiec przy użyciu właściwości clear, która wskazuje, że jedna bądź obydwie krawędzie pływającego elementu nie mogą się stykać z krawędzią innego pływającego elementu. W tabeli 20.12 znajduje się opis właściwości clear.
445
ROZDZIAŁ 20. MODEL POLOWY
Tabela 20.12. Właściwość clear Właściwość
Opis
Wartości
clear
Określa, czy element może sąsiadować z innym pływającym elementem.
left right both none
W tabeli 20.13 znajduje się opis wartości obsługiwanych przez właściwość clear. Tabela 20.13. Wartości właściwości clear Wartość
Opis
left
Lewa krawędź elementu nie może sąsiadować z innym pływającym elementem.
right
Prawa krawędź elementu nie może sąsiadować z innym pływającym elementem.
both
Żadna z krawędzi elementu nie może sąsiadować z innym pływającym elementem.
none
Każda krawędź elementu może sąsiadować z innym pływającym elementem.
W listingu 20.16 znajduje się przykład zastosowania właściwości clear. Listing 20.16. Zastosowanie właściwości clear
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.
446
ROZDZIAŁ 20. MODEL POLOWY
Podczas podróży do Azji uderzyła mnie rozmaitość odmian bananów — wiele z nich miało wyjątkowy smak i można je było dostać wyłącznie w niedużych regionach.
Left Right None
Powyższy kod jest prostym rozwinięciem kodu z poprzedniego przykładu — dodałem nowy styl, który oczyszcza lewą krawędź elementu p. Wpływ tej zmiany na layout strony widać na rysunku 20.19, gdzie elementy ulegają przemieszczeniu w lewą stronę.
Rysunek 20.19. Oczyszczenie lewej krawędzi pływającego dokumentu Lewa krawędź elementu p nie może sąsiadować z innym pływającym elementem, wobec czego przeglądarka przenosi ów element niżej. Prawa krawędź pozostaje nieoczyszczona — w sytuacji, kiedy elementy miałyby być przemieszczane w prawo, już mogłyby się stykać, tak jak widać na rysunku 20.20.
447
ROZDZIAŁ 20. MODEL POLOWY
Rysunek 20.20. Nieoczyszczona prawa krawędź elementu przemieszczanego w prawo
Podsumowanie W tym rozdziale pokazałem Ci, jak przeprowadzić podstawową konfigurację modelu polowego elementu, tym samym zmieniając jego wygląd na stronie. Zaczęliśmy od podstawowych właściwości w rodzaju padding i margin, po czym przeszliśmy do kwestii bardziej skomplikowanych, m.in. zakresów szerokości i wysokości oraz obsługi przepełnień. Najważniejszym tematem, który poruszyłem w tym rozdziale, jest to, jak różne rezultaty można uzyskać przy użyciu różnych rodzajów pól elementu. Zrozumienie zależności pomiędzy elementami blokowymi a liniowymi jest kwestią fundamentalną, jeśli chodzi o opanowanie tworzenia layoutów w HTML5. Z kolei pływające elementy i oczyszczone krawędzie są powszechnie stosowane do zapewniania layoutom elastyczności. W następnym rozdziale pokażę Ci jeszcze więcej złożonych, obsługiwanych przez CSS modeli służących do tworzenia layoutów.
448
ROZDZIAŁ 21
Tworzenie layoutów
W tym rozdziale przedstawię Ci różne sposoby kontrolowania układu elementów na stronie. Wraz ze zwiększeniem nacisku na oddzielenie semantyki elementów HTML od ich aspektu prezentacyjnego rola CSS w tworzeniu layoutów stała się w HTML5 istotniejsza. CSS3 oferuje bardzo przydatne funkcje tworzenia layoutów, których oczywiście możesz używać wraz z funkcjami dostępnymi w poprzednich wersjach CSS. CSS3 obsługuje dwa modele layoutów, które musiałyby jeszcze dojrzeć, bym je omówił w tym rozdziale. Pierwszy model layoutów szablonowych pozwala na elastyczne rozmieszczanie elementów. Moduł ten nie jest obsługiwany przez żadną przeglądarkę, ale możesz poeksperymentować z jego funkcjami przy użyciu wtyczki jQuery dostępnej pod adresem http://a.deveria.com/?p=236. Drugi moduł służy do tworzenia elastycznych siatek layoutowych. Niestety, specyfikacja tego modułu nie jest jeszcze ukończona i żadna przeglądarka go nie obsługuje. Stan funkcji tworzenia layoutów w CSS3 jest niestabilny. Jeden ze stylów tworzenia layoutów, które omówię w tym rozdziale — tj. elastyczny model polowy — może się wprawdzie pochwalić świetnymi funkcjami, lecz jego standard wciąż się zmienia. Z tego względu muszę zademonstrować ten sposób tworzenia layoutów, wykorzystując właściwości obsługiwane przez konkretne przeglądarki, zaimplementowane na podstawie wczesnych wersji standardu. Mając wzgląd na to, że właściwa forma tych nowych funkcji dopiero jest opracowywana, sugeruję używać frameworka CSS przy tworzeniu rozbudowanych layoutów stron. Polecam Blueprint, który można pobrać ze strony www.blueprintcss.org. Dopóki obsługa tworzenia layoutów w CSS3 nie przybierze ostatecznej formy, framework CSS pozwoli Ci na korzystanie z pożądanych funkcji. W tabeli 21.1 znajduje się streszczenie całego rozdziału. Tabela 21.1. Streszczenie rozdziału Problem
Rozwiązanie
Listing
Zmiana sposobu pozycjonowania elementu w obrębie kontenera.
Użyj właściwości position.
21.1
Oddalenie elementu od krawędzi kontenera.
Użyj właściwości top, bottom, left i right.
21.1
Określenie kolejności rysowania elementu.
Użyj właściwości z-index.
21.2
Utworzenie layoutu przypominającego układ strony w gazecie.
Użyj layoutu wielokolumnowego.
21.3, 21.4
Elastyczne przydzielanie przestrzeni elementom zawartym w jednym kontenerze.
Użyj layoutu flexbox.
21.5 – 21.9
Utworzenie layoutu tabelowego.
Użyj layoutu tabelowego CSS.
21.10
ROZDZIAŁ 21. TWORZENIE LAYOUTÓW
Pozycjonowanie Najprostszą metodą zarządzania treścią jest pozycjonowanie, które pozwala na zmianę sposobu, w jaki przeglądarka rozkłada elementy. W tabeli 21.2 znajduje się opis właściwości pozycjonujących. Tabela 21.2. Właściwości pozycjonujące Właściwość
Opis
Wartości
position
Określa metodę pozycjonowania.
Tabela 21.3
left right top bottom
Określa oddalenie pozycjonowanych elementów.
auto
z-index
Określa kolejność elementów.
Rodzaje pozycjonowania Właściwość position określa metodę pozycjonowania elementu. Opis obsługiwanych wartości znajduje się w tabeli 21.3. Tabela 21.3. Wartości właściwości position Wartość
Opis
static
Element jest pozycjonowany standardowo; wartość domyślna.
relative
Element jest pozycjonowany względem swojej standardowej pozycji.
absolute
Element jest pozycjonowany względem swojego pierwszego przodka, którego właściwość position ma inną wartość niż static.
fixed
Element jest pozycjonowany względem okna przeglądarki.
Różne wartości właściwości position wskazują różne elementy, względem których dany element ma być pozycjonowany. Właściwości top, bottom, left i right służą do przemieszczania danego elementu względem elementu określonego właściwością position. W listingu 21.1 widnieje przykład zastosowania tych różnych wartości. Listing 21.1. Zastosowanie właściwości position
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy
450
ROZDZIAŁ 21. TWORZENIE LAYOUTÓW
uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.
Podczas podróży do Azji uderzyła mnie rozmaitość odmian bananów — wiele z nich miało wyjątkowy smak i można je było dostać wyłącznie w niedużych regionach.
Static Relative Absolute Fixed
W tym przykładzie dodałem do kodu krótki skrypt, który zmienia wartość właściwości position elementu img na podstawie tego, który przycisk został naciśnięty. Zauważ, że właściwości left nadałem wartość 150px, a top wartość 5px. Wynika z tego, że element img ma być oddalony o 150 pikseli od osi poziomej oraz o 5 pikseli od osi pionowej, kiedy właściwość position ma wartość inną niż static. Na rysunku 21.1 widać przejście od domyślnej wartości static do wartości relative.
Rysunek 21.1. Zastosowanie właściwości position o wartościach static i relative
451
ROZDZIAŁ 21. TWORZENIE LAYOUTÓW
Zastosowanie wartości relative sprawia, że właściwości top, bottom, left i right pozycjonują element względem miejsca, w którym by się znajdował w sytuacji, gdyby użyta była wartość static. Jak widać na rysunku, użycie właściwości left i top o wartości 150px sprawia, że element img przesuwa się w dół i na prawo. Zastosowanie wartości absolute sprawia, że element pozycjonowany jest względem najbliższego przodka o wartości właściwości position innej niż static. W tym przykładzie takiego przodka nie ma, wobec czego element pozycjonowany jest względem elementu body, tak jak widać na rysunku 21.2.
Rysunek 21.2. Zastosowanie właściwości position o wartości absolute Zauważ, że element img przemieszcza się wraz z pozostałą treścią, kiedy przewijam stronę. Działa to inaczej, kiedy używa się wartości fixed, tak jak widać na rysunku 21.3.
Rysunek 21.3. Zastosowanie właściwości position o wartości fixed Kiedy wartość fixed jest w użyciu, element pozycjonowany jest względem okna przeglądarki. Oznacza to, że element zawsze zajmuje ten sam obszar, nawet przy przewijaniu strony.
Kolejność elementów Właściwość z-index pozwala na określenie kolejności rysowania elementów. Jej opis znajduje się w tabeli 21.4. Tabela 21.4. Właściwość z-index Właściwość
Opis
Wartości
z-index
Określa względną kolejność rysowania elementu.
Właściwości z-index nadaje się wartości liczbowe; dozwolone są także wartości ujemne. Im wartość jest mniejsza, tym „dalej” od użytkownika dany element jest rozrysowywany. Ta właściwość jest przydatna tylko wtedy, kiedy elementy na siebie nachodzą, tak jak w listingu 21.2.
452
ROZDZIAŁ 21. TWORZENIE LAYOUTÓW
Listing 21.2. Zastosowanie właściwości z-index
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.
Podczas podróży do Azji uderzyła mnie rozmaitość odmian bananów — wiele z nich miało wyjątkowy smak i można je było dostać wyłącznie w niedużych regionach.
W tym przykładzie utworzyłem dwa elementy img pozycjonowane wartością fixed oraz z właściwościami top i left określonymi tak, by elementy na siebie nachodziły. Wartość właściwości z-index elementu img, którego właściwości id przypisano wartość apple, jest wyższa od wartości drugiego elementu, wobec czego jest on rozrysowywany nad obrazem banana, tak jak widać na rysunku 21.4. Domyślna wartość właściwości z-index elementów to zero, przez co przeglądarka rozrysowała obrazy nad elementami p.
453
ROZDZIAŁ 21. TWORZENIE LAYOUTÓW
Rysunek 21.4. Zastosowanie właściwości z-index
Layouty wielokolumnowe Funkcja tworzenia layoutów wielokolumnowych umożliwia rozkładanie treści w wielu pionowych kolumnach, tak jak w gazecie. W tabeli 21.5 znajduje się opis właściwości służących do tworzenia takich layoutów. Tabela 21.5. Właściwości wielokolumnowe Właściwość
Opis
Wartości
column-count
Określa pożądaną liczbę kolumn.
column-fill
Określa rozmieszczenie treści w kolumnach. Wartość balance poleca przeglądarce, by minimalizowała różnice wysokości kolumn, a wartość auto, by rozmieszczała treść na całej szerokości kolumn.
balance auto
column-gap
Określa odstęp między kolumnami.
column-rule
Właściwość zbiorcza, służąca do określania wszystkich wartości column-rule-* w jednej deklaracji.
column-rule-color
Określa kolor linii między kolumnami.
column-rule-style
Określa styl linii między kolumnami.
Takie same, jak właściwości border-style
column-rule-width
Określa szerokość linii między kolumnami.
columns
Właściwość zbiorcza, służąca do określania wartości column-span i column-width.
column-span
Określa, ile kolumn dany element zajmuje.
none all
column-width
Określa szerokość kolumn.
W listingu 21.3 widać przykład layoutu wielokolumnowego.
454
ROZDZIAŁ 21. TWORZENIE LAYOUTÓW
Listing 21.3. Zastosowanie layoutu wielokolumnowego
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.
Podczas podróży do Azji uderzyła mnie rozmaitość odmian bananów — wiele z nich miało wyjątkowy smak i można je było dostać wyłącznie w niedużych regionach. Rzecz jasna, istnieją też naprawdę wyjątkowe owoce — do głowy przychodzi mi durian, jadany powszechnie w Azji Południowo-Wschodniej, a znany jako "król owoców". Durian nie jest zbyt dobrze znany w Europie i Stanach Zjednoczonych, chyba że ze względu na jego intensywny zapach, opisywany jako połączenie migdałów, zgniłej cebuli i przepoconych skarpet.
W tym przykładzie nadałem elementowi p, zawierającemu zarówno tekst, jak i elementy img, kilka właściwości wielokolumnowych. Rezultat widać na rysunku 21.5. Uwaga Na rysunku widać Operę, która jest obecnie jedyną przeglądarką obsługującą wielokolumnowe layouty. Nie obsługuje ona wprawdzie wszystkich właściwości, lecz podstawowe funkcje jak najbardziej w niej działają.
Jak widać na rysunku 21.5, zawartość elementu p przechodzi przez kolejne kolumny, tak jak w gazecie. Elementom img nadałem właściwość flow, żeby treść tekstowa elementu p ładnie oblewała obrazki. Więcej szczegółów na temat właściwości float przeczytasz w rozdziale 20.
455
ROZDZIAŁ 21. TWORZENIE LAYOUTÓW
Rysunek 21.5. Layout wielokolumnowy Właściwości column-count użyłem do utworzenia layoutu składającego się z trzech kolumn. Przeglądarka zmienia szerokość kolumn wraz ze zmianą wielkości okna tak, by zachować ich liczbę. Można jednak zamiast tego określić pożądaną szerokość kolumn, tak jak w listingu 21.4. Listing 21.4. Określenie szerokości kolumn ...
...
Kiedy używasz tej właściwości, przeglądarka zachowuje określoną szerokość kolumn, odpowiednio je dodając lub usuwając, tak jak widać na rysunku 21.6.
Layouty flexboksowe Elastyczny layout polowy (z ang. flexible box layout, znany również jako flexbox) jest jednym z ulepszeń CSS3, w ramach którego można właściwości display nadać nową wartość — flexbox — a także używać kilku dodatkowych właściwości. Elastyczny layout pozwala na tworzenie płynnych interfejsów, które zachowują się poprawnie przy zmianach wielkości okna przeglądarki. Polega to na przydzielaniu
456
ROZDZIAŁ 21. TWORZENIE LAYOUTÓW
Rysunek 21.6. Definiowanie kolumn według szerokości zamiast liczebności niewykorzystywanej przestrzeni kontenera zawartym w nim elementom. Specyfikacja flexboksa podaje następujące nowe właściwości: • • • •
flex-align flex-direction flex-order flex-pack
W chwili, kiedy to piszę, standard elastycznego layoutu polowego jest jeszcze niedookreślony. Nazwy właściwości i ich wartości niedawno się zmieniły. Popularne przeglądarki obsługują podstawowe funkcje tego modułu przy użyciu własnych właściwości i wartości, których nazwy oparte są na starych nazwach właściwości. Flexbox jest użyteczną i ważną nowością w CSS, wobec czego przedstawię Ci funkcje oparte na wcześniejszej wersji standardu i z wykorzystaniem właściwości z prefiksami -webkit. Nie jest to idealne rozwiązanie, ale dzięki temu będziesz mógł się zapoznać z zasadami działania flexboksa i — miejmy nadzieję — bez trudu zacząć korzystać z właściwego standardu, kiedy już zostanie opracowany i wprowadzony do powszechnego użycia. Mając wzgląd na różnice między specyfikacją a implementacją tej funkcji, zacznijmy od omówienia problemu, do którego rozwiązywania ma służyć właśnie flexbox. W listingu 21.5 widnieje prosty layout, w którym taki problem występuje. Listing 21.5. Dokument HTML z niezadowalającym layoutem
Przykład
457
ROZDZIAŁ 21. TWORZENIE LAYOUTÓW
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.
Podczas podróży do Azji uderzyła mnie rozmaitość odmian bananów — wiele z nich miało wyjątkowy smak i można je było dostać wyłącznie w niedużych regionach.
Widzimy tu trzy elementy p zagnieżdżone w elemencie div. Chciałem je wyświetlić w jednym rzędzie, co łatwo zrobić przy użyciu omówionej w rozdziale 20. właściwości float. Wygląd tego kodu w przeglądarce widać na rysunku 21.7.
Rysunek 21.7. Element z nieprzydzieloną, pustą przestrzenią Problemem, który można rozwiązać przy użyciu flexboksa, jest pusta przestrzeń znajdująca się po prawej stronie elementów p. Można to zrobić na kilka różnych sposobów. Można wprawdzie określić szerokość wartościami procentowymi, ale flexbox jest o wiele płynniejszym i bardziej eleganckim rozwiązaniem. W tabeli 21.6 znajdują się trzy właściwości -webkit, które wykorzystują podstawowe funkcje flexbox — prefiks -webkit pominąłem, żeby zachować zwięzłość.
458
ROZDZIAŁ 21. TWORZENIE LAYOUTÓW
Tabela 21.6. Właściwości flexboksa -webkit Właściwość
Opis
Wartości
box-align
Wskazuje przeglądarce, jak radzić sobie z nadmiarową przestrzenią, kiedy wysokość elementów jest mniejsza od wysokości kontenera.
start end center baseline stretch
box-flex
Określa elastyczność elementu; odnosi się do poszczególnych elementów zawartych w kontenerze flexboksowym.
box-pack
Wskazuje przeglądarce, jak przydzielać przestrzeń, kiedy elastyczne elementy osiągają swój maksymalny rozmiar.
start end center justify
Prosty flexbox Flexbox tworzy się przy użyciu właściwości display. Standardowa wartość to flexbox, ale dopóki standard nie zostanie ukończony i wprowadzony, musisz używać wartości -webkit-box. Sposób przydzielania niewykorzystanej przestrzeni elementom określa się właściwością box-flex. Przykład zastosowania nowej wartości display i właściwości box-flex widać w listingu 21.6. Listing 21.6. Utworzenie prostego flexboksa
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam
459
ROZDZIAŁ 21. TWORZENIE LAYOUTÓW
w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.
Podczas podróży do Azji uderzyła mnie rozmaitość odmian bananów — wiele z nich miało wyjątkowy smak i można je było dostać wyłącznie w niedużych regionach.
Właściwość display nadałem kontenerowi flexboksowemu — jest to element, w którym znajdzie się nadmiarowa przestrzeń i którego zawartość chcemy elastycznie rozmieścić. Właściwość box-flex nadaje się elementom znajdującym się w obrębie kontenera flexboksowego i wskazuje ona przeglądarce, które elementy powinny zmieniać rozmiar wraz ze zmianą rozmiaru kontenera. W tym przypadku nadałem ją elementowi p z właściwością id o wartości second. Wskazówka Zauważ, że usunąłem właściwość float z deklaracji stylu elementów p. Elementy flexboksowe nie mogą zawierać pływających elementów.
Zmianę rozmiaru wybranego elementu widać na rysunku 21.8.
Rysunek 21.8. Elastyczny element Na rysunku 21.8 powiększyłem pole przeglądarki, przez co kontener div rozszerzył się, a akapit second zajął dodatkowe miejsce. Elastyczność nie odnosi się jedynie do nadmiarowej przestrzeni — kiedy zmniejszam okno przeglądarki, to właśnie elastyczny element zmniejsza się tak, by dostosować layout do pomniejszonego obszaru okna, tak jak widać to na rysunku 21.9. Zauważ, że wielkość elementów, którym nie nadałem właściwości box-flex, nie uległa zmianie.
Użycie wielu elastycznych elementów Przy użyciu właściwości box-flex możesz polecić przeglądarce, by uznała więcej elementów za elastyczne. Podane wartości określają stosunek, w jakim przeglądarka ma przydzielać przestrzeń. W listingu 21.7 widnieją zmiany, jakie wprowadziłem w elemencie style z poprzedniego przykładu.
460
ROZDZIAŁ 21. TWORZENIE LAYOUTÓW
Rysunek 21.9. Elastyczny element zmienia swoją wielkość, by dostosować się do zmniejszonego obszaru Listing 21.7. Utworzenie większej liczby elastycznych elementów ...
...
Właściwość box-flex nadałem elementowi p z właściwością id o wartości first. Wartość tej właściwości to 3, wobec czego przeglądarka przydziela elementowi first trzy razy tyle dodatkowej przestrzeni niż elementowi second. Tak określone proporcje odnoszą się jedynie do elastyczności elementów — służą do przydzielania elementom dodatkowej przestrzeni bądź odejmowania jej, ale nie do określania docelowego rozmiaru. Efekt zastosowania tej proporcji widać na rysunku 21.10.
Przestrzeń pionowa Właściwość box-align wskazuje przeglądarce, co robić z nadmiarową przestrzenią pionową. Jej opis znajduje się w tabeli 21.7. Domyślnie elementy rozciągane są w pionie tak, by zapełnić całą dostępną przestrzeń. Przykład tego widać na rysunku 21.10, gdzie pierwszym dwóm elementom p nadałem taki rozmiar, by znajdowała się pod nimi wolna przestrzeń. W tabeli 21.8 znajdują się wartości obsługiwane przez właściwość box-align.
461
ROZDZIAŁ 21. TWORZENIE LAYOUTÓW
Rysunek 21.10. Zastosowanie proporcji elastyczności Tabela 21.7. Właściwość box-align Właściwość
Opis
Wartości
box-align
Określa, jak przeglądarka ma obsługiwać nadmiarową przestrzeń pionową.
start end stretch center
Tabela 21.8. Wartości właściwości box-align Wartość
Opis
start
Elementy rozmieszczane są wzdłuż górnej krawędzi kontenera, a pod nimi znajduje się pusta przestrzeń.
end
Elementy rozmieszczane są wzdłuż dolnej krawędzi kontenera, a nad nimi znajduje się pusta przestrzeń.
center
Nadmiarowa przestrzeń rozdzielana jest równomiernie i wyświetlana zarówno pod, jak i nad elementami.
stretch
Zmienia wysokość elementów tak, by zajmowały całą dostępną przestrzeń.
W listingu 21.8 znajdują się zmiany, jakie naniosłem w elemencie style, by wprowadzić właściwość box-align. Zauważ, że nadaję tę właściwość kontenerowi, a nie zawartym w nim elementom. Listing 21.8. Zastosowanie właściwości box-align ...
...
W tym przykładzie wybrałem wartość end — elementy są zatem rozmieszczane wzdłuż dolnej krawędzi kontenera, a wszelka wolna przestrzeń znajduje się nad nimi, tak jak widać na rysunku 21.11.
Rysunek 21.11. Zastosowanie właściwości box-align
Maksymalne wielkości Flexbox może przestrzegać maksymalnych rozmiarów określonych dla elementów treści. Przeglądarka rozciąga wtedy elementy na pustą przestrzeń dopóty, dopóki nie osiągają maksymalnego rozmiaru. Właściwość box-pack wskazuje przeglądarce, co powinna zrobić, jeśli wszystkie elastyczne elementy osiągną maksymalny rozmiar, a w oknie wciąż pozostanie jakaś wolna przestrzeń. Opis tej właściwości znajduje się w tabeli 21.9. Tabela 21.9. Właściwość box-pack Właściwość
Opis
Wartości
box-pack
Określa, co przeglądarka ma robić z dodatkową przestrzenią, której nie może przydzielić elastycznym elementom.
start end justify center
W tabeli 21.10 znajduje się opis wartości obsługiwanych przez tę właściwość. W listingu 21.9 widać przykład zastosowania właściwości box-pack. Zauważ, że właściwościom max-width elementów p nadałem określone wartości; więcej na temat właściwości max-width przeczytasz w rozdziale 20. Rezultat zastosowania tej właściwości widać na rysunku 21.12. Kiedy elastyczne elementy p osiągają maksymalną szerokość, przeglądarka rozmieszcza wolną przestrzeń między nimi. Zauważ, że znajduje się ona wyłącznie pomiędzy elementami — pusta przestrzeń nie występuje ani przed pierwszym elementem, ani po ostatnim.
463
ROZDZIAŁ 21. TWORZENIE LAYOUTÓW
Tabela 21.10. Wartości właściwości box-pack Wartość
Opis
start
Elementy rozmieszczane są od lewej krawędzi kontenera, a nieprzydzielona przestrzeń wyświetlana jest po prawej stronie ostatniego elementu.
end
Elementy rozmieszczane są od prawej krawędzi kontenera, a nieprzydzielona przestrzeń wyświetlana jest po lewej stronie ostatniego elementu.
center
Nieprzydzielona przestrzeń rozmieszczana jest równomiernie po lewej stronie pierwszego elementu i prawej ostatniego.
justify
Nieprzydzielona przestrzeń rozmieszczana jest równo pomiędzy elementami.
Listing 21.9. Zastosowanie właściwości box-pack
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.
Podczas podróży do Azji uderzyła mnie rozmaitość odmian bananów — wiele z nich miało wyjątkowy smak i można je było dostać wyłącznie w niedużych regionach.
464
ROZDZIAŁ 21. TWORZENIE LAYOUTÓW
Rysunek 21.12. Zastosowanie właściwości box-pack
Layouty tabelowe Przez wiele lat elementu HTML table powszechnie używano do tworzenia layoutów stron internetowych. Ze względu jednak na zwiększenie nacisku na zachowanie sensu semantycznego elementów HTML, wykorzystywanie tej metody jest obecnie niepożądane — w HTML5 należy używać elementu table wyłącznie do przedstawiania danych tabelowych; więcej na ten temat przeczytasz w rozdziale 11. Rzecz jasna, element table był tak popularny, ponieważ zaspokajał zapotrzebowanie na proste siatki, w których można by zamieszczać treść. Na szczęście, funkcji tworzenia layoutów tabelowych w CSS można używać tak samo jak elementu table, lecz bez błędnego wykorzystywania jego znaczenia semantycznego. Layouty tabelowe CSS tworzy się przy użyciu właściwości display. Obsługiwane przez tę właściwość wartości opisane są w tabeli 21.11. Każda z nich jest odpowiednikiem jakiegoś elementu HTML. Tabela 21.11. Wartości właściwości display, które służą do tworzenia layoutów tabelowych Wartość
Opis
table
Działa jak element table.
inline-table
Działa jak element table, lecz tworzy element liniowy; o elementach blokowych i liniowych przeczytasz więcej w rozdziale 20.
table-caption
Działa jak element caption.
table-column
Działa jak element col.
table-column-group
Działa jak element colgroup.
table-header-group
Działa jak element thead.
table-row-group
Działa jak element tbody.
table-footer-group
Działa jak element tfoot.
table-row
Działa jak element tr.
table-cell
Działa jak element td.
465
ROZDZIAŁ 21. TWORZENIE LAYOUTÓW
W listingu 21.10 widać przykład zastosowania tych wartości. Listing 21.10. Utworzenie layoutu tabelowego CSS
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.
Podczas podróży do Azji uderzyła mnie rozmaitość odmian bananów — wiele z nich miało wyjątkowy smak i można je było dostać wyłącznie w niedużych regionach.
To jest jabłko.
To jest banan.
466
ROZDZIAŁ 21. TWORZENIE LAYOUTÓW
Tutaj nie ma obrazka.
Rezultat zastosowania tych wartości widać na rysunku 21.13.
Rysunek 21.13. Prosty layout tabelowy CSS Layouty tabelowe cenione są ze względu na automatyczną zmianę wymiarów komórek, w której najszersze bądź najwyższe treści określają rozmiar całej kolumny lub rzędu. Efekt w działaniu widać na rysunku 21.13.
Podsumowanie W tym rozdziale przedstawiłem Ci funkcje CSS służące do tworzenia layoutów — od prostego pozycjonowania elementów, po płynność elastycznych layoutów polowych. Pokazałem Ci również, jak tworzyć layouty tabelowe bez nadużywania elementu HTML table. Tworzenie layoutów jest aspektem, do którego odnosi się wiele modułów CSS3, lecz jednocześnie funkcje te są dopiero w powijakach i nie wszystkie są odpowiednio zdefiniowane i obsługiwane przez przeglądarki. W międzyczasie jak najbardziej można jednak używać tych funkcji (zwłaszcza z pomocą frameworka CSS do tworzenia layoutów). Zachęcam Cię też do uważnego śledzenia postępów we wdrażaniu nowych modułów CSS do tworzenia layoutów.
467
ROZDZIAŁ 21. TWORZENIE LAYOUTÓW
468
ROZDZIAŁ 22
Stylizacja tekstu
W tym rozdziale przedstawię Ci właściwości CSS służące do stylizacji tekstu. Jest to jeszcze niedookreślona dziedzina CSS3. Istnieją pewne użyteczne nowe funkcje, które są w szerokim użyciu i które omówię w kolejnych podrozdziałach. Jednocześnie padały też propozycje wprowadzenia funkcji, o których nie można się jeszcze wypowiadać z pewnością — często odnoszą się one do szczegółów typograficznych i nie ma pewności, czy zainteresowanie nimi będzie wystarczające, by włączyć je do standardu. Tak czy inaczej, funkcje obsługiwane przez popularne przeglądarki dają wiele możliwości pracy z tekstem, a w dodatku czynią ją przyjemną. W tabeli 22.1 znajduje się streszczenie całego rozdziału. Tabela 22.1. Streszczenie rozdziału Problem
Rozwiązanie
Listing
Wyrównanie bloku tekstu.
Użyj właściwości text-align i text-justify.
22.1
Określenie sposobu przetwarzania białych znaków.
Użyj właściwości whitespace.
22.2, 22.3
Określenie kierunku zapisu tekstu.
Użyj właściwości direction.
22.4
Określenie odstępów między wyrazami, literami i wierszami.
Użyj właściwości letter-spacing, word-spacing i line-height.
22.5
Określenie sposobu łamania przepełnień tekstowych.
Użyj właściwości word-wrap.
22.6
Określenie wcięcia tekstu.
Użyj właściwości text-indent.
22.7
Ozdobienie lub przekształcenie tekstu.
Użyj właściwości text-decoration lub text-transform.
22.8
Nadanie blokowi tekstu cienia.
Użyj właściwości text-shadow.
22.9
Wskazanie i skonfigurowanie fonta.
Użyj właściwości font, font-family, font-size, font-style, font-variant i font-weight.
22.10 – 22.12
Zastosowanie własnego fonta.
Użyj właściwości @font-face.
22.13
Wskazówka Do określenia koloru tekstu można użyć właściwości color, którą opiszę w rozdziale 24.
ROZDZIAŁ 22. STYLIZACJA TEKSTU
Podstawowe style tekstu W poniższych punktach pokażę Ci, jak używać właściwości służących do podstawowej stylizacji tekstu.
Wyrównywanie i justowanie tekstu W tabeli 22.2 znajduje się opis właściwości służących do określania sposobu wyrównywania i justowania tekstu. Tabela 22.2. Właściwości określające sposób wyrównywania i justowania Właściwość
Opis
Wartości
text-align
Określa wyrównanie bloku tekstu.
start end left right center justify
text-justify
Określa sposób, w jaki tekst ma być justowany, kiedy właściwości text-align nadana jest wartość justify.
Tabela 22.3
Działanie właściwości text-align jest dość proste, choć warto zauważyć, że istnieje możliwość wyrównania tekstu do określonej krawędzi (przy użyciu wartości left i right) lub do odpowiednich krawędzi w odniesieniu do danego języka (przy użyciu wartości start i end). Rozróżnienie to jest istotne w pracy z pismem zapisywanym od prawej do lewej. W listingu 22.1 widnieje przykład zastosowania właściwości text-align w odniesieniu do bloków tekstu. Listing 22.1. Wyrównywanie tekstu
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości. Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.
Start
470
ROZDZIAŁ 22. STYLIZACJA TEKSTU
End Left Right Justify Center
W tym przykładzie zamieściłem prosty skrypt, który zmienia wartość właściwości text-align elementu p na podstawie tego, który przycisk ostatnio naciśnięto. Na rysunku 22.1 widać wpływ niektórych z tych wartości na wyrównanie tekstu.
Rysunek 22.1. Rezultat nadania właściwości text-align wartości center i right Kiedy używasz wartości justify, możesz też użyć właściwości text-justify do określenia odstępów w tekście. Opis wartości obsługiwanych przez tę właściwość znajduje się w tabeli 22.3. Tabela 22.3. Wartości właściwości text-justify Wartość
Opis
auto
Przeglądarka sama wybiera styl justowania.
none
Justowanie tekstu jest wyłączone.
inter-word
Regulowane są odstępy między słowami. Jest to styl odpowiedni dla języków takich jak polski, w których występują odstępy międzywyrazowe.
inter-ideograph
Regulowane są odstępy między słowami i grafemami. Jest to styl odpowiedni dla języków takich jak japoński i koreański.
inter-cluster
Regulowane są odstępy między słowami i zbiorami grafemów. Jest to styl odpowiedni dla języków takich jak tajski.
distribute
Regulowane są odstępy między słowami i zbiorami grafemów we wszystkich rodzajach pisma poza tymi, które są zapisane kursywą lub jednym ciągiem.
kashida
Justowanie polega na przedłużaniu znaków — odnosi się to jedynie do tekstu zapisanego kursywą.
471
ROZDZIAŁ 22. STYLIZACJA TEKSTU
Białe znaki Białe znaki w kodzie HTML zwykle są kondensowane lub ignorowane. Pozwala to na oddzielenie układu dokumentów HTML od ich wyglądu na stronie. W listingu 22.2 widnieje dokument HTML z blokiem tekstowym, w którym znajdują się białe znaki. Listing 22.2. Dokument HTML z białymi znakami
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości. Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.
Wprowadziłem do tekstu kilka spacji, tabulatorów i dodatkowo kilka razy złamałem wiersze. Większe ilości białych znaków (np. kilka spacji) są przez przeglądarkę kondensowane, tj. zastępowane pojedynczą spacją. Inne rodzaje białych znaków, takie jak łamanie wierszy, są zwyczajnie ignorowane, a przeglądarka zawija tekst tak, by pojedyncze linie mieściły się w obrębie elementu. Wygląd powyższego tekstu w przeglądarce widać na rysunku 22.2. Nie zawsze jest to pożądane zachowanie — niekiedy może Ci zależeć na zachowaniu formatowania tekstu z dokumentu źródłowego. Obsługę białych znaków możesz zdefiniować właściwością whitespace, którą opisuję w tabeli 22.4. Tabela 22.4. Właściwość whitespace Właściwość
Opis
Wartości
whitespace
Określa obsługę białych znaków.
Tabela 22.5
Wartości obsługiwane przez właściwość whitespace opisane są w tabeli 22.5.
472
ROZDZIAŁ 22. STYLIZACJA TEKSTU
Rysunek 22.2. Domyślny sposób obsługi białych znaków w dokumencie HTML Tabela 22.5. Wartości właściwości whitespace Wartość
Opis
normal
Wartość domyślna; białe znaki są kondensowane, a wiersze zawijane.
nowrap
Białe znaki są kondensowane, ale wiersze nie są zawijane.
pre
Białe znaki są zachowane, a tekst jest zawijany tylko w miejscach łamania wiersza. Działa tak samo, jak element pre, który opisałem w rozdziale 8.
pre-line
Białe znaki są kondensowane, a tekst jest zawijany tak, by wiersze mieściły się w elemencie, ale żeby zachować też łamanie wiersza.
pre-wrap
Białe znaki są zachowane, a tekst jest zawijany tak, by wiersze mieściły się w elemencie, ale żeby zachować też łamanie wiersza.
W listingu 22.3 widnieje przykład zastosowania właściwości whitespace. Listing 22.3. Zastosowanie właściwości whitespace
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy
uwzględnili niezliczone odmiany
jabłek,
473
ROZDZIAŁ 22. STYLIZACJA TEKSTU
pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości. Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.
Rezultat zastosowania wartości pre-line widać na rysunku 22.3. Tekst jest zawijany tak, by treść mieściła się w elemencie, ale żeby jednocześnie zachować łamanie wiersza.
Rysunek 22.3. Zastosowanie właściwości whitespace o wartości pre-line Wskazówka Moduł CSS3 służący do obsługi tekstu uznaje właściwość whitespace za właściwość zbiorczą definiującą dwie inne: bikeshedding i text-wrap. Żadna z nich nie została jeszcze zaimplementowana, a definicja właściwości bikeshedding jest niepełna.
Kierunek tekstu Właściwość direction pozwala wskazać przeglądarce kierunek zapisu bloku tekstu. Jej opis znajduje się w tabeli 22.6. Tabela 22.6. Właściwość direction Właściwość
Opis
Wartości
direction
Określa kierunek zapisu tekstu.
ltr rtl
474
ROZDZIAŁ 22. STYLIZACJA TEKSTU
W listingu 22.4 widnieje prosty przykład zastosowania właściwości direction. Listing 22.4. Zastosowanie właściwości direction
Przykład
Tekst zapisany od lewej do prawej
Tekst zapisany od prawej do lewej
Rezultat zastosowania tej właściwości widać na rysunku 22.4.
Rysunek 22.4. Zastosowanie właściwości direction Ostrzeżenie Właściwość direction została usunięta z ostatniej wersji tego modułu CSS, aczkolwiek nie uzasadniono tego w żaden sposób i może się ona jeszcze znaleźć w ukończonym module.
Odstępy między wyrazami, literami i wierszami Możesz wskazać przeglądarce wielkość odstępów między wyrazami, literami i wierszami. Służące do tego właściwości opisuję w tabeli 22.7. W listingu 22.5 widać blok tekstu, któremu przypisano te trzy właściwości.
475
ROZDZIAŁ 22. STYLIZACJA TEKSTU
Tabela 22.7. Właściwości spacing Właściwość
Opis
Wartości
letter-spacing
Określa odstępy między literami.
normal
word-spacing
Określa odstępy między wyrazami.
normal
line-height
Określa odstępy między wierszami.
normal
Listing 22.5. Zastosowanie właściwości letter-spacing i word-spacing
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Rezultat zastosowania tych właściwości widać na rysunku 22.5.
Dzielenie wyrazów Właściwość word-wrap wskazuje przeglądarce, co robić ze słowami szerszymi od bloku elementu. W tabeli 22.8 znajduje się opis obsługiwanych wartości. Tabela 22.8. Wartości właściwości word-wrap Wartość
Opis
normal
Wyrazy nie są dzielone, nawet kiedy nie mieszczą się w elemencie.
break-word
Wyrazy są dzielone tak, by mieściły się w elemencie.
476
ROZDZIAŁ 22. STYLIZACJA TEKSTU
Rysunek 22.5. Rezultat zastosowania właściwości word-spacing i letter-spacing W listingu 22.6 widnieje przykład zastosowania właściwości word-wrap. Listing 22.6. Zastosowanie właściwości word-wrap
Przykład
Istnieje wiele różnych rodzajów owoców — sam całkowicieprzezemniezmyślonyowoc ma ponad pięćset odmian.
Istnieje wiele różnych rodzajów owoców — sam całkowicieprzezemniezmyślonyowoc ma ponad pięćset odmian.
477
ROZDZIAŁ 22. STYLIZACJA TEKSTU
W tym przykładzie znajdują się dwa elementy p, którym nadałem różne wartości właściwości word-wrap. Rezultat widać na rysunku 22.6.
Rysunek 22.6. Rezultat zastosowania właściwości word-wrap Znajdującemu się po lewej stronie elementowi p nadałem wartość break-word, dzięki czemu zawarte w tekście długie słowo zostało podzielone i zawinięte, żeby mogło się zmieścić w elemencie. Drugiemu elementowi p nadałem domyślną wartość normal, przez co przeglądarka nie podzieliła wyrazu, pomimo że wystaje poza krawędź elementu p. Wskazówka Możesz użyć opisanej w rozdziale 20. właściwości overflow, żeby polecić przeglądarce, by nie wyświetlała przepełnień tekstowych — skutkuje to jedynie niewyświetleniem tej części wyrazu, która nie mieści się w elemencie.
Wcięcie pierwszego wiersza Właściwość text-indent pozwala na określenie wcięcia pierwszego wiersza bloku tekstowego, czy to jednostkami miary, czy odsetkiem szerokości kontenera. W tabeli 22.9 znajduje się opis tej właściwości. Tabela 22.9. Właściwość text-indent Właściwość
Opis
Wartości
text-indent
Określa wcięcie pierwszego wiersza tekstu.
W listingu 22.7 widnieje przykład zastosowania tej właściwości. Listing 22.7. Zastosowanie właściwości text-indent
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości. Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.
Rezultat zastosowania tej właściwości widać na rysunku 22.7.
Rysunek 22.7. Wcięcie pierwszego wiersza bloku tekstu
Dekorowanie i przekształcanie tekstu Na dekorowanie i przekształcanie tekstu pozwalają dwie właściwości, text-decoration i text-transform. Ich opis znajduje się w tabeli 22.10. Tabela 22.10. Właściwości służące do dekorowania i przekształcania tekstu Właściwość
Opis
Wartości
text-decoration
Określa dekorację bloku tekstu.
none underline overline line-through blink
text-transform
Określa sposób przekształcenia bloku tekstu.
none capitalize uppercase lowercase
Właściwość text-decoration nadaje blokowi tekstu określony efekt graficzny, np. podkreślenie. Domyślna wartość to none, czyli brak dekoracji. Właściwość text-transform określa z kolei wielkość liter bloku tekstu; jej domyślna wartość to również none. Przykład zastosowania obydwu tych właściwości widać w listingu 22.8.
479
ROZDZIAŁ 22. STYLIZACJA TEKSTU
Listing 22.8. Zastosowanie właściwości text-decoration i text-transform
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości. Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.
Na rysunku 22.8 widać efekt zastosowania właściwości text-transform o wartości uppercase oraz właściwości text-decoration o wartości line-through.
Rysunek 22.8. Udekorowany i przekształcony tekst Wskazówka Wartości blink właściwości text-decoration należy używać bardzo ostrożnie. Wywołuje ona niezwykle denerwujący efekt, który może być szczególnie męczący, jeżeli użytkownik musi przez dłuższy czas korzystać ze strony. Sugeruję poszukać mniej irytującego sposobu przyciągania uwagi użytkownika.
Nadawanie tekstowi cienia W rozdziale 19. pokazałem Ci, jak przypisywać elementom cienie. To samo można zrobić z tekstem przy użyciu właściwości text-shadow, którą opisuję w tabeli 22.11.
480
ROZDZIAŁ 22. STYLIZACJA TEKSTU
Tabela 22.11. Właściwość text-shadow Właściwość
Opis
Wartości
text-shadow
Nadaje cień blokowi tekstu.
Wartości i określają oddalenie cienia od tekstu. Wartości wyraża się jednostkami miary odległości, a dopuszczalne jest podawanie wartości ujemnych. Wartość również określa się jednostkami miary odległości, a odnosi się ona do rozmycia cienia; jej użycie nie jest obowiązkowe. Wartość określa kolor cienia. W listingu 22.9 widnieje przykład zastosowania właściwości text-shadow. Listing 22.9. Zastosowanie właściwości text-shadow
Przykład
Przemyślenia o owocach Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
W tym przykładzie nadałem tekstowi dwa różne cienie. Rezultat widać na rysunku 22.9. Zauważ, że kształt cienia oparty jest na kształcie liter, a nie kontenera.
Rysunek 22.9. Nadanie tekstowi cienia
481
ROZDZIAŁ 22. STYLIZACJA TEKSTU
Fonty Jedną z najważniejszych zmian, jakie można wprowadzić w tekście, jest zmiana fonta służącego do wyświetlania znaków. W tabeli 22.12 znajduje się opis właściwości odnoszących się do fontów. W zakresie typografii trudno o kompromis — z jednej strony, jest wielu zaawansowanych użytkowników, którzy chcą mieć kontrolę nad każdym jej aspektem. Tymczasem są też designerzy i programiści, którym zależy na łatwym dostępie do najważniejszych funkcji typograficznych i którzy nie chcą się zagłębiać w szczegóły. Niestety, obsługa fontów CSS nie zadowala ani jednych, ani drugich. CSS obsługuje niewiele istotnych aspektów pracy z krojami pisma, a i te nie są szczególnie użyteczne dla typowego designera i programisty. Istnieją proponowane moduły CSS3, które miałyby usprawnić obsługę krojów, ale znajdują się one dopiero we wczesnej fazie rozwoju i jeszcze trzeba poczekać, aż zostaną wprowadzone do powszechnego użycia. Tabela 22.12. Właściwości fontów Właściwość
Opis
font-family
Wartości
Określa rodzinę fontów przypisaną blokowi tekstu.
Tabela 22.13
font-size
Określa wielkość tekstu.
Tabela 22.14
font-style
Określa styl fonta.
normal italic oblique
font-variant
Określa, czy tekst ma być zapisany kapitalikami.
normal smallcaps
font-weight
Określa grubość tekstu.
normal bold bolder lighter
font
Właściwość zbiorcza, definiująca cechy fonta w jednej deklaracji.
Zapoznasz się z nimi w kolejnych punktach.
Wartości właściwości font zapisuje się w następującym formacie: font:
Wybór fonta Właściwość font-family określa fonty, jakimi tekst ma być zapisywany, w preferowanej kolejności. Przeglądarka zaczyna od sprawdzenia pierwszego fonta na liście i przechodzi do kolejnych, aż znajdzie taki, z którego może skorzystać. Funkcji tej należy używać, ponieważ korzystasz z fontów zainstalowanych na komputerze użytkownika, a — rzecz jasna — różni użytkownicy mają różne fonty w zależności od używanego systemu i własnych upodobań. Wreszcie, CSS obsługuje ogólne kategorie fontów, do których każdy ma dostęp — są to standardowe rodziny fontów, których użycie może poskutkować zróżnicowanym doborem konkretnych fontów przez przeglądarki. Opis standardowych rodzin fontów znajduje się w tabeli 22.13. Tabela 22.13. Standardowe rodziny fontów Standardowa rodzina fontów
Przykładowy font
serif
Times
sans-serif
Helvetica
cursive
Zapf-Chancery
fantasy
Western
monospace
Courier
482
ROZDZIAŁ 22. STYLIZACJA TEKSTU
W listingu 22.10 widnieje przykład przypisania właściwości font-family blokowi tekstu. Listing 22.10. Zastosowanie właściwości font-family
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
W tym przykładzie nadałem właściwości font-family wartość HelveticaNeue Condensed. Tego kroju używa się w moim wydawnictwie i nie jest on zainstalowany w każdym systemie. Jako źródło krojów zapasowych określiłem standardową rodzinę monospace na wypadek, gdyby HelveticaNeue Condensed nie była dostępna. Rezultat widać na rysunku 22.10.
Rysunek 22.10. Zastosowanie właściwości font-family Przeglądarkę widoczną po prawej włączyłem na komputerze, na którym napisałem tę książkę. Mam na nim zainstalowane fonty mojego wydawnictwa, toteż przeglądarka znalazła na nim HelveticaNeue Condensed. Przeglądarkę widoczną po lewej uruchomiłem na jednym z moich komputerów testowych, na którym nie ma fonta HelveticaNeue Condensed. Jak widać, przeglądarka skorzystała ze standardowego kroju monospace. Wskazówka Z korzystaniem z zapasowych fontów bywa taki problem, że fonty mogą mieć na ekranie różny rozmiar. Widać to na rysunku powyżej, gdzie font zapasowy jest większy od docelowego. Do określenia proporcji skalowania można użyć właściwości font-size-adjust, ale obecnie jest to funkcja obsługiwana wyłącznie przez Firefoksa.
483
ROZDZIAŁ 22. STYLIZACJA TEKSTU
Rozmiar fonta Właściwość font-size pozwala na określenie wielkości fonta. Opis wartości obsługiwanych przez tę właściwość znajduje się w tabeli 22.14. Tabela 22.14. Wartości właściwości font-size Wartość
Opis
xx-small x-small small medium large x-large xx-large
Określa rozmiar fonta. Przeglądarka sama określa dokładny rozmiar definiowany przez poszczególne wartości, ale można z pewnością stwierdzić, że im niżej wartość znajduje się na liście, tym większy określa rozmiar.
smaller larger
Określa rozmiar fonta względem rozmiaru fonta rodzica.
Dokładnie określa rozmiar fonta w jednostkach miary.
Określa rozmiar fonta jako odsetek rozmiaru fonta rodzica.
W listingu 22.11 znajduje się przykład zastosowania właściwości font-size. Listing 22.11. Zastosowanie właściwości font-size
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
484
ROZDZIAŁ 22. STYLIZACJA TEKSTU
W tym przykładzie użyłem trzech deklaracji font-size. Rezultat widać na rysunku 22.11.
Rysunek 22.11. Zastosowanie właściwości font-size
Styl i grubość fonta Grubość fonta można określić właściwością font-weight. Właściwość font-style pozwala na wybranie fonta zwykłego, kursywowego lub pochylonego. Kursywa różni się od pochylonego pisma, ale bardzo subtelnie — na ogół wygląd tekstu zapisanego jednym i drugim rodzajem pisma niewiele się różni, jeśli w ogóle. W listingu 22.12 widnieje przykład zastosowania tych właściwości. Listing 22.12. Zastosowanie właściwości font-weight i font-style
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
485
ROZDZIAŁ 22. STYLIZACJA TEKSTU
Rezultat zastosowania tych właściwości widać na rysunku 22.12.
Rysunek 22.12. Zastosowanie właściwości font-weight i font-style
Fonty internetowe Wspomniałem już wcześniej o jednym z największych problemów z używaniem fontów CSS — tym, że nie można zakładać, że na komputerze użytkownika znajduje się określony font. Rozwiązaniem tego problemu jest zastosowanie fontów internetowych, co polega na wczytaniu fonta na stronę, przez co użytkownik sam nie musi podejmować w tym zakresie jakichkolwiek dodatkowych działań. Fonty internetowe określa się właściwością @font-face, tak jak widać to w listingu 22.13. Listing 22.13. Wykorzystanie fonta internetowego
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Przy korzystaniu z właściwości @font-face do opisu używanego fonta stosuje się standardowe właściwości obsługi fontów. Właściwość font-family wskazuje nazwę, jaką ma być określany pobierany font, a font-style i font-weight wskazują przeglądarce styl i grubość fonta — możesz więc zapisywać znaki kursywą i pogrubionym pismem. Właściwość src służy do wskazywania lokalizacji pliku fonta. Fonty internetowe występują w wielu formatach, ale WOFF wydaje się najbardziej powszechny i dostępny. Wskazówka Niektóre serwery domyślnie nie przesyłają przeglądarce plików fontów. W takiej sytuacji może być konieczne dodanie typu pliku lub standardu MIME do konfiguracji.
Rezultat zastosowania fonta internetowego widać na rysunku 22.13.
Rysunek 22.13. Zastosowanie fonta internetowego Jest wiele źródeł fontów internetowych — moim ulubionym jest Google. Oferowane przez Google fonty wraz z instrukcją włączania ich w kod HTML znajdziesz na stronie www.google.com/webfonts, skąd zresztą wziąłem krój użyty w powyższym przykładzie.
Podsumowanie W tym rozdziale przedstawiłem Ci właściwości CSS służące do stylizacji tekstu. Oferują one zarówno proste funkcje (np. wyrównywanie tekstu), jak i bardziej rozbudowane (używanie określonych fontów i nadawanie tekstowi cieni). Jest to kolejna nie w pełni określona dziedzina CSS. Istnieją pewne ciekawe propozycje wprowadzenia właściwości, które dawałyby większą kontrolę nad wyglądem tekstu, ale nie jest jeszcze jasne, czy cieszyłyby się wystarczającym zainteresowaniem, żeby je wdrożyć — jest dość prawdopodobne, że owe propozycje nie zostaną włączone do standardu.
487
ROZDZIAŁ 22. STYLIZACJA TEKSTU
488
ROZDZIAŁ 23
Przejścia, animacje i przekształcenia W tym rozdziale przedstawię Ci trzy różne sposoby nadawania prostych efektów specjalnych elementom HTML: przejść, animacji i przekształceń. Każdy z tych terminów omówię i zilustruję w dalszej części rozdziału. Są one nowością w CSS3 i w chwili, kiedy to piszę, można z nich korzystać jedynie przy użyciu właściwości z prefiksami przeglądarkowymi. Podejrzewam, że ta sytuacja ulegnie zmianie dość szybko, jako że owe funkcje będą niezwykle popularne wśród webdesignerów i webdeweloperów. Okraszanie elementów HTML efektami specjalnymi nie jest nowym pomysłem, a w większości dobrych bibliotek JavaScript można znaleźć co najmniej kilka efektów, które wprowadzane są teraz do CSS3. Przewagą CSS3 nad JavaScript jest jego wydajność. Nowe funkcje w znacznej mierze opierają się na zmianie wartości właściwości CSS wraz z upływem czasu, a jest to coś, co można robić bezpośrednio w przeglądarce bez nadmiernego obciążania komputera. Tym niemniej te efekty (także najprostsze) wymagają dużej mocy obliczeniowej, zwłaszcza kiedy występują na złożonych stronach internetowych. Z tego względu z opisanych w tym rozdziale efektów powinieneś korzystać sporadycznie. Spowalnianie komputera użytkownika nigdy nie jest pożądane, zwłaszcza jeśli ma to służyć jedynie zademonstrowaniu talentu animatorskiego. Kolejnym argumentem przeciwko nadużywaniu tych efektów jest to, że bywają one rozpraszające i irytujące. Używaj ich do usprawniania czynności, jakie użytkownik wykonuje na stronie — jakiekolwiek by nie były — i nie nadawaj ich elementom, które nie są dla tego zadania kluczowe. W tabeli 23.1 znajduje się streszczenie tego rozdziału. Tabela 23.1. Streszczenie rozdziału Problem
Rozwiązanie
Listing
Utworzenie podstawowego przejścia.
Użyj właściwości transition-delay, transition-property i transition-duration albo właściwości zbiorczej transition.
23.1, 23.2
Utworzenie odwróconego przejścia.
Określ odwrócone przejście w podstawowym stylu elementu.
23.3
Określenie sposobu obliczania pośrednich wartości właściwości przejścia.
Użyj właściwości transition-timing-function.
23.4
Utworzenie prostej animacji.
Użyj właściwości animation-delay, animation-duration, animation-iteration-count i animation-name. Wartość animation-name musi odpowiadać zbiorowi klatek kluczowych zdefiniowanych regułą @keyframes.
23.5
Określenie początkowego stanu animacji.
Zamieść w regule @keyframes klauzulę from.
23.6
ROZDZIAŁ 23. PRZEJŚCIA, ANIMACJE I PRZEKSZTAŁCENIA
Tabela 23.1. Streszczenie rozdziału — ciąg dalszy Problem
Rozwiązanie
Listing
Określenie klatek kluczowych animacji.
Dodaj warunki do reguły @keyframes, używając nazwy klauzuli do określenia punktu animacji (w wartościach procentowych), w którym dana klatka się znajduje.
23.7
Określenie kierunku powtórzeń animacji.
Użyj właściwości animation-direction.
23.8
Zachowanie końcowego stanu animacji.
Animacje po zakończeniu powracają do stanu wejściowego; rozważ skorzystanie z przekształcenia.
23.9
Wprowadzenie animacji do wejściowego layoutu strony.
Zamieść właściwości animacji w stylach odnoszących się do elementów w ich stanie wejściowym.
23.10
Utwórz dodatkowe style zawierające właściwość
23.11
Wielokrotne wykorzystanie klatek kluczowych.
animation-name, których wartości odnoszą się do tej samej reguły @keyframes.
Nadanie elementowi więcej niż jednej animacji.
Określ dodatkowe reguły @keyframes jako wartość właściwości animation-name.
23.12, 23.13
Zatrzymanie i wznowienie animacji.
Użyj właściwości animation-play-state.
23.14
Przekształcenie elementu.
Użyj właściwości transform.
23.15
Określenie punktu wyjścia przekształcenia.
Użyj właściwości transform-origin.
23.16
Ujęcie przekształcenia jako animacji lub przejścia.
Włącz właściwość transform do przekształcanego stylu lub reguły @keyframes.
23.17
Przejścia Przeglądarka domyślnie wprowadza zmiany właściwości CSS elementów bez żadnej zwłoki. Kiedy na przykład używasz selektora :hover, przeglądarka wprowadza właściwości określone tym selektorem, kiedy tylko użytkownik zamieszcza kursor nad danym elementem. W listingu 23.1 widnieje przykład. Listing 23.1. Natychmiastowe zastosowanie nowej wartości właściwości
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
W tym przykładzie znajduje się element span, któremu nadałem dwa precyzyjne style. Pierwszy z nich (z selektorem #banana) używany jest standardowo, a drugi (z selektorem #banana:hover) tylko wtedy, kiedy nad elementem znajduje się kursor. Wskazówka Użyłem w tym przykładzie właściwości color, którą omówię w rozdziale 24.
Przeglądarka reaguje, kiedy użytkownik umieszcza kursor nad elementem span — natychmiast nanosi wtedy nowe wartości właściwości. Zmianę widać na rysunku 23.1.
Rysunek 23.1. Natychmiastowe zastosowanie innych wartości właściwości CSS Funkcja przejścia CSS daje kontrolę nad tempem nadawania nowych wartości. Możesz zatem polecić, by wygląd ukazanego w przykładzie elementu span zmieniał się stopniowo, sprawiając tym samym, by efekt najechania kursorem na słowo banan nie był tak rażący. W tabeli 23.2 znajdują się właściwości, które to umożliwiają. Właściwości transition-delay i transition-duration określa się wartościami czasowymi CSS, czyli wartością liczbową z przyrostkiem ms (oznaczającym milisekundy) lub s (oznaczającym sekundy). Wartości właściwości zbiorczej transition zapisuje się w następującym formacie: transition:
W listingu 23.2 widnieje przykład nadania przejścia przykładowemu dokumentowi HTML. W chwili, kiedy to piszę, żadna z popularnych przeglądarek nie obsługuje właściwości przejść jako takich, lecz wszystkie poza Internet Explorerem obsługują odpowiedniki tych właściwości z prefiksami przeglądarkowymi. W listingu korzystam z prefiksu -webkit.
491
ROZDZIAŁ 23. PRZEJŚCIA, ANIMACJE I PRZEKSZTAŁCENIA
Tabela 23.2. Właściwości przejścia Właściwość
Opis
Wartości
transition-delay
Określa opóźnienie, po którym przejście się rozpoczyna.
transition-duration
Określa czas, w jakim przejście się odbywa.
transition-property
Określa właściwość, do której odnosi się przejście.
transition-timing-function
Określa sposób obliczania wartości pośrednich podczas przejścia.
Listing 23.4
transition
Właściwość zbiorcza, która definiuje wszystkie szczegóły przejścia w jednej deklaracji.
Listing 23.2
Listing 23.2. Zastosowanie przejścia
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
492
ROZDZIAŁ 23. PRZEJŚCIA, ANIMACJE I PRZEKSZTAŁCENIA
Uwaga Standardowe właściwości animacji nie są jeszcze obsługiwane przez którąkolwiek z popularnych przeglądarek. Podobnie jak w przypadku przejść, wszystkie przeglądarki poza Internet Explorerem obsługują te funkcje przy pomocy właściwości z prefiksami przeglądarkowymi. W listingu 23.2 użyłem prefiksu -webkit, co oznacza, że przykładowy kod działa tylko w Safari i Chrome. Jeżeli chcesz go użyć w Firefoksie lub Operze, to zwyczajnie podstaw -moz lub -o pod -webkit. Jest to kolejna istotna dziedzina usprawnień w CSS3 i spodziewam się, że funkcje te wkrótce zostaną poprawnie wdrożone.
W tym przykładzie nadałem przejście stylowi określonemu selektorem #banana:hover. Zaczyna się ono 100 milisekund po najechaniu kursorem na element span, trwa 500 milisekund i nadaje temu elementowi właściwości background-color, color, padding, font-size i border. Na rysunku 23.2 widnieją kolejne etapy przejścia.
Rysunek 23.2. Kolejne etapy przejścia Zauważ, że w powyższym przykładzie zdefiniowałem kilka właściwości. Właściwości przejścia określane są oddzielonymi przecinkami wartościami, przez co kilka przejść efektów zachodzi jednocześnie. Także właściwościom opóźnienia i czasu trwania przejścia można nadać kilka różnych wartości, żeby przejścia poszczególnych właściwości zaczynały się z różnym opóźnieniem i trwały przez różne okresy.
Odwrócone przejścia Przejścia zachodzą tylko wtedy, kiedy nadawany jest zestawiony z nimi styl. Mój przykładowy styl wykorzystuje selektor :hover, wobec czego styl jest nadawany wyłącznie wtedy, kiedy kursor znajduje się nad elementem span. Kiedy tylko użytkownik zdejmuje kursor z elementu span, to elementowi temu nadawany jest na nowo styl #banana i jego wygląd natychmiast wraca do swojej pierwotnej postaci. To właśnie z tego powodu większość przejść zachodzi parami: przejście do tymczasowego stanu oraz odwrócone przejście do stanu pierwotnego. W listingu 23.3 widnieje przykład wygładzenia powrotu do pierwotnego stanu poprzez utworzenie drugiego przejścia. Listing 23.3. Utworzenie drugiego przejścia
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
W powyższym przykładzie pominąłem właściwość transition-property. Dzięki temu wszystkie zmiany właściwości nadawane są stopniowo przez cały czas trwania przejścia. Zdefiniowałem również wstępne, 10-milisekundowe opóźnienie i czas trwania 250 milisekund. Dodanie krótkotrwałego odwrotnego przejścia sprawia, że powrót do pierwotnego stanu jest mniej drażniący. Wskazówka Przeglądarka nie uruchamia przejść bezpośrednio po wczytaniu strony. Oznacza to, że przy wyświetleniu dokumentu HTML elementom przypisywane są wartości określone w stylu #banana, a stopniowe przypisywanie wartości pierwotnych zachodzi dopiero przy przejściach odwrotnych.
Wybór sposobu obliczania wartości pośrednich Kiedy korzystasz z przejścia, przeglądarka musi wypracować wartości pośrednie pomiędzy wejściowymi a końcowymi wartościami każdej właściwości. Właściwość transition-timing-function służy do określenia sposobu, w jaki to się odbywa, przy czym wartości te wyrażane są jako cztery punkty na kwadratowej krzywej Béziera. Predefiniowanych krzywych do wyboru jest pięć: • ease (domyślna wartość), • linear, • ease-in, • ease-out, • ease-in-out.
494
ROZDZIAŁ 23. PRZEJŚCIA, ANIMACJE I PRZEKSZTAŁCENIA
Każdą z tych krzywych widać na rysunku 23.3. Wskazują one tempo, w jakim wartości pośrednie wzrastają do wartości docelowej.
Rysunek 23.3. Krzywe funkcji czasowego rozkładu przejścia Najłatwiejszym sposobem na zapoznanie się z tymi wartościami jest poeksperymentowanie z nimi we własnym dokumencie HTML. Istnieje jeszcze jedna wartość — cubic-bezier — która pozwala na samodzielne określenie krzywej. Z doświadczenia wiem jednak, że tak definiowane przejścia są za mało płynne, a brak szczegółowości w określaniu wartości pogarsza jakość przejścia, przez co samodzielne definiowanie krzywej w zasadzie nie ma sensu. Pozostaje mieć nadzieję, że kolejne implementacje tej funkcji będą się polepszać w miarę postępów w tworzeniu ostatecznego standardu. W listingu 23.4 widać przykład zastosowania właściwości transition-timing-function. Listing 23.4. Zastosowanie właściwości transition-timing-function
Przykład
495
ROZDZIAŁ 23. PRZEJŚCIA, ANIMACJE I PRZEKSZTAŁCENIA
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Użyłem wartości linear, która — jak sądzę — pozwala na uzyskanie najpłynniejszego przejścia.
Animacje Animacje CSS są w zasadzie usprawnionymi przejściami. Dają więcej możliwości, a także zapewniają większą kontrolę i elastyczność przy przechodzeniu od jednego stylu CSS do drugiego. W tabeli 23.3 znajduje się opis właściwości animacji. Tabela 23.3. Właściwości animacji Właściwość
Opis
Wartości
animation-delay
Określa opóźnienie przed rozpoczęciem animacji.
animation-direction
Określa, czy animacja ma być cyklicznie odgrywana wstecz.
normal alternate
animation-duration
Określa czas odgrywania animacji.
animation-iteration-count
Określa, ile razy animacja ma być odegrana.
infinite
animation-name
Określa nazwę animacji.
none
animation-play-state
Pozwala na zatrzymanie i wznowienie animacji.
running paused
animation-timing-function
Określa sposób obliczania pośrednich wartości animacji. We wcześniejszym podrozdziale „Przejścia” przeczytasz więcej na temat wartości tej właściwości.
ease linear ease-in ease-out ease-in-out cubic-bezier
animation
Właściwość zbiorcza.
Opis znajdziesz poniżej.
Wartości właściwości zbiorczej animation zapisuje się w następującym formacie: animation:
Zauważ, że żadna z tych właściwości nie pozwala na określenie, które właściwości CSS elementów mają wejść w skład animacji. Jest tak, ponieważ animacje definiuje się w dwóch częściach. Pierwsza część zawarta jest w deklaracji stylu i wykorzystuje właściwości opisane w tabeli 23.3. Określa ona styl animacji, ale nie wskazuje tego, co ma być animowane. Drugą część definiuje się przy użyciu reguły @keyframes; służy do określania zbioru właściwości, do których animacja się odnosi. Obydwie części kodu odpowiadającego za animację widać w listingu 23.5. Listing 23.5. Utworzenie animacji
Przykład
496
ROZDZIAŁ 23. PRZEJŚCIA, ANIMACJE I PRZEKSZTAŁCENIA
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Żeby zrozumieć powyższy przykład, musisz się przyjrzeć obydwu częściom kodu odpowiedzialnego za animację. Pierwsza część — ujęta w elemencie style — składa się z właściwości animacji określonych dla selektora #banana:hover. Zacznijmy od podstawowych właściwości: animacja zaczyna się 100 milisekund po nadaniu stylu, trwa 500 milisekund, a następnie powtarza się w nieskończoność; jej wartości pośrednie obliczane są przy użyciu funkcji linear. Poza powtórzeniami wszystkie te właściwości mają bezpośrednie odpowiedniki wśród właściwości przejść. Te podstawowe właściwości nie określają zbioru właściwości, które mają być animowane. Do tego celu muszę użyć właściwości animation-name. Nadając jej wartość GrowShrink, poleciłem przeglądarce, by znalazła zbiór klatek kluczowych o nazwie GrowShrink i wykorzystała wartości podstawowych właściwości do animowania właściwości określonych dla tychże klatek. Oto zawarta w powyższym listingu deklaracja klatek kluczowych (z usuniętym prefiksem -webkit): @keyframes GrowShrink { to { font-size: x-large; border: medium solid white; background-color: green;
497
ROZDZIAŁ 23. PRZEJŚCIA, ANIMACJE I PRZEKSZTAŁCENIA
color: white; padding: 4px; } }
Deklarację zacząłem od członu @keyframes, a następnie podałem nazwę, jaką ten zbiór ma nosić. W tym przypadku jest to GrowShrink. W ramach deklaracji określiłem zbiór właściwości, które mają być animowane. W tym przypadku jest to pięć właściwości z wartościami, zawarte w deklaracji to. Jest to najprostsza deklaracja zbioru klatek kluczowych. Deklaracja to określa zbiór właściwości do animowania oraz wartości, jakie owe właściwości mają przybrać w chwili zakończenia animacji. (Już wkrótce przedstawię Ci bardziej rozbudowane definicje klatek kluczowych). Wartości wejściowe animacji są tożsame z wartościami właściwości animowanego elementu sprzed odegrania animacji. Animacja w powyższym listingu przypomina przykładowe przejścia, które przedstawiłem Ci już w tym rozdziale. Wystarczy zresztą otworzyć ten dokument HTML w przeglądarce i najechać kursorem na element span, by przekonać się, że ta animacja wygląda tak samo, jak owe przejścia — przynajmniej początkowo. Różnica jest taka, że animacja powtarza się. Element span rozrasta się, osiąga maksymalny rozmiar, następnie powraca do pierwotnego stanu, po czym odgrywana jest od nowa. Rezultat widać na rysunku 23.4.
Rysunek 23.4. Powtarzające się stany animacji
Klatki kluczowe Obsługa klatek kluczowych animacji w CSS jest niezwykle elastyczna i godna uwagi. W poniższych podpunktach przedstawię Ci różne sposoby definiowania klatek kluczowych w celu tworzenia bardziej złożonych efektów.
Określenie stanu początkowego W poprzednim przykładzie wartości animowanych właściwości pobrałem z samego elementu. Można jednak zdefiniować zamienny zestaw początkowych wartości przy użyciu klauzuli from, tak jak widać to w listingu 23.6. Listing 23.6. Określenie odmiennego stanu pierwotnego ...
...
W tym przykładzie określiłem początkowe wartości właściwości font-size i background-color. Określone w klauzuli to początkowe wartości innych właściwości pobierane są z elementu przy rozpoczęciu animacji. Rezultat zastosowania nowej klauzuli widać na rysunku 23.5. Rozmiar tekstu i kolor tła elementu span powraca do pierwotnych wartości określonych w klauzuli from, kiedy animacja się powtarza.
Rysunek 23.5. Określenie początkowej wartości klauzulą from
Określenie pośrednich klatek kluczowych Do określania pośrednich etapów animacji służą dodatkowe klatki kluczowe. Tworzy się je, dodając klauzule procentowe, tak jak widać w listingu 23.7. Listing 23.7. Dodawanie pośrednich klatek kluczowych ...
...
Każda klauzula procentowa określa punkt animacji, w którym określone w niej właściwości i wartości mają być w pełni zastosowane. W tym przykładzie zdefiniowałem wartości 50% i 75%. Pośrednie klatki kluczowe mają dwa zastosowania. Po pierwsze, służą do określania nowego tempa zmiany właściwości — co w tym przypadku zastosowałem do właściwości padding. W punkcie środkowym (zdefiniowanym klauzulą 50%) dopełnienie animowanego elementu wynosi 1px. Przy punkcie określonym wartością 75% ma ono mieć wartość 2px, a przy zakończeniu animacji — 4px. Przeglądarka oblicza zmianę wartości pomiędzy kolejnymi klatkami przy użyciu funkcji określania czasu, zdefiniowanej właściwością animation-timing-function, co pozwala na uzyskanie gładkiego przejścia między klatkami. Wskazówka Do definiowania pierwszej i ostatniej klatki kluczowej możesz użyć klauzul 0% i 100% zamiast from i to.
Klatki pośrednie służą też do definiowania wartości w ramach tworzenia bardziej rozbudowanych animacji. Tak właśnie zrobiłem z właściwością background-color. Początkowa wartość (red) zdefiniowana
500
ROZDZIAŁ 23. PRZEJŚCIA, ANIMACJE I PRZEKSZTAŁCENIA
jest klauzulą from. W punkcie 50-procentowym wartość to yellow, a pod koniec animacji green. Dodając inne wartości pośrednie, utworzyłem dwa przejścia kolorystyczne w jednej animacji — od czerwonego do żółtego i od żółtego do zielonego. Zauważ, że nie podałem wartości pośredniej w klauzuli 75%. Zrobiłem tak, ponieważ nie trzeba nadawać wartości każdej klatce kluczowej. Rezultat wprowadzenia nowych klatek kluczowych widać na rysunku 23.6.
Rysunek 23.6. Dodanie pośrednich klatek kluczowych
Określenie kierunku powtórzeń Kiedy polecasz, by animacja się powtarzała, możesz zdecydować, co ma się dziać, gdy dobiega ona końca. Zachowanie to określa się właściwością animation-direction, wykorzystując wartości opisane w tabeli 23.4. Tabela 23.4. Wartości właściwości animation-direction Wartość
Opis
normal
Każde powtórzenie animacji odgrywane jest naprzód. Przy kolejnych powtórzeniach element powraca do swojego pierwotnego stanu i animowany jest na nowo.
alternate
Animacja odgrywana jest naprzód i wstecz — taka pętla jest uznawana przez właściwość animation-iteration count za dwa powtórzenia.
Przykład zastosowania właściwości animation-direction widać w listingu 23.8. Listing 23.8. Zastosowanie właściwości animation-direction
W tym przykładzie użyłem właściwości animation-iteration-count do wskazania, że animacja powinna być odegrana jedynie dwukrotnie. Po zakończeniu drugiego powtórzenia animowany element powraca do swojego pierwotnego stanu. Właściwości animation-direction nadałem wartość alternate, sprawiając tym samym, że została odegrana naprzód i wstecz. Rezultat widać na rysunku 23.7.
Rysunek 23.7. Określenie kierunku odgrywania animacji wartością alternate Gdybym nadał właściwości animation-iteration-count wartość infinite, animacja byłaby odgrywana w jedną i drugą stronę przez cały czas, kiedy mysz znajdowałaby się nad elementem span, tworząc tym samym efekt pulsowania. Zastosowanie wartości normal sprawia, że każde powtórzenie animacji odgrywane jest od początku. Rezultat widać na rysunku 23.8.
Rysunek 23.8. Określenie kierunku odgrywania animacji wartością normal
Stan końcowy Jednym z ograniczeń animacji CSS jest to, że wartości właściwości zdefiniowanych przez klatki kluczowe animacji są używane jedynie podczas samej animacji. Po zakończeniu animacji wygląd animowanego elementu powraca do stanu początkowego. Listing 23.9 jest tego przykładem.
502
ROZDZIAŁ 23. PRZEJŚCIA, ANIMACJE I PRZEKSZTAŁCENIA
Listing 23.9. Utrata stanu animacji po jej zakończeniu ...
...
Rezultat widać na rysunku 23.9. Choć mysz wciąż się znajduje nad elementem span, jego wygląd po zakończeniu animacji powraca do stanu pierwotnego.
Rysunek 23.9. Po zakończeniu animacji wygląd elementu powraca do stanu pierwotnego Dzieje się tak, ponieważ animacje CSS wdrażają wygląd zdefiniowany nowym stylem, lecz nie wprowadzają żadnych stałych zmian. Jeżeli chcesz zachować końcowy wygląd elementu, musisz skorzystać z przejścia — co opisałem już wcześniej.
Animowanie elementów layoutu Animacje mają nad przejściami przewagę taką, że można nimi tworzyć automatycznie animowane elementy. Przykład tego widnieje w listingu 23.10.
503
ROZDZIAŁ 23. PRZEJŚCIA, ANIMACJE I PRZEKSZTAŁCENIA
Listing 23.10. Animowanie elementu początkowego layoutu ...
...
W tym przykładzie zdefiniowałem animację przy użyciu selektora #banana. Styl ten jest nadawany automatycznie po wczytaniu strony. Innymi słowy, animacja uruchamia się, kiedy tylko przeglądarka wyświetla dokument HTML. Wskazówka Powinieneś używać tej funkcji szczególnie ostrożnie. Animacji, które nie wynikają z czynności użytkownika, należy używać sporadycznie, a same efekty animacji powinny być subtelne i nie utrudniać czytelnikowi czytania bądź korzystania ze strony.
Wielokrotne wykorzystanie klatek kluczowych Ten sam zestaw klatek kluczowych możesz wykorzystać w wielu animacjach, przy czym każdej można wtedy przypisać inne wartości właściwości animacji. W listingu 23.11 widnieje przykład. Listing 23.11. Wielokrotne wykorzystanie klatek kluczowych w różnych animacjach
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
W listingu 23.11 widnieją dwa style, wykorzystujące klatki kluczowe ColorSwap. Animacja przypisana selektorowi #apple trwa krótko, odgrywana jest w innym tempie i wyłącznie naprzód.
Nadawanie wielu animacji wielu elementom Powyższy przykład można jeszcze zmodyfikować, by nadać wielu elementom tę samą animację. Robi się to, poszerzając zakres selektora zawierającego szczegóły animacji, tak jak widać to w listingu 23.12. Listing 23.12. Wybieranie wielu elementów ...
...
W tym przykładzie selektor odnosi się do obydwu elementów span w dokumencie, wobec czego obydwa są animowane z użyciem tych samych klatek kluczowych i na podstawie takiej samej konfiguracji. Rezultat widać na rysunku 23.10.
Rysunek 23.10. Nadanie jednej animacji wielu elementom Możesz również nadać więcej niż jedną animację pojedynczemu elementowi, zwyczajnie dodając do właściwości animacji oddzielone przecinkami wartości. W listingu 23.13 widnieje przykład nadania wielu klatek kluczowych pojedynczemu elementowi. Listing 23.13. Nadanie wielu klatek kluczowych pojedynczemu elementowi ...
...
W tym przykładzie przypisałem klatki kluczowe ColorSwap i GrowShrink elementom #banana i #apple. Przeglądarka jednocześnie zastosowuje obydwie klatki kluczowe.
Wstrzymywanie i wznawianie animacji Animacje można wstrzymywać i wznawiać przy użyciu właściwości animation-play-state. Animacja zatrzymuje się, kiedy właściwości przypisana jest wartość paused. Wartość playing wznawia animację. W listingu 23.14 widać, jak można zmienić wartość tej właściwości przy użyciu JavaScript. Więcej o wykorzystaniu JavaScript w podobnych sytuacjach przeczytasz w części IV książki. Listing 23.14. Wstrzymanie i wznowienie animacji
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Running Paused
Przekształcenia Przekształcenia CSS pozwalają na zmianę kształtu elementów w sposób linearny — oznacza to, że elementy można obracać, skalować, przekrzywiać i przemieszczać. W tabeli 23.5 znajdują się właściwości służące do definiowania przekształceń. Tabela 23.5. Właściwości przekształceń Właściwość
Opis
transform
Poleca, by zastosować przekształcenie.
Tabela 23.6
transform-origin
Określa punkt wyjścia przekształcenia.
Tabela 23.7
508
Wartości
ROZDZIAŁ 23. PRZEJŚCIA, ANIMACJE I PRZEKSZTAŁCENIA
Nadanie przekształcenia Element przekształca się poprzez nadanie mu właściwości transform. Właściwość ta obsługuje zbiór predefiniowanych funkcji, których opis znajduje się w tabeli 23.6. Tabela 23.6. Wartości właściwości transform Wartość
Opis
translate() translateX() translateY()
Przemieszczenie elementu po osi x, y bądź obydwu z nich.
scale() scaleX() scaleY()
Zeskalowanie elementu wzdłuż jednej lub obydwu osi.
rotate()
Obrócenie elementu.
skew() skewX() skewY()
Przekrzywienie elementu wzdłuż jednej lub obydwu osi.
matrix(4-6 x )
Określenie innego przekształcenia. Większość przeglądarek nie obsługuje jeszcze skalowania po osi z, wobec czego ignorują ostatnie dwie wartości; czasami jednak należy je wręcz pominąć.
W listingu 23.15 widnieje przykład przekształcenia. Tak jak w przypadku innych omówionych w tym rozdziale funkcji CSS, popularne przeglądarki nie obsługują jeszcze przekształceń bezpośrednio. W listingu użyłem prefiksu -moz, ponieważ ich obsługa w Firefoksie jest najpełniejsza. Listing 23.15. Nadanie elementowi transformacji
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
509
ROZDZIAŁ 23. PRZEJŚCIA, ANIMACJE I PRZEKSZTAŁCENIA
W tym przykładzie zamieściłem deklarację właściwości transform w stylu #banana, określając dwa przekształcenia. Pierwsze z nich to obrót o wartości -45deg (czyli o 45 stopni w kierunku przeciwnym do ruchu wskazówek zegara), a drugie to skalowanie o wartości 1.2 wzdłuż osi x. Rezultat tych przekształceń widać na rysunku 23.11.
Rysunek 23.11. Obracanie i skalowanie elementu Jak widzisz, element został obrócony i zeskalowany zgodnie z podanymi wartościami. Zauważ, że layout strony nie uległ zmianie, by dostosować się do przekształceń. Element nachodzi na otaczającą go treść.
Określenie punktu wyjścia Właściwość transform-origin pozwala na określenie punktu, w stosunku do którego przekształcenie ma być wykonane. Domyślnie jest to punkt środkowy elementu, ale możesz wybrać inny przy użyciu wartości opisanych w tabeli 23.7. Tabela 23.7. Wartości właściwości transform-origin Wartość
Opis
Określa początek osi x lub y elementu.
Określa odległość.
left center right
Określa punkt na osi x.
top center bottom
Określa punkt na osi y.
Do zdefiniowania właściwości trzeba podać wartości osi x i y. Kiedy podana jest tylko jedna wartość, to zakłada się, że druga to center. W listingu 23.16 widnieje przykład zastosowania właściwości transform-origin. Listing 23.16. Zastosowanie właściwości transform-origin
Przykład
510
ROZDZIAŁ 23. PRZEJŚCIA, ANIMACJE I PRZEKSZTAŁCENIA
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
W tym przykładzie określiłem punkt wyjścia jako prawy górny róg elementu. Rezultat widać na rysunku 23.12.
Rysunek 23.12. Określenie punktu wyjścia przekształcenia
Utworzenie animacji lub przejścia z przekształceniem Przekształcenie, podobnie jak inne właściwości CSS, można wykorzystać jako część animacji lub przejścia. W listingu 23.17 widnieje tego przykład. Listing 23.17. Utworzenie przejścia z przekształceniem
Przykład
511
ROZDZIAŁ 23. PRZEJŚCIA, ANIMACJE I PRZEKSZTAŁCENIA
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
W tym przykładzie zdefiniowałem przejście, w ramach którego przekształcenie w postaci 360-stopniowego obrotu zachodzi w ciągu 1,5 sekundy. Zostaje ono uruchomione, kiedy użytkownik najeżdża kursorem na element span. Rezultat widać na rysunku 23.13.
Rysunek 23.13. Połączenie przejścia z przekształceniem
Podsumowanie W tym rozdziale przedstawiłem Ci trzy nowe funkcje CSS3, które dają znaczącą kontrolę nad wyglądem elementów. Przejścia, transformacje i animacje są łatwe w użyciu, działają stosunkowo dobrze oraz zapewniają dużą elastyczność. Zalecam, by korzystać z nich sporadycznie, aczkolwiek ich staranne zastosowanie może ulepszyć wygląd stron i aplikacji oraz ogólną jakość doświadczenia użytkownika. Korzystałem w tym rozdziale z właściwości z prefiksami przeglądarkowymi, ale są one bardzo podobne do standardowych. Sądzę, że przeglądarki już wkrótce zaczną obsługiwać standardowe właściwości.
512
ROZDZIAŁ 24
Inne właściwości i funkcje CSS
W tym rozdziale, na zakończenie części o CSS, zajmę się właściwościami, które nie pasowały do innych rozdziałów. Są one wprawdzie przydatne i ważne, lecz nie mogłem ich w żaden sposób powiązać z tematyką pozostałych rozdziałów. Pokażę Ci, jak określać kolor pierwszego planu i krycie elementów oraz jak nadawać specjalne style tabelom i elementom list. W tabeli 24.1 znajduje się streszczenie całego rozdziału. Tabela 24.1. Streszczenie rozdziału Problem
Rozwiązanie
Listing
Określenie koloru pierwszego planu elementu.
Użyj właściwości color.
24.1
Określenie przezroczystości elementu.
Użyj właściwości opacity.
24.2
Określenie sposobu rysowania sąsiadujących komórek tabeli.
Użyj właściwości border-collapse i border-spacing.
24.3 – 24.5
Określenie położenia podpisu tabeli.
Użyj właściwości caption-side.
24.6
Określenie sposobu obliczania rozmiaru tabeli.
Użyj właściwości table-layout.
24.7
Określenie zastosowanego w liście rodzaju znacznika.
Użyj właściwości list-style-type.
24.8
Wykorzystanie obrazu jako znacznika listy.
Użyj właściwości list-style-image.
24.9
Określenie położenia znacznika listy.
Użyj właściwości list-style-position.
24.10
Określenie wyglądu kursora.
Użyj właściwości cursor.
24.11
Określenie koloru i krycia elementu Zetknąłeś się już z różnymi zastosowaniami kolorów CSS — właściwościami background-color, border-color i innymi. Są jeszcze dwie właściwości, które odnoszą się do kolorów. Opisuję je w tabeli 24.2. Tabela 24.2. Właściwości koloru Właściwość
Opis
Wartości
color
Określa kolor pierwszego planu elementu.
opacity
Określa krycie elementu.
ROZDZIAŁ 24. INNE WŁAŚCIWOŚCI I FUNKCJE CSS
Określenie koloru pierwszego planu Właściwość color określa kolor pierwszego planu elementu. Z zasady różne elementy różnie interpretują sens tego ustawienia koloru, jednak w praktyce właściwość color określa kolor tekstu. W listingu 24.1 widnieje przykład zastosowania tej właściwości. Listing 24.1. Zastosowanie właściwości color
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości. Dowiedz się więcej o bananach
W tym przykładzie użyłem właściwości color dwukrotnie: raz, żeby określić kolor i przezroczystość pierwszego planu elementu span, i raz, żeby określić kolor pierwszego planu elementów a, gdy najeżdża na nie kursor. Rezultat widać na rysunku 24.1. Efekt może być mało widoczny na papierze — najlepiej spojrzeć na dokument HTML wyświetlony w przeglądarce.
Określenie krycia elementu Zauważ, że w poprzednim przykładzie przy użyciu funkcji rgba określiłem kolor elementu span. Nadałem tekstowi lekką przezroczystość, podając wartość alpha mniejszą niż 1. Na rysunku wprawdzie trudno to zobaczyć, ale w efekcie tło nieco przez tekst prześwituje.
514
ROZDZIAŁ 24. INNE WŁAŚCIWOŚCI I FUNKCJE CSS
Rysunek 24.1. Zastosowanie właściwości color do określenia koloru pierwszego planu Właściwości opacity można używać do nadawania elementom i ich treści tekstowej przezroczystości. Obsługuje ona wartości od 0 (oznaczającego całkowitą przezroczystość) do 1 (oznaczającego całkowite krycie). W listingu 24.2 widnieje przykład zastosowania tej właściwości. Listing 24.2. Zastosowanie właściwości opacity
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości. Dowiedz się więcej o bananach
W tym przykładzie nadałem elementowi span krycie 0.4. Efekt widać na rysunku 24.2, choć na papierze może być mało widoczny.
515
ROZDZIAŁ 24. INNE WŁAŚCIWOŚCI I FUNKCJE CSS
Rysunek 24.2. Określenie krycia elementu
Obstylowanie tabel Istnieją różne właściwości, które pozwalają na określenie stylu wyglądu elementu table, który przedstawiłem w rozdziale 11. W tabeli 24.3 znajduje się opis tych właściwości. Tabela 24.3. Właściwości tabel Właściwość
Opis
Wartości
border-collapse
Określa sposób obsługi krawędzi sąsiadujących komórek.
collapse separate
border-spacing
Określa odstępy pomiędzy krawędziami sąsiadujących komórek.
1 lub 2
caption-side
Określa położenie elementu caption.
top bottom
empty-cells
Określa sposób rozrysowywania krawędzi pustych komórek.
hide show
table-layout
Określa sposób tworzenia layoutu tabeli.
auto fixed
Kondensowanie obramowania tabel Właściwość border-collapse pozwala na określenie sposobu, w jaki przeglądarka rozrysowuje obramowania elementu table. Przykład użycia standardowego sposobu widać na rysunku 24.3.
Rysunek 24.3. Domyślny wygląd obramowań tabeli
516
ROZDZIAŁ 24. INNE WŁAŚCIWOŚCI I FUNKCJE CSS
Przeglądarka rozrysowuje obramowanie wokół samej tabeli oraz poszczególnych komórek, tworząc tym samym podwójne obwódki. Zachowanie to możesz zmienić, używając właściwości border-collapse, tak jak widać w listingu 24.3. Listing 24.3. Zastosowanie właściwości border-collapse
Przykład
Wyniki analizy owoców w roku 2011
Pozycja | Nazwa | Kolor | Rozmiar i oddane głosy |
Ulubiony: | Jabłko | Zielony | Średni | 500 |
Drugi ulubiony: | Pomarańcza | Pomarańczowy | Duży | 450 |
© 2011 Adam Freeman — Instytut Analizy Owoców |
Wartość collapse wskazuje przeglądarce, by nie rozrysowywać obramowań na wszystkich krawędziach sąsiadujących elementów. Rezultat widać na rysunku 24.4.
517
ROZDZIAŁ 24. INNE WŁAŚCIWOŚCI I FUNKCJE CSS
Rysunek 24.4. Skondensowanie obramowania tabeli
Konfiguracja oddzielonych krawędzi Kiedy wartości border-collapse przypisana jest domyślna wartość separate, wygląd tabeli możesz zmodyfikować przy użyciu kilku dodatkowych właściwości. Właściwość border-spacing określa odstępy pomiędzy obramowaniami sąsiadujących elementów, tak jak widać w listingu 24.4. Listing 24.4. Zastosowanie właściwości border-spacing
Przykład
Wyniki analizy owoców w roku 2011
Pozycja | Nazwa | Kolor | Rozmiar i oddane głosy |
518
ROZDZIAŁ 24. INNE WŁAŚCIWOŚCI I FUNKCJE CSS
Ulubiony: | Jabłko | Zielony | Średni | 500 |
Drugi ulubiony: | Pomarańcza | Pomarańczowy | | |
© 2011 Adam Freeman — Instytut Analizy Owoców |
W tym przykładzie utworzyłem 10-pikselowy odstęp pomiędzy obramowaniami. Rezultat widać na rysunku 24.5.
Rysunek 24.5. Zastosowanie właściwości border-spacing
Obsługa pustych komórek Można również wskazać przeglądarce, jak powinna obsługiwać puste komórki. Przeglądarka domyślnie rozrysowuje obramowanie wokół pustej komórki, co widać na rysunku 24.5. To zachowanie można zdefiniować przy użyciu wartości empty-cells. Zastosowanie domyślnej wartości show wywołuje efekt widoczny na rysunku 24.3, podczas gdy użycie wartości hide sprawia, że obramowanie nie jest rozrysowywane. W listingu 24.5 dodałem właściwość empty-cells do elementu style z poprzedniego przykładu. Listing 24.5. Zastosowanie właściwości empty-cells
Rezultat widać na rysunku 24.6.
Rysunek 24.6. Zastosowanie właściwości empty-cells
Położenie podpisu Jak wspomniałem w rozdziale 11., kiedy w elemencie table zamieszcza się element caption, to podpis wyświetlany jest u góry tabeli, nawet jeśli caption nie jest jej pierwszym dzieckiem. Można zmienić to zachowanie przy użyciu właściwości caption-side. Obsługuje ona dwie wartości: top (która jest domyślna) i bottom. W listingu 24.6 widnieje przykład zastosowania tej właściwości. Listing 24.6. Zastosowanie właściwości caption-side
Przykład
Wyniki analizy owoców w roku 2011
520
ROZDZIAŁ 24. INNE WŁAŚCIWOŚCI I FUNKCJE CSS
Pozycja | Nazwa | Kolor | Rozmiar i oddane głosy |
Ulubiony: | Jabłko | Zielony | Średni | 500 |
Drugi ulubiony: | Pomarańcza | Pomarańczowy | | |
© 2011 Adam Freeman — Instytut Analizy Owoców |
Rezultat zastosowania tej właściwości widać na rysunku 24.7.
Rysunek 24.7. Przemieszczenie podpisu przy użyciu właściwości caption-side
Określenie układu tabeli Przeglądarka domyślnie określa szerokość tabeli na podstawie najszerszej komórki w każdej kolumnie. Dzięki temu nie musisz sam się zastanawiać nad rozmiarami, ale jednocześnie przeglądarka musi otrzymać całą zawartość tabeli, żeby określić układ całej strony. Sposób, w jaki przeglądarka wyświetla tabele, określany jest właściwością table-layout, której domyślna wartość to auto. Automatyczne generowanie układu tabeli można wyłączyć, używając drugiej obsługiwanej wartości — fixed. Kiedy wybrana jest wartość fixed, rozmiar tabeli określony jest wartościami width tabeli i pojedynczych kolumn. Jeżeli nie ma żadnych informacji o szerokości kolumny, przeglądarka przydziela kolumnom równą ilość miejsca.
521
ROZDZIAŁ 24. INNE WŁAŚCIWOŚCI I FUNKCJE CSS
W ten sposób przeglądarka może określić szerokość każdej kolumny już po otrzymaniu jednego rzędu danych tabeli. Dane w kolejnych rzędach zawijane są tak, by się mieściły, przez co mogą być wyższe niż przy zastosowaniu wartości auto. W listingu 24.7 widnieje przykład zastosowania właściwości table-layout. Listing 24.7. Zastosowanie właściwości table-layout
Przykład
Wyniki analizy owoców w roku 2011
Pozycja | Nazwa | Kolor | Rozmiar i oddane głosy |
Bardzo bardzo bardzo bardzo długi nagłówek | Jabłko | Zielony | Średni | 500 |
Drugi ulubiony: | Pomarańcza | Pomarańczowy | | |
© 2011 Adam Freeman — Instytut Analizy Owoców |
522
ROZDZIAŁ 24. INNE WŁAŚCIWOŚCI I FUNKCJE CSS
W tym przykładzie użyłem właściwości width elementu table, by nadać tabeli szerokość 100% dostępnego miejsca, oraz określiłem styl tworzenia układu tabeli jako fixed. Zmieniłem również zawartość drugiego rzędu, by zademonstrować, jak w takim przypadku działa tworzenie układu. Widać to na rysunku 24.8.
Rysunek 24.8. Zastosowanie właściwości table-layout Zauważ, jak dostępna przestrzeń rozłożona jest równo na pięć kolumn i jak długi napis w drugim rzędzie jest zawinięty, by mógł się zmieścić — rząd ten jest przez to o wiele wyższy od pozostałych.
Stylizacja list Istnieją różne właściwości służące do stylizacji list. W tabeli 24.4 znajduje się ich opis. Tabela 24.4. Właściwości list Właściwość
Opis
Wartości
list-style-type
Określa rodzaj znacznika w liście.
Tabela 24.5
list-style-image
Określa obraz do użycia w charakterze znacznika.
list-style-position
Określa położenie znacznika w odniesieniu do pola listy elementów.
inside outside
list-style
Właściwość zbiorcza, określająca wszystkie cechy listy.
Omówienie znajdziesz poniżej.
Wartości właściwości zbiorczej list-style zapisuje się w następującym formacie: list-style:
Określenie typu znaczników listy Właściwości list-style-type można użyć do określenia stylu znaczników listy. Obsługiwane wartości widnieją w tabeli 24.5. W tabeli 24.5 przedstawiłem tylko niektóre z obsługiwanych stylów. Jest ich dużo więcej — opierają się na różnych alfabetach, symbolach i systemach liczbowych. Pełną listę znajdziesz pod adresem www.w3.org/ TR/css3-lists. W listingu 24.8 widać przykład zastosowania list-style-type.
523
ROZDZIAŁ 24. INNE WŁAŚCIWOŚCI I FUNKCJE CSS
Tabela 24.5. Wartości właściwości list-style-type Wartość
Opis
none
Znacznik nie jest wyświetlany.
box check circle diamond disc dash square
Zastosowanie podanego kształtu jako znacznika. Nie każda przeglądarka obsługuje wszystkie kształty.
decimal
Użycie liczb dziesiętnych jako znaczników.
binary
Użycie liczb binarnych jako znaczników.
lower-alpha
Użycie małych liter alfabetu jako znaczników.
upper-alpha
Użycie dużych liter alfabetu jako znaczników.
Listing 24.8. Zastosowanie właściwości list-style-type
Przykład
Lubię jabłka i pomarańcze. Lubię też:
banany mango wiśnie śliwki brzoskwinie winogrona
Tę właściwość możesz nadawać zarówno całym listom, jak i pojedynczym jej elementom. W tym przykładzie zrobiłem i jedno, i drugie. Rezultat, który widać na rysunku 24.9, nie jest jednak szczególnie sensowny.
Użycie obrazu jako znacznika listy Właściwością list-style-image możesz wskazać obraz do wykorzystania jako znacznik. W listingu 24.9 widać przykład jej zastosowania.
524
ROZDZIAŁ 24. INNE WŁAŚCIWOŚCI I FUNKCJE CSS
Rysunek 24.9. Określenie typu znaczników list Listing 24.9. Użycie obrazu jako znacznika listy
Przykład
Lubię jabłka i pomarańcze. Lubię też: - banany
- mango
- wiśnie
- śliwki
- brzoskwinie
- winogrona
Rezultat zastosowania tej właściwości widać na rysunku 24.10.
Określenie położenia znacznika Położenie znacznika w odniesieniu do pola treści elementu li można określić właściwością list-style-position. Właściwość ta obsługuje wartości inside (która sprawia, że znacznik wyświetlany jest w polu treści) i outside (która sprawia, że znacznik wyświetlany jest poza polem treści). W listingu 24.10 widnieje przykład zastosowania właściwości list-style-position.
525
ROZDZIAŁ 24. INNE WŁAŚCIWOŚCI I FUNKCJE CSS
Rysunek 24.10. Użycie obrazu jako znacznika listy Listing 24.10. Określenie położenia znacznika
Przykład
Lubię jabłka i pomarańcze. Lubię też: Oto elementy o wartości inside: - banany
- mango
- wiśnie
Oto elementy o wartości outside: - śliwki
- brzoskwinie
- winogrona
Elementom li przypisałem dwie klasy o różnych wartościach właściwości list-style-position. Rezultat widać na rysunku 24.11.
526
ROZDZIAŁ 24. INNE WŁAŚCIWOŚCI I FUNKCJE CSS
Rysunek 24.11. Określenie położenia znacznika Na tym rysunku nadałem właściwość background-color wszystkim elementom li, żeby efekt zastosowania obydwu wartości był widoczny.
Określenie stylu kursora Właściwość cursor służy do określenia zmiany wyglądu kursora. Jej opis znajduje się w tabeli 24.6. Tabela 26.4. Właściwość cursor Właściwość
Opis
Wartości
cursor
Określa styl kursora.
auto, crosshair, default, help, move, pointer, progress, text, wait, n-resize, s-resize, e-resize, w-resize, ne-resize, nw-resize, se-resize i sw-resize
Wartości właściwości cursor określają, jak ma wyglądać kursor po przesunięciu go na obstylowany element. Przykład zastosowania tej właściwości widać w listingu 24.11. Listing 24.11. Zastosowanie właściwości cursor
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Rezultat widać na rysunku 24.12. Powiększyłem kursor, żeby pokazać, jak zmienia się w kursor oczekiwania Windows 7, gdy znajduje się nad elementem span.
Rysunek 24.12. Określenie stylu kursora
Podsumowanie W tym rozdziale opisałem właściwości CSS, które nigdzie indziej nie pasowały. Nie znaczy to bynajmniej, że nie są ważne, ale po prostu nie przystawały do tematyki poprzednich rozdziałów. Opisane w tym rozdziale właściwości służą do określania koloru i krycia elementów oraz nadawania stylów listom i tabelom — same w sobie są to istotne funkcje HTML.
528
CZĘŚĆ IV
Praca z DOM
Obiektowy model dokumentu (DOM — ang. document object model) umożliwia wykorzystywanie JavaScript do eksplorowania zawartości dokumentu HTML i manipulowania nią. Ten zestaw funkcji jest nieodzowny przy tworzeniu bogatych treści. W kolejnych rozdziałach pokażę Ci, jak uzyskać dostęp do DOM — jak znajdować i modyfikować reprezentujące elementy dokumentu obiekty JavaScript oraz jak przy pomocy zdarzeń reagować na czynności użytkownika.
ROZDZIAŁ 25
Wprowadzenie do DOM
W tej części książki zapoznasz się z obiektowym modelem dokumentu — DOM. Zaawansowane efekty można wprawdzie uzyskać przy użyciu przedstawionych już elementów HTML i właściwości CSS, ale jeżeli zależy Ci na całkowitej kontroli nad kodem HTML, wykorzystanie JavaScript jest absolutnie konieczne. DOM jest połączeniem między JavaScript a zawartością dokumentu HTML. Przy użyciu DOM możliwe jest dodawanie, usuwanie i modyfikowanie elementów. Na czynności użytkowników można reagować przy pomocy zdarzeń; DOM pozwala również na uzyskanie pełnej kontroli nad CSS. Od tej pory będziemy się zajmować programistycznym aspektem HTML5. Wcześniej tworzyliśmy treści przy użyciu deklaracji elementów CSS, ale już najwyższy czas wypłynąć na szerokie wody i skoncentrować się na JavaScript. Jeśli musisz odświeżyć swoją wiedzę, w rozdziale 5. znajdziesz podstawy JavaScript.
Obiektowy model dokumentu DOM jest zbiorem obiektów reprezentujących elementy dokumentu HTML. Jak sama nazwa wskazuje, DOM jest modelem zbudowanym z obiektów, które składają się na wyobrażenie dokumentu. DOM jest fundamentalnym narzędziem webdeweloperskim, które pozwala na połączenie struktury i treści dokumentu HTML z JavaScript. W listingu 25.1 znajdziesz przykład prostego dokumentu HTML. Listing 25.1. Prosty dokument HTML
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.
Wygląd przykładowego dokumentu HTML w przeglądarce widać na rysunku 25.1.
ROZDZIAŁ 25. WPROWADZENIE DO DOM
Rysunek 25.1. Podstawowy dokument HTML w przeglądarce Przed wyświetleniem dokumentu HTML przeglądarka parsuje kod HTML i tworzy model. Model odwzorowuje hierarchię elementów HTML (rysunek 25.2), w której każdy element reprezentowany jest przez obiekt JavaScript.
Rysunek 25.2. Hierarchia elementów dokumentu HTML Jak dowiesz się z kolejnych rozdziałów, DOM można używać do pozyskiwania informacji o dokumencie i wprowadzania w nim zmian. Leży on zatem u podstaw nowoczesnych aplikacji internetowych. Każdemu obiektowi w modelu przypisane są właściwości i metody. Kiedy używasz ich do wprowadzania zmian w stanie obiektu, przeglądarka odzwierciedla owe zmiany w odpowiednim elemencie HTML i aktualizuje dokument. Wszystkie obiekty DOM, które reprezentują elementy, obsługują ten sam zbiór podstawowych funkcji. Są to obiekty HTMLElement. Z bazowych funkcji HTMLElement korzystać można zawsze, niezależnie od tego, jaki rodzaj elementu ów obiekt reprezentuje. Ponadto, niektóre obiekty obsługują dodatkowe funkcje, pozwalające na wykonywanie operacji właściwych dla wyjątkowych charakterystyk danych elementów HTML. Te dodatkowe funkcje opiszę w rozdziale 31. Trzeba tu koniecznie zwrócić uwagę, że każdy znajdujący się w modelu dokumentu obiekt, który reprezentuje jakiś element, zawsze obsługuje funkcje HTMLElement, a niekiedy także dodatkowe funkcje. Nie wszystkie dostępne obiekty reprezentują elementy HTML. Jak się wkrótce przekonasz, istnieją obiekty reprezentujące zbiory elementów i informacje o samym DOM. Istnieje też obiekt Document, który jest punktem wyjścia do pracy z DOM i tematem rozdziału 26. Uwaga Pomijam tutaj pewne szczegóły. Jeżeli jesteś zaznajomiony z założeniami programowania obiektowego, to być może pomoże Ci informacja, że HTMLElement jest interfejsem obsługiwanym przez obiekty zawarte w DOM. Obiekty reprezentujące bardziej szczegółowe elementy są interfejsami wywodzącymi się z HTMLElement — oznacza to, że obiekt można traktować albo jako implementację HTMLElement, albo jego bardziej szczegółowy podtyp. Nie martw się, jeśli nie masz pojęcia o założeniach programowania obiektowego. Standardowe programowanie na potrzeby Internetu nie wymaga ich znajomości. Nie będę już do nich wracał i w celu zachowania prostoty będę stale używał pojęcia obiekt.
532
ROZDZIAŁ 25. WPROWADZENIE DO DOM
Poziomy DOM i zgodność Zaczynając swoją pracę z DOM, z pewnością trafisz na artykuły i przewodniki, w których pojawią się wzmianki o poziomach DOM (np. o tym, że dana funkcja obsługiwana jest przez poziom 3 DOM). Poziomy DOM to w istocie kolejne zestandaryzowane wersje tego modelu, wobec czego na ogół nie ma sensu przejmować się ich numeracją. Proces standaryzacji DOM przyniósł umiarkowanie dobre efekty. Istnieją wprawdzie standardy i dokumenty opisujące każdy poziom DOM, ale nie są one w pełni wdrożone, a przeglądarki obsługują wybrane funkcje, ignorując pozostałe. Co gorsza, istnieje pewna niespójność pod względem tego, jakie funkcje są obsługiwane. Problem ten wynika częściowo z tego, że specyfikację DOM opracowywano niezależnie od standardu HTML. W HTML5 podjęto próbę ustosunkowania się do tej kwestii, poprzez uwzględnienie podstawowego zbioru funkcji DOM, które powinny być obsługiwane. Rozwiązanie to jednak dopiero ma wejść w życie, wobec czego trzeba się liczyć z pewnym nieuporządkowaniem. Ze zróżnicowaniem obsługi funkcji DOM można sobie radzić na różne sposoby. Po pierwsze, można skorzystać z biblioteki JavaScript w rodzaju jQuery, która niweluje różnice pomiędzy implementacjami funkcji w poszczególnych przeglądarkach. Biblioteka pozwala wprawdzie na zapewnienie spójności, lecz ceną tego jest ograniczenie funkcjonalności wyłącznie do funkcji obsługiwanych przez ową bibliotekę. Jeśli chcesz skorzystać z funkcji nieobsługiwanych przez bibliotekę, to musisz używać DOM bezpośrednio i mierzyć się z podstawowymi problemami. Nie twierdzę bynajmniej, że jQuery i inne biblioteki są bezwartościowe — przeciwnie, bywają bardzo przydatne i warto się im przyjrzeć. Drugie podejście jest z gruntu zachowawcze: należy używać tylko tych funkcji, o których wiadomo, że są powszechnie obsługiwane. Jest to na ogół najbardziej rozsądna metoda, choć wiąże się z koniecznością uważnego i dogłębnego testowania. Co więcej, trzeba pamiętać o testowaniu nowych wersji przeglądarek, by mieć pewność, że obsługa funkcji nie uległa zmianie bądź nie zrezygnowano z niej.
Testowanie obsługi funkcji DOM Trzecie podejście przewiduje sprawdzenie obsługi właściwości lub metody przez obiekt DOM powiązany z daną funkcją. W listingu 25.2. widnieje prosty przykład. Listing 25.2. Sprawdzanie obsługi funkcji
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Wskazówka Nie przejmuj się szczegółami skryptu znajdującego się w listingu 25.2. Wykorzystane w nim obiekty i funkcje omówię w kolejnych rozdziałach.
Zastosowany w tym przykładzie skrypt używa klauzuli if do określenia, czy obiekt document obsługuje metodę querySelectorAll. Jeśli wartość klauzuli zostaje obliczona jako true, to znaczy, że przeglądarka obsługuje daną funkcję i można z niej korzystać. Jeżeli natomiast okaże się, że jej wartość to false, to pożądane rezultaty należy uzyskać innymi środkami. Powyższa porada stosunkowo często pojawia się przy pracy z DOM, lecz zazwyczaj udziela się jej bez namysłu i wskazania mankamentów, które bywają znaczące. Pierwszym mankamentem jest to, że rezultat zastosowania danej funkcji nie zawsze można uzyskać innymi metodami. Przykład z listingu 25.2 działa poprawnie, ponieważ sprawdzam w nim obsługę pomocniczej funkcji opartej na innych funkcjach — nie zawsze jednak mamy z taką sytuacją do czynienia. Drugim mankamentem jest to, że sprawdzam tu jedynie obecność funkcji, a nie jakość i spójność jej implementacji. Obsługa wielu funkcji, zwłaszcza nowych, staje się stabilna i spójna dopiero po wydaniu kolejnych wersji przeglądarek. Nie jest to tak poważny problem jak kiedyś, ale zróżnicowanie obsługi funkcji w różnych przeglądarkach może doprowadzić do uzyskania nieoczekiwanych rezultatów. Trzecim mankamentem jest konieczność sprawdzenia każdej funkcji, na której zamierzasz polegać. Wymaga to niezwykłej wytrwałości i tworzenia kodu pełnego niezliczonych testów. Nie twierdzę bynajmniej, że jest to bezużyteczna technika, tylko że ma ona swoje minusy i nie należy nią zastępować rzeczywistych testów.
Spis funkcji DOM W poniższych punktach znajduje się spis obiektów, metod, właściwości i zdarzeń, które omówię w dalszych rozdziałach.
Właściwości Document W rozdziale 26. znajduje się opis obiektu Document, który reprezentuje bieżący dokument i jest punktem wyjścia do pracy z DOM. W tabeli 25.1 znajduje się opis właściwości obsługiwanych przez ten obiekt. Tabela 25.1. Obiekt Document Nazwa
Opis
Zwracana wartość
activeElement
Zwraca obiekt reprezentujący sfokusowany w danej chwili element dokumentu.
HTMLElement
body
Zwraca obiekt reprezentujący element body dokumentu.
HTMLElement
characterSet
Zwraca informację o kodowaniu znaków w dokumencie. Jest to właściwość przeznaczona tylko do odczytu.
tekst
charset
Zwraca lub definiuje informację o kodowaniu znaków w dokumencie.
tekst
534
ROZDZIAŁ 25. WPROWADZENIE DO DOM
Tabela 25.1. Obiekt Document — ciąg dalszy Nazwa
Opis
Zwracana wartość
childNodes
Zwraca zbiór elementów-dzieci.
HTMLElement[]
compatMode
Zwraca informację o trybie kompatybilności dokumentu.
tekst
cookie
Zwraca lub definiuje ciasteczka bieżącego dokumentu.
tekst
defaultCharset
Zwraca domyślne kodowanie znaków używane przez przeglądarkę.
tekst
defaultView
Zwraca obiekt Window bieżącego dokumentu. Więcej na temat obiektu Window przeczytasz w rozdziale 26.
Window
dir
Zwraca lub definiuje kierunek zapisu tekstu w dokumencie.
tekst
domain
Zwraca lub definiuje domenę bieżącego dokumentu.
tekst
embeds plugins
Zwraca obiekty reprezentujące wszystkie elementy embed w dokumencie.
HTMLCollection
firstChild
Zwraca pierwsze dziecko elementu.
HTMLElement
forms
Zwraca obiekty reprezentujące wszystkie elementy form w dokumencie.
HTMLCollection
getElementById()
Zwraca element o podanej wartości id.
HTMLElement
getElementsByClassName()
Zwraca elementy o podanej wartości class.
HTMLElement[]
getElementsByName()
Zwraca elementy o podanej wartości name.
HTMLElement[]
getElementsByTagName()
Zwraca elementy podanego typu.
HTMLElement[]
hasChildNodes()
Zwraca wartość true, jeśli bieżący element ma dzieci.
wartość_boolowska
head
Zwraca obiekt reprezentujący element head.
HTMLHeadElement
images
Zwraca obiekty reprezentujące wszystkie elementy img.
HTMLCollection
implementation
Podaje informacje o dostępnych funkcjach DOM.
DOMImplementation
lastChild
Zwraca ostatni element-dziecko.
HTMLElement
lastModified
Zwraca ostatni czas modyfikacji dokumentu.
tekst
links
Zwraca obiekty reprezentujące wszystkie elementy a i area dokumentu, którym zdefiniowano atrybut href.
HTMLCollection
location
Podaje informację o adresie URL bieżącego dokumentu.
Location
nextSibling
Zwraca brata znajdującego się po bieżącym elemencie.
HTMLElement
parentNode
Zwraca rodzica elementu.
HTMLElement
previousSibling
Zwraca brata znajdującego się przed bieżącym elementem.
HTMLElement
535
ROZDZIAŁ 25. WPROWADZENIE DO DOM
Tabela 25.1. Obiekt Document — ciąg dalszy Nazwa
Opis
Zwracana wartość
querySelector()
Zwraca pierwszy element, do którego odnosi się podany selektor CSS.
HTMLElement
querySelectorAll()
Zwraca wszystkie elementy, do których odnosi się podany selektor CSS.
HTMLElement[]
readyState
Zwraca informacje o stanie bieżącego dokumentu.
tekst
referrer
Zwraca adres URL dokumentu, który przekierował przeglądarkę do bieżącego dokumentu; jest to wartość odpowiedniego nagłówka HTTP.
tekst
scripts
Zwraca obiekty reprezentujące wszystkie elementy script.
HTMLCollection
title
Zwraca lub definiuje tytuł bieżącego dokumentu.
tekst
W rozdziale 26. znajduje się również omówienie obiektu Location, który pokrótce opisuję w tabeli 25.2. Tabela 25.2. Obiekt Location Nazwa
Opis
Zwracana wartość
assign()
Przechodzi do określonego adresu URL.
void
hash
Zwraca lub definiuje komponent skrótu w adresie URL dokumentu.
tekst
host
Zwraca lub definiuje komponent nazwy hosta i portu adresu URL dokumentu.
tekst
hostname
Zwraca lub definiuje komponent nazwy hosta adresu URL dokumentu.
tekst
href
Zwraca lub definiuje lokalizację bieżącego dokumentu.
tekst
pathname
Zwraca lub definiuje komponent ścieżki adresu URL dokumentu.
tekst
port
Zwraca lub definiuje komponent portu w adresie URL dokumentu.
tekst
protocol
Zwraca lub definiuje komponent protokołu w adresie URL dokumentu.
tekst
reload()
Odświeża bieżący dokument.
void
replace()
Przechodzi z bieżącego dokumentu do tego, który wskazano adresem URL.
void
resolveURL()
Zamienia podany względny URL na absolutny.
tekst
search
Zwraca lub definiuje komponent zapytania adresu URL dokumentu.
tekst
536
ROZDZIAŁ 25. WPROWADZENIE DO DOM
Właściwości Window W rozdziale 27. znajduje się omówienie obiektu Window, który obsługuje szeroki zakres funkcji. W tabeli 25.3 znajduje się opis właściwości obsługiwanych przez ten obiekt. Tabela 25.3. Obiekt Window Nazwa
Opis
Zwracana wartość
alert()
Wyświetla okno i oczekuje na jego wyłączenie.
void
blur()
Usuwa fokus z okna.
void
clearInterval()
Anuluje licznik odstępu.
void
clearTimeout()
Anuluje licznik opóźnienia.
void
close()
Zamyka okno.
void
confirm()
Wyświetla okno z zapytaniem oraz odpowiedziami OK i Anuluj.
wartość_boolowska
defaultView
Zwraca Window bieżącego dokumentu.
Window
document
Zwraca obiekt Document powiązany z danym oknem.
Document
focus()
Fokusuje okno.
void
frames
Zwraca tablicę obiektów Window odnoszących się do elementów iframe osadzonych w dokumencie.
Window[]
history
Daje dostęp do historii przeglądarki.
History
innerHeight
Zwraca wysokość pola treści okna.
liczba
innerWidth
Zwraca szerokość pola treści okna.
liczba
length
Zwraca liczbę elementów iframe osadzonych w dokumencie.
liczba
location
Podaje informacje o lokalizacji bieżącego dokumentu.
Location
opener
Zwraca okno Window, w którym otworzono bieżący kontekst przeglądania.
Window
outerHeight
Zwraca wysokość okna, uwzględniając obramowania, paski menu itp.
liczba
outerWidth
Zwraca szerokość okna, uwzględniając obramowania, paski menu itp.
liczba
pageXOffset
Zwraca liczbę pikseli, o którą przewinięto okno poziomo od lewego górnego rogu.
liczba
pageYOffset
Zwraca liczbę pikseli, o którą przewinięto okno pionowo od lewego górnego rogu.
liczba
parent
Zwraca rodzica bieżącego okna Window.
Window
postMessage(, )
Definiuje komunikat, który ma być przesłany do innego dokumentu.
void
print()
Pyta użytkownika, czy wydrukować stronę.
void
537
ROZDZIAŁ 25. WPROWADZENIE DO DOM
Tabela 25.3. Obiekt Window — ciąg dalszy Nazwa
Opis
Zwracana wartość
prompt(, )
Wyświetla okno, w którym użytkownik ma podać wartość.
tekst
screen
Zwraca obiekt Screen, który opisuje ekran.
Screen
screenLeft screenX
Zwraca liczbę pikseli od lewej krawędzi okna do lewej krawędzi ekranu.
liczba
screenTop screenY
Zwraca liczbę pikseli od górnej krawędzi okna do górnej krawędzi ekranu.
liczba
scrollBy(, )
Przewija dokument względem jego bieżącego położenia.
void
scrollTo(, )
Przewija do określonego miejsca.
void
self
Zwraca okno Window bieżącego dokumentu.
setInterval(, )
Uruchamia licznik, który przywołuje podaną funkcję w milisekundowych odstępach określonych wartością czas.
odstęp_czasowy
setTimeout(, )
Uruchamia licznik, który przywołuje podaną funkcję po opóźnieniu określonym wartością czas.
odstęp_czasowy
showModalDialog()
Wyświetla wyskakujące okno, w którym pokazany jest podany adres URL.
void
stop()
Wstrzymuje wczytywanie dokumentu.
void
top
Zwraca okno Window znajdujące się najwyżej w hierarchii okien.
Window
W rozdziale 27. znajduje się omówienie obiektu History, którego właściwości opisuję w tabeli 25.4. Tabela 25.4. Obiekt History Nazwa
Opis
Zwracana wartość
back()
Wczytuje poprzedni dokument w historii.
void
forward()
Wczytuje następny dokument w historii.
void
go()
Kieruje przeglądarkę do pozycji historii określonej względem bieżącego dokumentu. Wartości dodatnie przenoszą naprzód, ujemne wstecz.
void
length
Zwraca liczbę pozycji w historii.
liczba
pushState(, , )
Dodaje pozycję do historii przeglądarki.
void
replaceState(, , )
Zastępuje bieżącą pozycję w historii przeglądarki.
void
state
Zwraca dane o stanie powiązane z bieżącym dokumentem w historii przeglądarki.
obiekt
W rozdziale 27. znajduje się omówienie obiektu Screen, którego właściwości opisuję w tabeli 25.5.
538
ROZDZIAŁ 25. WPROWADZENIE DO DOM
Tabela 25.5. Obiekt Screen Nazwa
Opis
Zwracana wartość
availHeight
Zwraca wysokość obszaru ekranu, na którym można wyświetlać okna (z wyłączeniem pasków narzędzi itp.).
liczba
availWidth
Zwraca szerokość obszaru ekranu, na którym można wyświetlać okna (z wyłączeniem pasków narzędzi itp.).
liczba
colorDepth
Zwraca głębię koloru ekranu.
liczba
height
Zwraca wysokość ekranu.
liczba
width
Zwraca szerokość ekranu.
liczba
Właściwości HTMLElement W rozdziale 28. znajduje się omówienie obiektu HTMLElement, który reprezentuje elementy HTML w dokumencie. W tabeli 25.6 znajduje się opis właściwości tego obiektu. Tabela 25.6. Obiekt HTMLElement Nazwa
Opis
Zwracana wartość
checked
Zwraca lub definiuje obecność atrybutu checked.
wartość_boolowska
classList
Zwraca lub definiuje listę klas, do których element należy.
DOMTokenList
className
Zwraca lub definiuje listę klas, do których element należy.
tekst
dir
Zwraca lub definiuje wartość atrybutu dir.
tekst
disabled
Zwraca lub definiuje wartość atrybutu dir.
wartość_boolowska
hidden
Zwraca informację o obecności atrybutu hidden lub wprowadza go.
wartość_boolowska
id
Zwraca lub definiuje wartość atrybutu id.
tekst
lang
Zwraca lub definiuje wartość atrybutu lang.
tekst
spellcheck
wartość_boolowska Zwraca informację o obecności atrybutu spellcheck lub wprowadza go.
tabIndex
Zwraca lub definiuje wartość atrybutu tabindex.
liczba
tagName
Zwraca nazwę znacznika, wskazując tym samym typ elementu.
tekst
title
Zwraca lub definiuje wartość atrybutu title.
tekst
539
ROZDZIAŁ 25. WPROWADZENIE DO DOM
Tabela 25.6. Obiekt HTMLElement — ciąg dalszy Nazwa
Opis
Zwracana wartość
add()
Nadaje elementowi określoną klasę.
void
contains()
Zwraca wartość true, jeżeli element należy do podanej klasy.
wartość_boolowska
length
Zwraca liczbę klas, do których element należy.
liczba
remove()
Usuwa element z określonej klasy.
void
toggle()
Dodaje klasę, jeśli nie jest zdefiniowana, a usuwa ją, jeśli jest.
wartość_boolowska
attributes
Zwraca nadane elementowi atrybuty.
Attr[]
dataset
Zwraca atrybuty data-*.
tekst[]
getAttribute()
Zwraca wartość podanego atrybutu.
tekst
hasAttribute()
Zwraca wartość true, jeśli elementowi przypisany jest podany atrybut.
wartość_boolowska
removeAttribute()
Usuwa podany atrybut z elementu.
void
setAttribute(, )
Nadaje elementowi atrybut o podanej nazwie i wartości.
void
appendChild(HTMLElement)
Dodaje do podanego elementu dziecko określonego typu.
HTMLElement
cloneNode(boolean)
Kopiuje element.
HTMLElement
compareDocumentPosition(HTMLElement)
Określa względne położenie elementu.
liczba
innerHTML
Zwraca lub definiuje treść elementu.
tekst
insertAdjacentHTML(, )
Zamieszcza kod HTML w miejscu określonym względem elementu.
void
insertBefore(, )
Zamieszcza podany element przed określonym elementem-dzieckiem.
HTMLElement
isEqualNode()
Określa, czy podany element jest równy bieżącemu elementowi.
wartość_boolowska
isSameNode(HTMLElement)
Określa, czy podany element jest tożsamy z bieżącym elementem.
wartość_boolowska
outerHTML
Zwraca lub definiuje kod HTML i zawartość elementu.
tekst
removeChild(HTMLElement)
Usuwa określone dziecko bieżącego elementu.
HTMLElement
replaceChild(HTMLElement, HTMLElement)
Zastępuje dziecko bieżącego elementu.
HTMLElement
createElement()
Tworzy nowy obiekt HTMLElement określonego typu.
HTMLElement
createTextNode()
Tworzy nowy obiekt Text o podanej treści.
Text
540
ROZDZIAŁ 25. WPROWADZENIE DO DOM
W rozdziale 28. znajduje się omówienie obiektu Text, który reprezentuje treść tekstową dokumentu. W tabeli 25.7 opisuję właściwości obiektu Text. Tabela 25.7. Obiekt Text Nazwa
Opis
Zwracana wartość
appendData()
Dodaje określony ciąg znaków na końcu bloku tekstowego.
void
data
Zwraca lub definiuje tekst.
tekst
deleteData(, )
Usuwa tekst z ciągu znaków. Pierwsza liczba określa pozycję, a druga liczbę znaków do usunięcia.
void
insertData(, )
Zamieszcza podany ciąg znaków na określonej pozycji.
void
length
Zwraca liczbę znaków.
liczba
replaceData(, , )
Zamienia wskazany zakres tekstu na określony ciąg znaków.
void
replaceWholeText()
Zamienia cały tekst.
Text
splitText()
Dzieli element Text na dwa osobne elementy we wskazanym miejscu. W punkcie „Zamieszczenie elementu w bloku tekstu” w rozdziale 28. znajdziesz przykład zastosowania tej metody.
Text
substringData(, )
Zwraca ciąg znaków z tekstu.
tekst
wholeText
Zwraca tekst.
tekst
Właściwości CSS w DOM W rozdziale 29. znajduje się omówienie wykorzystania DOM do pracy ze stylami CSS dokumentu. Spis właściwości obiektu CSSStyleDeclaration i stylów, do których się odnoszą (oraz rozdziałów, w których są opisane), znajdziesz w tabeli 25.8. Tabela 25.8. Właściwości obiektu CSSStyleDeclaration Właściwość
Odnosi się do
Rozdział
background
background
19
backgroundAttachment
background-attachment
19
backgroundColor
background-color
19
backgroundImage
background-image
19
backgroundPosition
background-position
19
backgroundRepeat
background-repeat
19
border
border
19
borderBottom
border-bottom
19
borderBottomColor
border-bottom-color
19
borderBottomStyle
border-bottom-style
19
541
ROZDZIAŁ 25. WPROWADZENIE DO DOM
Tabela 25.8. Właściwości obiektu CSSStyleDeclaration — ciąg dalszy Właściwość
Odnosi się do
Rozdział
borderBottomWidth
border-bottom-width
19
borderCollapse
border-collapse
24
borderColor
border-color
19
borderLeft
border-left
19
borderLeftColor
border-left-color
19
borderLeftStyle
border-left-style
19
borderLeftWidth
border-left-width
19
borderRight
border-right
19
borderRightColor
border-right-color
19
borderRightStyle
border-right-style
19
borderRightWidth
border-right-width
19
borderSpacing
border-spacing
24
borderStyle
border-style
19
borderTop
border-top
19
borderTopColor
border-top-color
19
borderTopStyle
border-top-style
19
borderTopWidth
border-top-width
19
borderWidth
border-width
19
captionSide
caption-side
24
clear
clear
20
color
color
24
cssFloat
float
20
cursor
cursor
24
direction
direction
22
display
display
20
emptyCells
empty-cells
24
font
font
22
fontFamily
font-family
22
fontSize
font-size
22
fontStyle
font-style
22
fontVariant
font-variant
22
fontWeight
font-weight
22
height
height
20
letterSpacing
letter-spacing
22
lineHeight
line-height
22
542
ROZDZIAŁ 25. WPROWADZENIE DO DOM
Tabela 25.8. Właściwości obiektu CSSStyleDeclaration — ciąg dalszy Właściwość
Odnosi się do
Rozdział
listStyle
list-style
24
listStyleImage
list-style-image
24
listStylePosition
list-style-position
24
listStyleType
list-style-type
24
margin
margin
20
marginBottom
margin-bottom
20
marginLeft
margin-left
20
marginRight
margin-right
20
marginTop
margin-top
20
maxHeight
max-height
20
maxWidth
max-width
20
minHeight
min-height
20
minWidth
min-width
20
outline
outline
19
outlineColor
outline-color
19
outlineStyle
outline-style
19
outlineWidth
outline-width
19
overflow
overflow
20
padding
padding
20
paddingBottom
padding-bottom
20
paddingLeft
padding-left
20
paddingRight
padding-right
20
paddingTop
padding-top
20
tableLayout
table-layout
24
textAlign
text-align
22
textDecoration
text-decoration
22
textIndent
text-indent
22
textShadow
text-shadow
22
textTransform
text-transform
22
visibility
visibility
20
whiteSpace
whitespace
22
width
width
20
wordSpacing
word-spacing
22
zIndex
z-index
21
543
ROZDZIAŁ 25. WPROWADZENIE DO DOM
Zdarzenia DOM W rozdziale 30. znajduje się omówienie systemu zdarzeń DOM. Zdarzenia są różne, a ich opis znajdziesz w tabeli 25.9. Tabela 25.9. Zdarzenia DOM Nazwa
Opis
blur
Wyzwalane, kiedy element przestaje być sfokusowany.
click
Wyzwalane po naciśnięciu i puszczeniu przycisku myszy.
dblclick
Wyzwalane po dwukrotnym naciśnięciu i puszczeniu przycisku myszy.
focus
Wyzwalane, kiedy element staje się sfokusowany.
focusin
Wyzwalane, kiedy element ma być sfokusowany.
focusout
Wyzwalane, kiedy element ma przestać być sfokusowany.
keydown
Wyzwalane, kiedy użytkownik naciska klawisz.
keypress
Wyzwalane, kiedy użytkownik naciska i puszcza klawisz.
keyup
Wyzwalane, kiedy użytkownik puszcza klawisz.
mousedown
Wyzwalane przy naciśnięciu przycisku myszy.
mouseenter
Wyzwalane, kiedy kursor wchodzi na obszar elementu lub jego potomków.
mouseleave
Wyzwalane, kiedy kursor wychodzi z obszaru elementu lub jego potomków.
mousemove
Wyzwalane, kiedy kursor porusza się po elemencie.
mouseout
Tak samo, jak w przypadku mouseleave, z tym że zdarzenie jest wyzwalane, kiedy kursor wciąż znajduje się na elemencie-potomku.
mouseover
Tak samo, jak w przypadku mouseenter, z tym że zdarzenie jest wyzwalane, kiedy kursor wciąż znajduje się na elemencie-potomku.
mouseup
Wyzwalane po puszczeniu przycisku myszy.
onabort
Wyzwalane, kiedy następuje przerwa we wczytywaniu dokumentu lub zasobów.
onafterprint
Wyzwalane, kiedy przywołana jest metoda Window.print(), zanim użytkownikowi pokazane zostają opcje drukowania.
onbeforeprint
Wyzwalane po wydrukowaniu dokumentu.
onerror
Wyzwalane, kiedy następuje błąd we wczytywaniu dokumentu lub zasobów.
onhashchange
Wyzwalane, kiedy fragment hash ulega zmianie.
onload
Wyzwalane po zakończeniu wczytywania dokumentu lub zasobów.
onpopstate
Wyzwalane, by utworzyć obiekt stanu w historii przeglądarki. W rozdziale 26. znajduje się przykład zastosowania tego zdarzenia.
onresize
Wyzwalane przy zmianie wielkości okna.
onunload
Wyzwalane, kiedy przeglądarka opuszcza dokument.
readystatechange
Wyzwalane, kiedy właściwość readyState zmienia wartość.
reset
Wyzwalane przy wyzerowaniu formularza.
submit
Wyzwalane przy wysłaniu formularza.
544
ROZDZIAŁ 25. WPROWADZENIE DO DOM
Podsumowanie W tym rozdziale ułożyłem podstawy pod omówienie DOM oraz przedstawiłem jego rolę w odniesieniu do dokumentów HTML. Objaśniłem również, że poziomy specyfikacji DOM mają niewiele wspólnego z funkcjami obsługiwanymi przez popularne przeglądarki, a także przedstawiłem różne podejścia, które pozwalają się upewnić, czy funkcje DOM, na których polegasz, dostępne są w przeglądarkach, z myślą o których programujesz. Przypominam jednak, że żadne z tych podejść nie zastąpi uważnego i dogłębnego testowania. Przedstawiłem tu również zwięzłe spisy obiektów, właściwości i zdarzeń, które opiszę w kolejnych rozdziałach.
545
ROZDZIAŁ 25. WPROWADZENIE DO DOM
546
ROZDZIAŁ 26
Obiekt Document
W tym rozdziale przedstawię Ci jeden z kluczowych komponentów DOM: obiekt Document. Obiekt Document jest punktem wyjścia do pracy z funkcjami DOM, pozwala na uzyskiwanie informacji o bieżącym dokumencie, a także oferuje zbiór funkcji służących do eksplorowania, nawigowania, przeszukiwania oraz manipulowania strukturą i treścią. W tabeli 26.1 znajduje się streszczenie rozdziału. Tabela 26.1. Streszczenie rozdziału Problem
Rozwiązanie
Listing
Wykonywanie podstawowych czynności w DOM.
Użyj podstawowych funkcji DOM API.
26.1
Pobranie informacji o dokumencie.
Użyj właściwości metadanych document.
26.2
Pobranie informacji o lokalizacji dokumentu.
Użyj właściwości document.location.
26.3
Przejście do nowego dokumentu.
Zmień wartość właściwości obiektu Location.
26.4, 26.5
Odczytywanie i zapisywanie ciasteczek.
Użyj właściwości document.cookie.
26.6
Określenie postępów w przetwarzaniu dokumentu.
Użyj właściwości document.readystate.
26.7
Pobranie szczegółów co do funkcji DOM obsługiwanych przez przeglądarkę.
Użyj właściwości document.implementation.
26.8
Pozyskanie obiektów reprezentujących określone typy elementów.
Użyj właściwości document, takich jak images, links i scripts.
26.9, 26.10
Wyszukanie elementów w dokumencie.
Użyj metod document.getElement*.
26.11
Wyszukanie elementów w dokumencie przy użyciu selektora CSS.
Użyj metody document.querySelector lub document.querySelectorAll.
26.12
Łańcuchowe przeszukanie elementów.
Użyj metod przeszukiwania na rezultatach wcześniejszego wyszukiwania.
26.13
Nawigowanie po drzewie DOM.
Użyj metod dokumentu lub elementu oraz właściwości takich jak hasChildNodes(), firstChild i lastChild.
26.14
Do obiektu Document uzyskuje się dostęp przy użyciu globalnej zmiennej document; jest to jeden z kluczowych obiektów tworzonych przez przeglądarkę. Obiekt Document dostarcza informacje o całym
ROZDZIAŁ 26. OBIEKT DOCUMENT
dokumencie, a także daje dostęp do poszczególnych obiektów w modelu. Pracę z DOM najlepiej rozpocząć od przykładu. W listingu 26.1 widnieje przykładowy dokument z poprzedniego rozdziału, do którego dodałem skrypt demonstrujący podstawowe funkcje DOM w działaniu. Listing 26.1. Zastosowanie obiektu Document
Przykład
Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.
Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.
Powyższy skrypt jest wprawdzie krótki i nieskomplikowany, lecz zgrabnie demonstruje wiele z różnych zastosowań DOM. Poniżej rozłożę skrypt na części pierwsze i wytłumaczę, o co chodzi. Jedną z najbardziej podstawowych rzeczy, do których używa się obiektu Document, jest pozyskiwanie informacji o dokumencie HTML, nad którym pracujesz. Pierwszy wiersz skryptu służy właśnie do tego. document.writeln("URL: " + document.URL);
W tym przypadku odczytałem wartość właściwości document.URL, otrzymując adres URL bieżącego dokumentu. Jest to adres URL, którego przeglądarka użyła do wczytania dokumentu z podanym skryptem. Pozyskiwanie różnych rodzajów informacji z obiektu Document pokażę Ci w punkcie „Pobieranie informacji z dokumentu” w dalszej części rozdziału. W skrypcie zastosowałem również metodę writeln. document.writeln("URL: " + document.URL);
Metoda ta dodaje treść na końcu dokumentu HTML. W tym przypadku podałem znacznik otwierający elementu pre i wartość właściwości URL. Jest to bardzo prosty przykład modyfikacji DOM, czyli zmiany struktury dokumentu. Manipulowanie strukturą DOM opiszę bardziej szczegółowo w rozdziale 28. Następnie wybieram niektóre elementy z dokumentu. var elems = document.getElementsByTagName("p");
Elementy można wybierać na różne sposoby, co opiszę w podrozdziale „Znajdowanie obiektów elementów HTML” w dalszej części rozdziału. Metoda getElementsByTagName wybiera wszystkie elementy
548
ROZDZIAŁ 26. OBIEKT DOCUMENT
danego typu, czyli w tym przypadku elementy p. Wszelkie zawarte w dokumencie elementy p zwracane są przez metodę i zamieszczane w zmiennej elems. Jak wspomniałem, wszystkie elementy reprezentowane są przez elementy HTMLElement, który obsługuje podstawową funkcję reprezentowania elementów HTML. Rezultatem zastosowania metody getElementsByTagName jest utworzenie zbioru obiektów HTMLElement. Skoro już uzyskałem zbiór obiektów HTMLElement, mogę użyć pętli for do wyliczenia zawartości tego zbioru i przetworzyć każdy element p, który przeglądarka znalazła w dokumencie: for (var i = 0; i < elems.length; i++) { document.writeln("ID elementu: " + elems[i].id); elems[i].style.border = "medium double black"; elems[i].style.padding = "4px"; }
Odczytałem właściwość id każdego HTMLElement w zbiorze, aby uzyskać wartość atrybutu id i wykorzystać metodę document.writeln, by dodać rezultat do treści elementu pre, który zdefiniowałem wcześniej. for (var i = 0; i < elems.length; i++) { document.writeln("ID elementu: " + elems[i].id); elems[i].style.border = "medium double black"; elems[i].style.padding = "4px"; }
Właściwość id jest jedną z wielu właściwości obsługiwanych przez HTMLElement. Pozostałe przedstawię Ci w rozdziale 28. Właściwości tych można używać do pozyskiwania informacji o elemencie lub modyfikowania ich (a tym samym modyfikowania reprezentowanych przez nie elementów HTML). W tym przypadku użyłem właściwości style do zmiany wartości właściwości CSS border i padding. for (var i = 0; i < elems.length; i++) { document.writeln("ID elementu: " + elems[i].id); elems[i].style.border = "medium double black"; elems[i].style.padding = "4px"; }
Rezultatem tych zmian jest utworzenie stylu inline dla każdego z elementów znalezionych przy użyciu getElementsByTagName; style inline omówiłem w rozdziale 4. Kiedy modyfikujesz obiekt, przeglądarka natychmiast zmienia odpowiadający mu element. W tym przypadku przypisuje elementom p dopełnienie
i obramowanie. W ostatnim wierszu skryptu znajduje się polecenie zapisania znacznika końcowego elementu pre, którego znacznik otwierający utworzyłem na początku skryptu. Zrobiłem to przy użyciu metody write, która działa tak samo jak writeln, lecz nie wstawia znaku zakończenia wiersza na końcu dodanego do dokumentu ciągu znaków. Nie jest to szczególnie istotna różnica, jeżeli nie zapisujesz preformatowanych treści lub treści, których białe znaki powinny być obsługiwane niestandardowo (o czym przeczytasz więcej w rozdziale 22.). Zastosowanie elementu pre oznacza, że dodane metodą writeln znaki sygnalizujące koniec wiersza wykorzystywane są przy określaniu struktury treści. Wygląd dokumentu potraktowanego takim skryptem widać na rysunku 26.1.
Metadane dokumentu Jak wytłumaczyłem w poprzednim podrozdziale, obiektu Document można użyć do pobrania informacji o dokumencie. W tabeli 26.2 znajduje się opis właściwości służących do pobierania metadanych dokumentu.
Pobieranie informacji z dokumentu Użyteczne informacje o dokumencie możesz pozyskać przy pomocy właściwości metadanych, tak jak widać to w listingu 26.2.
549
ROZDZIAŁ 26. OBIEKT DOCUMENT
Rysunek 26.1. Rezultat zastosowania skryptu w podstawowym dokumencie HTML Tabela 26.2. Właściwości metadanych dokumentu Właściwość
Opis
Zwracana wartość
characterSet
Zwraca kodowanie znaków w dokumencie. Jest to właściwość przeznaczona tylko do odczytu.
tekst
charset
Zwraca lub definiuje kodowanie znaków w dokumencie.
tekst
compatMode
Zwraca informację o trybie kompatybilności dokumentu.
tekst
cookie
Zwraca lub definiuje ciasteczka bieżącego dokumentu.
tekst
defaultCharset
Zwraca domyślne kodowanie znaków przeglądarki.
tekst
defaultView
Zwraca obiekt Window bieżącego dokumentu; w rozdziale 27. znajdziesz więcej informacji na temat tego obiektu.
Window
dir
Zwraca lub definiuje kierunek zapisu tekstu w bieżącym dokumencie.
tekst
domain
Zwraca lub definiuje domenę bieżącego dokumentu.
tekst
implementation
Podaje informacje o dostępnych funkcjach DOM.
DOMImplementation
lastModified
Zwraca ostatni czas modyfikacji dokumentu lub bieżący czas, jeśli czas modyfikacji nie jest dostępny.
tekst
location
Podaje informacje o adresie URL bieżącego dokumentu.
Location
readyState
Zwraca informacje o stanie bieżącego dokumentu. Jest to właściwość przeznaczona tylko do odczytu.
tekst
referrer
Zwraca adres URL dokumentu, który przekierował przeglądarkę do bieżącego dokumentu; jest to wartość odpowiedniego nagłówka HTTP.
tekst
title
Zwraca