Mozilla Hacks: Firefox 4 – nowy parser HTML5

W ramach serii tłumaczeń artykułów z bloga Mozilla Hacks, przedstawiam dzisiaj tłumaczenie artykułu Firefox 4: the HTML5 parser – inline SVG, speed and more. Oryginalny artykuł i jego tłumaczenie dostępne są na warunkach licencji Creative Commons Attribution 3.0 USA.


Autorem wersji oryginalnej tej notki jest Henri Sivonen, zajmujący się nowym parserem HTML5 Firefoksa. Parser HTML jest jednym z najbardziej skomplikowanych i wrażliwych elementów przeglądarki. Steruje procesem przetwarzania kodu źródłowego HTML do stron WWW, dlatego też zmiany w nim wprowadzane są rzadko i muszą być dobrze przetestowane. Podczas gdy większa część silnika Gecko została przebudowana od czasów jego powstania w późnych latach 90., parser był jedną z rzeczy, które pozostały od samego początku niezmienne. Teraz kod ten został zastąpiony nowym, który jest szybszy, zgodny z nowym standardem HTML5 i daje sporo nowych możliwości.

Od jakiegoś czasu prowadziliśmy prace nad zastąpieniem starego parsera HTML w silniku Gecko. Nowy parser został ostatnio domyślnie włączony w trunku, tak więc wystarczy po prostu pobrać conocną kompilację przeglądarki, by wypróbować nowy parser bez potrzeby przełączania żadnych opcji konfiguracyjnych.

Cztery najważniejsze rzeczy, które są związane z nowym parserem HTML5:

  • można korzystać z kodu SVG i MathML bezpośrednio (inline) na stronach HTML5, bez przestrzeni nazw XML
  • przetwarzanie odbywa się poza głównym wątkiem interfejsu użytkownika Firefoksa, zwiększając całkowitą responsywność przeglądarki
  • szybkość zapisu własności innerHTML jest o około 20% większa
  • nowy parser naprawia dziesiątki starych błędów dotyczących przetwarzania.

Obejrzyj democonocnej kompilacji Firefoksa lub innej przeglądarce obsługującej HTML5. Powinno to wyglądać tak:

Co to jest?

Parser HTML5 w Gecko zamienia strumień bajtów w drzewo DOM, zgodnie z algorytmem przetwarzania HTML5.

HTML5 to pierwsza specyfikacja, która szczegółowo określa sposób parsowania HTML. Dotychczasowe specyfikacje nie opisywały, jak przekształcić strumień bajtów w drzewo DOM. Teoretycznie HTML przed HTML5 był określony jako aplikacja SGML. Pociągało to za sobą określony związek między kodem
źródłowym poprawnych dokumentów HTML i drzewem DOM. Jednakże przetwarzanie niepoprawnych dokumentów nie było dobrze określone (a strony WWW w większości składają się z niepoprawnego kodu HTML4), a jednocześnie istnieją konstrukcje SGML, które teoretycznie były częścią HTML, ale nie były implementowane w rzeczywistości przez popularne przeglądarki.

Brak właściwej specyfikacji sprawił, że twórcy przeglądarek musieli samemu dojść do tego, jak traktować nieprawidłowe dokumenty, w razie wątpliwości badając działanie innych przeglądarek o największym udziale w rynku (najpierw Mosaic, potem Netscape, potem IE). Powstało w ten sposób wiele niepisanych reguł, ale także wiele różnic w zachowaniu przeglądarek.

Algorytm przetwarzania HTML5 standaryzuje zachowanie, do którego zbiegają się przeglądarki i inne aplikacje konsumujące HTML. Zgodnie z projektem, algorytm przetwarzania HTML5 jest właściwy do przetwarzania istniejących treści HTML, tak więc aplikacje nie muszą dalej wspierać swoich starych parserów, aby móc wyświetlić stare treści. W conocnych kompilacjach Firefoksa parser HTML5 używany jest dla wszystkich treści typu text/html.

Jak inny jest nowy parser?

Algorytm przetwarzania HTML5 ma dwie główne części: tokenizację i budowanie drzewa. Tokenizacja jest procesem rozdzielania strumienia źródłowego do znaczników, tekstu, komentarzy i atrybutów wewnątrz znaczników. Faza budowania drzewa na bazie znaczników i tekstu pomiędzy nimi buduje drzewo DOM. Algorytm tokenizacji w parserze HTML5 bliższy jest temu, co robi Internet Explorer, niż temu, co robiły dotychczasowe wersje Gecko. IE miał przez długi czas dominację na rynku, przez co witryny były głównie testowane pod kątem prawidłowego działania z tokenizerem IE. Proces budowy drzewa natomiast jest zbliżony do dotychczasowego działania silnika WebKit. Spośród głównych silników przeglądarek przed HTML5, WebKit posiadał najbardziej rozsądne rozwiązanie problemu budowania drzewa.

Ponadto, nowy parser przetwarza strumienie poza głównym wątkiem. Tradycyjnie przeglądarki wykonywały większość zadań w głównym wątku. Radykalne zmiany, takie jak przeniesienie przetwarzania poza główny wątek, uprościły kod parsera HTML5 w porównaniu do starego parsera HTML Gecko.

Co nowego dla twórców witryn?

Zmiany omówione powyżej są interesujące głównie dla programistów przeglądarek. Kluczową cechą parsera HTML5 jest to, że właściwie nie widać, żeby cokolwiek się zmieniło.

Jest jednak jedna duża zmiana istotna dla twórców witryn: kod MathML i SVG bezpośrednio w dokumentach HTML5. Nowy sposób przetwarzania HTML5 uwalnia MathML i SVG od XML-a i udostępnia je w głównym formacie sieci WWW.

Oznacza to, że można osadzać złożone typograficznie wyrażenia matematyczne w dokumentach HTML, bez potrzeby przepisywania całego dokumentu do XHTML, jak też, co ważniejsze, bez potrzeby modyfikacji oprogramowania budującego witrynę do zwracania prawidłowo sformowanego kodu XHTML. Na przykład, aby osadzić w kodzie HTML wzór na rozwiązanie równania kwadratowego, wystarczy tylko poniższy kod:

<math>
  <mi>x</mi>
 
  <mo>=</mo>
  <mfrac>
    <mrow>
      <mo>&minus;</mo>
      <mi>b</mi>
      <mo>&PlusMinus;</mo>
      <msqrt>
        <msup>
 
          <mi>b</mi>
          <mn>2</mn>
        </msup>
        <mo>&minus;</mo>
        <mn>4</mn>
        <mo>&InvisibleTimes;</mo>
        <mi>a</mi>
 
        <mo>&InvisibleTimes;</mo>
        <mi>c</mi>
      </msqrt>
    </mrow>
    <mrow>
      <mn>2</mn>
      <mo>&InvisibleTimes;</mo>
      <mi>a</mi>
 
    </mrow>
  </mfrac>
</math>

W podobny sposób można osadzić skalowalną grafikę SVG – bez przepisywania HTML-a do XHTML-a. Podczas gdy rozmiary ekranów i rozdzielczości stają się coraz bardziej zróżnicowane, coraz większą wagę przywiązuje się do jakości grafiki przy różnych stopniach powiększenia. Wprawdzie dotychczas można było używać grafiki SVG w dokumentach HTML przez referencję (używając elementu object), wstawianie SVG bezpośrednio jest w niektórych przypadkach wygodniejsze. Na przykład ikona ostrzeżenia może być teraz osadzona bezpośrednio, a nie ładowana z zewnętrznego pliku.

<svg height=86 width=90 viewBox='5 9 90 86' style='float: right;'>
  <path stroke=#F53F0C stroke-width=10 fill=#F5C60C stroke-linejoin=round d='M 10,90 L 90,90 L 50,14 Z'/>
  <line stroke=black stroke-width=10 stroke-linecap=round x1=50 x2=50 y1=45 y2=75 />
</svg>

Wystarczy utworzyć stronę zaczynającą się od <!DOCTYPE html> i wstawić do niej dwa powyższe fragmenty, a będzie to działać w nowych nocnych kompilacjach Firefoksa.

Ogólnie, jeśli mamy kod MathML czy SVG jako XML, wystarczy po prostu wkleić kod XML bezpośrednio do HTML-a (pomijając, jeśli istnieją, deklarację XML oraz doctype). Dwa zastrzeżenia: kod nie może stosować przedrostków przestrzeni nazw dla elementów (tak więc żadnych svg:svg ani math:math), a przedrostkiem przestrzeni nazw XLink musi być xlink.

W powyższych fragmentach MathML i SVG uważna osoba dostrzeże, że bezpośrednio osadzane fragmenty MathML i SVG są bardziej podobne do HTML i prostsze niż po prostu wklekony w to miejsce XML. Nie ma deklaracji przestrzeni nazw, a niepotrzebne cudzysłowy wokół wartości atrybutów zostały pominięte. Działa to, ponieważ znaczniki są tokenizowane przez tokenizer HTML5, a nie przez tokenizer XML. Pomijanie deklaracji przestrzeni nazw działa, ponieważ proces budowania drzewa nie używa atrybutów wyglądających jak deklaracje przestrzeni nazw do przypisania elementom “MathML-owatości” czy “SVG-owatości”. Zamiast tego <svg> rozpoczyna zasięg elementów, którym przypisana będzie przestrzeń nazw SVG w DOM, a <math> rozpoczyna zasięg elementów, którym w DOM przypisana będzie przestrzeń nazw MathML. W przykładzie MathML widać także, że stosowane są odwołania do encji nazwanych, które wcześniej nie były obsługiwane w HTML.

Poniżej krótkie podsumowanie przetwarzania MathML i SVG bezpośrednio w dokumentach HTML dla twórców witryn:

  • <svg></svg> przypisany jest do przestrzeni nazw SVG w DOM.
  • <math></math> przypisany jest do przestrzeni nazw MathML w DOM.
  • foreignObject oraz annotation-xml (na różnych mniej istotnych elementach) rozpoczyna zagnieżdżony zasięg HTML, tak więc można zagnieżdżać SVG, MathML i HTML w sposób, jakiego można oczekiwać.
  • Parser poprawia wielkość znaków w znakowaniu, tak więc <SVG VIEWBOX=’0 0 10 10′> działa w kodzie HTML.
  • Metody DOM i selektory CSS rozróżniają wielkość znaków, należy więc pisać wywołania DOM oraz selektory CSS z użyciem kanonicznej wielkości znaków, czyli tzw. camelCase w przypadku różnych części SVG, takich jak viewBox.
  • Składnia <foo/> otwiera i natychmiast zamyka element foo, jeśli jest to element MathML lub SVG (ale nie element HTML).
  • Tokenizacja atrybutów przebiega w taki sam sposób, jak w HTML, tak więc można pomijać cudzysłowy w sytuacjach, w których można byłoby je pominąć w HTML (tj. kiedy wartość atrybutu nie jest pusta oraz nie zawiera białych znaków, ", ', `, <, = ani >).
  • Uwaga: dwie powyższe cechy nie współgrają ze sobą dobrze z przyczyn zachowania zgodności z tokenizacją starego HTML-a. Jeśli cudzysłowy zostaną pominięte przy wartości ostatniego atrybutu, konieczne jest wstawienie spacji przed zamykającym ukośnikiem. Tak więc prawidłowy jest kod: <circle fill=green />, ale nieprawidłowy jest: <circle fill=red/>.
  • Atrybuty zaczynające się od xmlns nie mają absolutnie żadnych skutków, nie wpływają na obecność elementów ani atrybutów w danej przestrzeni nazw, tak więc nie ma potrzeby ich stosowania.
  • Atrybuty w przestrzeni nazw XLink muszą stosować przedrostek xlink (np. xlink:href).
  • Nazwy elementów nie mogą zawierać przedrostków ani dwukropków.
  • Zawartość elementów script w SVG tokenizowana jest tak, jak w XML – nie jak zawartość elementów script w HTML.
  • Kiedy element SVG lub MathML jest otwarty, sekcje <![CDATA[]]> działają tak, jak w XML. Można to wykorzystać do ukrycia treści tekstowych przed starszymi przeglądarkami nie obsługującymi SVG ani MathML w text/html.
  • Encje nazwane MathML dostępne są w całym dokumencie (także w treści HTML).
  • Aby zapewnić działanie stron, na których autorzy umieścili fragmenty SVG w HTML (nie wiadomo, po co) lub użyli znacznika <math> do celów niezwiązanych z MathML, próby zagnieżdżenia różnych popularnych elementów HTML jako elementów potomnych SVG (bez użycia foreignObject) spowodują natychmiastowe wyjście z kontekstu SVG lub MathML. Może to sprawić, że literówki będą miały zaskakujące efekty.

Ogg Theora czy h.264 – co wybrali użytkownicy w Polsce

Język HTML 5 wprowadził znacznik <video>, służący do osadzania filmów na stronach internetowych. W pierwotnej wersji specyfikacji znalazł się format Ogg z kodekiem Theora, wskutek protestów m. in. Apple aktualna robocza wersja specyfikacji nie określa formatu wideo.

Przeglądarki z silnikiem Gecko (w tym Firefox 3.5+), a także Opera (aktualnie w wersji beta 10.50) i Google Chrome (od wersji 3, także w opensource’owej wersji – Chromium) obsługują Ogg Theora. Format h.264 z kolei obsługuje jedynie Apple Safari (od wersji 3.2) i Google Chrome (od wersji 3, tylko oficjalne wydania komercyjne Google).

Zobaczmy, jak wsparcie dla obu formatów oraz znacznika <video> HTML5 wygląda pośród polskich użytkowników WWW. Poniżej wykorzystałem dane z najnowszej edycji rankingu gemiusTraffic (za tydzień 15-21.02.10). W danych tych pominięto niektóre przeglądarki w wersjach testowych, w szczególności nie zawierają one liczby użytkowników Firefoksa pre-3.7 i Safari 4.x (gdzie x>0), ale wpływ tego ograniczenia na ogólny błąd w tym zestawieniu jest niewielki.

Jak więc to wygląda?

Liczba odsłon Udział % Ogg H.264
Wszystkie odsłony 7382509245 100
Firefox 3.5 2433559952 32,96 T N
Firefox 3.6 545454889 7,39 T N
Opera 10.50 4622237 0,06 T N
Chrome 3 9653886 0,13 T T
Chrome 4 345356590 4,68 T T
Chrome 5 5791210 0,08 T T
Safari 3.2 1314478 0,02 N T
Safari 4.0 29105252 0,39 N T
Obsługa <video> 3374858494 45,71
Wszystkie Ogg 3344438764 45,3
Wszystkie H.264 391221416 5,3

Przeglądarki obsługujące w ogóle znacznik <video> z HTML 5 generują więc już 45,71% odsłon wszystkich serwisów monitorowanych przez Gemius. Przeglądarki obsługujące HTML 5 oraz format h.264 – jedynie 5,3%, natomiast przeglądarki obsługujące HTML 5 i Ogg Theora – 45,3%.

Wraz z migracją użytkowników do nowszych wersji przeglądarek (w szczególności – z Firefoksa 3.0 do 3.6) oraz po wydaniu finalnej Opery 10.50, udział HTML5+Ogg Theora powinien przekroczyć połowę użytkowników – dzisiaj liczba użytkowników brandów (grup) przeglądarek, których najnowsze wersje obsługują otwarte wideo, przekracza 2/3.

Wkrótce więc zdecydowanej większości użytkowników będzie można serwować filmy bez konieczności korzystania z niestabilnych wtyczek (co gwarantuje nam HTML 5) i bez konieczności ponoszenia opłat licencyjnych (co zapewnia otwarte wideo – format Ogg Theora). Użytkownicy przeglądarek internetowych w Polsce wybrali te, które obsługują lub będą wkrótce obsługiwać otwarty format wideo. Każdy, kto poważnie zajmuje się kwestią multimediów w sieci, powinien zwrócić na to uwagę.

Powtórzmy jeszcze raz: już prawie połowie użytkowników w Polsce można serwować wideo bez konieczności instalowania przez nich wtyczek, jednocześnie zapewniając sobie (czy też własnej firmie) niezależność od producentów wtyczek (Adobe Flash) i opłat licencyjnych (h.264). 1

Widownia dla Theory już jest, czas na dostawców treści! :)


1) Użytkownikom pozostałych przeglądarek można serwować te same filmy w formacie Ogg Theora przy użyciu wtyczek (XiphQT, aplet Javy Cortado) lub Video for Everybody.

HTML 5: przesyłanie wielu plików jednocześnie

Dotychczas, chcąc umożliwić użytkownikowi przesłanie wielu plików przy pomocy formularza HTML, webmasterzy musieli posiłkować się albo apletami Flasha (takimi jak SWFUpload czy Uploadify), albo wstawić wiele elementów input. To drugie rozwiązanie było niewygodne dla użytkownika, ponieważ musiał on każdy plik wybrać w osobnym oknie wyboru pliku. Tak robiło się to do tej pory w HTML 4.01:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Upload plików - pojedynczy</title>
<form method="post" enctype="multipart/form-data" action="upload.php">
  <fieldset>
    <legend>Prześlij pliki</legend>
      <label>Dodaj plik 1: 
        <input type="file" name="files[]">
      </label><br>
      <label>Dodaj plik 2: 
        <input type="file" name="files[]">
      </label><br>
      <label>Dodaj plik 3: 
        <input type="file" name="files[]">
      </label><br>
      <label>Dodaj plik 4: 
        <input type="file" name="files[]">
      </label><br>
      <!-- itd... -->
      <input type="submit">
    </fieldset>
</form>

Niezbyt to wygodne, jeśli chcemy załadować np. kilka zdjęć z naszej ostatniej wycieczki w góry…

Gecko 1.9.2 (dostępne m. in. w nadchodzącym Firefoksie 3.6) oraz nowsze wersje przeglądarek opartych na silniku WebKit obsługują atrybut multiple elementu <input> z atrybutem type="file". Atrybut ten pozwala do jednego inputa wstawić wiele plików. Powyższy kod upraszcza się więc w HTML 5 do takiej postaci:

<!DOCTYPE html>
<meta charset="UTF-8">
<title>Upload wielu plików</title>
<form method="post" enctype="multipart/form-data" action="upload.php">
  <fieldset>
    <legend>Prześlij pliki</legend>
    <label>Dodaj pliki:
      <input type="file" multiple name="files[]">
    </label><br>
    <input type="submit">
  </fieldset>
</form>

Po kliknięciu “Przeglądaj” użytkownikowi wyświetli się systemowa wybieraczka plików, pozwalająca zaznaczyć wiele plików (z wciśniętym klawiszem Ctrl, Shift, lub poprzez odpowiednie zaznaczenie myszą). Po stronie serwera nic się nie zmienia, przesłane pliki traktowane są tak samo, jakby były przesłane z kilku osobnych, a nie jednego wspólnego inputa.

Tak więc np. kod w PHP operujący na tablicy $_FILES w ogóle nie musi być modyfikowany po przejściu na input z atrybutem multiple (jeśli korzystaliśmy do tej pory z wielu inputów o tej samej “tablicowej” nazwie).

HTML 5 po raz kolejny rozwiązuje problem, który irytował webmasterów od niepamiętnych czasów. Teraz czekamy już tylko na Operę i Microsoft… :)

PS. Na razie aplety w rodzaju SWFUpload pozostają niezastąpione, jeśli chcemy użytkownikowi np. pokazywać pasek postępu podczas przesyłania plików. Wkrótce jednak flashowe protezy zupełnie stracą rację bytu – W3C pracuje nad specyfikacją FileUpload, która umożliwi przesyłanie plików poprzez XMLHttpRequest.

CSS Transitions, czyli efekty przejścia w CSS

W wersji Firefoksa obecnie oznaczanej jako 3.7 pojawi się wsparcie dla efektów przejścia (ang. transitions) w CSS. Czym są efekty przejścia? W momencie zmiany stanu danego elementu (np. zmiany pseudoklasy, jak :hover, albo zmiany stylu wywołanej np. z poziomu JavaScriptu) wskazane własności CSS zmienią swe wartości w sposób płynny, a nie skokowy.

CSS Transitions pojawiły się najpierw w silniku WebKit, a od niedawna obsługuje je także silnik Gecko 1.9.3. Apple zgłosiło specyfikację CSS Transitions do konsorcjum W3C; ma ona obecnie status „Working Draft” (wersji roboczej).

Jak to wygląda?

Tutaj znajdziecie prosty przykład (potrzebny jest testowy nightly-build Firefoksa z mozilla-central lub w miarę nowe Safari lub Chrome).

Jak tego używać?

Specyfikacja definiuje własności:

transition-property
określa, jaka własność stylu ma podlegać efektowi przejścia
transition-duration
określa, jak długo ma trwać ten efekt
transition-timing-function
określa przyspieszenie lub spowolnienie animacji
transition-delay
określa opóźnienie z jakim ma zacząć się efekt
transition
skrót dla wszystkich pozostałych własności

Omówmy je pokrótce.

transition-property

Podajemy tutaj, jaka własność (lub jakie własności) mają być animowane. Jeśli nie określimy tej własności, lub podamy tu słowo kluczowe all, animowane będą wszystkie własności CSS, które tylko da się animować. Wartość none wyłącza efekty przejścia.

Przykład:

transition-property: color;

transition-duration

Tutaj podajemy czas trwania przejścia.

Przykład:

transition-duration: 5s;

Ta animacja będzie trwała 5 sekund.

transition-timing-function

Własność ta pozwala animacji zwalniać lub przyspieszać w trakcie jej trwania. Do określenia tych zmian wykorzystywane są sześcienne krzywe Béziera.

Dopuszczalne wartości to cubic-bezier(x2, y2, x3, y3), gdzie x2 i y2 oraz x3 i y3 to odpowiednio współrzędne punktów kontrolnych P2 i P3 krzywej (punkty P0 i P1są ustalone jako (0, 0) i (1, 1)).

Kilka szczególnie przydatnych wartości uzyskało także wygodne do zapamiętania aliasy:

Słowo kluczowe Odpowiednik cubic-bezier
ease cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out cubic-bezier(0.42, 0, 0.58, 1.0)

Wartość linear oznacza po prostu liniową zmianę wartości, czyli tempo animacji będzie jednostajne. Pozostałe wartości z powyższej tabeli sprawiają, że animacja zwolni lub przyspieszy na początku lub na końcu.

Przykład:

transition-timing-function: linear;

transition-delay

Możemy tu podać opóźnienie, z jakim wykona się animacja. Wartość równa 0 oznacza brak opóźnienia. Dozwolone są również wartości ujemne (-x), wówczas animacja zacznie się natychmiast (tak, jak przy wartości 0), ale początkowa wartość animowanej własności będzie taka, jakby przejście trwało już od |x| sekund.

Przykład:

transition-delay: 0.5s;

transition

Własność transition to skrótowy zapis wszystkich pozostałych, w kolejności: property, duration, timing function, delay. Na przykład:

transition-property: color;
transition-duration: 5s;
transition-timing-function: ease-in;
transition-delay: 2s;

można krótko zapisać jako:

transition: color 5s ease-in 2s;

Zarówno własności transition-* jak i skrótowa własność transition mogą przyjmować wiele wartości równolegle, tj. można
określić efekt przejścia np. dla własności color oraz dodatkowo inny dla width:

transition: color 5s ease-in 2s, width 3s ease-out 3s;

Jak zrobić div, który rozwinie się po najechaniu kursorem?

Bardzo prosto:

HTML:

<div id="slideDiv">witaj świecie!</div>

CSS:

#slideDiv {
  width: 5px;
  height: 20px;
  overflow: hidden;
  background: green;
  color: #fff;
  -moz-transition: width 1s linear;
  -webkit-transition: width 1s linear;
}

#slideDiv:hover {
  width: 20px;
}

Ograniczenia obecnych implementacji

Specyfikacja jest dopiero w stadium roboczym, tak więc wszystko tutaj może się jeszcze zmienić. Zarówno Gecko, jak i WebKit implementują powyższe własności w tzw. przedrostkiem producenta. Oznacza to, że obecnie żaden kod z powyższych przykładów nie zadziała, dopóki nie poprzedzimy odpowiednim przedrostkiem wszystkich omawianych własności. Dla Gecko jest to -moz-, dla WebKitu: -webkit-.

Aby nasze przejścia obecnie działały w obu tych silnikach musimy niestety napisać je dwukrotnie (albo i potrójnie, jeśli chcemy zachować na przyszłość składnię bez przedrostków). W poniższym przykładzie odnośniki będą płynnie zmieniać swój kolor w ciągu pół sekundy od najechania na nie myszą:

a {
  color: #f00;
  -moz-transition: color 0.5s linear;
  -webkit-transition: color 0.5s linear;
  transition: color 0.5s linear;
}

a:hover {
  color: #0f0;
}

W przypadku dostępu do tych własności z poziomu JavaScriptu należy pamiętać o tym, że minus przechodzi w powiększenie następującej po niej litery, tak więc
do własności efektów przejścia z poziomu JS na razie dobieramy się w Gecko przez element.style.MozTransition, a w WebKicie przez
element.style.WebkitTransition.

Nie wszystkie własności są obecnie animowane. Szerszy zakres ma na razie WebKit (obsługuje np. transformacje -webkit-transform; Gecko na dzień dzisiejszy nie pozwala na przejścia dla -moz-transform), ale wkrótce Mozilla powinna tutaj dogonić Apple. :)

Ważna sprawa: ani Gecko, ani WebKit nie animują przejść od wartości w rodzaju auto do wartości liczbowej. Zmiany tutaj odbywają się niestety skokowo.

Poprawna degradacja

Deklaracje własności transition w przeglądarkach nie obsługujących efektów przejścia (w tym obecne wersje Opery, IE, Firefox 3.6 i starsze, stare WebKity) nie powodują żadnych problemów, po prostu wymiary czy kolory elementów zmienią się w nich skokowo, tak jak bez transition.

Czy już to stosować?

Na poważnych witrynach najlepiej będzie się wstrzymać, przynajmniej do czasu względnego ustabilizowania się specyfikacji i jej implementacji.
Ale nikt nie broni dzisiaj poeksperymentować! :)

Linki

Mozilla Hacks: Geolokalizacja w Firefoksie 3.5

W ramach serii tłumaczeń artykułów z bloga Mozilla Hacks, przedstawiam dzisiaj tłumaczenie artykułu Geolocation in Firefox 3.5, którego autorem jest Doug Turner, jeden z twórców obsługi geolokalizacji w Firefoksie 3.5. Oryginalny artykuł i jego tłumaczenie dostępne są na warunkach licencji Creative Commons Attribution 3.0 USA.

Geolokalizacja w Firefoksie 3.5

Zawsze jesteśmy w jakimś miejscu. Piszę te słowa w kawiarni w Toronto w Kanadzie. Kiedy wpiszę „google” w pasku adresu, przechodzę na stronę http://www.google.ca, kanadyjską wersję Google’a,, wykrywanie to działa w oparciu o mój adres IP. Zwykle kiedy chcę znaleźć najbliższe kino, po prostu wpisuję tam mój kod pocztowy. Ta informacja jest często przechowywana w witrynie, dlatego łatwiej znaleźć kino następnym razem. W takich sytuacjach jednak wygodniej jest, kiedy aplikacja webowa może automatycznie określić moje położenie. Tak naprawdę nie mam pojęcia, jaki jest kod pocztowy dla Toronto. Potrafię go znaleźć, ale to za dużo zachodu.

Firefox 3.5 zawiera proste API javascriptowe pozwalające na dodanie obsługi geolokalizacji do aplikacji webowej. Pozwala to użytkownikom – opcjonalnie – udostępnić witrynom dane o położeniu bez wprowadzania kodu pocztowego. Poniżej pokrótce przedstawiam, jak wykorzystać geolokalizację w Firefoksie, jak ona działa i jakie środki ostrożności należy mieć na uwadze podczas korzystania z geolokalizacji.

Podstawy

Pobranie danych o położeniu użytkownika jest bardzo proste:

function showPosition(position) {
    alert(position.coords.latitude + “ “ +
    position.coords.longitude);
}
 
navigator.geolocation.getCurrentPosition(showPosition);

Wywołanie metody getCurrentPosition zwraca aktualne położenie geograficzne użytkownika, które potem wyświetlamy w oknie powiadomienia. Położenie jest udostępniane w postaci współrzędnych geograficznych – długości i szerokości geograficznej (pola coords.latitude i coords.longitude – przyp. tłum.). To właśnie takie proste.

Kiedy witryna prosi o udostępnienie informacji o położeniu, użytkownikowi wyświetli się następujący pasek powiadomienia:

Zrzut ekranu - geolokalizacja w Firefoksie

Dostępne opcje pozwalają udostępnić położenie lub nie i zapamiętać tę decyzję.

Obsługa błędów

Istotne jest obsłużenie w kodzie dwóch przypadków błędów:

Po pierwsze, użytkownik może odmówić udostępniania położenia lub zignorować tę prośbę. API pozwala na określenie opcjonalnej procedury obsługi błędu (errorCallback w przykładzie poniżej – przyp. tłum.). Jeśli użytkownik odmówi udzielenia zgody, procedura to zostanie wywołana z odpowiednim kodem błędu. Jeśli użytkownik nie odpowie, procedura nie zostanie wywołana. Aby obsłużyć i ten przypadek, należy dodać parametr timeout do wywołania metody getCurrentPosition, określający czas, po jakim upłynie czas oczekiwania na odpowiedź użytkownika.

navigator.geolocation.getCurrentPosition(successCallback,
                                         errorCallback,
                                         {timeout:30000});

Ten kod sprawi, że funkcja errorCallback zostanie wywołana zarówno, jeśli użytkownik odmówi zgody, jak też po 30 sekundach od wyświetlenia monitu w przypadku, gdy użytkownik na niego nie odpowie.

Po drugie, dokładność określenia położenia użytkownika może być różna. Przyczyn tego jest kilka:

  • Różne metody określenia położenia mają różne stopnie dokładności
  • Użytkownik może nie zechcieć udostępnić witrynie dokładnego położenia.
  • Wiele urządzeń GPS ma ograniczoną dokładność w zależności od widoczności nieba. Jeśli widoczność się pogarsza, pogarsza się dokładność.
  • Wielu urządzeniom GPS zajmuje kilka minut przejście od zgrubnie określonego położenia do dokładnego, nawet przy dobrej widoczności nieba.

(Informacje o dokładności – w metrach – wyznaczonego położenia zawiera pole accuracy obiektu coords – przyp. tłum.)

Przypadki takie będą się zdarzać, dlatego ważne jest wsparcie dla zmian w dokładności.

Aby monitorować zmieniające się położenie, należy zarejestrować procedurę przy użyciu metody watchPosition:

navigator.geolocation.watchPosition(showPosition);

Funkcja showPosition zostanie wywołana przy każdej zmianie położenia.

Można także obserwować zmiany położenia odpytując getCurrentPosition co jakiś czas. Jednakże dla zaoszczędzenia energii i lepszej wydajności zaleca się korzystanie z watchPosition. API typu callback zwykle oszczędzają energię i wywoływane są tylko wtedy, gdy są potrzebne. Dzięki temu przeglądarka jest bardziej responsywna, co jest szczególnie istotne na urządzeniach przenośnych.

Więcej informacji znaleźć można w roboczej specyfikacji API, zawierającej inne przydatne przykłady.

Od kuchni

Istnieje kilka sposobów na określenie położenia. Najpopularniejsze opierają się na informacjach o sieciach WiFi w okolicy, o adresie IP i urządzeniach GPS podłączonych do komputera. W Firefoksie 3.5 do wyznaczenia położenia wykorzystujemy dane o lokalnych sieciach WiFi i adres IP.

Kilka firm objeżdża miasta samochodami z zamontowanymi antenami WiFi, zapisując adresy punktów dostępowych i ich siłę sygnału w danym miejscu. Dane te umieszczane są w wielkiej bazie danych. Następnie, przy pomocy odpowiednich algorytmów można znaleźć odpowiedź na pytanie: „Jeśli widzę takie i takie punkty dostępowe WiFi, to gdzie jestem?”. To jest główny sposób odnajdywania położenia wykorzystywany przez Firefoksa 3.5.

Nie wszyscy jednakże mają karty WiFi, a ponadto nie każde miejsce na świecie zostało przeskanowane pod kątem punktów dostępowych WiFi. W takiej sytuacji Firefox spróbuje użyć adresu IP, korzystając z bazy danych, która mapuje adresy IP do przybliżonego położenia geograficznego. Tak określone położenie jest niestety znacznie mniej dokładne niż to określone przy użyciu WiFi. Na przykład, tutaj w Toronto położenie określone na bazie WiFi ma dokładność ok. 150 metrów. To samo miejsce wyznaczone na podstawie adresu IP ma dokładność około 25 km.

Prywatność

Ochrona prywatności użytkownika jest bardzo ważna dla Mozilli – to część naszej misji. W zakresie danych zbieranych online, informacja o położeniu jest szczególnie delikatna. Unia Europejska uznaje dane o położeniu za dane osobowe (PII, personally identifiable information), które muszą być odpowiednio traktowane (zgodnie z dyrektywą 95/46/EC). Wierzymy, że użytkownicy powinni mieć ścisłą kontrolę nad danymi udostępnianymi witrynom. Dlatego też Firefox pyta przed udostępnieniem witrynie informacji o położeniu, pozwala też użytkownikowi na usunięcie witryn z listy tych, którym udostępniane jest położenie, i udostępnia ustawienia udostępniania w oknie informacji o stronie

Firefox robi, co tylko może, dla ochrony prywatności. Ponadto, grupa robocza geolokalizacji W3C proponuje następujące zasady ochrony prywatności użytkownika dla twórców i operatorów witryn:

  • Odbiorcy danych o położeniu muszą żądać danych o położeniu tylko wtedy, gdy jest to niezbędne.
  • Odbiorcy muszą używać danych o położeniu tylko do celu, dla którego zostały one im przekazane.
  • Odbiorcy muszą pozbyć się informacji o położeniu natychmiast po ukończeniu tego zadania, chyba że użytkownik wprost wyraził zgodę na ich przechowywanie.
  • Odbiorcy muszą również podjąć odpowiednie środki ochrony tych informacji przed niepowołanym dostępem.
  • Jeśli informacje o położeniu są przechowywane, użytkownicy powinni mieć możliwość ich aktualizacji i usunięcia.
  • Odbiorca informacji o położeniu nie może retransmitować tych danych bez zgody użytkownika. Należy zachować ostrożność podczas retransmisji, zaleca się też korzystanie z protokołu HTTPS.
  • Odbiorcy muszą też otwarcie i wyraźnie ujawnić fakt gromadzenia danych o położeniu, przyczynę ich gromadzenia i okres czasu, w jakim są przechowywane, sposób, w jaki są zabezpieczane, sposób, w jaki są współdzielone (jeśli są), jak wielu użytkowników może korzystać, aktualizować i usuwać te dane, jak również wszelkie inne decyzje, jakie są podejmowane w związku z tymi danymi. Ujawnienie to musi zawierać wyjaśnienie wszelkich odstępstw od powyższych wytycznych.

Rzecz jasna, są to dobrowolne sugestie, ale mamy nadzieję, że tworzą one podstawę do dobrego zachowania operatorów witryn, którą użytkownicy pomogą na nich wymusić.

Zastrzeżenia

Zaimplementowaliśmy pierwszą publiczną wersję roboczą specyfikacji geolokalizacji W3C. Mogą w niej zajść drobne zmiany, ale będziemy zachęcali grupę roboczą do zachowania wstecznej kompatybilności.

Jedyny znany nam problem, który może dotyczyć użytkowników tego API, to możliwa zmiana nazwy metody enableHighAccuracy na inną, np. useLowPower. Firefox 3.5 zawiera metodę enableHighAccuracy z przyczyn zgodności, jednakże obecnie nic ona nie robi. Jeśli nazwa zostanie zmieniona, dla zgodności zachowamy obie wersje.

Podsumowanie

Firefox 3.5 to pierwszy krok na drodze do szerszej obsługi geolokalizacji i wielu innych standardów obecnie rozwijanych w różnych grupach roboczych. Spodziewamy się, że ludzie polubią tę funkcjonalność w aplikacjach mapowych, witrynach ze zdjęciami oraz w serwisach takich jak Twitter i Facebook. Najbardziej interesująca dla nas jest jednak wiedza, że ludzie znajdą nowe sposoby wykorzystania tego API, o których my nawet nie pomyśleliśmy. Sieć WWW się zmienia, a informacje o położeniu zaczynają odgrywać w niej istotną rolę. Cieszymy się, że możemy tu pomóc.