HTML5 Jak korzystać ze znaczników i
Wśród kilku nowych tagów dostępnych w HTML5, Specyfikacje (takie jak: postać, fig, i na bok), Szczegół i streszczenie Tagi, moim zdaniem, są najbardziej przydatne. Dzięki tym nowym tagom możesz ukryć część długiej zawartości i wyświetlić tylko podsumowanie.
W rzeczywistości często widzimy ten efekt, ale większość z nich jest nadal oparta na JavaScript lub jego bracie: jQuery, którego większość ludzi nie rozumie. Teraz z tymi nowymi elementami - Detale i streszczenie - rzeczy będą łatwiejsze.
Zobaczmy więc, w jaki sposób tagi działają w rzeczywistym scenariuszu.
W tym pokazie podsumujemy opis produktu. Najpierw stwórzmy tag „szczegóły”, a następnie umieśćmy w nim całą zawartość wraz ze znacznikiem „Podsumowanie”, jak w poniższym przykładzie:
Specyfikacja MacBooka Pro
- 13,3-calowy ekran z podświetleniem LED z błyszczącym ekranem panoramicznym z nieprzerwanym szkłem od krawędzi do krawędzi (rozdzielczość 1280 x 800 pikseli).
- Dwurdzeniowy procesor Intel Core i5 2,4 GHz z 3 MB współdzielonej pamięci podręcznej L3 dla doskonałej wielozadaniowości.
- Intel HD Graphics 3000 z 384 MB pamięci DDR3 SDRAM współdzielonej z pamięcią główną.
- Dysk twardy 500 GB Serial ATA (5400 RPM)
- 4 GB zainstalowanej pamięci RAM (1333 MHz DDR3; obsługuje do 8 GB)
W tym przykładzie dodałem szczegóły specyfikacji MacBooka Pro, a teraz zobaczmy, jak przeglądarka renderuje te tagi.
Dodałem również tytuł i więcej opisów produktu ponad szczegółami, aby powyższe demo było dla ciebie bardziej sensowne. Więc co o tym myślisz? To całkiem proste, prawda?
Obsługa przeglądarek
Zanim jednak zaczniesz stosować ten tag do całej witryny, należy zauważyć, że szczegóły i znacznik podsumowania są obecnie obsługiwane tylko w Chrome 12 i nowszych wersjach.
Nawet najnowszy Firefox jeszcze ich nie obsługuje.
Jeśli więc chcesz zastosować ten tag, musisz dołączyć funkcję awaryjną dla nieobsługiwanych przeglądarek. Dobra wiadomość, to proste; możesz użyć tego szczegółu polyfill, który automatycznie powieli funkcjonalność tagu dla starych przeglądarek.
Pobierz ten plik i połącz go z dokumentem html wraz z jQuery (co najmniej 1.7+) i upewnij się, że umieszczasz polifill przed zamkniętym tagiem treści.
Wewnątrz tagu head wstaw następujący tag warunkowy, aby dołączyć HTML5shiv dla IE8 i wcześniejszych, w przeciwnym razie Internet Explorer nie rozpozna tych nowych tagów.
Zobaczmy teraz, jak się to okaże w Internet Explorerze:
Teraz działa również w przeglądarce Internet Explorer.
- Próbny
- Pobierz źródło
Wniosek
Tworzenie takiego efektu ukrywania i pokazywania za pomocą JavaScript lub jQuery jest w rzeczywistości stosunkowo łatwe, ale posiadanie go natywnie z przeglądarki jest zdecydowanie łatwiejszym rozwiązaniem dla wielu ludzi. Niezależnie od tego, czy chcesz to zrobić w JavaScript, czy w HTML5, to twoja decyzja. Dziękuję za przeczytanie i mam nadzieję, że się podobało.
