Data: URL - załączanie plików w dokumencie
13 sierpnia 2005
Często tworzymy proste strony, złożone z pojedynczego dokumentu. Być może są to wylistowane linki do plików z pracą domową dla znajomych. Być może piszemy jakieś podsumowanie w czystym XHTMLu. Czasem chcemy ozdobić pliki małymi ikonkami wskazującymi na typ pliku. Czasem pragniemy uczłowieczyć dźwiękiem któryś akapit.
I zwykle robimy to dodając malutkie pliki graficzne (albo dźwiękowe) do strony, mozolnie ciułając je w katalogu z tym pojedynczym dokumentem. Niejednokrotnie zastanawiamy się, czemu nie można ich dodać od razu do dokumentu, oszczędzając sobie problemów przy kopiowaniu i rozprzestrzenianiu dokumentu.
Wstęp
No ale dość rozmarzania się. Mądrzy ludzie wpadli na taki pomysł i da się to już osiągnąć. Mowa o sposobie zapisu pliku, czy to od razu w kodzie strony, czy w pliku CSS.
Składnia wygląda tak:
data:[<mediatype>][;base64],<data>
Mediatype to zwyczajnie typ danych. Przykładowo dla pliku GIF jest to image/gif, dla PNG image/png a dla MP3 audio/mp3. Jeśli pominiemy mediatype, zostanie ustawiony na text/plain, a tego w przypadku grafiki czy dźwięku nie chcemy. Na temat parametru base64 można przeczytać w Wikipedii. Data jest oczywiście samym plikiem. Plik możemy przygotować w formacie base64 za pomocą strony The data: URI kitchen. Zaznaczamy checkbox base64, wklejamy link do pliku bądź uploadujemy go z komputera i voila.
Użycie na stronie
Gdy już mamy ciąg Data URL (używam małego pliku GIF), możemy go użyć na stronie WWW. Wersja z wykorzystaniem <img/>:
<img src="data:image/gif;base64,R0lGODlhCgAHAIABAAAAAAAAACH5BAEAAAEALAAAAAAKAAcAAAIPjH%2BACGoeGmyRJglvZqgAADs%3D" alt="small icon" />
Co da taki efekt:
Można też dodać ten plik w formacie Data URL do arkusza CSS i wykorzystywać go jako background-image, list-style-image bądź wklejać przez ::before { content: ...; }:
url(data:image/gif;base64,R0lGODlhCgAHAIABAAAAAAAAACH5BAEAAAEALAAAAAAKAAcAAAIPjH%2BACGoeGmyRJglvZqgAADs%3D);
Zalety
Dzięki możliwości załączenia plików w tekście, w arkuszu CSS, możemy łatwiej tworzyć moduły dla naszych stron. Przykładowo reguły CSS udające elementy interfejsu systemowego, których używam w poradnikach do Konnekta (przykładowa strona) mogą od teraz obyć się bez masy oddzielnych plików. Ponadto wykonujemy HTTP request tylko raz, a nie parenaście/paredziesiąt razy. Nie trzeba mówić jak bardzo przyśpiesza to ładowanie strony.
Wady
Opłaca się tak załączać tylko malutkie pliki. Ale to bardziej logika niż wada. No i opisany sposób działa tylko w nowoczesnych przeglądarkach, takich jak Mozilla czy Opera.
Dodatkowe materiały:
