Mariusz Tarnaski "MariuszT"

Temat narzędzi wspomagających budowanie stron www po stronie klienta gościł już na moim blogu. Chociażby w październiku pisałem o Bootstrap od Twittera. Do tej pory nie znałem jednak HTML5 Boilerplate.

Jak zaczynacie budować nową stronę? Ja mam przygotowany gotowy wzór. Plik z podstawowym szkieletem strony, wpisanymi meta tagami, które uznaję za potrzebne oraz niewielką strukturę katalogów i kilka plików np. do resetu styli CSS czy do obsługi przezroczystych PNG (kiedyś, teraz już nie ). Pewnie każdy z Was ma coś podobnego. Jeżeli nie gotową paczkę to chociaż swój ulubiony model, który kopiujecie z jednego projektu do drugiego.

To jest oczywiście sensowny sposób, po co za każdym razem robić coś od nowa, powtarzać tą samą pracę. Można jednak pójść o krok dalej i zamiast korzystać z własnego rozwiązania, użyć np. HTML5 Boilerplate, który został opracowany i przetestowany przez wiele tęgich głów i na pewno spisze się lepiej niż samodzielnie przygotowany wzór dokumentu.

Najważniejsze cechy HTML5 Boilerplate:

• HTML5 to przyszłość
• Ale nie zapominamy nawet o takich starociach jak IE6
• Kod dostosowany do urządzeń mobilnych
• Użyto normalize.css zamiast resetu stylów
• Użyto respond.js dla CSS3 Media Queries
• Rekomenduje i współpracuje z Google Chrome Frame dla starszych wersji IE
• Użyto modernizr do detekcji możliwości przegladarki
• Wsparcie cachowania CSS i JS
• Poprawia bezpieczeństwo PHP np. wyłącza register_globals lub usuwa nagłówek HTTP-X-Powered-By informujący o wersji PHP
• Udostępniono ustawienia dla serwerów Apache, ngnix itp. dodające obsługę popularnych typów MIME, włączających kompresję gzip itd.
• i wiele, wiele więcej

To naprawdę tylko drobna lista wszystkich właściwości. W HTML5 Boilerplate jest mnóstwo drobnych udogodnień o których sami na pewno nie pamiętalibyśmy. Koniecznie przeczytaj dokumentację, przejrzyj pliki. Znajdziesz tam również wiele linków do materiałów dodatkowych takich jak integracje biblioteki z CakePHP, Zend Framework, WordPress czy Django. Fani WordPressa znajdą dodatkowo listę gotowych skórek opartych o HTML5 Boilerplate.

Do tego wszystkiego mamy prosty skrypt do zbudowania własnej biblioteki tylko z tymi elementami, które potrzebujemy i w takiej postaci jaka nam odpowiada. A jeżeli to nie wystarcza to skorzystaj z Initializr gdzie masz szereg dodatkowych opcji.

HTML5 Boilerplate robi ogromne wrażenie. Włożono w niego mnóstwo pracy, ilość wiedzy jaka była do tego potrzebna jest imponująca. Samemu nie jesteśmy w stanie zrobić tego lepiej. Żałuję, że nie wiedziałem o HTML5 Boilerplate wcześniej, użyłbym go do ostatniego projektu, przetestował w praktyce. Ale mój następny projekt będzie już korzystał z możliwości tej biblioteki.

CSS Media Types w CSS2 pozwala na proste zdefiniowanie który plik stylów CSS ma zostać zastosowany na konkretnym urządzeniu. Można mieć osobne style dla przeglądarki, osobne do druku a jeszcze inne na przykład dla urządzeń do czytania braillem. Przydatne, ale można lepiej.

W CSS3 rozbudowano ten mechanizm, powstało CSS3 Media Queries. Możemy definiować osobne style na podstawie takich czynników jak wymiary ekranu czy jego orientacja.

Tak wygląda to na przykładzie:

Powyższy kod oznacza, że style z pliku style.css zostaną zastosowane tylko dla urządzenia z ekranem o minimalnych rozmiarach 1024x500px.

Istnieją alternatywne zapisy. Wewnątrz dokumentu CSS:

Jako @import:

Możliwości jest wiele, zachęcam do przejrzenia tego dokumentu.

Wsparcie przeglądarek

Oczywiście, jak zawsze, pojawia się pytanie jak jest z obsługą tej technologii w różnych przeglądarkach. I oczywiście, jak zawsze, odpowiedź brzmi, że wszędzie jest dobrze oprócz Internet Explorer Dopiero w IE 9 wprowadzono obsługę Media Queries.

Z tego powodu powstała biblioteka js Respond. Niewielki pliczek, który magicznie powoduje, że nasze reguły (tylko min-width i max-width dla wszystkich typów mediów) zaczynają działać w starszych wersjach IE. Jak sam autor twierdzi, "biblioteka jest napisana w taki sposób, że prawdopodobnie powinna łatać inne przeglądarki, które nie obsługują Media Queries".

Wcześniej, aby wszystko działało jak należy, trzeba było dodawać komentarz przy naszych regułach. Teraz biblioteka stosuje wyrażenia regularne dzięki czemu automatycznie rozpoznaje nasze reguły. Musimy tylko dołączyć respond.js do naszego dokumentu, nic więcej.

Alternatywą jest css3-mediaqueries-js. Bardziej rozbudowany skrypt (na tą chwilę 15,6KB), który podobno działa ze wszystkimi regułami Media Queries. Co oczywiste, działa wolniej od respond.js, zwłaszcza przy rozbudowanych regułach. Nie działa z importowanymi arkuszami (@import), nie parsuje również atrybutów media dla tagów <link> i <style>.

Czy używać CSS3 Media Queries? Zdecydowanie tak! Reguły te dają wspaniałe możliwości i są obsługiwane przez większość przeglądarek, zarówno na desktopach jak i na urządzeniach mobilnych. Dla IE też są rozwiązania a użytkownicy z wyłączoną obsługą JS są sami sobie winni

Pisałem już o stylach resetujących domyślny CSS przeglądarki. I to nie raz. Czy to jednak jedyny sposób aby wszystkie przeglądarki wyświetlały Twoją stronę jednakowo?

Całkowity reset styli CSS do standardowych wartości jest często krytykowany za niewłaściwe podejście. Zdaniem niektórych, lepiej byłoby zmieniać tylko to co powinno być zmienione. Stworzyć reguły naprawiające tylko te ustawienia i tylko w tych przeglądarkach gdzie faktycznie jest coś nie tak. Ta idea przyświeca twórcom normalize.css.

Takie podejście jest trudniejsze do zrealizowania ale zdaniem niektórych, wydajniejsze i bardziej poprawne.

Podstawowe zalety normalizacji:

• Współpraca z przeglądarkami na urządzeniach mobilnych
• Reguły dostosowane do HTML5
• Mniej styli, mniejsza objętość
• Podczas debugowania nie mamy takiego bałaganu (kto pracował z Firebugiem i zwykłym resetem ten wie o czym mowa)
• Brak idiotycznych reguł opisujących, że koło jest naprawdę okrągłe
• Można się czegoś nauczyć, wiele pomocnych komentarzy przy stylach

Sami musimy zdecydować co nam lepiej odpowiada. Z pewnością normalizacja jest teraz bardziej trendy od resetu