Popraw użyteczność swoich formularzy dzięki nowym kontrolom

Twoje formularze stały się łatwiejsze w użyciu. Przeglądarki HTML5 zawierają nowe elementy sterujące, takie jak typ wprowadzania daty, tag < range > i inne. Rozmawialiśmy teraz o elementach formularza dla kilku ostatnich hacków i wszystkie mają wspólny wątek, jeśli chodzi o rozumowanie. Wiele z tych prostych, łatwych do wdrożenia specyfikacji faktycznie zastępuje standardy, do których programiści opracowują strony internetowe od lat. Ułatwiło to programistom życie, przyspieszyło działanie stron (kod przeglądarki zamiast JavaScript) i zapewniło jednolitość w aplikacjach internetowych. Skupmy się trochę na jednolitości. Na przykład spójrzmy na typ wprowadzania daty. W przeszłości twórcy stron internetowych opracowali standard wyboru daty podobny do pokazanego na rysunku, który pochodzi z popularnej biblioteki YUI.



Jest to ogromna poprawa w stosunku do tego, czy użytkownik wpisuje datę w polu wejściowym i ma nadzieję, że spełni wymagany format. Za pomocą selektora dat YUI możemy stylizować komponent za pomocą CSS i sprawić, aby wyglądał, jakby idealnie pasował do naszej aplikacji. Służy to naszym celom od lat. Bez względu na to, czy korzystamy z przeglądarki Internet Explorer, czy Firefox, nasz moduł wyboru daty będzie wyglądał tak samo, a użytkownik zawsze będzie wiedział, czego się spodziewać. Wraz z mobilnością. Przeglądarki mobilne przeważnie korzystają z tej samej sieci, co nasze komputery stacjonarne. Jeśli natrafisz na ten sam wybieracz dat na iPhonie, to wcześniej wspaniałe doświadczenie staje się trudne. Ponieważ komponent nie zna treści natywnej (w tym scenariuszu ma mały ekran), nie może dostosować się do kontekstu. Wielu zapalonych ninja JavaScript zaczęło już myśleć o tym, jak wykorzystać Deklarację agenta użytkownika (część żądania), aby dostosować ten selektor dat do kontekstu każdego znanego agenta użytkownika. To świetny pomysł, a wiele naszych bibliotek wypełniania, takich jak YUI, jest o krok do przodu i zapewnia ustępstwa dla małych ekranów. Niestety jedynym sposobem na zrobienie tego bez HTML5 jest dodanie dodatkowego kodu. I więcej JavaScript, więcej znaczników i więcej CSS równa się nadęciu strony i dodatkowemu wykorzystaniu pamięci. Użyjmy tego dodatkowego kodu i pamięci do czegoś spektakularnego i pozostawmy podstawowe funkcje wprowadzania danych w przeglądarce. Każda z poniższych funkcji formularza wymaga czegoś, co kiedyś było trudne w JavaScript, i sprawia, że jest to łatwe, lekkie i uwzględniające kontekst.

Typ input Data

Typ input data jest jednym z moich ulubionych. Podobnie jak w poprzednim przykładzie wyboru daty, wiele pracy poświęcono na stworzenie skutecznego narzędzia do wybierania dat. Nie mogę powiedzieć, ile razy byłem sfrustrowany częściami sieci korzystającymi z powolnych i wadliwych narzędzi do wybierania dat (tak, mam na myśli Ciebie, linie lotnicze i wypożyczalnie samochodów). Typ wprowadzania daty HTML5 jest dość prosty do wdrożenia. Po wyjęciu z pudełka wygląda to tak:

< form name = "dateSelection" >

Wpisz datę odjazdu: < input type = "date" name = "departingDate" / >

< /form >

Powyższy kod skutkuje prostym rozwijanym polem pokazanym na rysunku



Jeśli chodzi o kontekst, oto świetna rzecz z poprzedniego przykładu. W tej chwili wybór daty będzie trudny w użyciu na moim iPhonie; nie tylko trudno jest zobaczyć, ale także moje palce są dość grube, a te strefy ekranu są dość małe.

Teraz spójrzmy na niektóre inne atrybuty, które możemy dodać, aby nadać tej aplikacji funkcjonalność podobną do tych wspaniałych, małych, wielozadaniowych urządzeń do wybierania dat. Oto kod:

< form name="dateSelection" >

Enter Departing Date: < input type="date" min="2012-03-12" step="1"

max="2012-05-12" name="departingDate" / >

< input type="submit" / >

< /form >

Spójrzmy na niektóre z nich bardziej szczegółowo:

step

Przyrost, według którego można wybrać datę. Specyfikacja nie wyjaśnia wszystkich typów przyrostów, których musi przestrzegać klient użytkownika, ale dzień, tydzień, miesiąc i rok są oczywistymi implementacjami.

min

Wartość daty reprezentująca minimalną datę, którą dane wejściowe uznają za prawidłowe. Nie jest jasne, czy kontroler pozwoli ci wybrać daty poniżej minimalnej daty, czy ogranicza wybór do prawidłowego zakresu dat. W tym momencie implementacje różnią się między twórcami przeglądarek.

max

Wartość daty reprezentująca maksymalną datę, którą dane wejściowe uznają za prawidłowe. Podobnie jak w przypadku wszystkich ważnych zmian, dodano również nowy zestaw metod DOM:

stepUp() / stepDown()

Może być wywołany w celu zwiększenia daty wprowadzanej do następnej lub poprzedniej daty w serii. wywołania stepUp () następnego dnia; Wywołanie stepDown() poprzedniego dnia.

valueAsDate()

Zwraca obiekt daty JavaScript, a nie tylko ciąg daty. To może nie zabrzmieć ekscytująco, ale możesz zastąpić tę polifill:

< form name="myForm" >

Birthday: < input type="text" name="bday" value="03/12/2012" / >

< input type="submit" / >

< /form >

< script >

var myInput = document.myForm.bday.value;

var myDate = new Date(myInput);

< /script >

Z tym:

< form name="myForm" >

Birthday: < input type="date" name="bday" value="2012-03-12" / >

< input type="submit" / >

< /form >

< script >

var myInput = document.myForm.bday.valueAsDate();

< /script >

Warto również zauważyć, że istnieje kilka odmian typu wprowadzania daty, a każda z nich stanowi godne uwagi wyzwania dotyczące interfejsu, szczególnie na urządzeniach mobilnych i dotykowych. Oto kilka podobnych typów, na które należy zwracać uwagę:

datetime

month

week

time

datetime-local

Typ wejścia range

Jeszcze raz spójrzmy na jedną z naszych wspaniałych bibliotek wypełniania wielozadaniowego, aby dowiedzieć się, na czym polega problem. Rysunek 1-8 pokazuje zrzut ekranu narzędzia suwaka YUI:



Kiedy wybierasz zakresy, nie ma nic gorszego niż wpisywanie wartości, zwłaszcza gdy "odkrywasz", co się stanie, gdy te zakresy się zmienią. Suwak stał się standardowym narzędziem na urządzeniach internetowych i stacjonarnych. Na ogół masz pasek reprezentujący coś w rodzaju wartości liczbowych lub kolorów oraz uchwyt, który przeciągasz z jednego końca paska na drugi. Ponownie zastanówmy się, jak trudne może być wybranie suwaka YUI, jeśli używasz urządzenia mobilnego. Uchwyt jest niewielki, a suwak może wydawać się niewielkim ruchem na urządzeniu mobilnym.

Zakres typu HTML5 pozwala twórcom przeglądarek udostępnić narzędzie do wyboru zakresu, które najlepiej pasuje do kontekstu urządzenia. Wzór dla przeglądarek na pulpicie wydaje się być suwakiem. Przejdźmy do implementacji:

< form name="myForm" >

Shoe size: < input type="range" name="shoeSize" min="0" max="15" step=".5" value="3" / >

< input type="submit" / >

< /form >

Wszystko to bez JavaScriptu - ta polifill ma kod setek kilobajtów. Teraz spójrzmy na niektóre atrybuty, które dodaliśmy do danych wejściowych:

min/max

Po raz kolejny widzimy możliwość ustawienia wartości minimalnej i maksymalnej dla zakresu. Są one nieco głębsze w typie wprowadzania zakresu, ponieważ definiują pierwszy krok (dół suwaka) i górę (górę suwaka). Jeśli nie zostaną ustawione wartości min i max, agent użytkownika (ponownie przeglądarka) przyjmie zakres od 0 do 100.

step

W poprzednim przykładzie wybieramy rozmiary butów, które są w połowie lub w całości. Dlatego ustawiamy krok na .5, aby można było wybrać całe lub pół rozmiaru. Może się to przydać także w bardzo dużych zasięgach. Załóżmy, że ubiegasz się o pożyczkę i korzystasz z narzędzia zasięgu, aby wybrać kwotę pożyczki. Aby zwiększyć komfort użytkowania, możesz zaokrąglić w górę do najbliższych 10 000 USD. Ustawienie kroku na 10 000 pozwoli ci to zrobić.

value

Setki razy widzieliśmy wartość, jeśli chodzi o dane wejściowe: pozwala nam ustawić wartość początkową tego wejścia. Jest to szczególnie interesujące ze względu na typ wejścia zakresu, ponieważ nie ma wartości "zerowej". Ponieważ jest to suwak, nie ma punktu, w którym wartość byłaby niezdefiniowana, więc klient użytkownika wybierze dla ciebie rozsądną wartość domyślną - coś w środku zakresu. W naszym przykładzie wybraliśmy naszą wartość na 3, ponieważ najpopularniejszym rozmiarem butów w naszym małym sklepie jest rozmiar 3. (Tak, zaspokajamy potrzeby elfów, krasnoludków i małych dzieci.) Wartość ta pozwala wybrać "domyślne" "Wartość, która ma największy sens, nie tylko to, co jest w środku.

Dodatkową zaletą suwaków w wersji HTML5 jest możliwość dopasowania do innych elementów sterujących przeglądarki.

Kiedy wybierasz zakresy, nie ma nic gorszego niż wpisywanie wartości, zwłaszcza gdy "odkrywasz", co się stanie, gdy te zakresy się zmienią. Suwak stał się standardowym narzędziem na urządzeniach internetowych i stacjonarnych. Na ogół masz pasek reprezentujący coś w rodzaju wartości liczbowych lub kolorów oraz uchwyt, który przeciągasz z jednego końca paska na drugi. Ponownie zastanówmy się, jak trudne może być wybranie suwaka YUI, jeśli używasz urządzenia mobilnego. Uchwyt jest niewielki, a suwak może wydawać się niewielkim ruchem na urządzeniu mobilnym.

Zakres typu HTML5 pozwala twórcom przeglądarek udostępnić narzędzie do wyboru zakresu, które najlepiej pasuje do kontekstu urządzenia. Wzór dla przeglądarek na pulpicie wydaje się być suwakiem. Przejdźmy do implementacji:

< form name="myForm" >

Shoe size: < input type="range" name="shoeSize" min="0" max="15" step=".5" value="3" / >

< input type="submit" / >

< /form >

Wszystko to bez JavaScriptu - ten polifill ma kod setek kilobajtów. Teraz spójrzmy na niektóre atrybuty, które dodaliśmy do danych wejściowych:

min/max

Po raz kolejny widzimy możliwość ustawienia wartości minimalnej i maksymalnej dla zakresu. Są one nieco głębsze w typie wprowadzania zakresu, ponieważ definiują pierwszy krok (dół suwaka) i górę (górę suwaka). Jeśli nie zostaną ustawione wartości min i max, agent użytkownika (ponownie przeglądarka) przyjmie zakres od 0 do 100.

step

W poprzednim przykładzie wybieramy rozmiary butów, które są w połowie lub w całości. Dlatego ustawiamy krok na .5, aby można było wybrać całe lub pół rozmiaru. Może się to przydać także w bardzo dużych zasięgach. Załóżmy, że ubiegasz się o pożyczkę i korzystasz z narzędzia zasięgu, aby wybrać kwotę pożyczki. Aby zwiększyć komfort użytkowania, możesz zaokrąglić w górę do najbliższych 10 000 USD. Ustawienie kroku na 10 000 pozwoli ci to zrobić.

value

Setki razy widzieliśmy wartość, jeśli chodzi o dane wejściowe: pozwala nam ustawić wartość początkową tego wejścia. Jest to szczególnie interesujące ze względu na typ wejścia zakresu, ponieważ nie ma wartości "zerowej". Ponieważ jest to suwak, nie ma punktu, w którym wartość byłaby niezdefiniowana, więc klient użytkownika wybierze dla ciebie rozsądną wartość domyślną - coś w środku zakresu. W naszym przykładzie wybraliśmy naszą wartość na 3, ponieważ najpopularniejszym rozmiarem butów w naszym małym sklepie jest rozmiar 3. (Tak, zaspokajamy potrzeby elfów, krasnoludków i małych dzieci.) Wartość ta pozwala wybrać "domyślne" "Wartość, która ma największy sens, nie tylko to, co jest w środku.Wersja suwaków HTML5 ma również tę dodatkową zaletę, że jest w stanie dopasować inne elementy sterujące przeglądarki. Warto również zauważyć, że narzędzie zasięgu można powiązać z datalistą. Datalista może zawierać wartości nienumeryczne lub nierówne wartości liczbowe, które można wybrać w zakresie. Nie widziałem jeszcze żadnych twórców przeglądarek, którzy to zaimplementowali, ale interesujące będą pewne możliwości.

Typ wejściowy color

Być może nie myślałeś, że próbnik kolorów jest niezbędny do korzystania z Internetu przez użytkownika, ale ponieważ Internet staje się bardziej środowiskiem aplikacji, złożone czynności, takie jak wybieranie kolorów, muszą być responsywne i adaptacyjne. Typ wejścia koloru pozwala wybrać wartość koloru z wejścia. Obsługa tego typu danych wejściowych jest wciąż rodząca się, a w chwili pisania tego tekstu żaden program użytkownika nie obsługuje tego. Podobnie jak w przypadku wszystkich innych nieobsługiwanych typów wprowadzania, przeglądarki, które nie obsługują (lub jeszcze nie obsługują) typu wprowadzania koloru, po prostu zobaczą znacznik wprowadzania, tak jak wyglądałby dla wejścia o typie równym tekstowi.

Znaczniki < meter > i < progres > Przechodząc nieco poza przestrzeń wejściową, ale pozostając w formularzu HTML5, widzimy dwa nowe komponenty formularza, które szybko staną się podstawowymi elementami składowymi aplikacji internetowych. Pierwszym z nich jest znacznik < meter >. Aby uzyskać jasną definicję, przejdźmy do specyfikacji:

Element meter reprezentuje pomiar skalarny w znanym zakresie lub wartość ułamkową; na przykład użycie dysku, trafność wyniku zapytania lub część populacji głosującej, która wybrała konkretnego kandydata.

Pomyśl o meter jak o słupku z wykresu słupkowego. Jest to graficzna reprezentacja jednej liczby jako części większej liczby. Spójrzmy na przykład kodu:

< form name="myForm" >

30%: < meter value="3" min="0" max="10">< /meter >


30%: < meter value="0.3" low="0.4" >30%< /meter >

< /form >

Ten konkretny element formularza ma kilka interesujących elementów sterujących interfejsu użytkownika. Z poprzedniego przykładu widać, że miernik musi mieć ustawioną wartość, a także zakres, aby był skuteczny. Atrybuty min i max ustawią zakres (licznik jest odpowiednio pusty i licznik jest odpowiednio pełny), a wartość określa bieżący poziom napełnienia. Jeśli brakuje jednego z atrybutów, formularz przyjmuje wartość - na przykład prawdopodobnie będzie to wartość niezdefiniowana uważane za zero przez większość programów użytkownika. Dodatkowo do miernika można dodać trzy inne atrybuty w celu sterowania interfejsem. Optymalna wartość wyświetli graficzną reprezentację tego, co idealna wartość byłaby. Niskie i wysokie atrybuty służą do ustawiania progów, gdy miernik znajduje się poniżej lub powyżej optymalnego zakresu. Interfejs powinien odpowiednio reagować; obecne implementacje przeglądarki zmieniają kolor licznika na żółty dla "niskiego" i czerwony dla "wysokiego". Tag < progress > jest również nowy w formularzach HTML5. Pomyśl o znaczniku < progress > jako o pasku, który pojawia się podczas pobierania pliku, aby poinformować Cię, jak długo trzeba czekać. Implementacja kodu wyglądałaby następująco:

< form name = "myForm" >

Postęp pobierania:

< progress value="35" max="100" >

< /progres >

< /form >

Znacznik < progres > ma tylko kilka atrybutów konfiguracyjnych i oba są pokazane w poprzednim kodzie. Pierwszy to atrybut max, który mówi ci, jaki jest twój "cel" twojego postępu. Maksymalna wartość będzie na górze twojego licznika; dno zawsze będzie wynosić zero. Twoja wartość określa następnie postęp, a tym samym, ile paska postępu jest wypełnione. Po raz kolejny te dwa nowe tagi są przykładami standardów internetowych, które tradycyjnie były implementowane za pomocą JavaScript i CSS, ale teraz można je osiągnąć bezpośrednio przez HTML5. Każdy tag powinien wyglądać odpowiednio do kontekstu aplikacji.

Tworzą elementy i sprawiają, że wyglądają dobrze

Jedną wspólną cechą wszystkich elementów formularza jest to, że wyglądają źle. Odkąd zacząłem pracować z formularzami prawie 15 lat temu, staram się znaleźć sposoby, aby poprawić ich wygląd. Doskonałym tego przykładem jest menu rozwijane. Lista rozwijana wygląda dość prosto. Jednak trudno jest zrobić z nimi coś specjalnego, na przykład dodać tekst pomocy do opcji lub kontrolować szerokość menu, gdy zawiera opcje z dużą ilością tekstu. HTML5 i CSS3 przynoszą nam dobre i złe wiadomości. Dobra wiadomość jest taka, że możemy używać CSS do kontrolowania wielu zabiegów, które obejrzeliśmy w tym hacku. Zła wiadomość jest taka, że nie możemy kontrolować wszystkich. Spójrzmy na kilka przykładów.

< form name = "myForm" >

< input type = "number" value = "5" / >

< input type = "Submit" / >

< /form >

// css

< styl >

input [type = number] :: - webkit-inner-spin-button,

input [type = number] :: - webkit-outer-spin-button {

-webkit-wygląd: brak;

margines: 0;

}

< /style >

W poprzednim przykładzie mamy typ wprowadzania liczb z kilkoma funky pokrętłami, aby zwiększać i zmniejszać liczbę. Nie chcemy funkcjonalnych przycisków, więc w CSS określamy (z prefiksami przeglądarki) podskładniki, które chcemy zmienić. W tym przypadku są to -webkit-inner-spinbutton i -webkit-outer-spin-button. Po prostu ukrywamy je w tym przykładzie.

UWAGA

Twórcy przeglądarek zwiększają elastyczność wielu formantów formularzy. Większość twórców przeglądarek pozwala również zmieniać wygląd wyskakujących okien błędów sprawdzania poprawności. Niektóre komponenty, takie jak typy danych daty i koloru, mogą nie mieć kontrolek podskładników CSS.

Pamiętaj, że ta kontrola jest zarówno dobra, jak i zła. Dobrze, gdy po prostu nie lubisz wrażeń prezentowanych przez klienta użytkownika i musisz samodzielnie zaktualizować wygląd. Z drugiej strony źle jest wprowadzać zmiany w tych elementach, ponieważ nie mają one możliwości dostosowania się do kontekstu, w którym są używane. Pamiętasz menu rozwijane, na które narzekałem wcześniej? Cóż, iOS znalazł sposób, aby zmienić go w genialny wkład użytkowników na iPada i iPhone′a. Na iPhonie staje się wejściem obrotowym u dołu ekranu. Na iPadzie staje się rozwijanym oknem w kontekście Select Box. W obu przypadkach dane wejściowe są dobrze dostosowane do kontekstu. Jeśli miałeś przesłonięcia CSS na tych komponentach, kto wie, jak wyglądałoby to dla użytkownika końcowego na urządzeniu z systemem iOS

Podsumowując

Teraz, gdy poznaliśmy wewnętrzne działanie formularzy, powinieneś być gotowy do zanurzenia się w niektórych aplikacjach HTML5. Formularze są nadal podstawowymi elementami składowymi stron, a zrozumienie formularzy to zrozumienie HTML5. Więc chodźmy i wejdźmy!

Twoje formularze stały się łatwiejsze w użyciu. Przeglądarki HTML5 zawierają nowe elementy sterujące, takie jak typ wprowadzania daty, tag < range > i inne. Rozmawialiśmy teraz o elementach formularza dla kilku ostatnich hacków i wszystkie mają wspólny wątek, jeśli chodzi o rozumowanie. Wiele z tych prostych, łatwych do wdrożenia specyfikacji faktycznie zastępuje standardy, do których programiści opracowują strony internetowe od lat. Ułatwiło to programistom życie, przyspieszyło działanie stron (kod przeglądarki zamiast JavaScript) i zapewniło jednolitość w aplikacjach internetowych. Skupmy się trochę na jednolitości. Na przykład spójrzmy na typ wprowadzania daty. W przeszłości twórcy stron internetowych opracowali standard wyboru daty podobny do pokazanego na rysunku, który pochodzi z popularnej biblioteki YUI.



Jest to ogromna poprawa w stosunku do tego, czy użytkownik wpisuje datę w polu wejściowym i ma nadzieję, że spełni wymagany format. Za pomocą selektora dat YUI możemy stylizować komponent za pomocą CSS i sprawić, aby wyglądał, jakby idealnie pasował do naszej aplikacji. Służy to naszym celom od lat. Bez względu na to, czy korzystamy z przeglądarki Internet Explorer, czy Firefox, nasz moduł wyboru daty będzie wyglądał tak samo, a użytkownik zawsze będzie wiedział, czego się spodziewać. Wraz z mobilnością. Przeglądarki mobilne przeważnie korzystają z tej samej sieci, co nasze komputery stacjonarne. Jeśli natrafisz na ten sam wybieracz dat na iPhonie, to wcześniej wspaniałe doświadczenie staje się trudne. Ponieważ komponent nie zna treści natywnej (w tym scenariuszu ma mały ekran), nie może dostosować się do kontekstu. Wielu zapalonych ninja JavaScript zaczęło już myśleć o tym, jak wykorzystać Deklarację agenta użytkownika (część żądania), aby dostosować ten selektor dat do kontekstu każdego znanego agenta użytkownika. To świetny pomysł, a wiele naszych bibliotek wypełniania, takich jak YUI, jest o krok do przodu i zapewnia ustępstwa dla małych ekranów. Niestety jedynym sposobem na zrobienie tego bez HTML5 jest dodanie dodatkowego kodu. I więcej JavaScript, więcej znaczników i więcej CSS równa się nadęciu strony i dodatkowemu wykorzystaniu pamięci. Użyjmy tego dodatkowego kodu i pamięci do czegoś spektakularnego i pozostawmy podstawowe funkcje wprowadzania danych w przeglądarce. Każda z poniższych funkcji formularza wymaga czegoś, co kiedyś było trudne w JavaScript, i sprawia, że jest to łatwe, lekkie i uwzględniające kontekst.

Typ input Data

Typ input data jest jednym z moich ulubionych. Podobnie jak w poprzednim przykładzie wyboru daty, wiele pracy poświęcono na stworzenie skutecznego narzędzia do wybierania dat. Nie mogę powiedzieć, ile razy byłem sfrustrowany częściami sieci korzystającymi z powolnych i wadliwych narzędzi do wybierania dat (tak, mam na myśli Ciebie, linie lotnicze i wypożyczalnie samochodów). Typ wprowadzania daty HTML5 jest dość prosty do wdrożenia. Po wyjęciu z pudełka wygląda to tak:

< form name = "dateSelection" >

Wpisz datę odjazdu:

< /form >

Powyższy kod skutkuje prostym rozwijanym polem pokazanym na rysunku



Jeśli chodzi o kontekst, oto świetna rzecz z poprzedniego przykładu. W tej chwili wybór daty będzie trudny w użyciu na moim iPhonie; nie tylko trudno jest zobaczyć, ale także moje palce są dość grube, a te strefy ekranu są dość małe.

Teraz spójrzmy na niektóre inne atrybuty, które możemy dodać, aby nadać tej aplikacji funkcjonalność podobną do tych wspaniałych, małych, wielozadaniowych urządzeń do wybierania dat. Oto kod:

< form name="dateSelection" >

Enter Departing Date:
max="2012-05-12" name="departingDate" / >

< input type="submit" / >

< /form >

Spójrzmy na niektóre z nich bardziej szczegółowo:

step

Przyrost, według którego można wybrać datę. Specyfikacja nie wyjaśnia wszystkich typów przyrostów, których musi przestrzegać klient użytkownika, ale dzień, tydzień, miesiąc i rok są oczywistymi implementacjami.

min

Wartość daty reprezentująca minimalną datę, którą dane wejściowe uznają za prawidłowe. Nie jest jasne, czy kontroler pozwoli ci wybrać daty poniżej minimalnej daty, czy ogranicza wybór do prawidłowego zakresu dat. W tym momencie implementacje różnią się między twórcami przeglądarek.

max

Wartość daty reprezentująca maksymalną datę, którą dane wejściowe uznają za prawidłowe. Podobnie jak w przypadku wszystkich ważnych zmian, dodano również nowy zestaw metod DOM:

stepUp() / stepDown()

Może być wywołany w celu zwiększenia daty wprowadzanej do następnej lub poprzedniej daty w serii. wywołania stepUp () następnego dnia; Wywołanie stepDown() poprzedniego dnia.

valueAsDate()

Zwraca obiekt daty JavaScript, a nie tylko ciąg daty. To może nie zabrzmieć ekscytująco, ale możesz zastąpić tę polifill:

< form name="myForm" >

Birthday:

< input type="submit" / >

< /form >

< script >

var myInput = document.myForm.bday.value;

var myDate = new Date(myInput);

< /script >

Z tym:

< form name="myForm" >

Birthday: < input type="date" name="bday" value="2012-03-12" / >

< input type="submit" / >

< /form >

< script >

var myInput = document.myForm.bday.valueAsDate();

< /script >

Warto również zauważyć, że istnieje kilka odmian typu wprowadzania daty, a każda z nich stanowi godne uwagi wyzwania dotyczące interfejsu, szczególnie na urządzeniach mobilnych i dotykowych. Oto kilka podobnych typów, na które należy zwracać uwagę:

datetime

month

week

time

datetime-local

Typ wejścia range

Jeszcze raz spójrzmy na jedną z naszych wspaniałych bibliotek wypełniania wielozadaniowego, aby dowiedzieć się, na czym polega problem. Rysunek 1-8 pokazuje zrzut ekranu narzędzia suwaka YUI:



Kiedy wybierasz zakresy, nie ma nic gorszego niż wpisywanie wartości, zwłaszcza gdy "odkrywasz", co się stanie, gdy te zakresy się zmienią. Suwak stał się standardowym narzędziem na urządzeniach internetowych i stacjonarnych. Na ogół masz pasek reprezentujący coś w rodzaju wartości liczbowych lub kolorów oraz uchwyt, który przeciągasz z jednego końca paska na drugi. Ponownie zastanówmy się, jak trudne może być wybranie suwaka YUI, jeśli używasz urządzenia mobilnego. Uchwyt jest niewielki, a suwak może wydawać się niewielkim ruchem na urządzeniu mobilnym.

Zakres typu HTML5 pozwala twórcom przeglądarek udostępnić narzędzie do wyboru zakresu, które najlepiej pasuje do kontekstu urządzenia. Wzór dla przeglądarek na pulpicie wydaje się być suwakiem. Przejdźmy do implementacji:

< form name="myForm" >

Shoe size: < input type="range" name="shoeSize" min="0" max="15" step=".5" value="3" / >

< input type="submit" / >

< /form >

Wszystko to bez JavaScriptu - ta polifill ma kod setek kilobajtów. Teraz spójrzmy na niektóre atrybuty, które dodaliśmy do danych wejściowych:

min/max

Po raz kolejny widzimy możliwość ustawienia wartości minimalnej i maksymalnej dla zakresu. Są one nieco głębsze w typie wprowadzania zakresu, ponieważ definiują pierwszy krok (dół suwaka) i górę (górę suwaka). Jeśli nie zostaną ustawione wartości min i max, agent użytkownika (ponownie przeglądarka) przyjmie zakres od 0 do 100.

step

W poprzednim przykładzie wybieramy rozmiary butów, które są w połowie lub w całości. Dlatego ustawiamy krok na .5, aby można było wybrać całe lub pół rozmiaru. Może się to przydać także w bardzo dużych zasięgach. Załóżmy, że ubiegasz się o pożyczkę i korzystasz z narzędzia zasięgu, aby wybrać kwotę pożyczki. Aby zwiększyć komfort użytkowania, możesz zaokrąglić w górę do najbliższych 10 000 USD. Ustawienie kroku na 10 000 pozwoli ci to zrobić.

value

Setki razy widzieliśmy wartość, jeśli chodzi o dane wejściowe: pozwala nam ustawić wartość początkową tego wejścia. Jest to szczególnie interesujące ze względu na typ wejścia zakresu, ponieważ nie ma wartości "zerowej". Ponieważ jest to suwak, nie ma punktu, w którym wartość byłaby niezdefiniowana, więc klient użytkownika wybierze dla ciebie rozsądną wartość domyślną - coś w środku zakresu. W naszym przykładzie wybraliśmy naszą wartość na 3, ponieważ najpopularniejszym rozmiarem butów w naszym małym sklepie jest rozmiar 3. (Tak, zaspokajamy potrzeby elfów, krasnoludków i małych dzieci.) Wartość ta pozwala wybrać "domyślne" "Wartość, która ma największy sens, nie tylko to, co jest w środku.

Dodatkową zaletą suwaków w wersji HTML5 jest możliwość dopasowania do innych elementów sterujących przeglądarki.

Kiedy wybierasz zakresy, nie ma nic gorszego niż wpisywanie wartości, zwłaszcza gdy "odkrywasz", co się stanie, gdy te zakresy się zmienią. Suwak stał się standardowym narzędziem na urządzeniach internetowych i stacjonarnych. Na ogół masz pasek reprezentujący coś w rodzaju wartości liczbowych lub kolorów oraz uchwyt, który przeciągasz z jednego końca paska na drugi. Ponownie zastanówmy się, jak trudne może być wybranie suwaka YUI, jeśli używasz urządzenia mobilnego. Uchwyt jest niewielki, a suwak może wydawać się niewielkim ruchem na urządzeniu mobilnym.

Zakres typu HTML5 pozwala twórcom przeglądarek udostępnić narzędzie do wyboru zakresu, które najlepiej pasuje do kontekstu urządzenia. Wzór dla przeglądarek na pulpicie wydaje się być suwakiem. Przejdźmy do implementacji:

< form name="myForm" >

Shoe size: < input type="range" name="shoeSize" min="0" max="15" step=".5" value="3" / >

< input type="submit" / >

< /form >

Wszystko to bez JavaScriptu - ten polifill ma kod setek kilobajtów. Teraz spójrzmy na niektóre atrybuty, które dodaliśmy do danych wejściowych:

min/max

Po raz kolejny widzimy możliwość ustawienia wartości minimalnej i maksymalnej dla zakresu. Są one nieco głębsze w typie wprowadzania zakresu, ponieważ definiują pierwszy krok (dół suwaka) i górę (górę suwaka). Jeśli nie zostaną ustawione wartości min i max, agent użytkownika (ponownie przeglądarka) przyjmie zakres od 0 do 100.

step

W poprzednim przykładzie wybieramy rozmiary butów, które są w połowie lub w całości. Dlatego ustawiamy krok na .5, aby można było wybrać całe lub pół rozmiaru. Może się to przydać także w bardzo dużych zasięgach. Załóżmy, że ubiegasz się o pożyczkę i korzystasz z narzędzia zasięgu, aby wybrać kwotę pożyczki. Aby zwiększyć komfort użytkowania, możesz zaokrąglić w górę do najbliższych 10 000 USD. Ustawienie kroku na 10 000 pozwoli ci to zrobić.

value

Setki razy widzieliśmy wartość, jeśli chodzi o dane wejściowe: pozwala nam ustawić wartość początkową tego wejścia. Jest to szczególnie interesujące ze względu na typ wejścia zakresu, ponieważ nie ma wartości "zerowej". Ponieważ jest to suwak, nie ma punktu, w którym wartość byłaby niezdefiniowana, więc klient użytkownika wybierze dla ciebie rozsądną wartość domyślną - coś w środku zakresu. W naszym przykładzie wybraliśmy naszą wartość na 3, ponieważ najpopularniejszym rozmiarem butów w naszym małym sklepie jest rozmiar 3. (Tak, zaspokajamy potrzeby elfów, krasnoludków i małych dzieci.) Wartość ta pozwala wybrać "domyślne" "Wartość, która ma największy sens, nie tylko to, co jest w środku.Wersja suwaków HTML5 ma również tę dodatkową zaletę, że jest w stanie dopasować inne elementy sterujące przeglądarki. Warto również zauważyć, że narzędzie zasięgu można powiązać z datalistą. Datalista może zawierać wartości nienumeryczne lub nierówne wartości liczbowe, które można wybrać w zakresie. Nie widziałem jeszcze żadnych twórców przeglądarek, którzy to zaimplementowali, ale interesujące będą pewne możliwości.

Typ wejściowy color

Być może nie myślałeś, że próbnik kolorów jest niezbędny do korzystania z Internetu przez użytkownika, ale ponieważ Internet staje się bardziej środowiskiem aplikacji, złożone czynności, takie jak wybieranie kolorów, muszą być responsywne i adaptacyjne. Typ wejścia koloru pozwala wybrać wartość koloru z wejścia. Obsługa tego typu danych wejściowych jest wciąż rodząca się, a w chwili pisania tego tekstu żaden program użytkownika nie obsługuje tego. Podobnie jak w przypadku wszystkich innych nieobsługiwanych typów wprowadzania, przeglądarki, które nie obsługują (lub jeszcze nie obsługują) typu wprowadzania koloru, po prostu zobaczą znacznik wprowadzania, tak jak wyglądałby dla wejścia o typie równym tekstowi.

Znaczniki < meter > i < progres > Przechodząc nieco poza przestrzeń wejściową, ale pozostając w formularzu HTML5, widzimy dwa nowe komponenty formularza, które szybko staną się podstawowymi elementami składowymi aplikacji internetowych. Pierwszym z nich jest znacznik < meter >. Aby uzyskać jasną definicję, przejdźmy do specyfikacji:

Element meter reprezentuje pomiar skalarny w znanym zakresie lub wartość ułamkową; na przykład użycie dysku, trafność wyniku zapytania lub część populacji głosującej, która wybrała konkretnego kandydata.

Pomyśl o meter jak o słupku z wykresu słupkowego. Jest to graficzna reprezentacja jednej liczby jako części większej liczby. Spójrzmy na przykład kodu:

< form name="myForm" >

30%: < meter value="3" min="0" max="10">< /meter >


30%: < meter value="0.3" low="0.4" >30%< /meter >

< /form >

Ten konkretny element formularza ma kilka interesujących elementów sterujących interfejsu użytkownika. Z poprzedniego przykładu widać, że miernik musi mieć ustawioną wartość, a także zakres, aby był skuteczny. Atrybuty min i max ustawią zakres (licznik jest odpowiednio pusty i licznik jest odpowiednio pełny), a wartość określa bieżący poziom napełnienia. Jeśli brakuje jednego z atrybutów, formularz przyjmuje wartość - na przykład prawdopodobnie będzie to wartość niezdefiniowana uważane za zero przez większość programów użytkownika. Dodatkowo do miernika można dodać trzy inne atrybuty w celu sterowania interfejsem. Optymalna wartość wyświetli graficzną reprezentację tego, co idealna wartość byłaby. Niskie i wysokie atrybuty służą do ustawiania progów, gdy miernik znajduje się poniżej lub powyżej optymalnego zakresu. Interfejs powinien odpowiednio reagować; obecne implementacje przeglądarki zmieniają kolor licznika na żółty dla "niskiego" i czerwony dla "wysokiego". Tag < progress > jest również nowy w formularzach HTML5. Pomyśl o znaczniku < progress > jako o pasku, który pojawia się podczas pobierania pliku, aby poinformować Cię, jak długo trzeba czekać. Implementacja kodu wyglądałaby następująco:

< form name = "myForm" >

Postęp pobierania:

< progress value="35" max="100" >

< /progres >

< /form >

Znacznik < progres > ma tylko kilka atrybutów konfiguracyjnych i oba są pokazane w poprzednim kodzie. Pierwszy to atrybut max, który mówi ci, jaki jest twój "cel" twojego postępu. Maksymalna wartość będzie na górze twojego licznika; dno zawsze będzie wynosić zero. Twoja wartość określa następnie postęp, a tym samym, ile paska postępu jest wypełnione. Po raz kolejny te dwa nowe tagi są przykładami standardów internetowych, które tradycyjnie były implementowane za pomocą JavaScript i CSS, ale teraz można je osiągnąć bezpośrednio przez HTML5. Każdy tag powinien wyglądać odpowiednio do kontekstu aplikacji.

Tworzą elementy i sprawiają, że wyglądają dobrze

Jedną wspólną cechą wszystkich elementów formularza jest to, że wyglądają źle. Odkąd zacząłem pracować z formularzami prawie 15 lat temu, staram się znaleźć sposoby, aby poprawić ich wygląd. Doskonałym tego przykładem jest menu rozwijane. Lista rozwijana wygląda dość prosto. Jednak trudno jest zrobić z nimi coś specjalnego, na przykład dodać tekst pomocy do opcji lub kontrolować szerokość menu, gdy zawiera opcje z dużą ilością tekstu. HTML5 i CSS3 przynoszą nam dobre i złe wiadomości. Dobra wiadomość jest taka, że możemy używać CSS do kontrolowania wielu zabiegów, które obejrzeliśmy w tym hacku. Zła wiadomość jest taka, że nie możemy kontrolować wszystkich. Spójrzmy na kilka przykładów.

< form name = "myForm" >

< input type = "number" value = "5" / >

< input type = "Submit" / >

< /form >

// css

< styl >

input [type = number] :: - webkit-inner-spin-button,

input [type = number] :: - webkit-outer-spin-button {

-webkit-wygląd: brak;

margines: 0;

}

< /style >

W poprzednim przykładzie mamy typ wprowadzania liczb z kilkoma funky pokrętłami, aby zwiększać i zmniejszać liczbę. Nie chcemy funkcjonalnych przycisków, więc w CSS określamy (z prefiksami przeglądarki) podskładniki, które chcemy zmienić. W tym przypadku są to -webkit-inner-spinbutton i -webkit-outer-spin-button. Po prostu ukrywamy je w tym przykładzie.

UWAGA

Twórcy przeglądarek zwiększają elastyczność wielu formantów formularzy. Większość twórców przeglądarek pozwala również zmieniać wygląd wyskakujących okien błędów sprawdzania poprawności. Niektóre komponenty, takie jak typy danych daty i koloru, mogą nie mieć kontrolek podskładników CSS.

Pamiętaj, że ta kontrola jest zarówno dobra, jak i zła. Dobrze, gdy po prostu nie lubisz wrażeń prezentowanych przez klienta użytkownika i musisz samodzielnie zaktualizować wygląd. Z drugiej strony źle jest wprowadzać zmiany w tych elementach, ponieważ nie mają one możliwości dostosowania się do kontekstu, w którym są używane. Pamiętasz menu rozwijane, na które narzekałem wcześniej? Cóż, iOS znalazł sposób, aby zmienić go w genialny wkład użytkowników na iPada i iPhone′a. Na iPhonie staje się wejściem obrotowym u dołu ekranu. Na iPadzie staje się rozwijanym oknem w kontekście Select Box. W obu przypadkach dane wejściowe są dobrze dostosowane do kontekstu. Jeśli miałeś przesłonięcia CSS na tych komponentach, kto wie, jak wyglądałoby to dla użytkownika końcowego na urządzeniu z systemem iOS

Podsumowując

Teraz, gdy poznaliśmy wewnętrzne działanie formularzy, powinieneś być gotowy do zanurzenia się w niektórych aplikacjach HTML5. Formularze są nadal podstawowymi elementami składowymi stron, a zrozumienie formularzy to zrozumienie HTML5. Więc chodźmy i wejdźmy!

Dowiedz się, co dzieje się w Twojej aplikacji dzięki nowym zdarzeniom DOM

HTML5 oferuje mnóstwo nowych wydarzeń, na które możesz się zatrzasnąć. Świat wyszedł poza kliknięcia myszą i klawiatury. Teraz Internet też. Wydarzenia DOM nie zmieniły się znacząco w ciągu ostatnich 15 lat. Wydaje mi się, że ostatnim nowym wydarzeniem DOM było przewijanie myszy (tak nazywa się to małe pokrętło w środku myszy). Nawet zdarzenia dotykowe nie są oficjalnie obsługiwanymi zdarzeniami DOM, chociaż są znacznie bardziej rozpowszechnione (i obsługiwane) niż DOMMouseScroll.

Dzięki HTML5 mamy mnóstwo nowych typów danych wejściowych do pracy. Ponieważ JavaScript jest językiem sterowanym zdarzeniami, pomaga on w pracy z DOM, który również natywnie uruchamia zdarzenia podczas akcji. Niektóre z tych działań są bezpośrednio związane z interakcją użytkownika (takie jak tradycyjne zdarzenia DOM), podczas gdy inne są związane ze zdarzeniami wyzwalanymi przez klienta użytkownika (np. Przejście do trybu offline i powrót do trybu online). Zacznijmy od kilku wydarzeń z form.

Zdarzenia oninput, onchange i oninvalid

W przeszłości często polegaliśmy na zdarzeniach związanych z keydown i keyup, aby określić, co dzieje się w elementach formularza. Złą rzeczą w kluczowych zdarzeniach jest to, że nie odnoszą się one konkretnie do samego elementu wejściowego, ponieważ technicznie to dokument, a nie dane wejściowe, które odbierają naciśnięcia klawiszy. Doprowadziło to nas do oszukania DOM, poprzez tymczasowe dodanie kluczowych zdarzeń po wprowadzeniu danych odbiera fokus i usuwa kluczowych nasłuchiwaczy po uruchomieniu zdarzenia rozmycia wejścia. To było strasznie nieefektywne. Dzięki zdarzeniu oninput nasłuchiwanie można umieścić bezpośrednio na znaczniku wejściowym (lub przenieść z jednego z nich) i powiązać tylko z działaniami tego wejścia. Spójrzmy na tradycyjnego słuchacza ze zdarzeniem oninput zamiast zdarzenia onkeypress:

< input id="myInput" type="text" placeholder="enter text" >

< script >

document.getElementById('myInput').addEventListener('input',function(e){

console.log("I just changed an input on:", e.target);

}, false);

< /script >

Gdy zaczniesz pisać w polu wprowadzania, dziennik zostanie uruchomiony. Jak widać, zdarzenie wejściowe jest dołączone do pola myInput, więc wejście do dowolnego innego pola wejściowego nie wyzwoli tego zdarzenia. Podobnie mamy dwa dodatkowe zdarzenia, które można dołączyć do pola wejściowego: onchange i oninvalid. Zdarzenie onchange jest uruchamiane po atrybucie wartości jest zaktualizowane. Nie możesz od razu zobaczyć potrzeby zdarzenia onchange, ponieważ mamy oninput i wiele innych zdarzeń, które mogą zostać wywołane przy zmianie danych wejściowych. Pomyślmy jednak o niektórych nowych elementach HTML5, takich jak dane wejściowe z typem ustawionym na zakres. Suwak zakresu lub suwak nie ma mechanizmu wprowadzania; po prostu się zmienia. Kiedy przeciągam uchwyt z jednej pozycji do drugiej, nie wywołuje on zdarzenia wejściowego, tylko zdarzenie przełączające. Podobne zdarzenia są wymagane w przypadku innych mechanizmów wprowadzania danych, takich jak selektory daty, koła numeryczne i selektory kolorów. Te nowe typy danych wejściowych sprawiają, że zdarzenie onchange jest nie tylko przydatne, ale także niezbędne. Zdarzenie oninvalid to podobne nowe zdarzenie, które jest wywoływane, gdy element formularza zostanie uznany za nieprawidłowy. W przeciwieństwie do wielu innych naszych kontroli poprawności, bieżące implementacje nie działają na samym elemencie formularza, ale na poszczególnych danych wejściowych. Pamiętasz kilka hacków, kiedy narzekałem na to, że elementy formularza nie były sprawdzane w czasie rzeczywistym (na przykład kiedy wprowadzasz dane do danych wejściowych, a nie podczas przesyłania formularza) i że tylko zmiana stanu CSS odbywała się w czasie rzeczywistym? Spójrzmy na przykład, jak możemy połączyć niektóre z tych wydarzeń

Walidacja formularza w czasie rzeczywistym za pomocą zdarzeń oninput / oninvalid Aby zweryfikować pole wejściowe, gdy użytkownik wprowadza do niego dane, potrzebujemy zdarzenia, które zostanie uruchomione, gdy użytkownik zmieni wartość danych wejściowych. W przeszłości musieliśmy wykonywać kłopotliwe naciśnięcia klawiszy, ale dzięki zdarzeniu oninput możemy łatwo dołączyć słuchacza do danych wejściowych i zareagować na zmianę. Kiedy złapiemy to zdarzenie, musimy przeprowadzić weryfikację ad hoc, więc w tym celu wrócimy do metody checkValidity(), aby uzyskać dane wejściowe do samo-sprawdzania. Można to łatwo zwolnić ze zdarzenia oninput. W tym momencie, jeśli dane wejściowe zostaną uznane za nieprawidłowe, zdarzenie oninvalid zostanie uruchomione obok niego. Ostatnią rzeczą, którą musimy zrobić, to dołączyć detektor zdarzeń do zdarzenia oninvalid i uruchomić funkcję, która wskaże użytkownikowi, że wprowadzona wartość jest nieprawidłowa. Będziemy śledzić to za pomocą CSS, aby wzmocnić stan danych wejściowych. Rzućmy okiem na kod:

< !DOCTYPE html >

< html >

< body >

< style >

input[type=number]{border: 2px solid green}

input:invalid {border: 2px solid red}

< /style > < form name="myForm" >

Pick a number, any number between 1 and 5:

< input type="number" name="quantity" min="1" max="5" / >


< input type="submit" name="mySubmit" / >

< /form >

< script >

document.myForm.quantity.addEventListener('input', function(e){

this.checkValidity()



}, false); document.myForm.quantity.addEventListener('invalid', function(e){

alert('Your Number needs to be between 1 and five, you chose '+this.value

+'.')

}, false);

< /script >

< /body >

< /html >

Niekończąca się zabawa, prawda? Mamy teraz to, co najlepsze z obu światów: wbudowaną weryfikację z czasem reakcji w czasie rzeczywistym.

Inne nowe wydarzenia

Podczas gdy jesteśmy w temacie zdarzeń, HTML5 proponuje przyjęcie wielu nowych zdarzeń podobnych do tych wymienionych w poprzedniej sekcji. Większość z tych zdarzeń koncentruje się na czynności użytkownika i są uruchamiane przed, po i podczas zdarzenia. Oto lista wydarzeń, które prawdopodobnie będą przyjęte w najbliższym czasie:

onabort oncanplay oncanplaythrough onchange onclick oncontextmenu oncuechange ondblclick ondrag ondragend ondragenter ondragleave ondragover ondragstart ondrop ondurationchange onemptied onended oninput oninvalid onkeydown onkeypress onkeyup onloadeddata onloadedmetadata onloadstart onmousedown onmousemove onmouseout onmouseover onmouseup onmousewheel onpause onplay onplaying onprogress onratechange onreadystatechange onreset onseeked onseeking onselect onshow onstalled onsubmit onsuspend ontimeupdate onvolumechange onwaiting

Dodaj bogaty kontekst do swoich znaczników za pomocą danych niestandardowych

HTML5 formalizuje możliwość przechowywania danych bezpośrednio w elemencie strony. Dane są łatwe do dodania i równie łatwe do uzyskania dostępu. Niestandardowe atrybuty danych dają nam możliwość dodania do naszego znacznika więcej bogactwa i głębi niż kiedykolwiek przedtem. Niestandardowe atrybuty danych, często nazywane atrybutami data- , to prosty sposób na dodanie danych kontekstowych do znaczników HTML5. Wystarczy wymyślić nazwę atrybutu, poprzedzić ją "data-" i dodać do dowolnego znacznika HTML:

< ul id="carInventory" >

< li class="auto" data-make="toyota" data-bodytype="sedan" datayear=" 2005" >

Light blue Toyota Prism

< /li >

< /ul >

W poprzednim przykładzie mamy informacje, które chcemy przedstawić użytkownikowi, które umieszczamy jako tekst wewnątrz tagu. Mamy również informacje kontekstowe, z których nasza aplikacja będzie chciała korzystać w celu zapewnienia dodatkowej funkcjonalności użytkownikowi. Przed wersją HTML5 te dodatkowe dane byłyby przechowywane na dwa sposoby. Albo włamalibyśmy się do innego atrybutu (takiego jak atrybut klasy lub identyfikator) za pomocą łańcucha, który zakodowałby wszystkie te informacje, albo mielibyśmy osobne źródło danych w JavaScript, do którego miałoby odniesienie do tego tagu. Żadna z tych opcji nie jest bardzo przyjemna i obie wymagają sporo wierszy JavaScript, aby się przydały. Umieszczenie tych danych w samym elemencie jest nie tylko wygodne dla celów dostępu, ale także zapewnia bogaty kontekst. Zgodnie ze specyfikacją HTML5 z W3C niestandardowy atrybut danych jest zdefiniowany następująco:

Niestandardowy atrybut danych to atrybut bez przestrzeni nazw, którego nazwa zaczyna się od ciągu "data -", ma co najmniej jeden znak po łączniku, jest zgodny z XML i nie zawiera znaków w zakres od U + 0041 do U + 005A (LATIN CAPITAL LETTER A do LATIN CAPITAL LETTER Z).

Podsumowując, jest to atrybut rozpoczynający się od "data-" i zapisany małymi literami. Teraz wyjaśnijmy cel tych danych. Zaczniemy od tego, jak nie chcemy go używać (usuńmy wszystkie te negatywne rzeczy z drogi!). Po pierwsze, atrybutu data nie należy używać do zastępowania istniejącego atrybutu HTML, takiego jak identyfikator nazwy klasy. Na przykład, jeśli chcesz dodać unikalny identyfikator do elementu, którego będzie tylko jeden na stronie, po prostu użyj identyfikatora, ponieważ właśnie do tego jest przeznaczony. Posiadanie identyfikatora data dla wszystkich elementów prawdopodobnie zapewni ci znaczną liczbę skarg od znajomych i współpracowników. Po drugie, nie używaj elementu danych, aby uczynić kod bardziej "czytelnym dla komputera". Do tego właśnie służy mikroformatowanie, które omówimy szczegółowo w kilku hackach. Twój niestandardowy atrybut danych ma na celu dostarczenie informacji, które są istotne dla twojej aplikacji, a nie dla zewnętrznego czytnika stron (bez względu na to, czy jest to człowiek, czy maszyna). A teraz część zabawy! Jak korzystać z niestandardowych atrybutów danych? Mówiąc najprościej, powinieneś ich używać do "wszystkiego, czego potrzebujesz", z naciskiem na słowa cokolwiek i ty. Za każdym razem, gdy potrzebujesz dostępu do danych o elemencie DOM lub danych związanych z informacjami reprezentowanymi przez ten element, przechowuj go w niestandardowym atrybucie danych. W poniższym przykładzie mamy tabelę, która została dynamicznie zbudowana w JavaScript z bazy danych. Baza danych ma klucz lokalny, który identyfikuje każdy wiersz danych, ale ten klucz oznacza tylko coś dla naszej aplikacji; nie ma żadnej wartości dla użytkownika. Przed niestandardowymi atrybutami danych musieliśmy zrobić coś takiego:

< table width="100%" border="1" >

< tr>

< th class="key" >key row< /th >

< th >Title< /th >

Price< /th >

< /tr >

< tr >

< td class="key" >323< /td >

< td >Google Hacks< /td >

< td >FREE< /td >

< /tr >

< tr >

< td class="key" >324< /td >

< td >Ajax Hacks< /td >

< td >FREE< /td >

< /tr >

< tr >

< td class="key" >325< /td >

< td >HTML5 Hacks< /td >

< td >FREE< /td >

< /tr >

< /table >

Następnie musieliśmy użyć CSS, aby ukryć pierwszy wiersz (z nazwą klasy klucza):

.key{

display: none

}

Innym naprawdę złym rozwiązaniem było użycie jednego z istniejących atrybutów do przechowywania tych danych. W poniższym przykładzie dane są przechowywane w atrybucie id:

< table width="100%" border="1" >

< tr >

< th >Title< /th >

< th >Price< /th >

< /tr >

< tr id="323" >

< td > Google Hacks< /td >

< td >FREE< /td >

< /tr >

< tr id="324" >

< td >Ajax Hacks< /td >

< td >FREE< /td >

< /tr >

< tr id="325" >

< td >HTML5 Hacks< /td >

< td >FREE< /td >

< /tr >

< /table >

Jest tyle problemów z tym rozwiązaniem, że trudno jest ustalić, od czego zacząć. Po pierwsze, strasznym pomysłem jest przechowywanie danych w atrybucie id. Atrybut id ma być unikalnym identyfikatorem elementów HTML. Ponieważ jest on powiązany z naszym kluczem bazy danych, klucz zmieni się wraz ze zmianą danych, uniemożliwiając użycie tego identyfikatora do odniesienia do elementu, ponieważ może ulec zmianie. Przechowywanie klucza jako nazwy klasy jest równie złe, z podobnych powodów. Teraz odwróćmy to i umieść te niezbędne dane w niestandardowym atrybucie danych:

< table width="100%" border="1" >

< tr >

< th Title

< th >Price< /th >

< /tr > < tr data-key="323" >

< td >Google Hacks< /td >

< td >FREE< /td >

< /tr >

< tr data-key="324" >

< td >Ajax Hacks< /td >

< td >FREE< /td >

< /tr >

< tr data-key="325" >

< td >HTML5 Hacks< /td>

< td >FREE< /td >

< /tr >

< /table >

Tutaj mamy prosty znacznik, który zawiera odniesienie do naszego klucza bazy danych, bez zbędnych znaczników lub prostytucji atrybutu id lub class. Nie musieliśmy nawet pisać żadnego kodu CSS, aby to zadziałało.

Dostęp do danych

Kolejny ważny element układanki dotyczy dostępu do danych. Specyfikacja HTML5 W3C ma jasną metodę zbierania danych w JavaScript. Obiekt zestawu danych jest dostępny w elemencie HTML5, który umożliwia dostęp do niestandardowych wartości według nazwy:

< div id="myNode" data-myvalue="true" >my node< /div >

//javascript access to value

var nodeValue = document.getElementById('myNode').dataset.myvalue

//nodeValue = 'true'

Zauważ, że nie potrzebujemy "danych" przed naszą wartością; po prostu nazywamy naszą nazwę wartości bezpośrednio. Ta metoda dostępu jest świetna i spełnia specyfikację, ale podobnie jak wiele naszych funkcji HTML5, działa tylko w przeglądarkach HTML5. Co ciekawe, umieszczenie niestandardowego atrybutu danych na elemencie działało w przeglądarkach od jakiegoś czasu (może nie zostało zweryfikowane, ale działało), aż do IE 6. Należy jednak pamiętać, że wprowadzono metodę dostępu JavaScript ze Specyfikacją HTML5, ale nie martw się - mamy do tego hack:

< div id="myNode" data-myvalue="true" >my node< /div >

//javascript access to value where nodeValue = 'true'

var nodeValue = document.getElementById('myNode').getAttribute('datamyvalue')

Wcześniej przeglądarki HTML5 po prostu rozpoznawały wartość jako atrybut elementu, więc prosta metoda getAttribute elementu pobierałaby dane. Należy zauważyć, że w tej metodzie część "data-" wartości jest wymagana do odzyskania danych. Jest jeszcze jeden sposób na dostęp do tych danych, ale zawiera ostrzeżenie. Większość aktualnych przeglądarek obsługuje pseudo-właściwości CSS3, na których można oprzeć deklarację stylu. Wygląda to mniej więcej tak:

< div id='myNode' data-myvalue='true' >my node< /div >

/*css declaration */

#myNode[data-myvalue]{

color: red;

}

albo to:

#myNode[data-myvalue='true']{

color: red;

}

Teraz Twój styl CSS może stylizować element na podstawie obecności niestandardowego atrybutu danych lub wartości niestandardowych danych. Oto ostrzeżenie: nie używaj niestandardowych danych zamiast klas CSS. Nazwy klas są wciąż ostatecznym sposobem deklarowania reguł stylu wielokrotnego użytku. Pamiętaj, że dane niestandardowe nie mają na celu przedstawiać czegoś użytkownikowi, ale raczej dostarczać danych kontekstowych dla Twojej aplikacji, co oznacza, że ogólnie nie chcesz używać wcześniej pokazanych pseudoklas.

Śledź zdarzenia użytkownika za pomocą danych niestandardowych

Śledzenie zdarzeń użytkownika może być trudne na bardzo dynamicznych stronach z samym JavaScript. Zwykle wymaga to dodania i usunięcia wielu słuchaczy. Dzięki niestandardowym danym HTML5 możesz mieć tę samą bogatą interakcję na dynamicznych stronach z jednym odbiornikiem. Jedną z najtrudniejszych rzeczy w generowaniu znaczników HTML za pomocą JavaScript jest zarządzanie zachowaniami. Każdy, kto pracował ze zdarzeniami DOM w dynamicznej aplikacji, wie, że zarządzanie zachowaniami może być dość kłopotliwe. Ten hack pokazuje sposób użycia niestandardowych danych wraz z delegowaniem zdarzeń JavaScript, aby uczynić trudne zadanie łatwym i lekkim. Nie będziemy zbytnio rozmawiać o delegowaniu wydarzeń; istnieje wiele książek i innych zasobów, które wyjaśniają szczegóły tego wszystkiego. Ważne jest jednak, aby wiedzieć, czym jest delegowanie wydarzeń i dlaczego to robimy. Delegowanie zdarzeń to czynność polegająca na przekazywaniu (lub propagowaniu, aby użyć dokładniejszego terminu) przechwyconego zdarzenia z elementu wewnętrznego do elementu zewnętrznego. Zastanów się, co się stanie, gdy klikniesz przycisk znajdujący się w elemencie listy (li). Ponieważ przycisk znajduje się wewnątrz li, technicznie kliknąłeś oba elementy, więc przeglądarka domyślnie przechodzi lub "bąbelki", które klikają w górę od przycisku do li. Najpierw przycisk wykonuje swoje zdarzenie onclick, a następnie li wykonuje własne zdarzenie onclick. Delegowanie zdarzeń ma miejsce, gdy pozwalasz zdarzeniu (w tym przypadku zdarzeniu kliknięcia) utworzyć bąbelkowy element nadrzędny (w tym przypadku li), który następnie uruchamia zdarzenie na podstawie tego, że kliknąłeś przycisk. Zasadniczo delegowanie zdarzeń pozwala na użycie mniejszej liczby detektorów zdarzeń na stronie, ponieważ każdy detektor może obsłużyć nieskończoną liczbę funkcji w zależności od klikanych różnych elementów. Korzystanie z delegowania zdarzeń zwykle zużywa mniej pamięci na stronie i znacznie ułatwia obsługę stron dynamicznych. W tym hacku dodamy podpowiedź do listy elementów przy użyciu niestandardowych danych i tylko jednego detektora zdarzeń. Zacznijmy od naszego znacznika:

< div class = "container" >

< h1 > Wybierz swoją broń < /h1 >

< p >

Kliknij jedną z poniższych opcji, aby uzyskać więcej informacji o twojej postaci:

< /p >

< ul id = "myList" >

< li data-description = "Najpotężniejszy goblin w całym królestwie" > Ludo

< /li >

< li data-description = "Władca wszystkimi goblinami dużymi i małymi" >

Jareth the Goblin King

< /li >

< li data-description = "Tylko osoba, która może powstrzymać goblina Król " >

Sarah

< /li >

< li data-description = "Nieznany bohater królestwa goblinów" > >

Hoggle

< /li >

< /ul >

< p id = "displayTarg" class = "well" > < /p >

< /div > < ! - / container - >

Niestandardowe atrybuty danych pozwalają nam "wstawiać" dane w naszych elementach poprzez ustawienie ciągu na atrybut danych elementu. Używamy "startera" strony HTML5 (strony podstawowej, którą edytujemy, aby uzyskać szybki start w rozwoju) o nazwie bootowania na Twitterze. Zapewnia nam czysty wygląd i wyczucie naszych znaczników; niektóre z naszych dodatkowych nazw klas pochodzą z tego frameworka. Dodajmy teraz naszego słuchacza do listy nieuporządkowanej (ul), abyśmy mogli podjąć działania w stosunku do dowolnego elementu w nim zawartego:

var mainElement = document.getElementById ('myList');

var descriptionTarget = document.getElementById ('displayTarg');

mainElement.addEventListener ("kliknięcie", funkcja (e) {

var description = e.target.getAttribute ("opis danych");

// pamiętaj, że używamy getAttribute zamiast

//dataset.description ze względu na kompatybilność wsteczną

descriptionTarget.innerHTML = opis;

});

Delegowanie zdarzeń JavaScript jest o wiele potężniejsze, gdy masz dostęp do dodatkowych danych w samym elemencie DOM. Teraz wyobraź sobie, że dane te zostały pobrane z bazy danych lub obiektu JSON (JavaScript Object Notation) i zaktualizowane w DOM. Listę i znaczniki można aktualizować, ale JavaScript nie musi się zmieniać. Ten sam słuchacz może obsłużyć tę listę czterech znaków lub listę 400 znaków, bez względu na to, ile razy lista się zmienia.

Czy może być łatwiej?

Ponieważ znaczniki stają się coraz bardziej złożone i zaczynamy widzieć elementy zagnieżdżone w innych elementach, znalezienie odpowiedniego elementu docelowego, z którego można wyciągnąć nasz opis, może być dość skomplikowane. Mamy szczęście, że mamy na rynku wiele dobrych ram, które ułatwiają zarządzanie delegacjami. Zamiast zarządzać celem zdarzenia (e.target w poprzednim kodzie), aby uzyskać właściwy element, ramy te pozwalają nam napisać kilka wierszy kodu, aby upewnić się, że pracujemy z odpowiednimi elementami. Spójrzmy na kilka przykładów, aby zobaczyć, jakie to proste:

YUI (Yahoo! User Interface) Library wersja 3.0 i nowsze

Y.one ('# myList'). Delegate ('click', function (e) {...}, 'li');

jQuery Library wersja 1.7 i nowsze

$ ("myList"). on ("click", "li", function (e) {...});

Zastosuj delegowanie zdarzeń JavaScript i zwiększ możliwości znaczników dzięki niestandardowym atrybutom danych. Przekonasz się, że piszesz mniej kodu, zajmujesz mniej pamięci i żyjesz ogólnie szczęśliwszym życiem!

Uczyń swoją stronę materiałem do konsumpcji dla robotów i ludzi dzięki Microdata

Mikrodane HTML5 zapewniają mechanizm umożliwiający maszynom łatwe pobieranie danych z twoich stron, bez wpływu na komfort użytkownika. Jeśli jesteś podobny do mnie, wierzysz, że w przyszłości maszyny będą rządzić nami ludźmi żelazną pięścią (oczywiście pod warunkiem, że Apokalipsa Zombie nie dostanie nas pierwsza). Chociaż nic nie możemy zrobić, aby pomóc masom zombie zrozumieć Internet, HTML5 oferuje funkcję, która przygotowuje nas do tej dyktatury maszyn. Nazywa się to mikrodanymi i powinno być przeznaczone tylko dla maszyn - nie wolno pozwolić na to ludziom. Możesz już stwierdzić, że HTML5 dodaje dużo głębi do twoich danych, ale do tego momentu koncentrowano się na użytkownikach. Mikrodane prowadzą nieco inną ścieżkę, gdy myślisz o konsumentach, którzy nie są Twoimi użytkownikami. Mikrodane to dodatkowy kontekst dodawany do znaczników, aby był bardziej użyteczny. Podczas tworzenia strony możesz dodać te dodatkowe atrybuty, aby nadać dodatkowy kontekst znacznikom. Mikrodane można dodać do dowolnego elementu strony, aby zidentyfikować ten element jako "element" lub fragment danych na wysokim poziomie. Treść zagnieżdżona w tym elemencie może być następnie oznaczona jako właściwość. Te właściwości zasadniczo stają się parami nazwa-wartość, gdy itemprop staje się nazwą wartości, a treść czytelna dla człowieka staje się wartością. Odpowiedni kod wyglądałby mniej więcej tak:

< div itemscope >

< span itemprop="name" >Fred< /span >

< /div >

Czasami dane właściwości przedmiotu nie są w formacie, który chciałby "komputer", i należy dodać dodatkowe atrybuty, aby wyjaśnić, co mówią dane czytelne dla człowieka. W tym scenariuszu dane wyglądałyby tak:

< div itemscope >

Hello, my name is Fred< /span >.

I was born on

< time itemprop="birthday" datetime="1975-09-29" >Sept. 29, 1975< /time >.

< /div >

Wyobraź sobie teraz, jak bardzo Internet byłby zużywalny dla tych maszyn w przyszłości, gdy mikrodane będą wykorzystywane na każdej stronie! W tym haku użyjemy mikrodanych, aby upewnić się, że nasza lista kontaktów jest możliwa do odczytu maszynowego. Każdy wpis kontaktu zostanie zidentyfikowany jako element, a jego zawartość będzie oznaczona jako właściwość. Nasz pierwszy kontakt będzie wyglądał następująco:

< li itemscope >

< ul >

< li >Name: Fred< /span >< /li >

< li >Phone: < span itemprop="telephone" >210-555-5555< /span >

< li >Email: < span itemprop="email">thebuffalo@rockandstone.com < /span >

< /li >

< /ul >

< /li >

Jak widać, skonstruowaliśmy jeden element danych na naszej stronie, a gdy znacznik zostanie odczytany maszynowo, zobaczy ten element w następujący sposób:

Item: { name: 'Fred',

telephone: '210-555-5555',

email: 'thebuffalo@rockandstone.com'

}

Teraz stwórzmy sobie całą listę

< ul >

< li itemscope >

< ul >

< li >Name: < span itemprop="name" >Fred< /span >< /li >

< li >Phone: < span itemprop="telephone" >210-555-5555< /span >< /li >

< li >Email: thebuffalo@rockandstone.com < /span >

< /li >

< /ul >

< /li >

< li itemscope >

< ul >

< li >Name: < span itemprop="name" >Wilma< /span >< /li >

< li >Phone: < span itemprop="telephone" >210-555-7777< /span >< /li >

< li >Email: < span itemprop="email" >thewife@rockandstone.com < /span >

< /li >

< /ul >

< /li >

< li itemscope >

< ul >

< li >Name: < span itemprop="name" >Betty< /span >< /li >

< li >Phone: < span itemprop="telephone" >210-555-8888< /span >< /li >

< li >Email: < span itemprop="email" >theneighbour@rockandstone.com

< /span >< /li >

< /ul >

< /li >

< li itemscope >

< ul >

< li >Name: < span itemprop="name" >Barny< /span >< /li >

< li >Phone: < span itemprop="telephone" >210-555-0000< /span >< /li >

< li >Email: < span itemprop="email" >thebestfriend@rockandstone.com

< /span >< /li >

< /ul >

< /li >

< /ul >

To our machine friends, the code looks something like this:

Item: { name: 'Fred',

telephone: '210-555-5555',

email: 'thebuffalo@rockandstone.com'

},

Item: { name: 'Wilma',

telephone: '210-555-7777',

email: 'thewife@rockandstone.com'

},

Item: { name: 'Betty',

telephone: '210-555-8888',

email: 'theneighbor@rockandstone.com'

},

Item: { name: 'Barny ',

telephone: '210-555-0000',

email: 'thebestfriend@rockandstone.com'

}

Tak łatwo jest dodać mikrodane do swojej strony bez poświęcania interfejsu swoim ludzkim znajomym

Szczegóły, szczegóły!

Mikrodane są naprawdę łatwe do zaimplementowania, a specyfikacja W3C uważa, że powinna być równie łatwa do odczytania, dlatego W3C dodał JavaScript API, aby mieć dostęp do danych. Pamiętaj, że każdy z zidentyfikowanych elementów został oznaczony atrybutem o nazwie itemscope, co oznacza, że interfejs API uznaje je za przedmioty. Aby uzyskać wszystkie te przedmioty, wystarczy wywołać co następuje:

document.getItems();

Teraz twoje przedmioty mogą być podzielone na segmenty według typu, dzięki czemu możesz zidentyfikować niektóre z nich jako osoby, a inne jako koty. Mikrodane umożliwiają definiowanie elementów przez dodanie atrybutu itemtype, który będzie wskazywał adres URL lub ma wbudowaną definicję. W takim przypadku, jeśli zdefiniujemy nasz typ kota, odwołując się do adresu URL http://example.com/feline, nasz znacznik kota będzie wyglądał mniej więcej tak:

< li itemscope itemtype=http://example.com/feline >

< ul >

< li >Name: < span itemprop="name" >Dino< /span >< /li >

< li >Phone: < span itemprop="telephone" >210-555-4444< /span >< /li >

< li >Email: < span itemprop="email" >thecat@rockandstone.com < /span >

< /li >

< /ul >

< /li >

Gdybyśmy chcieli dostać przedmioty tylko z określonym typem kota, moglibyśmy wywołać:

document.getItems ("http://example.com/feline")

Dzięki temu prostemu interfejsowi API znaczniki wzbogacone w mikrodane są zarówno łatwe do wytworzenia, jak i do spożycia.

Używaj eksperymentalnych funkcji CSS z prefiksami przeglądarki

Twórcy przeglądarek często dają dostęp do eksperymentalnej wersji funkcji CSS3 przed sfinalizowaniem specyfikacji. Prefiksy przeglądarki umożliwiają wdrożenie niektórych z tych eksperymentalnych funkcji na wczesnym etapie ich opracowywania. Funkcje CSS3 pojawiły się na scenie szybko wraz z szybkim przyjęciem przeglądarek opartych na WebKit (WebKit to silnik układu przeglądarki typu open source opracowany przez Apple). Bogactwo funkcji CSS w przeglądarkach opartych na WebKit zachęciło innych twórców przeglądarek, takich jak Firefox, Internet Explorer i Opera, do przyspieszenia wdrażania funkcji CSS3.

Przyjęcie CSS w przeglądarce zmieniło się w tak przyspieszonym tempie, że dosłownie wyprzedziło opracowanie specyfikacji. Doprowadziło to twórców przeglądarek do implementacji funkcji, które były jeszcze w trybie roboczym lub eksperymentalnym. Spowodowało to, że funkcje były wdrażane w różny sposób przez różnych twórców przeglądarek, ponieważ specyfikacja funkcji nie została jeszcze zestalona. Aby usunąć zamieszanie i umożliwić programistom wdrożenie tych funkcji, gdy byli jeszcze w fazie eksperymentalnej, twórcy przeglądarki opracowali prefiksy przeglądarki. Prefiks przeglądarki jest dołączany do nazwy atrybutu, aby ograniczyć jej implementację do tej konkretnej przeglądarki. Tabela zawiera najczęstsze prefiksy przeglądarki.

Prefiks: przeglądarka

-khtml-: Konqueror (naprawdę stare Safari)

-moz: Firefox

-o: Opera

-ms: Internet Explorer

-webkit: Safari, Chrome, Silk, Android i inne przeglądarki oparte na WebKit

Często CSS3 jest implementowany z deklaracją stylu, a następnie powtarzany za każdym razem z prefiksem przeglądarki każdej przeglądarki, która ma wczesne wsparcie dla tej funkcji. Twój CSS może wyglądać mniej więcej tak:

.testClass {

width: 100%;

color: #fff;

transform: rotate(30deg);

-ms-transform: rotate(30deg); /* IE 9 */

-webkit-transform: rotate(30deg); /* all webkit browsers */

-o-transform: rotate(30deg); /* Opera */

-moz-transform: rotate(30deg); /* Firefox */

}

Daje to programistom elastyczność w korzystaniu z funkcji CSS3 w przeglądarkach, które je obsługują, i nie wpływa na przeglądarki, które tego nie robią. Załóżmy, że czujesz się komfortowo, obsługując wersję przekształcania w przeglądarce Firefox i chcesz, aby wszystkie inne przeglądarki wróciły do nietransformowanego tekstu. Twój CSS wyglądałby mniej więcej tak:

.testClass {

width: 100%;

color: #fff;

transform: rotate(30deg);

-moz-transform: rotate(30deg); /* Firefox */

}

Zauważ, że tradycyjny atrybut transformacji pozostaje na swoim miejscu. Gdy specyfikacja transformacji CSS3 zestali się, twórcy przeglądarki opuszczą prefiks i wykorzystają domyślny atrybut. Zazwyczaj dobrym pomysłem jest dodanie tradycyjnego atrybutu podczas używania prefiksów przeglądarki w celu zabezpieczenia CSS w przyszłości.

Kontrowersje dotyczące prefiksów przeglądarki

Społeczność programistów ma podzielone zdanie na temat używania prefiksów przeglądarki. Prefiksy przeglądarki były korzystne dla zastosowania tych wcześniej obsługiwanych funkcji. Ponieważ funkcje zostały zaimplementowane przed sfinalizowaniem specyfikacji, prefiksy umożliwiły programistom korzystanie z eksperymentalnej wersji funkcjonalności bez martwienia się o napisanie CSS, który kiedyś przestanie działać. Negatywnym aspektem prefiksów przeglądarki była dodatkowa elastyczność, jaką zapewniała programistom. Przez lata społeczność zajmująca się tworzeniem stron internetowych naciskała na twórców przeglądarek, aby byli zgodni ze standardami, zachęcając ich do tworzenia przeglądarek zgodnych ze specyfikacjami i wytycznymi W3C zamiast budowania wyjątkowo obsługiwanych funkcji. Celem było napisanie jednej bazy kodu, która będzie poprawnie renderowana w dowolnej przeglądarce. Prefiksy przeglądarki ponownie otwierają drzwi dla programistów do pisania kodu, który działa tylko w podzbiorze przeglądarek. Ostatecznie od deweloperów zależy utrzymanie prefiksów przeglądarki. Pisząc CSS z prefiksami przeglądarki, weź pod uwagę wszystkie przeglądarki obsługujące tę funkcję. W razie potrzeby użyj prefiksów przeglądarki, ale staraj się nie "rozwidlać" Internetu…ponownie.

Projektuj za pomocą czcionek niestandardowych, za pomocą czcionek internetowych

Twoja strona nie musi już zadowolić się zwykłymi, "bezpiecznymi dla sieci" czcionkami. Odśwież swoje projekty za pomocą czcionek internetowych CSS3. Czcionki internetowe nie są tak naprawdę nową koncepcją CSS. Zostały pierwotnie zaproponowane dla wersji CSS 2.1, ale zostały usunięte przed sfinalizowaniem specyfikacji. Co dziwne, jeden twórca przeglądarki wcześnie zaimplementował tę funkcję i, co zaskakujące, był to Internet Explorer. IE obsługuje czcionki sieciowe od wersji IE 5 w 1999 r. Jednak, podobnie jak większość funkcji opracowanych dla Internetu w latach 90., czcionki internetowe zostały zaimplementowane w sposób zastrzeżony, obsługując tylko jeden typ czcionek. IE 5 obsługiwał czcionkę EOT (Embedded OpenType), która nigdy nie została przyjęta przez innych twórców przeglądarek. Tak więc czcionki internetowe przeszły drogę Jedi do ich odrodzenia w CSS3. Dostęp do odpowiednich czcionek może stworzyć lub zniszczyć projekt. Przez dziesięciolecia twórcy stron internetowych ograniczali się do niewielkiej części czcionek bezpiecznych dla sieci i nie przekraczali granic Arial i Verdana. Przed przyjęciem czcionek internetowych CSS3 (po raz pierwszy widziany w Safari 3.1), CSS pozwolił nam określić listę rodzin czcionek, których chcieliśmy używać na naszej stronie internetowej, a przeglądarka przeglądała listę czcionek, dopóki nie natrafiła czcionka zainstalowana na komputerze użytkownika. Deklaracja wyglądała mniej więcej tak:

body {

font-family: Verdana,Arial,Helvetica,sans-serif;

}

Nie było żadnej gwarancji, że użytkownik będzie miał dostęp do czcionki, której chcieliśmy użyć, więc zwyczajowo wymieniano kilka czcionek w kolejności preferencji, aby przeglądarka mogła wybrać tę, która najlepiej zakończy nasz projekt. Ostatnia czcionka z powyższej listy, sans-serif, odnosi się do ogólnego rodzaju czcionki, którą przeglądarka z pewnością obsługuje, ponieważ jest wymagana do identyfikacji czcionki w systemie dla każdego poziomu wysokiego rodziny czcionek. CSS3 tak naprawdę nie zmienia sposobu stosowania atrybutu rodziny czcionek. Nadal postępujesz według tego samego wzoru, wymieniając żądane czcionki w kolejności preferencji. Przypomnijmy pokazaną wcześniej regułę CSS, tym razem wymieniając naszą nową , preferowaną czcionkę:

body {

font-family: Radley,Arial,Helvetica,sans-serif;

}

Bez żadnych dodatkowych zmian każda przeglądarka zastosuje czcionkę Radley do tekstu strony, jeśli jest ona zainstalowana. Ponieważ jest bardzo mało prawdopodobne, że użytkownik będzie miał tę konkretną czcionkę, można zastosować deklarację czcionki CSS3, aby znacznie zwiększyć szanse na użycie tej konkretnej czcionki. Deklaracja musi być sporządzona tylko raz na stronę i nie jest powiązana z żadnym konkretnym atrybutem rodziny czcionek ani żadną regułą CSS. Jest po prostu zadeklarowane:

@font-face {

font-family: Radley; src: local('Radley'), url('Radley.woff');

}

Po zaimportowaniu czcionki można z niej korzystać w dowolnej deklaracji CSS. Teraz, w poprzednim przykładzie, każda przeglądarka, która obsługuje @ font-face lub która ma zainstalowaną czcionkę Radley, będzie używać Radley na stronie, a wszystkie inne przeglądarki będą cyklicznie przechodzić przez łańcuch rezerwowy, aż znajdą czcionkę, której mogą użyć. Spójrzmy na konkretne użycie kilku importowanych czcionek. Dodaliśmy trzy charakterystyczne czcionki (oprócz niektórych tradycyjnych czcionek używanych na stronie podstawowej). Pierwszą rzeczą, którą chcemy zrobić, to przenieść czcionki na stronę, abyśmy mieli do nich dostęp. Oto miejsce importu:

@font-face {

font-family: 'Radley';

font-style: normal;

font-weight: normal;

src: local('Radley'), url('/f/Radley.woff') format('woff');

}

@font-face {

font-family: 'Lovers Quarrel';

font-style: normal;

font-weight: 400;

src:local('Lovers Quarrel'), url('/f/quarrel.woff') format('woff');

}

@font-face {

font-family: 'Dosis';

font-style: normal;

font-weight: 400;

src: local('Dosis Regular'), url('/f/dosis.woff') format('woff');

}

Każda czcionka ma dwie deklaracje w src. Pierwsza to lokalna nazwa czcionki. Dobrą praktyką jest określenie tego dla wszystkich czcionek; jeśli użytkownik ma lokalnie tę samą czcionkę, możemy zaoszczędzić użytkownikowi ładowanie jej z Internetu. Druga deklaracja to adres URL. Jeśli przeglądarka nie znajdzie czcionki lokalnie, jest ona importowana na naszą stronę. Atrybut font-family określa sposób, w jaki odwołujemy się do importowanej czcionki na stronie (nazwa czcionki). Jedynymi wymaganymi atrybutami są rodzina czcionek i src. Nasz CSS korzystający z importowanej czcionki powinien wyglądać znajomo. Identyfikujemy importowane czcionki w taki sam sposób, w jaki zawsze przypisywaliśmy czcionki. Oto CSS, który napisaliśmy, aby dostosować tę czcionkę strony:

.fontHeader {

font-family: Radley, Arial, sans-serif;

}

h2.fontHeader {

font-size: 12em;

line-height: 1em;

font-family: Lovers Quarrel, Arial, serif;

text-align: center;

color: #c91c10;

}

.smallFont {

font-family: Dosis, Arial, sans-serif;

text-align: justify;

}

Zauważ, że nasze zastępcze czcionki są nadal wymienione w naszej deklaracji rodziny czcionek. Jeśli przeglądarka nie załaduje czcionki, chcemy, aby przeglądarka powróciła do najlepszej alternatywy. Z kilkoma importami i kilkoma nowymi deklaracjami CSS, daliśmy naszej stronie ten niestandardowy projekt, który nadaje jej bardzo potrzebny charakter, i wyróżnia ją spośród innych!

Praca z różnymi wersjami czcionek

Wiele razy masz jedną czcionkę, która występuje w normalnej, pogrubionej, pochylonej lub niezliczonej liczbie innych. Ogólnie oznacza to ładowanie wielu czcionek w celu obsługi danego typu. Zobaczmy, jak wyglądałby CSS:

@font-face {

font-family: 'Radley';

src: local('Radley'), url('/f/Radley.woff') format('woff');

}

@font-face {

font-family: 'RadleyBold';

src: local('Radley'), url('/f/RadleyBold.woff') format('woff');

}

@font-face {

font-family: 'RadleyItalic';

src: local('Radley'), url('/f/RadleyItalic.woff') format('woff');

}

.fontHeader {

font-family: Radley, Arial, sans-serif;

}

.fontHeader.bold {

font-family: RadleyBold, Arial, sans-serif;

}

.fontHeader.italic {

font-family: RadleyItalic, Arial, sans-serif;

}

To działa dobrze; możesz uzyskać dostęp do normalnej, pogrubionej i pochylonej wersji czcionek. Ale jest to prawdziwy bałagan do wdrożenia i jest podatny na ludzkie błędy. Wróćmy do tych importów i zdefiniuj te same cechy, kiedy je importujemy:

@font-face {

font-family: 'Radley';

font-style: normal;

font-weight: normal;

src: local('Radley'), url('/f/Radley.woff') format('woff');

}

@font-face {

font-family: 'Radley';

font-style: normal;

font-weight: 800;

src: local('Radley'), url('/f/RadleyBold.woff') format('woff');

}

@font-face {

font-family: 'Radley';

font-style: italic;

font-weight: normal;

src: local('Radley'), url('/f/RadleyItalic.woff') format('woff');

}

and now the easy implementation:

.fontHeader {

font-family: Radley, Arial, sans-serif;

}

.fontHeader.bold {

font-weight: 800;

}

.fontHeader.italic {

font-style: italic;

}

Ustawiając styl i wagę podczas importu, możemy kontrolować styl i wagę za pomocą prostych, znanych atrybutów. Pomaga nam to utrzymać nasz CSS w czystości, a ponieważ teraz tworzymy nasze deklaracje tak, jak w przypadku każdej czcionki, jesteśmy znacznie mniej podatni na błędy.

Kilka rzeczy do zapamiętania: Wsparcie i wydajność

IE 5 zaczął obsługiwać czcionki internetowe ponad 20 lat temu, ale twórcy stron internetowych nie byli w stanie ich używać, dopóki obsługa CSS3 nie stała się płodna. Patrząc wstecz, mogło to mieć coś wspólnego z faktem, że IE obsługiwał tylko jeden typ czcionki dla Internetu (EOT) i nikt inny jej nie obsługiwał. Implementacja CSS3 znacznie otwiera model wsparcia. Atrybut font-face CSS3 obsługuje większość współczesnych typów czcionek: TTF (czcionki TrueType), OTF (czcionki OpenType), WOFF (format czcionek dostępny tylko w Internecie), EOT (osadzony OpenType, tylko IE) i czcionki generowane przez SVG. Nie wszystkie przeglądarki obsługują wszystkie typy czcionek jednakowo. Należy również pamiętać, że ładowanie czcionki zajmuje trochę czasu. Przeglądarki mogą nadal wyświetlać stronę internetową podczas ładowania czcionek, ale większość przeglądarek nie wyświetla tekstu wykorzystującego zaimportowaną czcionkę, dopóki czcionka nie zostanie załadowana. Zachowaj ostrożność, ponieważ może to powodować problemy z obsługą. Nie ma określonego limitu liczby czcionek, których chcesz użyć na stronie, ani liczby razy, gdy chcesz użyć każdej czcionki, ale pamiętaj, że w większości przypadków musisz załadować tę czcionkę z Internetu, więc weź pod uwagę liczbę czcionek i rozmiar czcionek używanych na każdej stronie.

Łatwa implementacja czcionek internetowych Google

Google Web Fonts oferuje kilka prostych sposobów implementacji czcionek internetowych (jeśli nie znasz implementacji CSS3, przeczytaj wcześniejszy Hack) . Na początek uruchom swoją ulubioną przeglądarkę HTML5 i przejdź do strony Google Web Fonts. Spowoduje to wylądowanie w widoku galerii katalogu. Chociaż masz opcję filtrowania i przeglądania czcionek, wyszukajmy konkretną. Wpisz nazwę czcionki Bitter w polu wyszukiwania i powinna pojawić się tylko jedna czcionka. Wybierz funkcję Szybkie użycie, aby uzyskać więcej informacji na temat korzystania z czcionek. Istnieją trzy główne metody implementacji: Standard, @import i JavaScript. Najpierw spójrzmy na wersję Standard. Pozostaw Google, aby jeszcze łatwiej było coś łatwiejszego. Standardowa implementacja polega na dodaniu jednego wiersza kodu do dokumentu HTML:

< link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css' >

Po załadowaniu tego arkusza stylów dodaje on tę deklarację do swojej strony:

@font-face {

font-family: 'Bitter';

font-style: normal;

font-weight: 400;

src: local('Bitter-Regular'), url('http://themes.googleusercontent.com/

static/fonts/bitter/v4/SHIc

Xhdd5RknatSgOzyEkA.woff') format('woff');

}

Jeśli przeczytałeś poprzedni Hack, może to wyglądać znajomo. Arkusz stylów po prostu ładuje deklarację @ font-face. Po załadowaniu czcionki można jej użyć w dowolnej deklaracji CSS w dowolnym arkuszu stylów. Po prostu dodaj nazwę do swoich stylów:

h1 {

font-family: Bitter, Georgia, serif; font-weight: 400;

}

Drugi typ implementacji to @import. Aby zaimportować czcionkę, dodaj ten wiersz kodu do arkusza stylów lub do bloku stylów na stronie HTML:

@import url (http://fonts.googleapis.com/css?family=Bitter);

Spowoduje to załadowanie tego samego arkusza stylów z tą samą deklaracją @ font-face. Trzecia opcja, JavaScript, załaduje ten sam arkusz stylów CSS, ale tym razem załaduje go dynamicznie za pomocą skryptu:

< script type="text/javascript" >

WebFontConfig = {

google: { families: [ 'Bitter::latin' ] }

};

(function() {

var wf = document.createElement('script');

wf.src =('https:' == document.location.protocol?'https':'http')

+'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';

wf.type = 'text/javascript';

wf.async = 'true';

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(wf, s);

})(); < /script >

Ten skrypt dynamicznie ładuje plik JavaScript, który z kolei dynamicznie ładuje plik CSS. Chociaż każda z tych metod ładowania ma zalety i wady, zalecam wypróbowanie każdej z nich w aplikacji i poszukiwanie tej, która zapewni najlepsze wyniki w danej sytuacji. Powiedzmy, że chcesz załadować kilka różnych czcionek dla swojej strony. Google Web Fonts nazywa to kolekcją i pomoże ci to zrobić przy jak najmniejszym wpływie. Wróćmy do katalogu Google Web Fonts i wybierz kilka czcionek jednocześnie. Tym razem kliknij przycisk Dodaj do kolekcji. Poszukam trzech moich ulubionych czcionek: Merriweather, Bitter i Alegreya. Po wybraniu kilku czcionek kliknij przycisk Użyj, a nastąpi przejście do znanej strony, na której znajduje się kod umożliwiający dodanie tej kolekcji czcionek do stron. Dodanie kolekcji jest równie proste, jak dodanie pojedynczej czcionki. Wybiorę standardową metodę:

< link href='http://fonts.googleapis.com/css?family=Bitter|Merriweather |Alegreya' rel='stylesheet' type='text/css' >

Jeśli przejrzymy plik CSS dodany do mojej strony, zobaczymy trzy deklaracje @ font-face zamiast jednej:

@font-face {

font-family: 'Alegreya';

font-style: normal;

font-weight: 400;

src: local('Alegreya'), local('Alegreya-Regular'),

url('http://themes.googleusercontent.com/static/fonts/alegreya/v3/MYF

QxfgoxFvFirdbdLj3M_esZW2xOQ-xsNqO47m55DA.woff') format('woff');

}

@font-face {

font-family: 'Bitter';

font-style: normal;

font-weight: 400;

src: local('Bitter-Regular'),

url('http://themes.googleusercontent.com/static/fonts/bitter/v4/SHIcXh dd5RknatSgOzyEkA.woff') format('woff');

}

@font-face {

font-family: 'Merriweather';

font-style: normal;

font-weight: normal;

src: local('Merriweather'),

url('http://themes.googleusercontent.com/static/fonts/merriweather/v4/ RFda8w1V0eDZheqfcyQ4EHhCUOGz7vYGh680lGh-uXM.woff') format('woff');

}

Nietradycyjny dostęp do czcionek

Chociaż Google oferuje wiele opcji ładowania czcionek internetowych, mogą istnieć pewne scenariusze, które po prostu nie pasują do podanych opcji. Nie trać nadziei. W tej sytuacji jest też hack! Google Web Fonts pozwala zabrać ze sobą czcionki. W rogu każdej strony Użyj znajduje się link do pobrania wszystkich czcionek z bieżącej kolekcji. Dzięki temu możesz pakować te czcionki lokalnie, a nawet używać ich lokalnie za pośrednictwem innej aplikacji, takiej jak Adobe Photoshop. Jest to niezbędne dla projektantów, którzy wykonują makiety Photoshop i chcą używać tej samej czcionki w swojej makiecie, co w swoim ostatecznym projekcie. Aby uzyskać jeszcze większą elastyczność, Google zapewnia programistom pełny dostęp API do usługi czcionek internetowych. Zespół zapewnia dodatkowe wskazówki na swojej stronie internetowej. Dostęp do interfejsu API jest niezbędny dla każdego programisty, który chce zbudować funkcjonalność w oparciu o istniejące usługi Google.

Optymalizacja wykorzystania czcionek

Jakby tego wszystkiego było mało, tutaj Google Fonts staje się naprawdę dobry! Ładowanie czcionek może być uciążliwe pod względem czasu ładowania strony, ale Google Web Fonts ma jeszcze jedną sztuczkę, która sprawia, że implementacja jest nieco lżejsza. Wiele razy specjalne czcionki są używane w bardziej statycznych częściach strony, na których treść jest przewidywalna. W tych okolicznościach Google opracował funkcję optymalizacji żądania czcionek (pamiętaj, że ta funkcja jest w fazie beta w chwili pisania tego tekstu). Każda implementacja ładuje plik CSS, który zawiera deklarację @font-face. Adres URL pliku wygląda mniej więcej tak:

http://fonts.googleapis.com/css?family=Inconsolata

Aby określić ograniczony zestaw znaków w pliku czcionki, dodaj parametr ciągu zapytania na końcu wywoływanego tekstu, dodając &text = na końcu adresu URL. Następnie określ swój zestaw znaków po parametrze tekstowym w następujący sposób:

http://fonts.googleapis.com/css?family=Inconsolata&text=Hello

Spowoduje to zwrócenie zoptymalizowanego pliku czcionek, który może zmniejszyć rozmiar pobierania nawet o 90%. Jest to sprytny sposób na wykorzystanie ulubionych czcionek przy jednoczesnym utrzymaniu rozmiarów plików zarządzalnych dla użytkowników.

Typowe błędy

Używanie czcionek może wymagać dużo pracy, a dobre wykonanie może wymagać jeszcze więcej pracy. Wiele wysiłku włożono w to, aby korzystanie z czcionek internetowych Google było łatwe w użyciu, ale należy zwrócić uwagę na kilka łatwych do popełnienia błędów. W niektórych przypadkach ładowanie czcionek internetowych na stronie może być zbyt łatwe - tak łatwe, że możesz mieć skłonność do ładowania większej liczby czcionek niż potrzebujesz. Wiele czcionek internetowych Google oferuje więcej niż standardowa waga (400) i styl. Wróćmy do jednej z moich ulubionych czcionek, Bitter. Wyszukaj "Gorzki" i przejrzyj stronę Użyj. Zauważysz, że na tej stronie można uzyskać dostęp do wielu wersji czcionki Bitter. Niezależnie od tego, czy pobierasz wszystkie wagi i style, aby mieć do nich dostęp, czy ładujesz niektóre dodatkowe wersje przypadkowo, pamiętaj, że czcionki internetowe mogą mieć negatywny wpływ na wydajność Twojej strony. Im więcej wersji czcionek załadujesz, tym dłużej potrwa renderowanie strony. Zdecydowanie zalecamy używanie Kreatora kolekcji w czcionkach internetowych Google do określania dokładnych czcionek i stylów, które należy załadować dla aplikacji internetowej. Drugi często występujący problem ma więcej wspólnego z prawidłowym użyciem czcionek. Dość często używane są niestandardowe czcionki internetowe w nagłówkach stron. Nagłówki mają również mało znaną "funkcję" o nazwie automatyczne pogrubienie. Przeglądarki zapewniają podstawowe style dla każdego ze swoich tagów HTML. Typowym przykładem jest wcięcie każdego elementu listy (li) zagnieżdżonego w liście nieuporządkowanej (ul). Innym powszechnym stylem jest powiększanie i zwiększanie ciężaru nagłówków w stosunku do wszystkich innych tekstów. Typowy tekst ma grubość czcionki 400; większość przeglądarek ustawia domyślną grubość czcionki dla nagłówków na 700. Spójrzmy na tę stronę Użyj czcionki Bitter. Ta konkretna czcionka zapewnia wersję o gramaturze 700, dzięki czemu czcionka będzie poprawnie renderowana. Nie wszystkie czcionki zapewniają wersję o gramaturze 700; w rzeczywistości wiele zapewnia tylko standardowa wersja z czcionką o gramaturze 400. Spójrzmy na czcionkę, która zapewnia tylko standardową grubość czcionki 400. Czcionka Inconsolata jest świetnym przykładem. Oto CSS:

p{

font-family: Inconsolata, Arial, Sans Serif;

}

To świetnie wygląda czcionka. Teraz zastosujmy tę samą czcionkę do nagłówka

Oto CSS:

h1{

font-family: Inconsolata, Arial, Sans Serif;

}

Ponieważ wersja Inconsolata o gramaturze 700 nie jest dostępna, przeglądarka uruchamia się i próbuje to zrekompensować, stosując własną czcionkę pogrubioną. Zwykle kończy się to zauważalnie brzydkim produktem. Na szczęście rozwiązanie jest dość proste. Musisz zresetować grubość czcionki do 400 dla czcionki, na którą miałoby wpływ automatyczne pogrubienie. Wiele resetów CSS (dodatkowy plik CSS, który dodajesz do strony w celu usunięcia wszystkich domyślnych stylów ustawionych przez przeglądarkę) usunie dla ciebie grubość czcionki dzięki kodowi wyglądającemu tak:

h1, h2, h3, h4, h5 {

font-weight: 400;

}

Wolę tę metodę, ponieważ daje przewidywalną linię bazową dla wszystkich przeglądarek, ale bardziej sensowne może być zresetowanie jej grubości po wdrożeniu odwołania do rodziny czcionek do problematycznej czcionki. Kod może wyglądać mniej więcej tak:

h1{

font-family: Inconsolata, Arial, Sans Serif;

font-weight: 400;

}

Każda z tych opcji gwarantuje nieskazitelną implementację czcionki internetowej. Aby uzyskać więcej informacji o czcionkach internetowych Google, odwiedź stronę główną produktu.

Użyj efektów tekstowych CSS3, aby Twój tekst nie był do niczego

Efekty tekstowe CSS3 wreszcie dają ci kontrolę nad tekstem. Poznaj niektóre z najnowszych i najlepszych funkcji kontroli tekstu dzięki efektom tekstowym CSS3. CSS zawsze był spektakularny dla programistów i projektantów. Uwielbiamy moc kontrolowania wyglądu za pomocą prostej deklaracji. Niestety, kiedy poznaliśmy wewnętrzne zasady działania języka stylu, zaczęliśmy zdawać sobie sprawę z jego wad. W przypadku języka zaprojektowanego do stylizowania HTML (pamiętaj, że "T" oznacza "Tekst"), nigdy nie mieliśmy dużej kontroli nad tekstem. Często widziałem ograniczenia kontroli tekstu CSS, co ilustruje prosta fraza pokazana na rysunku


Rysunek został utworzony z tego CSS:

p.test{

width: 45px;

padding:5px;

border: 1px solid black;

text-transform: uppercase;

}

i z tego znacznika:

< p class="test" > CSS is awesome!< /p >

Ten "błąd" występuje, ponieważ CSS nie może zawijać tekstu, który nie zawiera spacji. W przeszłości musieliśmy stosować rozwiązania JavaScript lub ręcznie wprowadzać tagi podziału, z których żaden nie był elegancki. Wreszcie CSS3 rozwiązuje problem. Weźmy ten sam znacznik, który mieliśmy wcześniej, prosty wiersz tekstu w akapicie i zastosuj do niego nowy atrybut CSS.


Oto CSS użyty do utworzenia rysunku: p.test{ width: 45px; padding:5px; border: 1px solid black; word-wrap:break-word; text-transform: uppercase; } A oto znaczniki: < p class="test" > CSS3 is awesome!< /p > Teraz CSS3 jest naprawdę niesamowity! Atrybut zawijania słów umożliwia podział tekstu na słowo do następnego wiersza. CSS doda łącznik przy podziale wyrazu, dodając dodatkowy atrybut dzielenia wyrazów: łącznik. Teraz Twój HTML może układać tekst tak jak edytor tekstu.

Właściwość Text Shadow

Czasami to, co sprawia, że tekst ma tak duży wpływ, to nie tylko czcionka, ale sposób jej prezentacji. Właśnie dlatego cienie tekstu są tak podekscytowane dla projektantów stron internetowych. W przeszłości tekst w tle wymagał użycia obrazów lub obiektów Flash. Za pomocą CSS3 tekst w tle można kontrolować za pomocą kilku atrybutów:

h2{

text-shadow: 2px 2px 4px #ccc;

}

Podzielmy różne właściwości, których używamy z tym atrybutem:

h-value: odległość poziomego cienia, ujemna lub dodatnia

v-value: odległość pionowego cienia, ujemna lub dodatnia

blur size: Rozmiar rozmycia tekstu, opcjonalnie

color: kolor cienia

To takie proste - test cienia bez użycia lampy błyskowej ani zdjęć!

Inne kontrolki tekstu

CSS3 dodaje listę dodatkowych elementów sterujących tekstem, które dają większą kontrolę nad tekstem i zwiększają użyteczność HTML jako języka. Niektóre z tych nowych elementów sterujących są przeznaczone głównie do publikowania w językach innych niż łacińskie

Spraw, aby elementy wyglądały na przezroczyste bez zmiany przezroczystości

Nieprzezroczystość pozwala sprawić, by przedmioty wyglądały na przezroczyste, ale często mają nieoczekiwane efekty uboczne, szczególnie w przypadku zagnieżdżonych przedmiotów. Wprowadzenie przezroczystości alfa w CSS3 daje swobodę korzystania z przezroczystości bez skutków ubocznych. Możesz użyć przezroczystości, aby uzyskać iluzję głębi w swoim projekcie. Najczęściej używasz przezroczystości, aby wyciszyć ekran nakładką lub dodać cień do menu. Przezroczystość daje wrażenie trójwymiarowej przestrzeni w Twojej aplikacji. Przez wiele lat nieprzezroczystość była głównym mechanizmem zapewniającym przejrzystość. Ta szeroko obsługiwana funkcja jest obecna w praktycznie wszystkich przeglądarkach wydanych w ciągu ostatnich sześciu lat. Możesz dodać krycie do dowolnego elementu za pomocą następującego atrybutu:

.opacity {

opacity: .5;

}

Najlepszą rzeczą w nieprzejrzystości jest też najgorsza w tym: nieprzeźroczystość jest odziedziczoną cechą. W CSS niektóre właściwości dotyczą elementu, dla którego została napisana deklaracja (takie jak kolor tła), podczas gdy inne przekazują te wartości swoim dzieciom (takim jak rodzina czcionek). Nieprzeźroczystość też nie. Nieprzeźroczystość przechodzi na charakterystykę. W poprzednim przykładzie każdy element potomny w elemencie z klasą nieprzeźroczystości będzie również miał nieprzeźroczystość 50%. To nie jest dziedziczona właściwość, którą można zmienić lub zresetować. Spójrzmy na przykład zagnieżdżenia krycia:

< div class = "opacity" >

< p class = "opacity" > to jest tekst < /p >

< /div >

W poprzednim przykładzie tekst będzie renderowany z kryciem 0,25 lub 25%, ponieważ dwukrotnie odziedziczył charakterystykę krycia. Czasami odziedziczona cecha może być przydatna, ale innym razem może powodować problemy, które wymagają całkowitego obejścia właściwości.

Przedstawiamy przezroczystość alfa

CSS3 wprowadził dwie nowe opcje kolorów z dodatkowym parametrem przezroczystości alfa: RGBA i HSLA. RGB i HSL to formaty kolorów, których można użyć do wygenerowania milionów kolorów. Kanał A jest dodawany do każdego formatu, aby zapewnić opcję ustawiania przezroczystości alfa na kolor. Umożliwia to zmianę procentu "światła" przechodzącego przez kolor, aby umożliwić oglądanie obiektów za nim. To pojęcie najlepiej zrozumieć na podstawie ilustracji. Trzy poniższe rysunki pokazują zestaw kół kolorów RGB (czerwony, zielony, niebieski) w różnych stanach nieprzezroczystości i przezroczystości







Pierwszy rysunek nie ma ustawień nieprzeźroczytsości i kanału alfa, co zapewnia pełną widoczność. Rysunek drugi ma 50% przezroczystości na każdym kole, a rysunek trzeci ma kanał przezroczystości ustawiony na 50%.

Jak widać, koła kolorów wyglądają prawie identycznie na rysunkach dwa i trzy, ale tekst wewnątrz kół wygląda zupełnie inaczej. Na drugim rysunku tekst wewnątrz kręgów również przybierał charakterystykę nieprzezroczystości ; na rysunku trzy tekst pozostaje niezmieniony. Rzućmy okiem na CSS dla obu tych rozwiązań:

.one.opacity {

background-color: rgb(0, 255, 0);

opacity: .5;

}

.two.opacity {

background-color: rgb(255, 0, 0);

opacity: .5;

}

.three.opacity {

background-color: rgb(0, 0, 255 );

opacity: .5;

}

caption: css for circles with alpha transparancy

.alpha.one {

background-color: rgba(0, 255, 0, .5);

}

.alpha.two {

background-color: rgba(255, 0, 0, .5);

}

.alpha.three {

background-color: rgba(0, 0, 255, .5 );

}

Nowa przezroczystość alfa pozwala nam ustawić przezroczystość w miejscu, w którym ustawiamy kolor. Może to być kolor tła, gradient, cień lub dowolna inna właściwość, która przyjmuje wartość koloru. Dziedziczy tylko wartość koloru i nie wpływa na prezentację elementów potomnych. Może się zdarzyć, że nieprzezroczystość i wszystkie jej odziedziczone cechy są tym, czego wymaga twój projekt. We wszystkich innych sytuacjach CSS3 umożliwia ustawienie przezroczystości bez krycia.

Słowo o formatach kolorów

Być może zauważyłeś, że mamy dwa różne formaty kolorów do wyboru przy ustawianiu przezroczystości alfa. RGBA (czerwony, zielony, niebieski, alfa) i HSLA (odcień, nasycenie, jasność, alfa) są wprowadzane wraz z CSS3 i dla wszystkich praktycznych celów zapewniają te same wyniki. Nie myl się co do tego, którego wzoru użyć. Wybierz format, w którym czujesz się najlepiej. Niektórzy programiści wolą RGBA, ponieważ zasadniczo można go skopiować bezpośrednio z palety Photoshop; inni wolą HSLA, ponieważ daje więcej możliwych do wyrażenia wartości. W HSLA, gdy podnosisz wartość L, kolor staje się jaśniejszy, a gdy obniżysz wartość S, nasycenie zmniejsza się. Oprzyj swój wybór formatu kolorów na wyglądzie, który chcesz osiągnąć.

Użyj Media Queries , aby zbudować responsywny projekt

Twoja strona internetowa może wyglądać równie dobrze na telefonie komórkowym, jak na komputerze. Sekret osiągnięcia tego wyczynu nazywa się responsywnym projektowaniem, a Media Queries są kluczem do tego, aby strony reagowały. Telefon komórkowy jest teraz w modzie. Dzięki HTML5 mobilna sieć jest jeszcze gorętsza. Branża zdecydowała dość wcześnie, że nie jest dobrym pomysłem projektowanie różnych witryn dla różnych typów odwiedzających. Nie chcesz mieć jednej witryny dla użytkowników telefonów komórkowych, innej dla użytkowników komputerów stacjonarnych, a trzeciej dla użytkowników tabletów. Zamiast tego warto opracować jedną witrynę internetową, która może "reagować" na rodzaj używanego interfejsu i zapewniać obsługę odpowiednią dla tego urządzenia. To właśnie nazywamy responsive design. Istnieje kilka technik, dzięki którym projektowanie responsywne działa, ale serce responsywnej strony zaczyna się od korzystania z zapytań o media. Zanim przejdziemy do szczegółów korzystania z zapytań o media, rzućmy okiem na to, co chcemy osiągnąć. IPhone daje nam możliwość "ściśnięcia i powiększenia" strony, abyśmy mogli ją przeczytać, ale nie jest to wspaniałe doświadczenie. Chociaż jest dostępny, z pewnością nie obsługuje mojego urządzenia. Rzućmy okiem na znaczniki, które składają się na sekcję kolumny:

< div class="row" >

< div class="span4" >...< /div >

< div class="span4">...< /div >

< div class="span4" >...< /div >

< /div >

Oto CSS, który obsługuje układ:

.row {

width: 100%;

}

.span4 {

width: 300px;

float: left;

margin-left: 30px;

}

Aby witryna reagowała na nasze urządzenie, chcemy stracić układ wielokolumnowy i ułożyć całą naszą zawartość w jedną kolumnę - w istocie chcemy przejść z układu poziomego do liniowego. Obecnie nasza strona dzieli przestrzeń okna na trzy kolumny i umieszcza treść w każdej kolumnie. Nasz nowy układ przekształci te kolumny w jeden przepływ liniowy. Teraz, gdy nie mamy obok siebie trzech kolumn o stałej szerokości, nasza strona będzie miała mniejszą szerokość, a tekst i treść zostaną zawinięte w rzutni iPhone′a. Dzięki naszemu nowemu CSS, nasza strona będzie wyglądać znacznie lepiej na iPhonie. Znaczniki pozostają takie same dla tego nowego układu, ale nieco zmieniliśmy nasz CSS:

.row {

width: 100%;

}

.span4 {

width: auto;

float: none;

margin: 0;

}

Nadchodzą zapytania mediów

Gratulacje! Masz responsywny projekt! Teraz musisz zaprogramować przeglądarkę, aby wiedziała, kiedy używać jednego projektu na drugim. Nadchodzą Media Queries. Pozwalają na umieszczenie warunków wokół twojego CSS, aby powiedzieć, czy powinien stosować deklaracje CSS wewnątrz warunku, czy nie. Istnieje szereg cech, które można wykorzystać do ustalenia, czy reguły powinny być stosowane. Oto niektóre z najważniejszych:

*Szerokość

*Wysokość

* Szerokość urządzenia

* Wysokość urządzenia

*Rozkład

*Orientacja

* Współczynnik kształtu

W tym haku skupimy się na szerokości urządzenia, aby ustalić naszą regułę. Oto rzut oka na naszą zasadę:

@media (max-width: 767px)

Ustaliliśmy, że jeśli szerokość ekranu jest mniejsza niż 767 pikseli, stosujemy reguły CSS. Reguła zostanie zastosowana, jeśli oświadczenie w nawiasach ma wartość true (w tym przypadku zostanie ocenione jako prawda, gdy okno nie będzie miało rozmiaru większego niż 767 pikseli). Możemy zastosować tę regułę do naszego CSS na wiele sposobów. Pamiętaj, że zamierzamy owinąć nasz CSS dla nowego układu liniowego warunkiem zapytania o media, aby był on stosowany tylko wtedy, gdy reguła jest prawdziwa. Istnieją trzy różne sposoby zastosowania reguły warunkowej:

< link > tag

Media Queries można ustawić w znaczniku . Następnie deklaracje w tym pliku są stosowane do strony tylko wtedy, gdy zapytanie o media jest spełnione:

< link rel = "stylesheet" type = "text / css"
media = "screen i (max-width: 767px)" href = "test.css" />
@media conditio

Blok CSS można owinąć w nawiasy klamrowe w dokumencie CSS, a deklaracje CSS są stosowane do dokumentu tylko wtedy, gdy zapytanie medialne jest spełnione:

@media screen and (max-width: 767px) {

.row {

width: 100%;

}

.span4 {

width: auto;

float: none;

margin: 0;

}

}

@import condition

Import przyniesie zewnętrzny plik CSS tylko wtedy, gdy zostaną spełnione warunki zapytania o media. Deklaracje CSS w pliku zewnętrznym nie zostaną zastosowane do dokumentu, dopóki warunki nie zostaną spełnione

@import url("test.css") screen and (max-width: 787px);

Użyliśmy zapytań o media, aby zmienić układ strony, ale można je również wykorzystać do warunku wszelkiego rodzaju deklaracji CSS. Wiele razy korzystna będzie zmiana rozmiaru czcionki, jakości obrazu, odstępów i innych cech w celu lepszego dopasowania do różnych typów urządzeń

Spraw, aby Twoja aplikacja internetowa reagowała na zmiany orientacji urządzenia

Twoje natywne aplikacje są wystarczająco inteligentne, aby wiedzieć, jak trzymasz urządzenie. Teraz Twoje aplikacje internetowe też mogą być. Użyj zapytań Media Queriues na orientacjję, aby Twoja witryna była responsywna. Urządzenia mobilne wprowadziły nowy paradygmat w tworzeniu stron internetowych. W przeciwieństwie do komputerów stacjonarnych i laptopów o stałej orientacji (rzadko widzę, jak ludzie odwracają PowerBooka na bok), urządzenia mobilne można oglądać w trybie poziomym lub pionowym. Większość telefonów komórkowych i tabletów ma akcelerometr, który rozpoznaje zmianę orientacji i odpowiednio dostosowuje ekran. Umożliwia to przeglądanie treści na tych urządzeniach w obu proporcjach. Na przykład iPad ma proporcje ekranu 3: 4, gdy urządzenie jest wyższe niż szerokie. Po obróceniu go na bok ma on współczynnik kształtu 4: 3 (szerszy niż wysoki). To zmiana orientacji. Za pomocą zapytań o media możesz natywnie określić, w której orientacji jest utrzymywane urządzenie, i użyć różnych CSS dla każdej orientacji. Wróćmy do naszej przykładowej strony i zobaczmy, jak to będzie wyglądać w trybie poziomym i pionowym





Oto znaczniki, dzięki którym każdy widok działa:

< div class = "row" >

< div class = "span4"> ... < /div >

< div class = "span4"> ... < /div >

< div class = "span4" > ... < /div >

< /div >

Oto CSS dla widoku trzech kolumn:

.row {

width: 100%;

}

.span4 {

width: 300px;

float: left;

margin-left: 30px;

}

oraz CSS dla widoku jednokolumnowego:

.row {

width: 100%;

}

.span4 {

width: auto;

float: none;

margin: 0;

}

< Teraz zawiniemy każdą opcję CSS w zapytaniach Media Queries aby były one stosowane tylko we właściwej orientacji. Pamiętaj, że zapytania o media zawijają CSS w warunkach, które stosują deklaracje tylko wtedy, gdy zapytanie o media zostanie ustawione na true. Używając wbudowanych zapytań o media aby uzyskać wyjaśnienie innych opcji implementacji), nasz CSS będzie teraz wyglądał mniej więcej tak:

@media screen and (orientation:landscape) {

.row {

width: 100%;

}

.span4 {

width: 300px;

float: left;

margin-left: 30px;

}

}

@media screen and (orientation:portrait) {

.row {

width: 100%;

}

.span4 {

width: auto;

float: none;

margin: 0;

}

}

Dzięki CSS i zapytaniom o media nasza strona będzie miała trzy kolumny treści w trybie poziomym i tylko jedną w trybie pionowym.

Dlaczego nie szerokość?

Jeśli porównasz orientację urządzenia do zapytań o piksele o maksymalnej szerokości, możesz zdać sobie sprawę, że możesz osiągnąć ten hack za pomocą zapytań o maksymalnej i minimalnej szerokości, ponieważ szerokość zmieni się, gdy urządzenie zmieni orientację. Są jednak plusy i minusy, aby to zrobić. Zapytania o media oparte na orientacji często mogą być prostsze. Nie musisz wiedzieć, jakiego rozmiaru ekranu można się spodziewać w orientacji poziomej czy pionowej. Po prostu polegasz na orientacji opublikowanej przez urządzenie. Zyskujesz także spójność między urządzeniami pod względem wyglądu stron w każdej orientacji. Argument przeciwko zapytaniom medialnym o orientacji jest prawie taki sam. Naprawdę nie powinno cię obchodzić, czy Twoja orientacja jest pionowa czy pozioma. Jeśli szerokość ekranu wynosi 700 pikseli, nie powinno mieć znaczenia, w jaki sposób trzymane jest urządzenie: układ powinien obejmować ekran o rozdzielczości 700 pikseli. Podczas projektowania dostępnej przestrzeni faktyczna orientacja staje się nieistotna

Przejmij pełną kontrolę nad swoim DOM dzięki pseudoklasom

Pracujesz z pseudoklasami od lat z kilkoma opcjami dostępnymi w CSS 2.1. Teraz CSS3 pozwala ci używać tych ukrytych klas na prawie każdym elemencie na stronie. Pseudoklasy to jedne z bardziej ekscytujących części CSS. Pseudoklasa to klasa implikowana na elemencie w oparciu o jego zdolność do spełniania ogólnych kryteriów, takich jak fakt, że przycisk jest w stanie wyłączonym lub że jest to pierwsze dziecko elementu nadrzędnego. Pseudoklasę zapisuje się poprzedzając klasę dwukropkiem. Kilka bardzo popularnych pseudoklas zostało wprowadzonych w CSS 2.1. Jedną z najczęstszych była klasa najechania linkiem. Wyglądało to tak:

a:hover { color: green; } Pseudoklasa kotwicy zastosuje deklarację CSS, gdy "najedziesz" myszką na znacznik < link >. Często zdarza się, że zmienia się kolory podczas zdarzenia najechania myszą. CSS3 wprowadził dużą liczbę nowych pseudoklas. W szczególności wprowadzono wiele klas, które mogą być oparte na pozycji DOM (Document Object Model). Spójrzmy na kilka:

div:first-child {

color: blue;

}

span:nth-child(5){ /*chooses the fifth child element */

color: red;

}

p:empty {

display: none;

}

Każda deklaracja CSS ma zastosowanie do elementów nie poprzez nazwy klas, identyfikatory lub nazwy znaczników, ale poprzez inne cechy, które spełniają kryteria pseudoklasy.

Tabela danych pasków zebry CSS

Spójrzmy na przykład, który koncentruje się na relacjach DOM (jak element odnosi się do jego elementu nadrzędnego). Przyjemną funkcją w tabelach z dużą ilością danych jest cień, który jest stosowany do każdego innego wiersza. Ta praktyka, zwana potocznie paskowaniem zebry, pomaga twoim oczom podążać za rzędem przez tabelę. W przeszłości istniała funkcja JavaScript, która działała na wierszach tabeli i określała, które wiersze są nieparzyste, a które równe. W wierszach o parzystych numerach dodawano by do nich klasę, która osłaniałaby rząd, a tym samym "rozbierała" tabelę. Używając pseudoklas CSS, możemy zrobić to samo, ale używając relacji DOM zamiast JavaScript. Zacznijmy od spojrzenia na nasze znaczniki w tabeli:

< table class = "zebraStripe" > < tr >

< th > Nazwa < /th >

< th > Miasto

< /tr >

< tr >

< td > Jeff < /td >

< td > Dayton, OH < /td >

< /tr >

< tr >

< td > Carla < /td >

< td > Rochester, NY < /td >

< /tr >

< tr >

< td > Chloe < /td >

< td > San Juan, PR < /td >

< /tr >

< tr >

< td > Maddy < /td >

< td > San Juan, PR < /td >

< /tr >

< tr >

< td > Jude < /td >

< td > San Antonio, Teksas < /td >

< /tr >

< /table >

Bez CSS każdy wiersz w tej tabeli będzie tego samego koloru. Teraz użyjmy pseudoklasy n-tego typu, aby pokolorować nasze rzędy. Ta pseudoklasa przyjmuje słowo kluczowe (np. Nieparzyste lub parzyste), liczbę lub wyrażenie. W naszym przykładzie użyjemy nieparzystego słowa kluczowego, ale moglibyśmy łatwo użyć wyrażenia takiego jak



.zebraStripe {

width: 100%;

text-align: left;

}

.zebraStripe td, .zebraStripe th {

padding: 10px;

}

.zebraStripe tr th {

color: white;

background-color: #858385;

}

.zebraStripe tr:nth-of-type(odd) td{

background-color: #a6caf5;

}



Zacienione rzędy rysują tylko powierzchnię kontrolki, którą masz za pomocą pseudoklas i pozycji DOM. Istnieje wiele nowych sposobów identyfikowania elementu na stronie, który chcesz kontrolować: first-of-type, last-of-type, only, empty, root; i tak dalej. Wyciągnij te pseudoklasy i zacznij hakować!

Zhackuj duszka i umieść swoje obrazy w jednej linii za pomocą identyfikatorów URI danych obrazu

Zapomnij o kłopotach związanych z ponownym budowaniem obrazka. Możesz użyć identyfikatorów URI danych obrazu, aby "wstawić" obraz bezpośrednio w kodzie HTML lub CSS. Podobnie jak masło idzie z chlebem, sprites idzie z CSS. Duszek obrazu łączy wiele obrazów w jeden obraz. Następnie zamiast używać znaczników obrazu do wyświetlania tych obrazów, używasz obrazów tła CSS, aby je wyświetlić. W CSS zmieniasz pozycję tła na swoich elementach, aby wyświetlać różne części duszka. Ta ikonka ma prawie każdą ikonę używaną w aplikacji Gmail. Teraz spójrzmy na kod, który zmienia ten duży obraz w każdą małą ikonę. Oto znaczniki:

< div class = "uF" >

< div id = ": 99" class = "uE dk dh" > < /div >

< div class = "uD" >

< span id = ": 98" class = "uC" > Jan Kowal < /span >

< /div >

< /div >

A oto CSS:

.dh {

background: url (images / 2 / icons_ns10.png) no-repeat ?40px ?100px;

}

.dk {

width: 16px;

height: 16 pikseli;

}

Ten kod wyświetla ikonę obok nazwy w Gmailu.

Dlaczego duszek?

Duszki zostały wprowadzone jako technika wykonania. Wydajność sieci informuje nas, że pierwszym krokiem do poprawy wydajności strony jest zmniejszenie liczby połączeń z serwerem. Ogólnie rzecz biorąc, im mniej nawiążesz połączeń, tym lepsza będzie strona. Ten duszek znacznie zmniejsza liczbę połączeń. Bez tego duszka każda ikona wymagałaby niewielkiego, ale osobnego połączenia z serwerem. W skrócie, duszki tworzą to ,że strona ładuje się szybciej. Dodatkowym powszechnym wzrostem wydajności jest zmniejszenie całkowitego rozmiaru pliku. Ta redukcja nie byłaby widoczna, ponieważ na ogół musisz dodać dodatkowe białe znaki do duszka, które mogą nie być potrzebne na każdym obrazie, ale duszki często zmniejszają całkowity rozmiar ładunku obrazu. Ponieważ obrazy na stronie często wyglądają podobnie, wspólna paleta kolorów między obrazami zmniejsza rozmiar pliku. Im więcej zgrupujesz podobne obrazy, tym więcej zaoszczędzisz.

Problem z obrazkami

Chociaż duszki rozwiązują problem zmniejszania żądań obrazu, nie są idealnym rozwiązaniem. Największy problem z używaniem duszków polega na tym, że są one trudne do utrzymania. Za każdym razem, gdy zmienia się jedna z twoich ikon, musisz przerobić całego duszka. Jeśli rozmiar ikony się zmienił, być może trzeba będzie poprawić układ duszka, co może oznaczać cofnięcie się i zmianę wielu CSS, aby poprawnie zmienić położenie obrazów tła. Niektóre systemy automatyzacji są dostępne, takie jak Generator duszków CSS, ale automatyczne generowanie duszków zwykle nie jest tak skuteczne, jak ich samodzielne składanie, ponieważ narzędzie montażowe nigdy nie zna wszystkich przypadków użycia twojego obrazu duszków. Ponadto całkowite zmniejszenie pliku zwykle występuje tylko wtedy, gdy łączysz obrazy podobne do siebie (np. Obrazy o podobnej palecie kolorów). Może to wydłużyć czas konserwacji, ponieważ może zajść potrzeba zmiany układu duszków podczas zmiany kolorów ikony. Kolejnym efektem ubocznym ikonek CSS jest zwiększone użycie pamięci w przeglądarce. Duszki CSS zazwyczaj używają dodatkowych białych znaków, aby umożliwić pozycjonowanie CSS bez przypadkowego pokazywania innej części obrazu. Białe znaki zostaną pobrane całkiem dobrze, ponieważ białe znaki są na ogół skompresowane z obrazów. Problem dotyczy renderowania tych obrazów. Przeglądarka nie renderuje obrazów w postaci skompresowanej, dlatego musi wyrenderować pełną, nieskompresowaną wersję duszka. W zależności od ilości białych znaków obraz, który wymaga pobrania 25 KB, może wygenerować więcej niż 10 MB pamięci. Jest to szczególnie problem w przeglądarkach mobilnych, które mają ograniczoną dostępną pamięć.

Hakowanie duszka

Jak więc rozwiązać problemy związane z obrazkami? Możemy użyć URI danych obrazu (Uniform Resource Identifier). Ten identyfikator URI działa w przeglądarkach już w IE 8 i umożliwia "wstawienie" obrazu bezpośrednio do pliku CSS, a nawet tagu obrazu. Zamiast używać adresu URL, który wywoływałby w celu odzyskania obrazu, identyfikator URI danych zawiera wersję obrazu zakodowaną w standardzie Base64, zgodną z dokumentem. Format identyfikatora URI danych jest dość prosty:

data: [< typ MIME >] [; base64], < zakodowane dane >

W takim przypadku dane są Twoim protokołem, < typ MIME > to typ obrazu, którego używasz, base64 to rodzaj kodowania, którego będziesz używać dla swoich obrazów, a to ciąg zakodowanych danych. Kod realistycznego obrazu wbudowanego wyglądałby mniej więcej tak:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AA

AAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAs1JREFUeNq8VztvE0

EQnnsFxbJxlCAEIiAoiC0qOxJpkCAoHRIKLR0VFRJdWugQBRX8EBASDUIkSGlC4XTEps

DiIVEAcsA6x77Hsrs5+24ft7d+6FY6rc8+z8x+M983cwbg9f32yjre3kO+6+by69a2Gd

3sQ/6L+jSGdxgFNImVwqKp/WwwAOh3Q/oZn576tqc9hjVnjBGAeEaThyRP+HkEOkJ01b

rSimGYYJ+ey/TmN/fojhASfClT4Gy9UBp2HAcK5XJmAH/vXzlOgQfKFOzwP6Kvn6fGOm

h9lH29IwtAWKjXnWniUSAWobIGhNPsvgH49TM2aJnQX5pX/if8/SP+HICyBgQWoIMGQC

UuxBAHEJLvEqt/xpqKBWZevAt9uc4lA2gLCLj/2Icrq5PnP2RuR74YGePlmOiAioqEhu

UMGrrP7lEdICro/mFlONcUkD6QlQKhEJE7PQ2Db59A5YNXwg4vRGGzkW7csiFYLLInWq

6CUSgJdSSTYa1u6D19kP4bMcDRsPjkLRPAKFhPbsOWwLPOPHD3IRgXLmsFRBFYOpeA/0

CpAbIADoWOh52blfpkBdCLaRxngPUxNguMU2fTh5Pz1XQh8pBWCrbx9UjoiAkEnK3ntD

CJTAeNDzjfNti1DbBX1sCqXJXOARIf+kUIHBUJAhZB4dotmHceQ0ljHkg0oUwd6MxSfE

YUZNsw40OYKGXTMZFks36dFmOSETIpJpXv77+jg8gwBWkyrD0VkxY8asOFIlg4GIP0ib

UN3OW6EDSxs9Yedcw3MBqAryhqCQJf8HZRF+aSxjww6KLh+0AbI3Api4btmfR/XHheD8

HRYQgDN0y1bc+y6Eiu/T6+Bum8z0xB4mV1M5LlmsrAiZPmseMjpBq/CPdfkZdRrQC4YB

bwdgdfN6J9IeMv7cghGb1fYqedsRHICKgWIbOZaFz0hGTHDsd6xfsvwAB8ABqbrMgqHw

AAAABJRU5ErkJggg==

Powyższy kod wygenerowałby obraz 32 × 32, który wygląda tak :



Aby zaimplementować to w swoim CSS, po prostu zastąp swój normalny adres URL obrazem w wersji Base64:

.backgroundImageClass {

background-image:

url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzen

r0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAs1JREFUeNq8Vz

tvE0EQnnsFxbJxlCAEIiAoi. . . );

}

Aby zaimplementować identyfikator URI danych w znaczniku obrazu, ustaw src na poprzedni ciąg:

< img src="url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgC

AYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAs1JRE

FUeNq8VztvE0EQnnsFxbJxlCAEIiAoi. . . " / >

To takie proste. Ale jestem pewien, że zastanawiasz się, jak przekonwertować te obrazy (które wcześniej były sprite jako jeden obraz) na URI danych. Na szczęście wiele narzędzi jest już dostępnych w Internecie do tego właśnie zadania. Moim ulubionym jest Data URL Maker. Za pomocą tego narzędzia możesz szybko wgrać obraz i przekonwertować go na znaki zakodowane w Base64.

Wady URI danych

Istnieje kilka wad korzystania z danych URI zamiast obrazów lub duszków. Patrząc najpierw na konserwację, utrzymanie URI danych nie jest tak trudne, jak utrzymanie duszków, ale nadal jest trudne, ponieważ za każdym razem, gdy zmieniasz obraz, musisz go ponownie przekonwertować. Istnieje kilka bibliotek, które pomogą Ci w tym aspekcie, przekształcając obrazy w czasie wykonywania, dzięki czemu uzyskasz wszystkie zalety identyfikatorów URI danych bez konieczności konserwacji. Drugim minusem jest utrata kompresji. Kiedy obraz jest transportowany, skompresowana wersja obrazu jest wysyłana tam iz powrotem. Po "rozbiciu" obrazu na identyfikator URI danych traci on swoją kompresję i pojawia się jako bardzo duży obraz, zwiększając w ten sposób ładowność. Dobrą wiadomością jest to, że większość serwerów HTTP zgzipuje wszystkie żądania, co jest rodzajem kompresji wykonywanej przez HTTP. To rekompensuje wszelką utratę kompresji, którą miałeś przez konwersję na podstawowy URI. Trzecim minusem jest to, że identyfikator URI danych nie jest tak buforowalny. Z tradycyjnym obrazem, jeśli użyjesz tego samego obrazu więcej niż jeden raz na stronie, przeglądarka zapisze go w pamięci podręcznej, aby nie trzeba było go pobierać więcej niż raz. Wiele razy przeglądarki będą nawet buforować obrazy ze strony na stronę, gdy obraz zostanie ponownie użyty. Ponieważ identyfikatory URI danych są wbudowane, nie można ich buforować, chyba że buforowany jest dokument nadrzędny. Istnieją więc zalety i wady zarówno ikonek obrazu, jak i obrazów wbudowanych (URI danych). Każde zastosowanie ma specyficzne cechy. Spójrz na szczegóły swojej aplikacji, przeprowadź testy i ustal, które rozwiązanie jest dla Ciebie lepsze.

Zbuduj gradienty w prosty sposób

CSS3 umożliwia stosowanie gradientów kolorów na tle elementów HTML. Uzyskanie właściwego cieniowania z właściwości gradientu może być dość trudne, ale ludzie w ColorZilla zbudowali narzędzie, aby to ułatwić! Gradienty to obrazy, które zawierają płynne przejścia między dwoma lub więcej kolorami. Są szeroko stosowane w grafice i projektowaniu stron internetowych, aby tworzyć eleganckie tła, eleganckie przyciski i ciekawe efekty wizualne na twoich stronach. Historycznie trzeba było używać edytora obrazów, takiego jak Photoshop lub GIMP, aby utworzyć obraz zawierający gradient, zapisać go w pliku, a następnie zastosować jako powtarzające się tło na swojej stronie lub panelu. Ten gradient można łatwo zastosować do projektu jako obraz tła:

#my-panel {

background: url(http://www.example.com/my-gradient.png);

background-repeat: repeat-x;

} Chociaż był to stosunkowo prosty proces, miał kilka poważnych wad. Po pierwsze, jeśli chcesz poprawić swój gradient, musisz wrócić do edytora obrazów i zmienić obraz tła. Ponadto użycie obrazu wymagało od przeglądarki wysłania kolejnego żądania HTTP, aby go załadować, co spowodowało, że strony ładowały się nieco wolniej.

Gradienty czystego CSS

Dobrą wiadomością jest to, że CSS3 wprowadził czyste gradienty CSS, wśród wielu innych wspaniałych funkcji. Umożliwiają one określenie wszystkich ustawień gradientu - kolorów, orientacji itp. - jako czystego CSS, co zapewnia znacznie lepszą elastyczność i lepszą wydajność. W idealnym świecie poprzednim przykładem byłoby po prostu:

#my-panel {

background-image: linear-gradient(rgb(0, 0, 88), rgb(0, 0, 255));

}

Kolejną zaletą korzystania z gradientów CSS jest to, że ponieważ nie używamy już statycznego rozmiaru obrazu do naszego gradientu, możemy zastosować nasz gradient do panelu o dowolnym rozmiarze i poprawnie rozciągnąć efekt gradientu.

Generator gradientów ColorZilla Ultimate

Jak można zauważyć, w przypadku wielu różnych przeglądarek, z których każda ma własne dziwactwa i składnie, rzadko jest to proste, jeśli chodzi o tworzenie stron internetowych, a gradienty nie są wyjątkiem. Ponieważ nadal nie ma standardowej i sfinalizowanej składni gradientów CSS, każda przeglądarka wdrożyła specyficzny dla dostawcy prefiks deklaracji gradientu. Aby więc obsługiwać różne przeglądarki, nasza prosta jednowierszowa deklaracja czysto CSS wygląda następująco:

#my-panel {

background-image: -moz-linear-gradient(rgb(0,0,88), rgb(0,0,255));

background-image: -webkit-linear-gradient(rgb(0,0,88), rgb(0,0,255));

background-image: -ms-linear-gradient(rgb(0,0,88), rgb(0,0,255));

background-image: -o-linear-gradient(rgb(0,0,88), rgb(0,0,255));

}

Jeśli chcesz dodać obsługę starszych wersji IE i dodatkowych przeglądarek, staje się jeszcze bardziej szalone dzięki dodatkowym deklaracjom CSS, z których każda ma własną składnię. Narzędzia takie jak ColorZilla Ultimate Gradient Generator zostały stworzone, aby uratować Cię przed bałaganem składniowym wielu przeglądarek i uprościć gradienty czysto CSS. Dzięki temu narzędziu możesz użyć znanego interfejsu użytkownika podobnego do Photoshopa, aby zaprojektować gradient, i obsługuje złożoność składni, automatycznie generując potrzebne deklaracje CSS dla gradientów w różnych przeglądarkach.

Projektowanie i dostosowywanie gradientów

ColorZilla Ultimate Gradient Generator ma opcje projektowania i dostosowywania gradientów. Jak wspomniano wcześniej, proste gradienty są zazwyczaj płynnymi przejściami między dwoma kolorami: kolorem początkowym i kolorem końcowym. Można również tworzyć bardziej skomplikowane gradienty z wieloma punktami przejścia kolorów, w których przejścia kolorów występują między więcej niż dwoma kolorami. W takim przypadku przejście koloru rozpoczyna się od pierwszego koloru, płynnie przechodzi do koloru "pierwszego zatrzymania", następnie koloru "drugiego zatrzymania" i tak dalej, aż płynnie przejdzie do końcowego koloru. Możesz także tworzyć gradienty o różnych wartościach krycia, co doskonale nadaje się do płynnego mieszania gradientu z innymi elementami wizualnymi. Na przykład możesz utworzyć gradient, który zmienia się z nieprzezroczystego w przezroczysty, a następnie możesz ustawić go nad obrazem. Różne nieprzezroczystość gradientu stopniowo ujawni lub dostosuje treść obrazu. Ponadto narzędzie zawiera wiele ustawień wstępnych, jeśli nie chcesz uruchamiać projektów gradientów od zera, a także możesz zapisywać swoje ulubione projekty w tym narzędziu.

Modernizacja starych gradientów

ColorZilla Ultimate Gradient Generator pozwala importować istniejące gradienty z obrazu lub z CSS specyficznych dla przeglądarki, co jest prostym sposobem edycji istniejących gradientów i konwersji ich do CSS w różnych przeglądarkach. Gradienty CSS oferują ogromne korzyści pod względem wydajności i elastyczności, a narzędzia, takie jak ColorZilla Ultimate Gradient Generator, ukrywają złożoność obsługi w różnych przeglądarkach za wygodnym interfejsem użytkownika. Dzięki pewnym eksperymentom i wyobraźni możesz teraz z łatwością dodać wiele atrakcyjności wizualnej do swoich stron.

Spraw, by obramowanie znów były interesujące dzięki zabiegom granicznym

CSS3 sprawia, że nudne obramowanie staje się ekscytujące. Zapomnij o narożnych obrazach i cieniach. CSS3 oferuje szereg nowych metod leczenia, które przywracają Twoje granice. Obramowanie jest jedną z najczęściej używanych właściwości w CSS. Ma zastosowanie do dowolnego wizualnego elementu HTML i był używany na różne sposoby, aby zwrócić uwagę na treść na stronie. Granice tradycyjnie były ograniczone w swojej prezentacji. W CSS 2.1 ograniczono się do stosowania jednolitych kolorów, prostych narożników i ograniczonych stylów (tylko bryły, kropki i kreski). CSS3 oferuje szereg nowych funkcji modernizujących granice. Promień obramowania, cień ramki i obraz obramowania są głównymi ulepszeniami.

Promień obramowania

Promień obramowania jest od lat popularną funkcją, ponieważ jest wzorem, który był naśladowany w obrazach tła lub elementach wielkości pikseli w niezliczonych aplikacjach. Promień graniczny jest dość prosty do wdrożenia:

.borderRadiusClass {

border: 1px solid #777;

border-radius: 15px 15px 15px 15px

}

Promień granicy oznacza posiadanie granicy, więc najpierw musisz podać właściwość granicy w swojej deklaracji. Musisz zacząć od obramowania, aby promień był widoczny. Następnie ustaw promień dla każdego rogu (lewy górny, prawy górny, prawy dolny i lewy dolny) za pomocą wartości liczbowej.

Box Shadow

Projektanci stron internetowych od dawna używają cieni, aby nadać elementom poczucie głębi na stronie internetowej. CSS w końcu sformalizował tę funkcję dzięki natywnej funkcji box-shadow. Funkcja box-shadow dodaje prawdziwe elementy do twoich elementów. Implementacja wymaga zadeklarowania poziomych i pionowych przesunięć (obie wartości liczbowe), opcjonalnego promienia rozmycia, opcjonalnego promienia rozproszenia i koloru cienia (dowolny obsługiwany format kolorów jest w porządku). Swoją własność zdefiniowałbyś w następujący sposób:

.myShadowClass {

box-shadow: 3px 3px 5px 5px #ddd;

}

Granica Obrazu

Jedną z najpotężniejszych nowych funkcji w CSS3 jest obramowanie obrazu. Zasadniczo ta funkcja umożliwia wykorzystanie pliku obrazu jako granicy, w przeciwieństwie do jednolitych kolorów. Czasami używanie obramowań może być trudne, ponieważ wzorce właściwości mogą nie być zgodne z innymi konwencjami atrybutów obramowania. Atrybut obramowania jest określony w następujący sposób:

border-image: source slice width outset repeat;

Spójrzmy na funkcję każdej właściwości:

source

Definiuje ścieżkę obrazu używanego do obrazu obramowania

slice

Definiuje wewnętrzne przesunięcie lub procent wstawki obrazu z każdego z czterech rogów

width

Określa szerokość granic obrazu

outset

Określa opcjonalną wielkość, o którą obraz obramowania wykracza poza ramkę obramowania

repeat

Określa, czy obraz ma się powtarzać, być zaokrąglany czy rozciągany

Rzućmy okiem na ten atrybut w akcji. Najpierw wykorzystamy tę klasę CSS na elemencie przycisku:

.borderImageClass {

border-image:url(../img/borderImage.png) 29 30 stretch;

border-width: 25px;

color: white;

background: transparent;

font-weight: 800;

}

Nowe funkcje obramowania dały nam dużą elastyczność projektowania. Dawno minęły czasy używania stałych obrazów dla każdego zabiegu wizualnego. Promień obramowania i cień pola spełniają wiele naszych potrzeb projektowych, a większość pozostałej części można rozwiązać za pomocą obrazów obramowania.

Ustaw wiele obrazów tła na ten sam element

Wersja CSS3 atrybutu background pozwala ustawić warstwy obrazów jako tło elementów. Każda warstwa może mieć własne właściwości tła dla projektów, które są bardziej skomplikowane niż było to wcześniej możliwe. Obrazy tła zawsze były niezwykle przydatną funkcją w CSS. Przed CSS3, jeśli chciałeś mieć wiele obrazów tła (powiedzmy wzór tła i logo), musiałeś zhakować rozwiązanie, które zawierało zagnieżdżone elementy i oddzielne deklaracje CSS. Pisanie było zarówno żmudne, jak i trudne. Kiedy wszystko zostało powiedziane i zrobione, pozostało ci mnóstwo dodatkowych znaczników, które istniały tylko po to, aby ułatwić potrzeby projektu. CSS3 obsługuje teraz długo oczekiwaną funkcję wielu obrazów tła. Każdy element może mieć wiele obrazów tła ustawionych na różne "warstwy" tła. Wiele obrazów tła jest szczególnie użytecznych w projektach wymagających płynnego układu, takich jak projektowanie responsywne. Jeśli masz pole tekstowe z nieokreśloną ilością treści, możesz użyć CSS3, aby zapewnić wokół niego zabiegi w stylu "bookend". W naszym przykładzie mamy scenę górską, która zapewnia panoramiczny widok niezależnie od rozmiaru strony. Składnia wielu obrazów tła jest prosta i intuicyjna. Właściwości są zapisywane tak, jak w poprzednich wersjach, z listami podzielonymi na przecięcia dla różnych "warstw" tła:

.mybackgroundClass{

background-image: url(../img/tree.png),url(../img/

mountains.png),url(../img/sky.png);

background-color: #f2f7fb;

background-position: right bottom, left bottom, top left;

background-repeat: no-repeat, no-repeat, repeat-x;

height: 300px;

}

Nasz obraz wymagał trzech obrazów tła: drzewa są w jednym rogu, góry i wzgórza w innym, a nasze niebo powtarza się na dolnej warstwie.

Jak to działa

Oto jak to działa. Każda deklaracja obrazu tła tworzy "warstwę" tła w twoim elemencie. Jeśli masz cztery deklaracje obrazu tła, będziesz miał cztery warstwy (zauważ, że mamy trzy w naszej klasie). Każda właściwość może mieć również listę rozdzielaną przecinkami. Pierwsza pozycja tła zostanie powiązana z pierwszą warstwą obrazu tła i tak dalej, i tak dalej. Jeśli jakakolwiek właściwość tła ma więcej deklaracji niż deklaracji obrazu w tle (np. Pięć powtórzeń w tle deklaracji, ale tylko cztery deklaracje obrazu tła), pozostałe deklaracje zostaną zignorowane. Jeśli deklaracji właściwości jest zbyt mało (np. Trzy deklaracje powtarzania tła i cztery deklaracje obrazu w tle), lista właściwości będzie się cyklicznie przełączać - pierwsza właściwość zostanie użyta ponownie i będzie cyklicznie przewijać całą listę właściwości aż do listy obrazy tła są wyczerpane. Jeśli zadeklarowany zostanie kolor tła, będzie on miał zastosowanie tylko do ostatniej (i dolnej) "warstwy". Skrótową składnię można również zastosować w podobny sposób. W stylu skróconym cała właściwość jest zadeklarowana jako lista rozdzielana przecinkami:

.mybackgroundClass{

background: url(../img/tree.png) right bottom no-repeat,

url(../img/mountains.png) left bottom no-repeat,

#f2f7fb url(../img/sky.png) top left repeat-x;

height: 300px;

}

Zauważ, że kolor tła można zdefiniować tylko na końcowej "warstwie", która jest renderowana jako dolna warstwa. Ta łatwa do wdrożenia funkcja pokazuje moc i prostotę, jakie można znaleźć w całej rodzinie technologii HTML5.

Uwolnij elementy swojej strony z ich tradycyjnej przestrzeni dzięki Transformacjom CSS3

Transformacje CSS3 umożliwiają dodanie perspektywy do elementów HTML. Użyj przekształceń CSS3, aby rozmieścić elementy w przestrzeni 2D lub 3D. HTML jest ogólnie prezentacją liniową, ponieważ wszystkie elementy są zasadniczo prostokątami. Transformacje pozwalają wykorzystać różne płaszczyzny, aby dać perspektywę projektu. Istnieją dwa rodzaje transformacji: 2D i 3D. Spójrzmy na opcje dostępne w transformacjach 2D:

Skew

Definiuje pochylenie 2D wzdłuż osi xi y

Scale

Zapewnia skalę 2D na osiach xi y

Rotate

Zapewnia obrót 2D w określonym stopniu

Tłranslate

Tłumaczy (lub przemieszcza) element w zdefiniowanym miejscu 2D

Zastosujmy każdą transformację do pojedynczej klasy, a następnie zwiń ją do postaci klasa skóconej również:

.elementSkew {

transform:skew(30deg);

}

.elementScale {

transform:scale(1,0.5);

}

.elementRotate {

transform:rotate(30deg);

}

.elementTranslate {

transform:translate(25px, 25px);

}

.elementRotate-skew-scale-translate {

transform:skew(30deg) scale(1,.5) rotate(30deg) translate(25px,25px);

}

Każdy element pokazany poniżej ma przypisaną odpowiednią klasę. Zwróć uwagę na użycie osi x i y do transformacji każdego elementu. Nasz tradycyjny plac może przybierać różne perspektywy dzięki transformacjom.



CSS3 przekształca się w 3D

Transformacje trójwymiarowe są implementowane w podobny sposób jak transformacje 2D, ale masz dostęp do trzeciej płaszczyzny. Oto opcje dostępne w transformacjach 3D:

translate3d

Przesuwa (lub przesuwa) element w zdefiniowanym miejscu 3D na osiach x, y i z

scale3d

Określa operację w skali 3D na osiach x, y i z

rotateX

Określa obrót w prawo o podany kąt wokół osi x

rotateY

Określa obrót zgodnie z ruchem wskazówek zegara o podany kąt wokół osi y

rotateZ

Określa obrót zgodnie z ruchem wskazówek zegara o podany kąt wokół osi Z.

perspective

Wartość, która określa postrzeganą odległość obiektu 3D (mniejsze liczby sprawiają, że obiekty wydają się bliżej)

Ponownie stworzymy klasę dla każdej właściwości. Tak będzie wyglądał CSS:

.elementTranslate3d{

transform: translate3d(75%, ?25%, 0); }

.elementScale3d{

transform: scale3d(.5, 1.25,1);

}

.elementRotateX {

transform:rotateX(100deg);

}

.elementRotateY {

-webkit-transform:rotateY(10deg);

}

.elementRotateZ {

transform:rotateZ(10deg);

}

.elementPerspective{

perspective: 800px;

}

Weźmy te same nudne pudełka z naszego pierwszego przykładu i zastosuj nasze nowe zajęcie 3D na nich



Nie możesz zobaczyć dużej wartości transformacji 3D od samego początku. Kiedy przesuwasz element na osi Z (lub na płaszczyźnie 3D), wygląda to jak inny efekt (taki jak pochylenie 2D lub linia), ale poczekaj na następny hack, w którym 3D spotyka przejścia, by uzyskać niesamowite efekty .

Jeszcze bardziej zaawansowane efekty

Transformacje dają ogromną kontrolę nad elementami strony. Wprowadzenie trzeciego wymiaru ma dodatkowe zalety na wielu współczesnych urządzeniach mobilnych. Wykorzystanie transformacji 3D angażuje procesor graficzny twojego urządzenia i daje korzyść z przyspieszenia sprzętowego

Przekształć transformacje w animacje dzięki CSS3 Transitions

Możesz przekształcić transformacje 2D i 3D w niestandardowe animacje za pomocą atrybutu transitionj. Animacje zawsze były fascynujące dla twórców stron internetowych. Jedynym mechanizmem animacji dostępnym w przeszłości był JavaScript, ale zawsze tak pracochłonne było ciągłe przerysowywanie naszych elementów na stronie, jak tworzenie starych animacji flipbook, które moi rodzice używali do tworzenia jeszcze przed pojawieniem się telewizji. Wiele bibliotek JavaScript, w tym jQuery i YUI, uprościło proces animacji elementów, ale ostatecznie były to ruchome elementy JavaScript. Wyniki zawsze były rozczarowujące. Potem pojawił się promień światła zwany przejściami. Przejścia same w sobie nie są animacjami, ale pozwalają nam dodać właściwość do deklaracji CSS, która zmienia inną właściwość w określonym czasie i wow, czy to gładkie!

Przejścia są również naprawdę łatwe w użyciu. Przełammy proces i spójrzmy na składnię atrybutu. Twoje przejścia mogą wyglądać tak prosto:

.elementTransition {

transition: width 2s;

width: 100%;

}

To jest o wiele łatwiejsze, prawda? Dla tej klasy podajemy dwie właściwości:

transition-property

Określa, która właściwość zostanie przeniesiona

transition-duration

Określa, ile czasu zajmie ukończenie przejścia

Podczas gdy jesteśmy przy tym, spójrzmy na nasze dwie pozostałe możliwe do zdefiniowania właściwości:

transition-timing-function

Opisuje kilka predefiniowanych stylów przejścia; domyślnie jest to łatwość

transition-delay

Określa, kiedy rozpocznie się przejście

W pokazanej wcześniej klasie przykładowej określamy czas i do jakiej wartości przenosimy "do". Najbardziej oczywistym pytaniem jest to, z czego "przechodzimy". Prosta odpowiedź brzmi: cokolwiek ta wartość została zdefiniowana, jak przed dodaniem klasy. Spójrzmy na pełny przykład. Zaczniemy od naszego prostego znacznika:

< div class="elementStart" >

< button id="myAction" >Hello world!< /buton >

< /div >

A oto klasa CSS, która określa oryginalny widok naszego znacznika:

.elementStart {

width: 50%;

border: 1px solid green:

height: 300px;

}

Zauważ, że najpierw zdefiniowaliśmy szerokość naszego elementu do ustawienia na 50%. Jest to wartość początkowa, z której będziemy przechodzić. Aby rozpocząć przejście, musimy dodać nową klasę (o nazwie elementTransition) do naszego elementu za pomocą czasomierza lub akcji użytkownika. W takim przypadku dodamy proste kliknięcie przycisku wewnątrz naszego div, który doda naszą nową klasę i rozpocznie przejście. To jedna prosta linia JavaScript:

document.getElementById ('myAction'). onclick = function (e) {var a =

e.target.parentNode; a.className = a.className + = 'elementTransition';};

Połącz je razem w swoim dokumencie i zobacz, co się stanie.

Przejście do czego?

Atrybut przejścia nie jest jedynym atrybutem, który może przejść. Oto kilka dodatkowych atrybutów, które można przenieść zgodnie ze specyfikacją W3C





Wykonuj przejścia 3D za pomocą transformacji

Przejścia CSS3 naprawdę świecą, gdy są połączone z transformacjami CSS3 3D. Sama transformacja 3D może wydawać się pozbawiona wyraźnego celu. Ustawienie obrotu 3D, na przykład na (90, 90, 90) sprawi, że obiekt będzie wyglądał jak linia na twojej stronie, ale sparuj tę wartość z atrybutem przejścia, a teraz pojawi się coś, co wygląda jak animacja 3D obrócić na bok. CSS powinien być bardzo podobny do transformacji 2D. Pamiętaj, że mamy dwie definicje transformacji. Pierwsza definicja jest punktem początkowym div. Drugi jest dodawany później i informuje przejście, gdzie się kończy.

Wydarzenia przejściowe

W wielu przypadkach możesz chcieć wywołać zdarzenie na końcu jednego z przejść. Twoja przeglądarka opublikuje wydarzenie po zakończeniu każdego wydarzenia. Składnia ma taką samą strukturę jak zdarzenia użytkownika. W JavaScript po prostu dodajesz detektor zdarzeń do elementu, który otrzymuje przejście:

Twórz karty w stylu iOS za pomocą CSS Transforms and Transitions

Zachwyć użytkowników niestandardowymi animacjami, do których przywykli w natywnych aplikacjach. Ten hack pokazuje, jak odtworzyć wspólną animację iOS w CSS. Aplikacje mobilne zwiększyły nasze oczekiwania, jeśli chodzi o wrażenia użytkownika, a Apple jest liderem dzięki swoim kultowym i realistycznym aplikacjom. Apple stworzyło wiele wzorców użytkowników, które działają tak dobrze i mają taki sens, że zaczęliśmy się ich spodziewać we wszystkich aplikacjach. Jednym z tych kultowych wzorów jest odwrócenie karty. Jednym z najbardziej zapadających w pamięć zastosowań odwracania karty jest aplikacja pogodowa na iOS, która wyświetla Twoją pogodę na ekranie, z ikoną "i" w rogu. Po dotknięciu "i" karta odwraca się i pozwala skonfigurować ją z ustawieniami na odwrocie. Możemy odtworzyć tę animację za pomocą prostych znaczników i CSS. Zacznijmy od utworzenia znaczników:

< div class="viewPort" >

< div id="card" class="card" >

< div class="frontView" >HTML5 Hacks< /div >

< div class="backView" >Rocks!< /div >

< /div >

< /div >

Opracowaliśmy kilka prostych elementów konstrukcyjnych dla naszego komponentu. Sprawdźmy je:

viewPort

W naszym przykładzie jest to kontener nadrzędny dla naszego komponentu, ale na urządzeniu mobilnym, na którym ta "karta" zajmie cały ekran, ważne jest, aby zrozumieć obszar oglądania. Na urządzeniu mobilnym wszelkie przejścia, które spowodowałyby, że część naszych elementów znajdowała się poza tym divem, zostałyby odcięte przez okno. karta Ten kontener nadrzędny jest kluczem do tego przejścia, ponieważ daje nam wspólnego nadrzędnego dla dwóch stron karty.

frontView i backView

Znaczniki w każdym z tych div staną się treścią dla dwóch stron karty.

Stylizacja elementów ViewPort, który jest kontenerem nadrzędnym w tym komponencie, odgrywa kluczową rolę w zachowaniu kart. Rzućmy okiem na CSS:

.viewPort {

width: 200px;

height: 260px;

position: relative;

margin: 0 auto 40px;

border: 1px solid #CCC;

perspective: 800px;

}

W poprzednim kodzie viewPort jest tak naprawdę pojemnikiem, który ustawia rozmiar dwustronnej karty. W naszym przykładzie mamy ustawioną szerokość pikseli, ale w przykładzie takiego urządzenia jak iPhone, gdzie byłby to zabieg na pełnym ekranie, wysokość i szerokość byłyby po prostu 100%. Dodatkowym kluczowym atrybutem w tej deklaracji jest perspektywa. Perspektywa jest właściwością, która określa "pozorną" odległość renderowania 3D. Technicznie określa, ile pikseli obraz 3D znajduje się poza widokiem. Korzystamy z perspektywy, aby ustawić głębokość naszego flipa, aby pasował do głębokości natywnego flipa z karty Apple. Elementem karty jest div, który faktycznie jest odwracany z przejściem, więc nasza oryginalna właściwość transakcji jest przypisana do tego elementu w naszym CSS:

.card {

width: 100%;

height: 100%;

position: absolute;

transition: transform 1s;

transform-style: preserve-3d;

transform-origin: right center;

}

Zwróć szczególną uwagę na przekształcenia w ramach tej deklaracji. Ustawiliśmy styl transformacji na 3D, aby mieć dostęp do osi X, Y i Z. Nasz początek transformacji określa odległość naszego elementu od "początku" lub jądra transformacji. W tym przypadku chcemy, aby nasza rotacja pozostała w prawo i wyśrodkowana. Na koniec, na tym elemencie ustawiamy atrybut przejścia. Określamy właściwość, która zostanie przeniesiona (w tym przypadku transformacja) i czas trwania, który wynosi jedną sekundę. Ponieważ karta jest elementem, który otrzymuje przejście, musimy określić wartość, do której przechodzimy. W tym przypadku zaczynamy od prawego środka i ustawiamy dodatkową nazwę klasy w elemencie karty, aby zdefiniować nową właściwość transformacji, w którą właśnie przechodzimy:

.card.flipped {

transform: translateX( ?100% ) rotateY( ?180deg );

}

Nasza transformacja rozpoczęła się w prawym środku i przeszła do naszego punktu końcowego - 100% na osi x i obróciła - 180 stopni na osi y. Przejście nastąpi, gdy dodamy nową klasę do naszego elementu karty, co pozostawi nam znaczniki wyglądające następująco:

< div class="viewPort" >

< div id="card" class="card flipped" > < div class="frontView" >HTML5 Hacks< /div > < div class="backView" >Rocks!< /div >

< /div >

< /div >

To proste przejście daje nam wygląd odwrócenia karty. Ostatnie dwa elementy w naszym komponencie to przód i tył kart. Zaskakujące jest to, że na każdej karcie nie ma za dużo CSS:

.card .frontView, .card .backView {

height: 100%;

width: 100%;

background: black;

line-height: 260px;

color: white;

text-align: center;

font-weight: bold;

font-size: 5em;

position: absolute;

backface-visibility: hidden;

}

.card .backView {

-webkit-transform: rotateY( 180deg );

transform: rotateY( 180deg );

}

Tak naprawdę są tylko dwa "funkcjonalne" atrybuty CSS tych elementów, na które należy zwrócić uwagę. Pierwszy dotyczy obu elementów i jest atrybutem widoczności tła.

backface-visibility określa, czy element można odwrócić po jego odwróceniu, czy też element znika. Domyślne jest widoczne, więc aby nie wywołać krwawienia z div kiedy karta zostanie odwrócona, nadamy temu atrybutowi wartość false.

Drugi atrybut dotyczy tylko rewersu karty. Ustawiliśmy prostą transformację obrotową o 180 stopni. To całkowicie odwraca tył, a nasze pozycjonowanie pozwala dwóm kartom zajmować to samo miejsce, przez co pojawia się jako przód i tył tej samej karty. Być może zastanawiasz się, czy musimy zmienić transformację, kiedy odwrócimy kartę. Cóż, my nie. To świetny przykład budowania złożonego kontekstu z transformacjami. Mamy zagnieżdżoną transformację, w której karta ma transformację, a następnie tylna strona karty w niej również ma transformację. W tym scenariuszu tylna strona karty zawsze będzie się obracać o 180 stopni od przodu karty, a tylko karta macierzysta jest obracana w przód iw tył, aby kontrolować, które twarze karty są wyświetlane.

Kładąc wszystko razem

Mamy wszystkie składniki tradycyjnego odwracania karty iOS. Brakuje nam tylko kilku wierszy JavaScript, które możemy zadzwonić, aby powiedzieć karcie, kiedy ma się odwrócić. W tym scenariuszu dodałem przycisk u dołu strony z klasą control i ten JavaScript:

document.querySelector('.controls').addEventListener('click',

function(){

var elem = document.querySelector('.card');

elem.className = (elem.className == 'card')?'card flipped':'card';

});

Ten prosty słuchacz doda odwróconą klasę do elementu karty, jeśli nie ma klasy, i zabierze ją, jeśli zrobi to

Użyj Respond.js do Polyfill CSS3 Media Queries w IE

Media Quries są kluczem do opracowania responsywnego projektu, który może być problematyczny dla przeglądarek i telefonów, które jeszcze nie obsługują tej funkcji. Respond.js został opracowany, aby zaspokoić tę potrzebę. Teraz możesz zbudować responsywną stronę internetową, z której każdy może skorzystać. Elastyczne projektowanie może być skutecznym sposobem na tworzenie stron internetowych. Zamiast pisać jedną witrynę, jedną witrynę mobilna i jedną na tablet, wystarczy napisać jedną stronę internetową, która działa dobrze na wszystkich urządzeniach. Jednym z podstawowych narzędzi responsywnego projektowania są Media Queries CSS , ale niestety zapytania o media nie działają w wersjach Internet Explorera wcześniejszych niż IE 8. Jest to problem dla nas, ludzi o standardach sieciowych. Podstawową zasadą współczesnych standardów internetowych jest jednorazowe napisanie aplikacji i włączenie jej we wszystkich przeglądarkach internetowych opartych na standardach. Brak standardów sieciowych może poważnie utrudnić przyjęcie funkcji HTML5, ponieważ funkcje funkcjonalne, takie jak zapytania multimedialne, nie miałyby obsługi wstecznej kompatybilności w starszych przeglądarkach. Na szczęście Bóg stworzył polyfills. W społeczności HTML5 dużo mówimy o tych cudownych rzeczach. Wielokrotne wypełnianie jest tradycyjnym składnikiem internetowym, takim jak JavaScript lub Flash, używanym zamiast funkcji HTML5, gdy przeglądarka nie obsługuje tej funkcji. To pozwala nam na przyjęcie funkcji HTML5 , które pojawią się na rynku i nadal są zgodne z naszymi standardami sieciowymi. Zapytania medialne mają teraz również najwyższej jakości poyfill i nazywa się Respond.js. Respond.js, opracowany przez Scotta Jehla, to polifill JavaScript, który rozpoznaje, kiedy zapytania multimedialne nie są obsługiwane, i uruchamia skrypt, który przechodzi przez zawartość pliku CSS i identyfikuje realizowane zapytania multimedialne. Skrypt faktycznie używa Ajaxa do załadowania wersji pliku CSS jako tekstu, aby mógł go parsować i interpretuje CSS wewnątrz reguł warunkowego zapytania o media. Skrypt następnie nasłuchuje odpowiednich zmian szerokości i wysokości w twoim oknie i zastosuje CSS zgodnie z regułami zdefiniowanymi w zapytaniach o media. To jest takie proste!

Wystarczy dodać JavaScript

Implementacja nie może być prostsza. Użyj CSS opartego na zapytaniach o media, którego normalnie używasz dla responsywnej witryny, a po dodaniu tagów CSS dodaj ten mały plik JavaScript do tagu < head >:

< head >

< meta charset = "utf-8" >

< title > Odpowiedz na stronie testowej JS < /title >



< link href = "test2.css" media = "ekran i (min-szerokość: 37,5em)" rel = "arkusz stylów" > < ! - 37,5 em = 600px @ 16px - >

< script src = "../ respond.src.js" > < /script >

< /head >

Rzućmy okiem na wyniki. W [Hack nr 25] zbudowaliśmy responsywną stronę internetową z zapytaniami medialnymi, a jeśli masz przeglądarkę HTML5, strona będzie działać świetnie



Teraz spójrzmy na tę samą stronę w IE 8



Problem z naszą witryną polega na tym, że nie obsługuje ona wszystkich naszych gości, ponieważ wielu z nich surfuje po Internecie za pomocą przeglądarki, która nie obsługuje zapytań o media. Dodajmy więc nasz skrypt do nagłówka naszej strony i wczytaj stronę ponownie. Powiedziałem ci, że to proste!

Ostrzeżenia i Quid Pro Quo

Istnieje kilka kluczy do osiągnięcia sukcesu w Respond.js. Najpierw będziesz chciał umieścić plik respond.js bezpośrednio za ostatnim tagiem CSS < link >. Jeśli dasz przeglądarce czas na załadowanie zawartości przed załadowaniem skryptu respond.js, użytkownicy spoza HTML5 prawdopodobnie zobaczą flash treści o niewłaściwym stylu. Nie jest to problem z funkcjonalnością, ponieważ witryna naprawi się po uruchomieniu pliku respond.js, ale może być negatywnym lub mylącym ładowaniem dla użytkowników. Po drugie, należy pamiętać, że Respond.js jest specjalnie zaprojektowany do wielozadaniowych zapytań o media na podstawie wysokości i szerokości. Jeśli masz ustawione zapytania dotyczące multimediów, ta biblioteka nie pomoże. Atrybuty multimediów w elementach łącza są w pełni obsługiwane, ale tylko wtedy, gdy połączony arkusz stylów nie zawiera zapytań o media. Jeśli zawiera zapytania, atrybut media zostanie zignorowany, a zapytania wewnętrzne zostaną przeanalizowane normalnie. Innymi słowy, instrukcje @media w CSS mają pierwszeństwo. Dodatkowo Respond.js działa, żądając nieskazitelnej kopii Twojego CSS przez Ajax, więc jeśli hostujesz swoje arkusze stylów w CDN (lub subdomenie), musisz przesłać stronę proxy, aby umożliwić komunikację między domenami.

Kontroluj układ mobilny za pomocą znacznika viewport < meta >

Twórcy przeglądarek zgodzili się na użycie znacznika < meta >, który pomaga urządzeniom mobilnym i małym ekranom ładować stronę zgodnie z życzeniem autora. Ten jeden tag może być różnicą między widoczną witryną a witryną "stworzoną na komórki". Kiedy smartfony z fantazyjnymi przeglądarkami HTML5 trafiły na rynek, otworzyły sieć na zupełnie nowym poziomie. Po latach ograniczania się do sieci opartej na WAP (Wireless Application Protocol) o ograniczonych znacznikach na przemian wersje stron, teraz mieliśmy całą sieć dostępną w naszej dłoni. Smartfony ogólnie stosowały technikę skalowania całej strony w dół, aby zmieściła się na małym ekranie (z ograniczoną liczbą pikseli). Zasadniczo średnia witryna o rozdzielczości 920 pikseli zostałaby zmniejszona do 320 pikseli (lub jakiejkolwiek szerokości piksela urządzenia). Twórcy przeglądarek chcieli zachęcić programistów do tworzenia interfejsów o odpowiednich rozmiarach ekranu, dlatego wprowadzili kilka nowych tagów, które nie są sankcjonowane przez żadną grupę standardów, ale są ogólnie uzgodnione przez twórców przeglądarek. Jednym z najczęstszych i ogólnie najbardziej użytecznych znaczników jest znacznik < meta > okienka ekranu. Tag viewport < meta > rozwiązuje problem unikania funkcji automatycznego skalowania w smartfonach w witrynach zaprojektowanych do wyświetlania w określonej skali. Rzućmy okiem na tag:

< meta name = "viewport" content = "width = device-width, initial-scale = 1.0" > < /meta >

Ten znacznik < meta > , podobnie jak wszystkie znaczniki < meta >, powinien być potomkiem znacznika < head >. Podąża za wzorcem innych znaczników HTML , mając nazwę i atrybut treści. Atrybut content zawiera niektóre lub wszystkie z następujących właściwości:

width

Szerokość rzutni w pikselach

height

Wysokość rzutni w pikselach

Initial-scale

Początkowa skala rzutni jako mnożnik

minimum-scale

Minimalna ilość, którą można skalować rzutnią

maksimum-scale

Maksymalna ilość, którą można skalować rzutnią

user-scalable

Określa, czy użytkownik może skalować stronę (poprzez ściśnięcie i powiększenie)

Ten tag pozwala również określić cechy charakterystyczne witryny i kontrolować prezentację dla odwiedzających.

Naszym celem jest kontrolowanie kilku kluczowych aspektów naszego projektu. Pierwszą i najbardziej zauważalną jest właściwość w początkowej skali. Ta właściwość jest ustawiona na 1.0, co oznacza, że na stronie nie ma skali, a jeden piksel jest równy jednemu pikselowi. Drugą właściwością jest szerokość, którą ustawiamy na szerokość urządzenia (zwróć uwagę, że niektóre urządzenia, takie jak Windows Phone 7, zastępują szerokość urządzenia do standardowej szerokości dla tego telefonu). To informuje naszą stronę, że rzutnia zostanie ustawiona na szerokość ekranu naszego urządzenia. Jest to szczególnie pomocne w projektach o szerokości 100%. Szerokość można ustawić, aby wyraźnie ograniczyć stronę. Jedną właściwością, której nie zawarłem w tym znaczniku, jest właściwość skalowalna przez użytkownika, ustawiona na no. Wiele witryn używa tego parametru, aby wyłączyć szczypanie i powiększanie. Chociaż tekst jest znacznie większy, może nie być wystarczająco duży dla niektórych użytkowników. Chcę pozostawić opcję powiększenia w razie potrzeby. Zasadniczo zostawiam funkcję szczypania i powiększania, chyba że używam szczypania i powiększania w celu uzyskania czegoś innego na stronie (np. Powiększenia mapy). Ta właściwość nie jest ustawiona zbyt często, ale ze względu na moich użytkowników staram się ją włączać, gdy tylko jest to możliwe.

Czy prawdziwy HTML5 Spec Please Stand Up?

Jeśli złapałeś go wcześniej, wspomniałem, że ta konkretna funkcja nie była pierwotnie specyfikacją, ale raczej konwencją uzgodnioną przez twórców przeglądarki. Z powodu braku standaryzacji istnieje odchylenie w sposobie obsługiwania niektórych z tych funkcji w różnych urządzeniach. Na szczęście twórcy przeglądarek są po naszej stronie i lubią, gdy konwencje stają się standardami. Na szczęście pojawiło się Standard W3C dla właściwości viewport. Wielką niespodzianką było to, że zamiast używać znacznika < meta >, W3C postanowił włączyć tę funkcję do specyfikacji CSS3 i nazwać ją adaptacją urządzenia CSS. Dobrą wiadomością jest to, że nadal jest równie łatwy do wdrożenia. W3C nawet poprowadzi cię przez łatwą konwersję ze znacznika do deklaracji CSS zgodnie ze specyfikacją. Z wysokiego poziomu adaptacja urządzenia jest dość prosta. Zobaczmy, jak zadeklarujemy ten sam tag , którego używaliśmy do tego włamania:

@viewport {

width: device-width;

initial-scale="1.0"

}

Właściwość rzutni można umieścić w bloku stylu na stronie lub w dowolnym arkuszu stylów. Może być nawet zawinięty w kwerendę medialną. Zachęcam do przejrzenia specyfikacji przed jej wdrożeniem, ponieważ niektóre nazwy właściwości zmieniły się nieznacznie. W chwili pisania tego tekstu specyfikacja jest tak nowa, że waham się wydrukować określone właściwości, ponieważ mogą ulec zmianie.

Osadzanie wideo bezpośrednio w aplikacji za pomocą HTML5 Video

Wideo jest teraz głównym nurtem w HTML5. Zapomnij o wtyczkach, zapomnij o obsłudze odtwarzaczy wideo i witaj w świecie rodzimych filmów dzięki HTML5. Zobacz, dlaczego tak wielką rzeczą jest mieć wideo jako własny element strony. O co chodzi z filmami HTML5? Od lat odtwarzamy wideo w Internecie. Odpowiedź brzmi: sieć się zmienia. W przeszłości bardzo łatwo było przewidzieć, jakie technologie będą obsługiwane przez twoich użytkowników, gdy wejdą na twoją stronę: strona mogłaby korzystać z Flasha, Silverlighta lub innych programistów, którzy mogliby znaleźć, żeby to działało. W dzisiejszym świecie stacjonarnych telefonów komórkowych, tabletów i czytników elektronicznych, które współużytkują tę samą sieć, ważne jest ustandaryzowanie formatu wideo i audio, z którego mogą korzystać wszyscy gracze. Ta potrzeba naprawdę pojawiła się w przypadku Apple bezpośrednio wykluczając wtyczki takie jak Flash i Silverlight, aby lepiej kontrolować baterię i zużycie energii na urządzeniach z iOS. To z kolei wprowadziło wideo HTML5 do głównego nurtu. W dzisiejszej sieci, jeśli chcesz wesprzeć wszystkich swoich użytkowników .Niezbędne jest wideo HTML5.

Pisanie kodu

Wideo HTML5 jest nie tylko elastyczne; programiści mogą też łatwiej je wdrożyć. Możesz umieścić film HTML5 na swojej stronie za pomocą prostego tagu. Spójrzmy na przykładową implementację:

< video width="320" height="240" autoplay="autoplay"

poster="examples/sanfran.jpg" source="examples/sanfran.m4v" >

< /video >

Masz całkiem sporo kontroli wbudowanej bezpośrednio w sam tag. Spójrzmy na najczęstsze atrybuty:

width i height

Za pomocą tych atrybutów możesz ustawić rozmiar filmu bezpośrednio w samym tagu. Te atrybuty określają rozmiar osadzonego wideo na stronie, a nie rozmiar ładowanego pliku. Wysokość i szerokość niekoniecznie muszą być zgodne z oryginalnym źródłem. Te wartości atrybutów są reprezentowane w pikselach, co odpowiada określeniu "340", a nie "340 px". Możesz ustawić wysokość i szerokość za pomocą CSS, aby uzyskać te same wyniki.

controls

Ustawienie atrybutu controls pozwala ukryć lub pokazać natywne kontrolki do twojego filmu. Domyślnie ustawione jest wyświetlanie. Możesz chcieć się ukryć formanty, jeśli zamierzasz zbudować własne formanty za pomocą JavaScript.

autoplay

Ten atrybut ustawia odtwarzanie filmu, gdy tylko źródło będzie gotowe. Domyślnie jest wyłączone (dzięki Bogu). Błagam, nie używaj tego parametru na stronie głównej swojej witryny.

autobuffer

Jest to podobne do autoodtwarzania, ale bez odtwarzania wideo. Ten atrybut domyślnie jest wyłączony. Po zlokalizowaniu źródła włączanie autobuffer powoduje, że film zaczyna się pobierać, więc można go odtworzyć, gdy tylko użytkownik go zainicjuje. Jest to kolejny atrybut, którego należy używać ostrożnie, ponieważ będzie on wykorzystywał abonament danych użytkowników mobilnych. Użyj tego atrybutu tylko wtedy, gdy masz całkowitą pewność, że użytkownicy rozpoczną film.

poster

Ten atrybut pozwala ustawić ścieżkę do obrazu, którego chcesz użyć jako tablicy plakatu wideo. Jest to obraz przedstawiający wideo użytkownikom, zanim rozpocznie się odtwarzanie, i często jest to zrzut ekranu z samego wideo. Jeśli nie masz ustawionej tablicy, pierwsza klatka wideo zostanie użyta do przedstawienia obrazu po załadowaniu tej klatki.

loop

Ten atrybut pozwala ustawić wideo tak, aby zaczynało się od nowa po osiągnięciu końca. Wartość domyślna jest wyłączona.

Jak widać, znacznik < video > jest bardzo elastyczny. Wideo może być skutecznym sposobem na przekazanie wiadomości, ale należy zachować ostrożność przy korzystaniu z niektórych z tych atrybutów, ponieważ dodatkowa elastyczność może spowodować niekorzystne wrażenia dla użytkowników.

Wideo jako pierwszorzędny element

Tagi HTML5 < video > wreszcie zapewniają natywną kontrolę nad filmem. W przeciwieństwie do obiektów osadzonych, takich jak obiekty Flash, znaczniki < video > HTML5 można traktować tak jak każdy inny element na stronie. Jedną z największych zalet tego jest możliwość kontrolowania elementu za pomocą CSS. Podobnie jak w przypadku każdego innego elementu na stronie, tag < video > może mieć obramowania, kolor tekstu (w przypadku napisów), krycie lub dowolną inną cechę CSS. Ponadto znaczniki < video > zapewniają interfejsy API JavaScript, które zapewniają dodatkową funkcjonalność. Możesz używać JavaScript do uruchamiania, zatrzymywania, buforowania, przeskakiwania do przodu lub kontrolowania swojego filmu na inne sposoby. Dzięki temu możesz zbudować własne niestandardowe elementy sterujące dla swoich filmów, a nawet zbudować bardziej zaawansowany system buforowania do ładowania filmów. Jako pierwszorzędny element tag HTML5 < video > zapewnia również dostęp do danych załadowanych na twoją stronę. Ponadto tagi < video > mogą wchodzić w interakcje z innymi elementami strony, takimi jak element canvas, co pozwala na eksportowanie klatka po klatce z tagu < video > do tagu < canvas >, które z kolei można zmanipulować, aby wykonać inne Funkcje. Należy jednak zachować ostrożność podczas używania znacznika < video >, ponieważ środki bezpieczeństwa są wbudowane w element canvas HTML5, które ograniczają importowanie wideo z innego źródła do pliku canvas.

Wybierz odpowiednie kodeki dla swoich plików wideo

Niestety w sieci jeden typ pliku wideo nadal nie "rządzi nimi wszystkimi". W świecie różnych przeglądarek obsługujących różne kodeki upewnij się, że Twoje filmy można oglądać we wszystkich przeglądarkach docelowych.

Kodek wideo jest w zasadzie algorytmem formatu kompresji wideo. Surowe wideo byłoby zbyt duże pod względem rozmiaru pliku, aby można je było przesyłać przez Internet, więc musi zostać skompresowane do dostarczenia. Przeglądarki muszą obsługiwać kodek kodowanego pliku, aby móc go odtworzyć. Teraz nadchodzi smutna część. Współczesne przeglądarki HTML5 obsługują podzbiór kodeków, więc nie ma jednego kodeka wideo, którego można użyć do odtworzenia filmu w każdej przeglądarce. Musisz wielokrotnie przejść przez proces kodowania wideo różne przeglądarki, ale dobrą wiadomością jest to, że nie musisz pisać tagu < video > inaczej dla każdej przeglądarki. Zacznijmy od spojrzenia na tradycyjny tag < video > ze źródłem zestawu wideo jako atrybutem src tagu:

< video width="320" height="240" autoplay="autoplay"

poster="examples/sanfran.jpg" src="examples/sanfran.m4v" >

< /video >

Powyższy kod jest ładny i schludny, ale pozwala ustawić tylko jedno źródło dla tagu < video >. Przepiszmy ten tag, aby ustawić źródło jako własny tag:

< video width="320" height="240" autoplay="autoplay"

poster="examples/sanfran.jpg ">

< source src=examples/sanfran.ogv type=video/ogg >

< source src=examples/sanfran.mp4 type=video/mp4 >

Your browser does not support the video tag.

< /video >

Ten zagnieżdżony znacznik jest znacznikiem < source >. Ten tag służy do ustawiania wielu źródeł tagów multimediów. Twoja przeglądarka odtworzy pierwszy plik wideo z listy obsługiwanych tagów < source >. Jeśli nie zostaną znalezione obsługiwane źródła, będziesz mieć pusty tag < video > . Tekst, który zawarliśmy w tagu < video >, dotyczy przeglądarek innych niż HTML5. Jeśli przeglądarka nie rozpoznaje tagu < video >, wyświetli tekst.

Które kodeki mają być obsługiwane?

Teraz jest trudna część: ustalenie, który kodek należy obsługiwać. Spójrzmy na najpopularniejsze typy kodeków na rynku oraz zalety i wady każdego z nich:



H.264 (MP4)



Apple Safari i Microsoft Internet Explorer obsługują ten kodek. To nie jest darmowy kodek. W chwili pisania tego tekstu jest on wypuszczany jako kodek bez tantiem, ale ponieważ kontroluje go grupa zarządzająca (której częścią jest Apple), zasady mogą ulec zmianie w dowolnym momencie. Jest to podstawa niechęci innych twórców przeglądarek do przyjmowania obsługi tego kodeka. W wersji 9 Google Chrome zaczął także obsługiwać ten kodek, co czyni go jeszcze bardziej opłacalnym jako kodek internetowy.



OGG / Theora



To naprawdę darmowy, otwarty kodek. Jego wadą jest brak narzędzia wspierającego. Ponieważ żaden z dużych twórców przeglądarek tego nie obsługuje, nie ma wielu narzędzi do kodowania plików wideo. W chwili pisania tego tekstu Firefox, Opera i Google Chrome obsługują ten kodek.



WebM



Ten format jest oparty na kodeku VP8 należącym do Google. Jest to wysokiej jakości forma kompresji, która jest darmowa i ma otwarte oprogramowanie, co czyni WebM dobrym kodekiem sieciowym. Ponieważ jednak Google jest właścicielem kodeka, może potencjalnie zmienić status projektu open source w przyszłości. Prawie każdy twórca przeglądarki obsługuje ten kodek. Przeglądarki Apple Safari nie obsługują tego kodeka w żadnej formie ani formie.

Czy nie cieszysz się, że standard obsługuje jednocześnie więcej niż jeden plik źródłowy? Ponieważ nie ma jednego kodeka obsługiwanego przez wszystkie główne przeglądarki, konieczne jest dostarczenie co najmniej dwóch różnych plików, które obejmą wszystkie główne przeglądarki. Aby być kompatybilnym z przeglądarkami Apple i Internet Explorer, musisz obsługiwać H.264, a następnie OGG lub WebM można użyć do pokrycia innych przeglądarek.

Twórz własne formanty wideo za pomocą interfejsów API Video

Wspaniale, że wideo HTML5 ma własne elementy sterujące, ale czasami nie spełniają one potrzeb Twojej aplikacji. Dowiedz się, jak używać interfejsów API wideo HTML5 do tworzenia własnych formantów w JavaScript. Fantastycznie jest mieć wbudowane elementy sterujące w każdym elemencie wideo. Jednak w niektórych przypadkach domyślne kontrolery po prostu nie spełniają twoich potrzeb. W takich przypadkach tag HTML5 < video > zapewnia bogaty zestaw interfejsów API, które można kontrolować za pomocą JavaScript. Te interfejsy API są wystarczająco elastyczne, aby umożliwić zbudowanie zupełnie nowego zestawu elementów sterujących dla Twojego filmu. Spójrzmy na niektóre z bardziej odpowiednich elementów sterujących. Przed zbudowaniem kodu JavaScript zacznijmy od podstawowych znaczników. Mamy pod nim element wideo i listę przycisków:

< video id="myVideo" width="400" height="200" autoplay="autoplay"

poster="../sanfran.jpg" src=" examples/sanfran.m4p " >< /video >

< button class="button skipBack" >skip back< /buton >

< button class="button stop" >stop< /buton >

< button class="button play" >play/pause< /buton >

< button class="button skipAhead" >skip ahead< /button >

< button class="button volumeUp" >volume up< /button >

< button class="button VolumeDown" >volume down < /button >

Mamy więc podstawowy znacznik do naszego filmu. Teraz chcemy zacząć tworzyć niestandardowe elementy sterujące. Następnie, gdy nasze niestandardowe elementy sterujące będą gotowe, usuniemy natywne elementy sterujące z elementu wideo. Aby zbudować te elementy sterujące, zaczniemy od utworzenia odwołania JavaScript do naszego elementu wideo:

var myVideoEl = document.querySelector('#myVideo');

Ważne jest, aby zbudować referencję do tego elementu, abyśmy mogli używać referencji zamiast wracać do modelu DOM (Document Object Model) za każdym razem. Po zidentyfikowaniu elementu wideo użyjemy go do wywołania niestandardowych kontrolerów. Kod powinien wyglądać mniej więcej tak:

myViedoEl.play();

myVideoEl.pause();

myVideoEl. currentTime

Gdybyśmy mieli używać tych samych elementów sterujących, do których mamy dostęp w elemencie HTML5, nie byłoby sensu tworzyć niestandardowych elementów sterujących: użylibyśmy tylko tych, które zostały nam udostępnione. Będziemy więc oferować specjalne funkcje. Zacznijmy od prostych, Play i Pause:

//ref to my video tag

var myVideoEl = document.querySelector('#myVideo');

//add listeners to the play pause button

document.querySelector('.play').addEventListener('click',function(e){

if(myVideoEl.paused === true){

myVideoEl.play();

}else{

myVideoEl.pause();

}

)};

W poprzednim kodzie dodaliśmy detektor do przycisku, który sprawdza, czy wideo jest wstrzymane. Jeśli jest wstrzymany, zaczynamy odtwarzać wideo, a jeśli nie jest wstrzymany, wstrzymujemy wideo. To zapewnia nam funkcjonalne odtwarzanie i pauzę za pomocą naszego przycisku przełączania. Następnie chcemy dodać przycisk Stop. Wideo HTML5 nie ma możliwości zatrzymania, więc musimy je zbudować. W tym przypadku zakładamy, że zatrzymanie oznacza zatrzymanie: nie tylko przestaniemy odtwarzać wideo (wstrzymamy), ale także przestaniemy go ładować. Najprostszym sposobem na to jest programowe usunięcie odwołania do źródła znacznika < video >. Dodajmy innego detektora do naszego JavaScript, aby wykonać zatrzymanie:

document.querySelector('.play').addEventListener('click',function(e){

if(myVideoEl.currentTime == 0){ //we know it is stopped

myVodelEl.src = 'examples/sanfran.m4p'

}

if(myVideoEl.paused === true){

myVideoEl.play();

}else{

myVideoEl.pause();

}

)};

Teraz, gdy zostaną naciśnięte przyciski Odtwarzaj i Pauza, źródło zostanie ponownie dodane do elementu wideo, jeśli jest pusty. Następne dwa przyciski na naszym pasku kontrolnym będą traktowane podobnie. Są to przyciski Przeskocz do przodu i Przeskocz do tyłu. W naszym przykładzie pominiemy pięć sekund do przodu w filmie lub pięć sekund do tyłu. Ponownie będziemy kontrolować te przyciski, dodając kilka wierszy JavaScript do tego, co zostało wcześniej zilustrowane:

document.querySelector('.skipAhead').addEventListener('click',

function(e){

myCurrentTime = myVideoEl. currentTime;

myVideoEl.currentTime = myCurrentTime+5;

})

document.querySelector('.skipBack').addEventListener('click',

function(e){

myCurrentTime = myVideoEl. currentTime;

myVideoEl.currentTime = myCurrentTime-5;

})

Aby pominąć nasze wideo, po prostu używamy API currentTime, aby uzyskać bieżący czas odtwarzania wideo, a następnie aktualizujemy currentTime, aby był bieżącą wartością plus minus pięć sekund. Nasze dwa ostatnie przyciski to przyciski regulacji głośności. Objętość jest reprezentowana jako dodatnia wartość liczbowa od 0 do 1.

Nasze regulatory głośności będą po prostu zwiększać liczby ułamkowe. Rzućmy okiem na kod:

document.querySelector('.volumeUp').addEventListener('click',

function(e){

var myCurrentVolume = myVideoEl. volume;

if(myCurrentVolume >0){

myVideoEl. volume = myCurrentVolume -.1;

}

})

document.querySelector('.volumeUp').addEventListener('click',

function(e){

var myCurrentVolume = myVideoEl. volume;

if(myCurrentVolume <1){

myVideoEl. volume = myCurrentVolume +.1;

}

})

Więc mamy to. Skompilujmy razem cały nasz JavaScript i sprawdźmy:

var myVideoEl = document.getElementById('myVideo');

document.querySelector('.play').addEventListener('click',

function(e){

if(myVideoEl.currentTime == 0){//we know it is stopped

myVodelEl.src = 'examples/sanfran.m4p';

}

if(myVideoEl.paused === true){

myVideoEl.play();

}else{

myVideoEl.pause();

}

)};

document.querySelector('.stop').addEventListener('click',

function(e){

myVideoEl.src = '';

})

document.querySelector('.skipAhead').addEventListener('click',

function(e){

myCurrentTime = myVideoEl. currentTime;

myVideoEl.currentTime = myCurrentTime+5;

})

document.querySelector('.skipBack').addEventListener('click',

function(e){

myCurrentTime = myVideoEl. currentTime;

myVideoEl.currentTime = myCurrentTime-5;

})

document.querySelector('.volumeUp').addEventListener('click',

function(e){

var myCurrentVolume = myVideoEl. volume;

if(myCurrentVolume >0){

myVideoEl. volume = myCurrentVolume ?1;

}

})

document.querySelector('.volumeUp').addEventListener('click',

function(e){

var myCurrentVolume = myVideoEl. volume;

if(myCurrentVolume <10){

myVideoEl. volume = myCurrentVolume ?1;

}

})

Teraz, gdy uruchomiliśmy cały nasz JavaScript na stronie, pozostaje jeden problem. Mamy dwa zestawy elementów sterujących: nasze nowe elementy sterujące i elementy domyślne. Ponieważ mamy wbudowane nowe formanty, dodamy jeden dodatkowy wiersz JavaScript, aby wyłączyć domyślne kontrolki tego tagu < video >:

document.getElementById ('myVideo'). control = false;

Po dodaniu znaczników, naszego JavaScriptu i kilku linii CSS, aby to ładnie wyglądać, mamy nowe kontrolki wideo, które spełniają potrzeby naszej aplikacji.

Słowo o audio

W tym hacku skupiliśmy się całkowicie na tagach < video >, ale nie chcemy zaniedbywać faktu, że dźwięk HTML5 pasuje do tych samych specyfikacji co tag < video > (HTMLMediaElement), więc istnieją takie same interfejsy API dla dźwięku, jak robią dla wideo. Możemy zamienić nasz tag < video > na tag < audio > i wszystkie te same elementy sterujące będą działać.

Zamień tło filmu HTML5 na tag < canvas >

Dzięki filmowi HTML5, tagowi < canvas > i odrobinie kodu JavaScript możesz w czasie rzeczywistym tworzyć efekty w stylu hollywoodzkim (używam tego terminu luźno). Możliwość odtwarzania wideo bezpośrednio w aplikacji internetowej jest całkiem fajna, ale możliwość manipulowania tym samym wideo w czasie rzeczywistym jest niesamowita. Wszyscy widzimy efekty zielonego ekranu z "robienia" filmów, w których aktor jest kręcony przed zielonym ekranem, a następnie w kadrze komponowane jest nowe tło, aby wyglądało, jakby aktor walczył z kung-fu na szczycie mostu Golden Gate lub coś w tym stylu. Osiągniemy to samo z tagiem < video >, dwoma tagami < canvas > i kilkoma wierszami JavaScript. Na początek przyjrzymy się naszemu znacznikowi, a następnie przejrzymy, w jaki sposób używany jest każdy składnik:

< div class = "row" >

< div class = "span5" >

< video id = "sourceVideo" src = "/ Examples / video.ogv" control = "true" >

< /video > < canvas id = "hiddenCanvas" width = "320" height = "192" > < /canvas >

< /div >

< div class = "span5" >

< canvas id = "displayCanvas" width = "320" height = "192" > < /canvas >

< /div >

< /div >

Zasadniczo mamy trzy elementy strony do pracy i każdy z nich odgrywa kluczową rolę w naszej "produkcji".

Źródło wideo

Film źródłowy to film, od którego zaczynamy. Zasadniczo jest to film przedstawiający małego chłopca na zielonym tle. Wideo źródłowe zostanie odtworzone, a piksele z każdej klatki zostaną wyciągnięte i wyświetlone na naszym pierwszym znaczniku < canvas > w celu przetworzenia.

Ukryte płótno

Ukryte płótno to miejsce, w którym wideo źródłowe zostanie zrzucone klatka po klatce. Nasz JavaScript pobierze każdą ramkę ze źródła wideo i zapisze ją w tym tagu < canvas >. Daje nam to dwuwymiarowy kontekst danych umożliwiający nam przeprowadzenie analizy na poziomie pikseli.

Wyświetl płótno

Płótno wyświetlacza to płótno, które faktycznie widzimy. Gdy odtwarzamy nasze wideo i kopiujemy klatki do pierwszego znacznika < canvas >, wyciągniemy dane na poziomie pikseli z pierwszego płótna i przeanalizujemy je, aby znaleźć część zielonego ekranu naszego video. Zidentyfikowane zielone piksele zostaną następnie usunięte i zastąpione przezroczystymi pikselami, umożliwiając świecenie tła już ustawionego na tym płótnie.

Podstawy

Mamy znaczniki i zidentyfikowaliśmy elementy HTML5, których będziemy używać w naszej aplikacji. Teraz musimy zebrać JavaScript, który sprawi, że wszystko to zadziała. Ten JavaScript będzie znajdować się w tagu skryptu na dole naszej strony. Najpierw musimy zrobić wskaźniki do każdego elementu. Musimy także utworzyć wskaźniki do zawartości 2D naszych tagów < canvas >. Zawartość 2D jest "powierzchnią" naszego . Znacznik < canvas >, do którego będziemy przenosić i wyprowadzać dane.

var sourceVideo = document.getElementById ("sourceVideo");

var hiddenCanvas = document.getElementById ("hiddenCanvas");

var displayCanvas = document.getElementById ("displayCanvas");

var hiddenContext = hiddenCanvas.getContext ("2d");

var displayContext = displayCanvas.getContext ("2d");

Teraz musimy ustawić naszego odbiornika na elemencie wideo, abyśmy wiedzieli, kiedy wideo zacznie się odtwarzać. Spowoduje to uruchomienie JavaScript, który za chwilę ułożymy, ale najpierw ustawmy tego słuchacza:

sourceVideo.addEventListener ('play', function () {runAnalysis ()});

Po skonfigurowaniu naszego środowiska musimy zbudować funkcję, która zapewni odtwarzanie wideo. Robimy to, ustalając, że stan filmu nie jest zatrzymany ani zakończony. Następnie wywołamy nową metodę o nazwie frameConversion, która uruchomi nasze konwersje wideo. Na koniec sprawimy, że będzie to metoda samo-wzywająca, dzięki czemu będzie się ona powtarzać, dopóki wideo nie zostanie wstrzymane lub zakończone.

runAnalysis: function () {

if (sourceVideo.paused || sourceVideo.ended) {

return;

}

frameConversion ();

setTimeout (function () {

runAnalysis ();

}, 0);

},

Następną metodą jest cała magia. Tutaj pobieramy dane wideo, przeprowadzamy analizę, zastępujemy piksele i zapisujemy je na naszym kanwie. Następnie robimy to w kółko.

var frameConversion = function () {

hiddenContext.drawImage (sourceVideo, 0,0, sourceVideo.videoWidth,

sourceVideo.videoHeight);

var frame = hiddenContext.getImageData (0,0, sourceVideo.videoWidth,

sourceVideo.videoHeight);

var length = frame.data.length;

dla (var i = 0; i
var r = frame.data [i * 4 + 0];

var g = frame.data [i * 4 + 1];

var b = frame.data [i * 4 + 2];

jeśli (g> 110 i& g <200 i& r <190 && r> 100 i& b <200 i&b> 110) {

frame.data [i * 4 + 3] = 0;

}

}

displayContext.putImageData (ramka, 0, 0);

return

};

Nasza metoda konwersji klatek jest wywoływana wielokrotnie od metody początkowej konfiguracji. Możemy usprawnić i poprawić wydajność tej aplikacji na wiele sposobów, ale dla uproszczenia pozostawimy ją taką, jaka jest.

Wideo może być potężnym narzędziem komunikacji w Internecie, ale aby w pełni dotrzeć do bazy użytkowników, tagi < video > i < audio > muszą być dostępne. HTML5 zapewnia łatwe do wdrożenia napisy dzięki nowemu znacznikowi < track > i plikom WebVTT. Napisy mogą być niezwykle korzystne dla internetowych plików wideo. Przede wszystkim napisy są ważne dla użytkowników niedosłyszących, którzy mogą oglądać Twój film, ale bez napisów nie wiedziałby, co zostało powiedziane. Napisy mogą być również wykorzystane do zapewnienia wielojęzyczności pomocy. Jeśli Twój film jest w języku angielskim, możesz podać napisy w języku hiszpańskim, francuskim i niemieckim, aby umożliwić osobom nieanglojęzycznym korzystanie z treści. Dodatkową korzyścią może być pomoc osobom z upośledzeniem mówcy. Użytkownicy z upośledzeniem głośników to ludzie tacy jak ja, którzy stracili zasilanie z głośników komputera stacjonarnego i odmawiają zakupu nowego, ponieważ znajdą go jednego z tych dni. Jeśli dźwięk mojego komputera nie działa, napisy też mogą mi pomóc!

Łatwa implementacja

Napisy to jedna z najłatwiejszych do zaimplementowania funkcji. Po prostu dodajesz znacznik < track > jako element podrzędny znacznika < video > i dodajesz do niego kilka atrybutów. Rzućmy okiem na tag < track >, który pojawia się w naszym znaczniku:

< video id="myVideo" width="320" height="240" controls="controls"

poster="examples/sanfran.jpg" src="examples/sanfran.m4v" >

< track src="/examples/subtitles.srt" default="true" kind="subtitles"

srclang="en" label="English" >< /track >

< /video >

Oto opis każdego atrybutu:

Src : Jest to wspólny atrybut używany w HTML do wskazywania pliku źródłowego. W tym przypadku wskazuje plik VTT (więcej na ten temat w następnej sekcji).

default : Jeden z elementów ścieżki może mieć ten atrybut ustawiony dla każdego elementu filmu. Jak sama nazwa wskazuje, określa domyślną ścieżkę dla tego elementu wideo. Jeśli więcej niż jeden element ścieżki ma ten atrybut w pliku wideo, pierwszy element na liście zostanie zidentyfikowany jako ścieżka domyślna.

label : Ten atrybut określa tytuł, który zostanie użyty dla ścieżki (pomyśl "angielski" zamiast "en").

Kind :Określa typ pliku śladu. Jego właściwości mogą być dowolne z następujących:

* Napisy

* Rozdziały

* Opisy

* Metadane

*Napisy na filmie obcojęzycznym

Srclang : Określa język ścieżki. Wartość musi być poprawnym kodem języka i jest wymaganym atrybutem, jeśli ścieżka ma napisy typu.

Plik VTT

Napisy są przechowywane w pliku WebVTT, do którego odwołuje się znacznik . WebVTT oznacza Web Video Text Tracks i jest dość prostym plikiem do sformatowania. Spójrzmy na nasz przykładowy plik:

1

00: 00: 01.000 -> 00: 00: 05.000

To pierwszy wiersz tekstu wyświetlający się w zakresie 1-5 sekund

2)

00: 00: 05.000 -> 00: 00: 11.000

I drugi wiersz tekstu w dwóch liniach

Plik zawiera wskazówki. Każda pamięć jest ponumerowana i ma ustawienia czasu w formacie hh: mm: ss.mmm. Napisy będą pasować do zakresu czasu. Poprzednia próbka wyświetli pierwszą wskazówkę od pierwszej sekundy do piątej sekundy filmu, a druga wskazówkę od piątej sekundy do jedenastej sekundy.

Ktoś Karaoke?

Napisy mogą być również prezentowane z wbudowanymi znacznikami synchronizacji. Przedstawią one Twoje napisy w stylu "karaoke" lub w stylu namalowanym. Aby to osiągnąć, umieszczamy znaczniki timingu w każdym tekście cue w następujący sposób:

1

00: 00: 01.000 -> 00: 00: 05.000

< 00: 00: 01.000> Jest to pierwszy wiersz tekstu, < 00: 00: 03.000 > wyświetlany

od 1-5 sekund

Ten wskaźnik pokaże pierwszą połowę wskaźnika w drugim, i namaluje na drugiej linii wskaźnika na drugim trzy

Podsumowanie

Zaleca się umieszczanie elementów śledzenia we wszystkich tagach < video > zawierających informacje audio. Aby zwiększyć zasięg odbiorców, dobrze jest również dołączyć wielojęzyczne napisy, jeśli to możliwe. Sieć nie ma granic, a teraz Twoje pliki wideo HTML5 również nie mają.

Upiększ swoje sygnały wideo HTML5

Sygnały wideo są potężne, ale mogą być dość brzydkie. Na szczęście istnieje specyfikacja! Nadaj styl swoim filmowym sygnałom HTML5 za pomocą formatowania, a nawet CSS. Sygnały wideo są dość proste od razu po wyjęciu z pudełka. Są wyświetlane jako podstawowy biały tekst na twoim filmie i pokazują się, gdy decyduje czas z pliku WebVTT. Specyfikacja WebVTT pozwala zidentyfikować formatowanie twoich sygnalow, co daje ci podstawowe formatowanie prezentacji. Dodatkowo pozwala na wykorzystanie CSS do bardziej zaawansowanego stylu. Rzućmy okiem na to, nad czym pracujemy, zanim zaczniemy to urozmaicać

Podstawowe formatowanie z WebVTT

Niektóre podstawowe formatowanie dotyczy bezpośrednio sygnałów wideo w ramach specyfikacji WebVTT. Oto kluczowe atrybuty:

D:vertical/D:vertical-lr : Zmienia orientację tekstu na pionowy lub pionowy z tekstem od lewej do prawej.

L: X : Określa pozycję od góry ekranu. Może to być wartość lub procent. Jeśli jest to procent, zostanie on ustawiony od góry klatki wideo; jeśli jest to wartość, zostanie umieszczona w tym wierszu.

T: X% : Określa pozycję tekstu w poziomie. Jest to wyświetlane tylko jako procent.

A:start/A:middle/A:end :

Określa wyrównanie tekstu w ramce. S: X% : Określa szerokość pola tekstowego na ramce wideo. Każdy format należy umieścić poza zakresem czasowym w następujący sposób:

1

00: 00: 01.000 -> 00: 00: 10.000 A: środkowy T: 50%

Zapewnia to podstawowe formatowanie. Aby uzyskać bardziej zaawansowaną stylizację, przejdźmy do CSS.

Stylizacja CSS

W celu bardziej zaawansowanego formatowania możemy umieszczać znaczniki przyjazne formatowi bezpośrednio wewnątrz wskazówek naszego pliku WebVTT. Spójrzmy na próbkę:

00: 00: 01.000 -> 00: 00: 10.000 A: środkowy T: 50%

Witaj < b class = "name" > reader < /b >, ciesz się swoim < e > filmem < /e >

Formatowanie HTML jest dodawane bezpośrednio do tekstu wskazówki. Bez żadnego stylu CSS, wskazówka byłaby prezentowana jako zwykły tekst. Jak widać, tekst został przedstawiony jako HTML, w którym znajdują się elementy znacznika który nie wyświetla się. Aby urozmaicić nasze formatowanie, dodajmy trochę CSS, który wyróżni nasze sygnały:

.name {

font-weight: 600;

}

Pseudoklasy w obrębie śladu

Aby łatwo zidentyfikować pamięć, możesz użyć pseudoklasy CSS. Dostępne są trzy pseudoklasy:

::cue

::future

::past

Cue identyfikuje cały cue; przyszłość i przeszłość są używane do identyfikacji tych stanów tekstu pamięci, gdy wewnątrz pamięci używany jest znacznik synchronizacji. Zestaw atrybutów może być używany w tym środowisku czystego tekstu. Zestaw jest ograniczony do następujących elementów:

'color'

'text-decoration'

'text-outline'

'text-shadow'

'background'

'outline'

'font'

'line-height'

'white-space'

Wszystkie inne atrybuty zostaną zignorowane po zastosowaniu do tekstu wewnątrz pamięci.

Korzystanie z Cuepoint.js

Wchodzi Cuepoint.js. To zgrabny mały wypełniacz JavaScript, który pozwala na nakładanie napisów lub innych wskazówek na natywne pliki wideo HTML5. Następnie używa interfejsów API wideo HTML5, aby wyrównać właściwe wskazówki z odpowiednimi oznaczeniami czasu w pliku wideo lub audio. Cuepoint.js nie opiera się na elementach ścieżki wskazujących na pliki WebVTT, jak robią to nasze natywne napisy, ale jest kontrolowany za pomocą prostej deklaracji JavaScript. Cuepoint.js opiera się na systematycznej strukturze znaczników w celu identyfikacji pliku wideo wraz z innymi niezbędnymi elementami HTML. Zacznijmy nasz przykład od przyjrzenia się naszym niezbędnym znacznikom:

< div id="cuePlayer" class="row" >

< video id="video" width="680" controls="controls"

poster="examples/sanfran.jpg" src="examples/sanfran.m4v" >

< /video >

< div id="subtitles" >An Easy polyfill< /div >

< /div >

Zaczynamy od wrappera div identyfikującego naszego gracza z identyfikatorem cuePlayer. Wewnątrz znajdują się dwa niezbędne elementy: wideo z identyfikatorem wideo oraz pusty element div z identyfikatorem napisów. Stąd jest już tylko jeden krok, aby go uruchomić. Musimy dodać kilka wierszy JavaScript. Zaczniemy od dodania pliku JavaScript cuepoint.js do strony:

< script src="/assets/js/cuepoint.js" type="text/javascript" >< /script >

Po prostu umieścimy to na dole naszej strony, abyśmy mieli pewność, że niezbędne znaczniki zostały już załadowane. Następnie zapiszemy nasz obiekt konfiguracyjny w tagu script bezpośrednio pod tym plikiem:

//Slides object with a time (integer) and a html string

var slides = {

0: "This is the first subtitle. You can put html in here if you like",

4: "Easy Cues for HTML5 Video.",

7: "An Easy polyfill",

}

//Start cuepoint and pass in our the subtitles we want

cuepoint.init(slides);

Plik konfiguracyjny składa się z dwóch komponentów. Pierwsza to tablica sparowanych wartości, która składa się ze znacznika czasu i ciągu tekstu. Ten ciąg może być zwykłym tekstem lub znacznikiem HTML. Drugi składnik to początkowe wywołanie metody, w którym przekazujesz odwołanie do swojej tablicy. W tym przykładzie dodałem kilka linii CSS, które sprawiają, że napisy nakładają się na wideo i zapewniają nieco płynną stylizację. Oto kod CSS dla tego przykładu:

#subtitles{

position:absolute;

bottom:40px;

width:100%;

height:40px;

color:#FFF;

line-height:40px;

padding:0 20px;

}

#cuePlayer {

overflow: hidden;

position: relative;

}

#video {

margin: 0 auto 10px auto;

background: #555;

}

Pamiętaj, że zawsze ważne jest, aby używać napisów, gdy film zawiera ścieżkę dźwiękową, a Cuepoint.js pozwala zapewnić tę podstawową funkcjonalność wszystkim użytkownikom, niezależnie od funkcjonalności ich przeglądarki.

Korzystanie z interfejsów API Buzz

Buzz ma wiele do zaoferowania - w rzeczywistości zbyt wiele do omówienia w tym hacku - więc przyjrzymy się tylko niektórym z najważniejszych elementów biblioteki. Zachęcam do odwiedzenia dokumentacji online zawierającej szczegółową listę wszystkich dostępnych interfejsów API. Dokumentacja jest podzielona na cztery sekcje. Przyjrzyjmy się niektórym najważniejszym cechom każdego z nich.

Buzz

To jest podstawowa biblioteka. Buzz obsługuje ładowanie biblioteki, metody określające typ pliku do wykorzystania w każdej przeglądarce oraz przygotowywanie plików audio. Ten przykład kodu pokazuje, jak łatwo jest utworzyć pojedynczy nowy plik audio lub całą grupę naraz:

//a single file

var mySound = new buzz.sound("/sounds/mysound.ogg");

//a group of files

var myGroup = new buzz.group([

new sound("/sounds/mysound1.ogg"),

new sound("/sounds/mysound2.ogg"),

new sound("/sounds/mysound3.ogg")

)}

Sound

Sound udostępnia interfejsy API do wykorzystania dźwięków. Zapewnia kilka fajnych opcji oprócz tego, co otrzymujemy z HTML, takich jak zanikanie i zatrzymywanie (w przeciwieństwie do zwykłej pauzy). Każda metoda z tej grupy poprzedzona jest dźwiękiem. prefiks. Oto kilka typowych wywołań API:

mySound.load ();

mySound.pause ();

sound.loop / sound.unloop ();

sound.increaseVolume ([głośność])

Tę bibliotekę łatwych do wdrożenia metod można osadzić bezpośrednio w aplikacjach HTML5.

Group

Group udostępnia interfejsy API do zarządzania grupami plików danych. Wszystkie metody w tej sekcji mają grupę prefiksów. Oto kilka popularnych przykładowych wywołań z interfejsu API:

//playing all loaded sound files

var mySound1 = new sound("/sounds/mysound1.ogg"),

mySound2 = new sound("/sounds/mysound2.ogg"),

mySound3 = new sound("/sounds/mysound3.ogg");

buzz.all().play();

yGroup.play();

yGroup.pause();

Zdarzenia

Włączenie zdarzeń znacznie zwiększa użyteczność tej biblioteki. Zdarzenia są zintegrowane z rdzeniem JavaScript, więc możliwość korzystania z nich z plikami audio staje się bardzo naturalną rzeczą. Te zdarzenia są przydatne, gdy dołączasz funkcje wizualne lub inne funkcje audio do implementacji dźwięku. Spójrzmy na kilka zdarzeń z Buzza:

• abort

• canplay

• canplaythrough

• dataunavailable

• emptied

• empty

• ended

• error

• loadstart

• end

Możesz dołączyć detektor do każdego z tych zdarzeń za pomocą wiersza JavaScript:

mySound.bind ("loaddata", function (e) {

document.getElementById ('loading'). style.display = "none";

});

Wdrażanie Buzz

Aby zaimplementować Buzz w swojej aplikacji internetowej, po prostu wywołaj plik JavaScript i wykonaj kilka wywołań API. Twój tag skryptu powinien wyglądać mniej więcej tak na Twojej stronie:

< script src = "/ js / buzz.js" > < /script >

Przez lata audio zyskało złą sławę, ale to, co stare, znów jest nowe. Użytkownicy mają nowe oczekiwania co do tego, co otrzymują z aplikacji HTML5. Nie bój się wciągnąć Buzza do swojej aplikacji i odtwarzać dźwięki, gdy aplikacja tego zażąda. Ponownie bądź kreatywny!

Uprość swoje multimedia HTML5 dzięki MediaElement.js

Media HTML5 są ogólnie łatwe do zaimplementowania, ale z elastycznością wiąże się złożoność. MediaElement.js został stworzony, aby przywrócić prostotę nawet w najbardziej złożonych środowiskach multimedialnych. W mojej sytuacji miałem zaległości w postaci kilku tysięcy starszych plików MP4 zakodowanych w formacie H.264, których nie można było łatwo ponownie zakodować w WebM. Chciałem użyć interfejsu API HTML5, ale aby to zrobić, potrzebowałem sposobu na obsługę odtwarzania H.264 w różnych przeglądarkach za pomocą spójnego interfejsu API. Aby tak się stało, stworzyłem MediaElement.js, bibliotekę JavaScript, która pomaga wszystkim przeglądarkom od IE 6 i nowszych myśleć, że obsługują odtwarzanie HTML5 i H.264. Aby rozpocząć, przejdź do MediaElementJS.com i pobierz bibliotekę, a następnie dodaj jQuery i dwa pokazane tutaj pliki do swojej strony:

< script src = "jquery.js" > < /script >

< script src = "mediaelement-and-player.min.js" > < /script >

< link rel = "stylesheet" href = "mediaelementplayer.css" / >

Aby odtwarzacz działał, najłatwiej zacząć od dodania klasy mejsplayer do tagów < audio > i < video >, a zostaną one automatycznie przekonwertowane na w pełni funkcjonalny odtwarzacz z identycznym zestawem elementów sterujących we wszystkich przeglądarkach. W przypadku wideo:

< video class = "mejs-player" src = "video.mp4" width = "320" height = "180" >

< /video >

W przypadku dźwięku:

< audio class = "mejs-player" src = "music.mp3" > < /audio >

Jeśli chcesz mieć większą kontrolę nad działaniem odtwarzacza, możesz ręcznie utworzyć instancję odtwarzacza w JavaScript i ustawić kilka opcji:

< video src = "video.mp4" width = "320" height = "180" > < /video >

< script >

$ ('video'). mediaelementplayer ({

// tablica kontrolek dla gracza

cechy: ["odtwarzanie", "postęp", "bieżący", "czas trwania", "utwory", "głośność", "pełny ekran"],

// głośność po uruchomieniu odtwarzacza

startVolume: 0,8,

// zdarzenie uruchamiane po utworzeniu odtwarzacza

success: function (mediaElement, domNode, player) {

// zrób więcej rzeczy tutaj

}

});

< /script >

Pozwala to na używanie plików MP4 zakodowanych w formacie H.264 we wszystkich przeglądarkach i urządzeniach mobilnych. Możesz także użyć starszych plików FLV, które nadal możesz potrzebować obsługiwać (używając podkładki Flash), a nawet plików Windows Media (używając wbudowanej wtyczki Silverlight).

Responsywne wideo

Jeśli pracujesz z responsywnym układem i potrzebujesz odpowiedniej zmiany rozmiaru zawartości wideo, MediaElement.js automatycznie dostosuje rozmiar odtwarzacza i elementów sterujących, aby wypełnić otaczający element. Aby włączyć elastyczne dopasowanie, ustaw szerokość i wysokość odpowiadające współczynnikowi proporcji wideo, a także uwzględnij 100% w atrybucie stylu (zgodnie ze specyfikacją HTML5 wartości procentowe nie są dozwolone w atrybutach szerokości i wysokości, więc musisz użyć stylu). < div id = "container" >

< video src = "video.mp4" width = "320" height = "180" style = "width: 100%; height: 100%;" > < /video >

< /div >

Detektory zdarzeń

MediaElement.js obsługuje wszystkie zdarzenia w HTML5 Media API. Na przykład, jeśli chcesz odtworzyć inne wideo po zakończeniu bieżącego, możesz nasłuchiwać zdarzenia zakończenia w obiekcie mediaElement. Działa to najlepiej, jeśli cały kod zostanie dodany w zdarzeniu powodzenia, aby zapasowy plik Flash miał czas na załadowanie.

< script >

$ ('video'). mediaelementplayer ({

success: function (mediaElement, domNode, player) {

mediaElement.addEventListener ('End', function () {

mediaElement.setSrc ('nextvideo.mp4');

mediaElement.load ();

mediaElement.play ();

}, prawdziwe);

}

});

< /script >

Podpisy i napisy

Specyfikacja HTML5 zawiera również tag < track >, który służy do ładowania zewnętrznych plików tekstowych zawierających podpisy, napisy lub podziały rozdziałów. Proponowany format to WebVTT lub Web Video Text Tracks, prosty format tekstowy, który zaczyna się od deklaracji jednowierszowej (WEBVTT FILE), a następnie zawiera listę czasów rozpoczęcia i zakończenia oddzielonych znakami ->, po których następuje tekst do wyświetlenia między dwoma czasami. Oto prosty plik WebVTT, w którym będą wyświetlane dwa wiersze tekstu w dwóch różnych odstępach czasu:

PLIK WEBVTT

00: 00: 02.5 -> 00: 00: 05.1

To jest pierwsza linia tekstu do wyświetlenia.

00: 00: 09.1 -> 00: 00: 12.7

Ta linia pojawi się później w filmie.

W chwili pisania tego tekstu niewiele przeglądarek automatycznie obsługuje WebVTT, ale MediaElement.js ma wbudowany parser WebVTT, który wyświetla tekst we wszystkich przeglądarkach. Aby dodać ścieżkę, zapisz plik WebVTT jako subtitles.vtt (pamiętaj, aby dodać tekst / vtt do typów MIME serwera) i dodaj ten plik za pomocą tagu < track >:

< video width = "320" height = "180" >

< source src = "video.mp4" type = "video / mp4" / >

< track src = "subtitles.webm" srclang = "pl" kind = "subtitles"

label = "angielski" / >

< /video >

Podsumowanie

MediaElement.js oferuje szereg innych funkcji, w tym możliwość odtwarzania filmów z YouTube za pośrednictwem interfejsu API YouTube, reklamy przed i po filmie, niestandardowe skórki i nie tylko, więc sprawdź to.

Rysuj kształty w tagu < canvas > HTML5

Flash stał się niesamowicie popularny ze względu na elastyczność, jaką wniósł do przeglądarki. Dzięki Flashowi Internet był wolny od dekorowania elementów DOM i stał się platformą do prawdziwego rysowania i animacji. HTML5 zapewnia ten sam typ elastyczności i możliwości bezpośrednio w modelu DOM za pomocą tagu HTML5 < canvas >. Ten hack zaczyna nas powoli, przechodząc przez tworzenie podstawowych kształtów na płótnie. Tag < canvas > zapewnia pustą planszę do tworzenia zdjęć. Aby to zrobić, musisz najpierw utworzyć tag < canvas > w DOM, a następnie zidentyfikować kontekst. Tag < canvas > jest tworzony jako element DOM:

< canvas id = "myCanvas" width = "200" height = "200" > < /canvas >

Ten podstawowy tag < canvas > zostanie przedstawiony na stronie jako pusty blok o wymiarach 200 × 200 pikseli. Aby to dodać, musimy zidentyfikować kontekst:

var myCanvas = document.getElementById ('myCanvas')

var myCtx = myCanvas.getContext ('2d');

Zwróć uwagę, że identyfikujemy kontekst "2d", który może wydawać się sugerować, że istniałby również kontekst "3d", ale nie daj się zwieść: tag < canvas > tak naprawdę nie odnosi się do "3d"; ma tylko oś X i Y. Teraz, gdy mamy już zidentyfikowany kontekst, mamy na wyciągnięcie ręki wiele interfejsów API. Rysowanie do tagu < canvas > polega na kontekście "2d" i znajdowaniu odpowiednich współrzędnych na siatce. Ogólnie rzecz biorąc, jeden piksel na ekranie odpowiada jednemu punktowi obszaru roboczego (wartość ta może się zmieniać, gdy powiększasz lub pomniejszasz na małym ekranie, np. W przeglądarce mobilnej, lub gdy rozmiar elementu jest zmieniany za pomocą CSS). Kluczowym punktem na naszej siatce jest (0,0) lub początek, który jest lewym górnym rogiem naszego płótna. Nasze płótno ma wymiary 200 × 200, co oznacza, że zawiera 200 punktów na osi X i 200 punktów na osi Y.

Rysowanie prostokątów

Zaczniemy od jednego z najprostszych kształtów: prostokąta. Można je łatwo wciągnąć w kontekst naszego tagu < canvas >. Kontekst "2d" daje nam dostęp do API w celu rysowania trzech podstawowych typów prostokątów:

fillRect : Rysuje prostokąt z wypełnieniem jednolitym kolorem

strokeRect : Rysuje prostokąt, który ma obramowanie, ale nie ma wypełnienia

clearRect : Czyści przezroczystość w kształcie prostokąta, która usuwa wszelkie obrazy lub wypełnia zdefiniowany obszar

Biorąc nasze przykładowe płótno z wcześniej, połączmy te trzy kształty w naszym tagu < canvas >:

var myCanvas = document.getElementById ('myCanvas')

var myCtx = myCanvas.getContext ('2d');

myCtx.strokeRect (10,10, 180, 180); myCtx.clearRect (50,50, 100, 100); Każdy z trzech interfejsów API działa według tego samego wzorca. Przekazane są cztery parametry: współrzędne x i y wraz z szerokością i wysokością prostokąta.

Rysowanie ścieżek

Prostokąty to tylko wierzchołek góry lodowej, jeśli chodzi o rysowanie na płótnie. Większość obrazów powstaje poprzez połączenie serii linii. Podobnie jak wszystkie metody w tagu < canvas >, te rysunkowe interfejsy API są dostępne w kontekście "2d". Ścieżki wymagają kilku kroków, aby rozpocząć i zakończyć rysowanie. Aby rozpocząć rysowanie (pojedynczą ścieżkę lub szereg ścieżek), używamy tej metody:

myContext.beginPath ();

Ta metoda nie przyjmuje argumentów; po prostu inicjuje rysowanie. Po rozpoczęciu ścieżki musimy określić, gdzie zaczniemy i zakończymy ścieżkę. Aby rozpocząć ścieżkę, użyjemy metody moveTo. Jest to podobne do określenia, gdzie należy przesunąć ołówek na kartce papieru do rysowania. Pomyśl o tym jak o wzięciu ołówka i odłożeniu go bezpośrednio w punkcie wyjścia. Stamtąd użyjemy metody lineTo, aby określić, gdzie kończy się nasza linia. Oto pierwsza linia naszej siatki:

myContext.beginPath ();

myContext.moveTo (0,0);

myContext.lineTo (200,0);

W tym momencie nasze płótno nadal będzie puste, ponieważ jeszcze nie zamknęliśmy naszej ścieżki. Aby zamknąć ścieżkę, używamy następującej metody:

myContext.closePath ();

Teraz mamy jedną linię na naszym płótnie. Aby stworzyć naszą siatkę, chcemy narysować wiele linii na naszej ścieżce. Aby to osiągnąć, zaczniemy ścieżkę, a następnie utworzymy serię metod moveTo i lineTo. Kiedy już będziemy mieli wszystkie nasze linie siatki, zapiszemy je na płótnie za pomocą naszej metody kresek. Nasz kod będzie wyglądał mniej więcej tak:

var myCanvas = document.getElementById ('myCanvas')

var myContext = myCanvas.getContext ('2d');

var ctx = myContext;

myContext.beginPath ();

for (i = 0; i <201; i ++) {

myContext.moveTo (0, i);

myContext.lineTo (200, i);

i + = 10;

}

for (i = 0; i <201; i ++) {

myContext.moveTo (i, 0);

myContext.lineTo (i, 200);

i + = 10;

}

myContext.stroke ();

Ścieżki mają wiele różnych interfejsów API JavaScript, które tworzą różne efekty linii. W wielu przypadkach możemy mieć kilka linii, które chcemy połączyć, a tym samym wypełnić obszar. Aby to osiągnąć, możemy po prostu wywołać następującą metodę:

myContent.fill ();

Uśmiechnij się, płótno cię kocha!

Dzięki prostym liniom na naszych rysunkach możemy zajść całkiem daleko, ale możemy również użyć płótna do rysowania łuków. Pamiętaj, że tag < canvas > zawsze będzie kwadratowy, ale wewnątrz kwadratu możemy narysować dowolny kształt. Aby narysować łuk na kanwie, wywołaj następującą metodę poza kontekstem kanwy:

arc (x, y, radius, startAngle, endAngle, anticlockwise);

Jak pokazano w powyższym kodzie, wiele argumentów jest przekazywanych do metody arc. Pierwsze dwie to współrzędne środka łuku, po których następuje promień łuku. Parametry startAngle i endAngle określają punkty początkowe i końcowe łuku w radianach, które są mierzone od osi x. Ostatni opcjonalny parametr przeciwnie do ruchu wskazówek zegara, gdy jest ustawiony na wartość true, rysuje łuk w kierunku przeciwnym do ruchu wskazówek zegara. Wartość domyślna to false, co spowodowałoby narysowanie łuku w zgodnie z ruchem wskazówek zegara. Patrząc wstecz na argument promienia, chcemy zwrócić szczególną uwagę. W CSS wygodnie jest deklarować wartości w stopniach, ale w tym przypadku promień łuku jest mierzony w radianach. Dość często można zobaczyć konwersję w wierszu z radianów na stopnie przy użyciu równania matematycznego języka JavaScript dla liczby pi:

myRadians = (Math.PI / 180) * degrees

Skorzystajmy z tego, tworząc coś rozpoznawalnego w tagu < canvas >. Kiedy myślę o kręgach, myślę o dwóch rzeczach: uśmiechniętych buźkach i bombach. Aby obniżyć poziom przemocy, w tym rozdziale zajmiemy się uśmiechniętą buźką. Używając podobnego tagu < canvas > 200 × 200, wyśrodkujmy nasz zewnętrzny okrąg bezpośrednio na środku naszego tagu, a następnie narysujmy naszą głowę:

smileCtx.beginPath ();

smileCtx.arc (100,100,99,0, Math.PI * 2);

To nie jest zbyt ekscytujące. Więc teraz dodamy usta. W tym celu użyjemy metody moveTo, a następnie narysujemy półkole (zwróć uwagę, że promień będzie równy PI zamiast PI * 2, jak to było dla pełnego koła):

smileCtx.moveTo (170,100);

smileCtx.arc (100,100,70,0, Math.PI); // Usta

Ostatnie dwa elementy to oczy. Ponieważ chcemy, aby oczy były pełnymi wypełnieniami, musimy wykonać osobne pociągnięcia dla każdego z nich, abyśmy mogli zastosować wypełnienie. Pierwszym krokiem do osiągnięcia tego jest zamknięcie bieżącego skoku. Następnie zaczniemy nowe pociągnięcie, przejdziemy do nowego punktu początkowego, narysujemy nowy okrąg i wywołamy nasz parametr wypełnienia dla każdego oka:

smileCtx.stroke ();

smileCtx.beginPath ();

smileCtx.moveTo (60, 65);

smileCtx.arc (60,65,12,0, Math.PI * 2); // Lewe oko

smileCtx.fill ();

Zbierzmy cały ten kod i zobaczmy nasze arcydzieło:

var mySmile = document.getElementById ('mySmile')

var smileCtx = mySmile.getContext ('2d');

smileCtx.beginPath ();

smileCtx.arc (100,100,99,0, Math.PI * 2); // głowa

smileCtx.moveTo (170,100);

smileCtx.arc (100,100,70,0, Math.PI); // Usta

smileCtx.stroke ();

smileCtx.beginPath ();

smileCtx.moveTo (60, 65);

smileCtx.arc (60,65,12,0, Math.PI * 2); // Lewe oko

smileCtx.fill ();

smileCtx.beginPath ();

smileCtx.moveTo (140,65);

smileCtx.arc (140,65,12,0, Math.PI * 2); // Prawe oko

smileCtx.fill ();



Zaawansowane rysowanie

Przedarliśmy się przez linie i łuki, ale wiele ilustracji nawołuje do linii, których nie można uzyskać za pomocą żadnego z tych kształtów. Specyfikacja Canvas zawiera dwa dodatkowe narzędzia do tworzenia niestandardowych kształtów:

quadraticCurveTo (cp1x, cp1y, x, y);

bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y);

Każda z tych metod ma punkty kontrolne i końcowy punkt x, y. Punkty kontrolne określają krzywiznę ścieżki. Metoda bezierCurveTo ma drugi punkt kontrolny dla nierównej krzywizny. Dodatkowe informacje o implementacji każdej metody są dostępne w specyfikacji W3C.

Zastosuj style do elementów płótna

Nie żyjemy w czarno-białej sieci, dlatego możliwość stosowania kolorów i stylów do elementów tagu < canvas > jest niezwykle ważna. Stylizuj elementy płótna za pomocą tej znanej składni CSS. Kształty i pociągnięcia mają niewielki wpływ na nasze aplikacje, jeśli nie możemy zastosować koloru i styli do nich. Specyfikacja stylów płótna w dużej mierze zapożycza się z CSS, więc większość składni powinna być Ci znana. Elementy Color Canvas można pokolorować za pomocą dowolnego stylu wartości kolorów CSS, a nawet obsługują przezroczystość w przypadku kolorów RGBA i HSPA. Ponadto obrysy i kształty płótna mają domyślną wartość koloru czarnego. Spójrzmy na przykład kodu służący do rysowania siatki linii na tagu < canvas > 200 × 200:

var myCanvas = document.getElementById ('myCanvas')

var myContext = myCanvas.getContext ('2d');

myContext.beginPath ();

for (i = 0; i <201; i ++) {

myContext.moveTo (0, i);

myContext.lineTo (200, i);

i + = 10;

}

for (i = 0; i <201; i ++) {

myContext.moveTo (i, 0);

myContext.lineTo (i, 200);

i + = 10;

}

myContext.stroke ();

Ten przykład rysuje linie pionowe co 10 punktów, a następnie wykonuje pętle ponownie, aby narysować linie poziome co 10 punktów. Jak wspomniano wcześniej, domyślnym kolorem każdej linii jest czarny. Aby nadać wygląd papieru milimetrowego, chcemy nadać liniom jasnoniebieski kolor. Możemy to osiągnąć, dodając jedną linię kodu:

myContext.strokeStyle = '# 99C4E5';

Ponieważ cała siatka jest wykonywana jednym pociągnięciem, wystarczy zadeklarować styl tylko raz. Aby dodać trochę głębi do naszej siatki, sprawimy, że poziome linie będą nieco ciemniejsze niż pionowe. Ponieważ zamierzamy stylizować linie na dwa różne sposoby, musimy dodać kilka wierszy JavaScript do naszego kodu, aby rozdzielić naszą ilustrację na dwa różne pociągnięcia. Aby to osiągnąć, zakończymy pociągnięcie po pierwszej pętli for, a następnie rozpoczniemy nowe pociągnięcie w drugiej pętli for:

var myCanvas = document.getElementById ('myCanvas2')

var myContext = myCanvas.getContext ('2d');

myContext.strokeStyle = '# 1487E0';

myContext.beginPath ();

for (i = 0; i <201; i ++) {

myContext.moveTo (0, i);

myContext.lineTo (200, i);

i + = 10;

}

myContext.stroke ();

myContext.beginPath ();

myContext.strokeStyle = '# B1CADD';

for (i = 0; i <201; i ++) {

myContext.moveTo (i, 0);

myContext.lineTo (i, 200);

i + = 10;

}

Gdy tylko rozpoczęliśmy drugie pociągnięcie metodą beginPath, ustawiliśmy nowy, ciemniejszy styl obrysu linii poziomych. Istnieją dwie różne metody dodawania koloru do kształtów. strokeStyle stosuje się do linii i konturów kształtów, a fillStyle - do kształtów lub obrysów, do których zastosowano wypełnienie. Należy pamiętać, że po ustawieniu stylu obrysu lub wypełnienia ustawienie będzie obowiązywać w kontekście, dopóki nie zostanie zmienione z powrotem na pierwotną wartość lub do momentu ustawienia nowej wartości.

Gradienty

Podobnie jak w przypadku innych elementów HTML5, dodanie gradientów może zapewnić głęboką wizualną głębię i może być całkiem przydatne. Spójrzmy na nasz przykład prostej czarno-białej buźki, zanim zastosujemy kilka gradientów, aby ją urozmaicić:

var mySmile = document.getElementById ('mySmile')

var smileCtx = mySmile.getContext ('2d');

smileCtx.beginPath ();

smileCtx.arc (100,100,99,0, Math.PI * 2); // głowa

smileCtx.moveTo (170,100);

smileCtx.arc (100,100,70,0, Math.PI); // Usta

smileCtx.stroke ();

smileCtx.beginPath ();

smileCtx.moveTo (60, 65);

smileCtx.arc (60,65,12,0, Math.PI * 2); // Lewe oko

smileCtx.fill ();

smileCtx.beginPath ();

smileCtx.moveTo (140,65);

smileCtx.arc (140,65,12,0, Math.PI * 2); // Prawe oko

smileCtx.fill ();

Jak wie każde dziecko, które nie zostało wychowane przez wilki, buźki powinny być żółte. Przerysujmy naszą buźkę na żółtym tle:

var mySmile = document.getElementById ('mySmile')

var smileCtx = mySmile.getContext ('2d');

smileCtx.beginPath ();

smileCtx.fillStyle = '# F1F42E';

smileCtx.arc (100,100,99,0, Math.PI * 2); // głowa

smileCtx.stroke ();

smileCtx.fill ();

smileCtx.beginPath ();

smileCtx.moveTo (170,100);

smileCtx.arc (100,100,70,0, Math.PI); // Usta

smileCtx.stroke ();

smileCtx.beginPath ();

smileCtx.fillStyle = 'czarny';

smileCtx.moveTo (60, 65);

smileCtx.arc (60,65,12,0, Math.PI * 2); // Lewe oko

smileCtx.fill ();

smileCtx.beginPath ();

smileCtx.moveTo (140,65);

smileCtx.arc (140,65,12,0, Math.PI * 2); // Prawe oko

smileCtx.fill ();

Aby dostosować się do wprowadzenia koloru, musieliśmy wprowadzić kilka zmian w naszym kodzie. Najpierw wyciągnęliśmy usta z tego samego pociągnięcia, które wykonało głowę, aby wypełnienie nie nadpisało linii używanej do ust. Następnie dodaliśmy metodę wypełnienia na końcu koła głowy, aby pokolorować go na żółto. Ostatnią zmianą, jaką wprowadziliśmy, było przywrócenie koloru wypełnienia oczu do czarnego. Ponownie, gdy ustawiliśmy styl, musieliśmy zresetować go do koloru czarnego, aby powrócić do wartości domyślnej. Teraz, aby udowodnić, że mamy talent artystyczny, zmienimy nasz żółty kolor na żółty gradient. Możemy zastosować dwa rodzaje gradientów:

createLinearGradient (x1, y1, x2, y2)

createRadialGradient (x1, y1, r1, x2, y2, r2)

Do metody createLinearGradient przekazywane są cztery różne argumenty: punkt początkowy (x1, y1) i punkt końcowy (x2, y2) gradientu. Do metody createRadialGradient jest przekazywanych sześć argumentów. Pierwsze trzy definiują wewnętrzny okrąg ze współrzędnymi (x1, y1) i jednym promieniem (r1) oraz zewnętrzny okrąg ze współrzędnymi i drugim promieniem. Nasz przykład użyje gradientu radialnego, aby nadać naszej uśmiechniętej twarzy trójwymiarową głębię. Najpierw ustawimy nasz gradient na zmienną, a następnie dodamy do gradientu serię punktów przejścia koloru. W naszym przykładzie kodu zastąpimy fillStyle naszym gradientem:

var mySmile = document.getElementById ('mySmile')

var smileCtx = mySmile.getContext ('2d');

var radgrad = smileCtx.createRadialGradient (100,100,10,100,100,100);

radgrad.addColorStop (.5, 'rgba (247,241,192,1)');

radgrad.addColorStop (1, 'rgba (244,225,56,1)');

smileCtx.beginPath ();

smileCtx.fillStyle = radgrad;

smileCtx.arc (100,100,99,0, Math.PI * 2); // głowa

smileCtx.stroke ();

smileCtx.fill ();

smileCtx.beginPath ();

smileCtx.moveTo (170,100);

smileCtx.arc (100,100,70,0, Math.PI); // Usta

smileCtx.stroke ();

smileCtx.beginPath ();

smileCtx.fillStyle = 'czarny';

smileCtx.moveTo (60, 65);

smileCtx.arc (60,65,12,0, Math.PI * 2); // Lewe oko

smileCtx.fill ();

smileCtx.beginPath ();

smileCtx.moveTo (140,65);

smileCtx.arc (140,65,12,0, Math.PI * 2); // Prawe oko

smileCtx.fill ();

Po prostu zastąpiliśmy nasz kolor wypełnienia gradientem jako wypełnieniem. Daje nam to dodatkową głębię, którą chcemy, aby nasza uśmiechnięta buźka wyróżniała się z tłumu

Dodatkowe style

Możesz uzyskać efekt przezroczystości za pomocą wybranego koloru lub możesz zastosować przezroczystość globalnie do obrysu. Aby dostosować poziom przezroczystości, użyj metody globalAlpha:

globalAlpha = .2;

W przeciwieństwie do stylów kolorów metoda globalAlpha ma zastosowanie tylko do bieżącego obrysu. Po uruchomieniu nowego obrysu metoda globalAlpha resetuje się do 1. Ponieważ odgrywają tak dużą rolę na ilustracjach, linie otrzymują dodatkowe wartości kontrolne w tagu < canvas >. Możesz ustawić następujące wartości obrysu w tagu < canvas >:

lineWidth: Wartość liczbowa reprezentująca szerokość w punktach

lineCap: kształt końca linii, który można zadeklarować jako dolny, okrągły lub kwadratowy

lineJoin: Kształt połączenia liniowego, które można zadeklarować jako okrągłe, skośne lub ścięte

miterLimit: określa, jak daleko zewnętrzny punkt połączenia może być umieszczony od wewnętrznego punktu połączenia, gdy wybrany jest typ ścięcia lineJoin

Wzory i cienie mogą być również stosowane do elementów kanwy i mają podobną składnię do implementacji CSS. Aby uzyskać szczegółowe informacje na temat tych i innych funkcji, zapoznaj się ze specyfikacją W3C w tagu < canvas >.

Stylizuj elementy płótna za pomocą plików graficznych

Kształty w tagu < canvas > mają niektóre z tych samych elementów sterujących, co inne elementy strony. W tym poradniku nauczysz się, jak pójść o krok dalej w ilustracjach na płótnie, wykorzystując obrazy jako wypełnienia. Specyfikacja Canvas zapewnia dużą elastyczność w tworzeniu ilustracji HTML5. Inne hacki obejmowały podstawowe kształty, kolory, gradienty i inne style, więc ten hack skupi się na zaimportowaniu innego obiektu do użycia w elemencie Canvas.

Podstawowe wypełnienie

Aby zilustrować użycie obrazu jako wypełnienia, zaczniemy od przyjrzenia się przykładowej buźki z podstawowym żółtym wypełnieniem głowy. Ustawiamy kolor tła, dodając wypełnienie kolorem do tworzonego koła głowy. Po uruchomieniu obrysu jest to prosta linia kodu:

smileCtx.fillStyle = '# F1F42E';

Nasz wynik końcowy będzie miał prosty obraz użyty jako powtarzające się tło. Aby zmienić ten jednolity kolor na obraz, użyjemy bardzo podobnego interfejsu API:

smileCtx.fillStyle = myPattern;

W powyższym kodzie widać, że używamy tego samego interfejsu API dla tła obrazu, co dla koloru wypełnienia (podobnie do atrybutu tła w deklaracji CSS). Jednak użycie obrazu wymaga nieco dodatkowego obciążenia.

Używanie obrazu jako wypełnienia

W JavaScript, aby użyć obrazu, musisz najpierw mieć do niego odniesienie. W naszym przypadku zaczniemy od dynamicznego stworzenia obrazu, a następnie ustawienia jego atrybutu src:

var img = new Image ();

img.src = '/assets/img/heart.png';

To było dość łatwe; mamy teraz zmienną o nazwie img, która odwołuje się do naszego pliku obrazu. Drugim krokiem jest ustawienie tego obrazu jako wzorca, który będzie używany przez tag < canvas >:

var myPattern = smileCtx.createPattern(img,'repeat');

smileCtx.fillStyle = myPattern;

Aby to osiągnąć, użyliśmy metody płótna o nazwie createPattern. Wymaga to dwóch parametrów: pierwszy to odwołanie do pliku obrazu, a drugi to nasze powtórzenie DOMstring. Podobnie jak w przypadku implementacji CSS, możemy ustawić powtarzanie DOMstring na powtarzanie, powtarzanie-x, powtarzanie-y lub brak powtarzania. Jeśli nie określono żadnej wartości, domyślnie jest powtarzana. Teraz połączmy to wszystko razem i zobaczmy, jak to wygląda. Oto widok kodu używanego do generowania naszej buźki z obrazem jako tłem:

var mySmile = document.getElementById('mySmile4')

var smileCtx = mySmile.getContext('2d');

// utwórz nowy obiekt obrazu do wykorzystania jako wzorzec

var img = new Image();

img.src = '/assets/img/heart.png';

// utwórz wzorzec

var myPattern = smileCtx.createPattern(img,'repeat');

smileCtx.fillStyle = myPattern;

smileCtx.arc(100,100,99,0,Math.PI*2); // head

smileCtx.stroke();

smileCtx.fill();



smileCtx.beginPath();

smileCtx.moveTo(170,100);

smileCtx.arc(100,100,70,0,Math.PI); // Usta

smileCtx.stroke();

smileCtx.beginPath();

smileCtx.fillStyle = 'black';

smileCtx.moveTo(60, 65);

smileCtx.arc(60,65,12,0,Math.PI*2); // Lewe oko

smileCtx.fill();

smileCtx.beginPath();

smileCtx.moveTo(140,65);

smileCtx.arc(140,65,12,0,Math.PI*2); // Prawe oko

smileCtx.fill();

Gdybyśmy mieli uruchomić ten kod, prawdopodobnie bylibyśmy rozczarowani wynikami. Czy potrafisz zidentyfikować problem? Pomyśl o czasie ładowania. Kanwa korzysta z danych w czasie rzeczywistym. W poprzednim przykładzie utworzyliśmy obraz, a następnie natychmiast ustawiliśmy go jako tło. Ponieważ wzór nie powiódł się, wypełnienie obszaru roboczego powróciło do domyślnego stanu czarnego dla koloru wypełnienia. Problem polega na dostępności danych obrazu, które w naszym przypadku nie zostały jeszcze załadowane. Aby rozwiązać ten problem, dodamy kilka wierszy JavaScript, które czekają na załadowanie obrazu, zanim wykonamy niezbędny kod płótna. Przeglądarki od lat obsługują zdarzenie onload obrazu. W tym przykładzie użyjemy zdarzenia onload obrazu, aby dowiedzieć się, kiedy mamy załadowane niezbędne dane:

var mySmile = document.getElementById('mySmile4')

var smileCtx = mySmile.getContext('2d');

// utwórz nowy obiekt obrazu do wykorzystania jako wzorzec

var img = new Image();

img.src = '/assets/img/heart.png';

img.onload = function(){

// utwórz nowy wzorzec

var myPattern = smileCtx.createPattern(img,'repeat');

c smileCtx.fillStyle = myPattern;

smileCtx.arc(100,100,99,0,Math.PI*2); // głowa

smileCtx.stroke();

smileCtx.fill();

smileCtx.beginPath();

smileCtx.moveTo(170,100);

smileCtx.arc(100,100,70,0,Math.PI); // Ustabr>
smileCtx.stroke();

smileCtx.beginPath();

smileCtx.fillStyle = 'black';

smileCtx.moveTo(60, 65);

smileCtx.arc(60,65,12,0,Math.PI*2); // Lewe oko

smileCtx.fill();

smileCtx.beginPath();

c smileCtx.moveTo(140,65);

smileCtx.arc(140,65,12,0,Math.PI*2); // Prawee oko

smileCtx.fill();

}

Teraz mamy pewność, że nasze dane obrazu zostały załadowane, a tag < canvas > może w pełni wykorzystać obraz do wykorzystania w tle wzoru.

Łatwe dane obrazu

Dodawanie obrazów do załadowania wokół całych segmentów kodu może czasami być kłopotliwe. Fajnym skrótem dostępnym w przeglądarkach HTML5 jest użycie wbudowanych danych obrazu. Możemy łatwo usunąć zdarzenie onload z poprzedniego przykładu i po prostu odwołać się do danych obrazu. Ponieważ dane obrazu zostały załadowane podczas ładowania strony, nie ma potrzeby czekać na uruchomienie zdarzenia onload przed próbą użycia obrazu. Nasz nowy kod wyglądałby tak:

var mySmile = document.getElementById('mySmile5')

var smileCtx = mySmile.getContext('2d');

// utwórz nowy obiekt obrazu do wykorzystania jako wzorzec

var img2 = new Image();

img2.src = 'data:image/png;base64,iVBORw0K... dane obrazu tutaj

...f5v038BfQ3g/3mcvqgAAAAASUVORK5CYII=';

// utwórz wzorzec

var myPattern = smileCtx.createPattern(img2,'repeat');

smileCtx.fillStyle = myPattern;

smileCtx.arc(100,100,99,0,Math.PI*2); // head

smileCtx.stroke();

smileCtx.fill();

smileCtx.beginPath();

smileCtx.moveTo(170,100);

smileCtx.arc(100,100,70,0,Math.PI); // Usta

smileCtx.stroke();

smileCtx.beginPath();

smileCtx.fillStyle = 'black';

smileCtx.moveTo(60, 65);

smileCtx.arc(60,65,12,0,Math.PI*2); // Lewe oko

smileCtx.fill();

smileCtx.beginPath();

smileCtx.moveTo(140,65);

smileCtx.arc(140,65,12,0,Math.PI*2); //Prawe oko

smileCtx.fill();

Używanie wersji Base64 obrazu we wszystkich przypadkach może nie mieć sensu, ponieważ powoduje to zwiększenie wagi przy początkowym ładowaniu strony, ale czasami może być odpowiednie, aby wykorzystać i uprościć kod. Dobrą praktyką jest mieć do wyboru wiele metod implementacji.

Użyj tagu HTML5 < canvas >, aby utworzyć nośnik o wysokiej rozdzielczości, przystosowany do wyświetlania na wyświetlaczu Retina

Kiedy Apple po raz pierwszy wprowadził wyświetlacz Retina na iPhone 4, części sieci WWW zaczęły wyglądać dość nędznie. Wyższa rozdzielczość wyświetlacza sprawiła, że szybko ładujące się obrazy "gotowe do publikacji w Internecie" wyglądały na podzielone na piksele. Ogólnie rzecz biorąc, obrazy o wyższej rozdzielczości oznaczają dłuższy czas ładowania. Ten hack wykorzystuje tag HTML5 < canvas >, aby zapewnić obrazy gotowe do siatkówki bez dodatkowego obciążenia. Wystąpił problem z naszymi ekranami Retina. Wyglądają świetnie (niewiele osób będzie o tym dyskutować), ale sposób, w jaki to robią, spowodował wiele problemów dla twórców stron internetowych. Apple po raz pierwszy wprowadził wyświetlacz Retina z iPhonem 4, próbując rozwiązać dwa problemy: stworzyć wyświetlacz, w którym piksele byłyby nie do odróżnienia gołym okiem, i nie sprawiać, by aplikacje iOS i Apple wyglądały jak bzdury. Aby to zrobić, Apple oznaczył gęstość pikseli znacznie wyższą, niż było to konieczne, i w rzeczywistości nadał wyświetlaczowi gęstość, która była równo podzielna przez poprzednią gęstość ekranu iPhone′a. Umożliwiło to Apple zaktualizowanie wszystkich zasobów wizualnych zestawu SDK iOS i systemu operacyjnego iOS do wyższej rozdzielczości i po prostu zmniejszenie rozmiaru dla starszych, mniej gęstych ekranów. Dla wszystkich innych zasobów w aplikacjach Apple, firma zastosowała metodę zwaną dublowaniem pikseli, aby zasoby pozostały we właściwym rozmiarze. Zasoby, takie jak obrazy i multimedia w Internecie, padają ofiarą podwojenia pikseli. To sprawia, że nasze strony internetowe wyglądają na podzielone na piksele i postrzępione. Typowym rozwiązaniem tego problemu jest wykorzystanie obrazów o rozdzielczości dwukrotnie większej od pikseli, co powoduje, że obrazy są większe, a strony internetowe ładują się znacznie dłużej.

W znaczniku < canvas >

Znacznik < canvas > to przestrzeń do rysowania ilustracji wektorowych. Ponieważ tag < canvas > jest tworzony przy użyciu zestawu definicji, rozmiar ilustracji jest nieistotny w stosunku do ilości danych potrzebnych do jej stworzenia (w przeciwieństwie do obrazów, które wymagały przesłania dodatkowych danych, aby pomieścić więcej pikseli). W takim przypadku możemy przygotować nasz tag < canvas > do Retina bez dodatkowej wagi strony. Zacznijmy od wczytania prostego przykładu buźki narysowanej na tagu < canvas > o wymiarach 200 × 200 punktów. Oto kod do stworzenia naszego przykładu:

var mySmile = document.getElementById ('mySmile2')

var smileCtx = mySmile.getContext ('2d');

smileCtx.beginPath ();

smileCtx.fillStyle = '# F1F42E';

smileCtx.arc (100,100,99,0, Math.PI * 2); // głowa

smileCtx.stroke ();

smileCtx.fill ();

smileCtx.beginPath ();

smileCtx.moveTo (170,100); smileCtx.arc (100,100,70,0, Math.PI); // Usta

smileCtx.stroke ();

smileCtx.beginPath ();

smileCtx.fillStyle = 'czarny';

smileCtx.moveTo (60, 65);

smileCtx.arc (60,65,12,0, Math.PI * 2); // Lewe oko

smileCtx.fill ();

smileCtx.beginPath ();

smileCtx.moveTo (140,65);

smileCtx.arc (140,65,12,0, Math.PI * 2); // Prawe oko

smileCtx.fill ();

Nasza uśmiechnięta buźka wygląda świetnie na standardowym wyświetlaczu, ale na wyświetlaczu Retina jest dość poszarpana. Aby ilustracja była gładka dla wyświetlacza Retina, musimy przeciwdziałać podwojeniu pikseli, które ma miejsce. Aby to osiągnąć, dodamy kilka prostych linii kodu do naszego JavaScript:

if (window.devicePixelRatio == 2) {

mySmile.setAttribute ('width', 400);

mySmile.setAttribute ('height', 400);

smileCtx6.scale (2, 2);

}

Wstawimy to do naszego kodu zaraz po zadeklarowaniu naszego kontekstu, ale zanim zaczniemy stosować nasze elementy do tagu < canvas >. Zasadniczo wykryliśmy, że stosowane jest podwojenie pikseli (sprawdzając współczynnik pikseli urządzenia), a następnie podwoiliśmy rozmiar naszego tagu < canvas >. aby strona renderowała wszystkie piksele o połowę mniejszą, ustawimy płótno na 400, a następnie za pomocą CSS zmniejszymy je z powrotem do 200 pikseli. Dodajmy ten kod CSS na górze naszej strony:

#mySmile{

wysokość: 200px;

szerokość: 200px;

}

Za pomocą zaledwie kilku wierszy kodu w zasadzie włączyliśmy nasz tag < canvas > Retina bez konieczności znacznego zwiększania wagi strony. Poprawiliśmy komfort użytkowania naszych wyświetlaczy Retina bez wpływu na resztę naszej bazy użytkowników. Możesz zastosować tę technikę do dowolnego tagu < canvas >, niezależnie od tego, czy jest to ilustracja strony, czy element canvas używany jako obraz tła CSS. Jedyny przypadek, w którym nie odniesiesz korzyści z używania tej techniki, to importowanie obrazu do znacznika < canvas >, który nie obsługuje wyższej rozdzielczości wyświetlacza Retina.

Przyspiesz animację dzięki rysunkom na płótnie

Użycie tagu < canvas > jest często jednym z najbardziej wydajnych sposobów tworzenia animacji w aplikacjach internetowych. Ten hack zagłębia się w szczegółach tworzenia animacji przy użyciu tagu < canvas >.

Czysta animacja może spowodować lub zepsuć Twoje aplikacje internetowe. Aplikacje natywne na komputery i urządzenia mobilne podniosły oczekiwania użytkowników: jeśli Twoja aplikacja internetowa nie zawiera przejrzystych, zwięzłych animacji, użytkownicy często uznają ją za aplikację o niskiej wydajności. Animacja płótna może być potężnym narzędziem do animacji internetowych. Ponieważ coraz więcej twórców przeglądarek włącza GPU do animacji kanwy, wykonywanie animacji z elementem canvas staje się jeszcze bardziej korzystne.

Napisz i wyczyść

Animacja na tagu < canvas > przypomina wczesne animacje animowane, w których każda klatka jest rysowana, a następnie wyświetlana we właściwej kolejności iz określoną liczbą klatek na sekundę. Animacja płótna zasadniczo składa się z tych trzech kroków:

1. Rysuj na płótnie.

2. Usuń to, co właśnie narysowałeś.

3. Powtarzaj kroki 1 i 2 aż do zakończenia animacji.

W JavaScript, gdy coś wymaga ciągłego wywoływania, często używamy metod takich jak setTimeout i setInterval do wywoływania naszych metod rysowania. Problem z każdą z tych metod polega na tym, że trzeba je ustawić na określony czas. Gdybyśmy ustawili ten czas na powiedzmy 100 milisekund, nigdy nie bylibyśmy w stanie osiągnąć liczby klatek większej niż 10 klatek na sekundę. W celu rozwiązania tego problemu za pomocą tagu < canvas > wprowadzono nowy, potężny standard: metodę requestAnimationFrame. W przypadku tej metody użytkownik prosi przeglądarkę o renderowanie następnej klatki, gdy tylko będzie ona dostępna w przeciwieństwie do próby renderowania w stałych odstępach czasu. Celem requestAnimationFrame jest 60 klatek na sekundę, ale nie zawiedzie, jeśli nie może renderować tak szybko; po prostu renderuje tak szybko, jak to możliwe. Zwróć uwagę, że ta metoda nie jest ograniczona do użycia w animacjach kanwy; jest dostępny dla dowolnej technologii rysowania w Internecie, w tym WebGL.

Uśmiechnij się, jesteś ożywiony!

Przyjrzyjmy się dobrze przykładowi animacji płótna. Jeśli przejrzałeś poprzednie hacki w tym rozdziale, zobaczyłeś przykłady buźek. Każdy przykład rysował buźkę na płótnie o wymiarach 200 × 200. Na tej ilustracji narysujemy go na znacznie większym płótnie, aby dać nam swobodę ruchu. Zacznijmy od upuszczenia naszego tagu < canvas > na stronę:

< canvas id = "moveSmile" width = "800" height = "200" > < /canvas > Teraz, gdy mamy duże, grube, puste płótno, narysujemy na nim uśmiechniętą buźkę. Aby to zrobić, pobierzemy kilka wierszy kodu JavaScript, aby zbudować elementy naszej strony:

var canvas = document.getElementById ("moveSmile");

var smileCtx = canvas.getContext ("2d");

smileCtx.beginPath ();

smileCtx.fillStyle = '# F1F42E';

smileCtx.arc (100,100,99,0, Math.PI * 2); // głowa

smileCtx.stroke ();

smileCtx.fill ();

smileCtx.beginPath ();

smileCtx.moveTo (170,100);

smileCtx.arc (100,100,70,0, Math.PI); // Usta

smileCtx.stroke ();

smileCtx.beginPath ();

smileCtx6.fillStyle = 'black';

smileCtx6.moveTo (60, 65);

smileCtx6.arc (60,65,12,0, Math.PI * 2); // Lewe oko

smileCtx6.fill ();

smileCtx6.beginPath ();

smileCtx6.moveTo (140,65);

smileCtx6.arc (140,65,12,0, Math.PI * 2); // Prawe oko

smileCtx6.fill ();

Nasz kod po prostu rysuje tę uśmiechniętą buźkę po lewej stronie tag < canvas >. W celach ilustracyjnych do tagu < canvas > dodano obramowanie o szerokości 1 piksela, abyśmy mogli zobaczyć granice. Wracając do naszego trzystopniowego procesu, kiedy narysujemy naszą ilustrację, musimy to zrobić wymaż to, co narysowaliśmy:

smileCtx.clearRect (0, 0, 800, 200); // smileCtx to kontekst 2d

Dla uproszczenia wymazuję całe płótno, ale aby zoptymalizować wydajność, należy skupić się na wymazywaniu tego, co się zmienia w następnej klatce. W poprzedniej metodzie czyściłem całe płótno, ustawiając współrzędne clearRect od lewego górnego rogu płótna do prawego dolnego rogu. To usuwa prostokątny kształt o wielkości płótna. Nasze płótno powinno być teraz pozbawione ilustracji. Teraz w kroku 3 przerysujemy naszą buźkę, ale przesuniemy ją nieco w prawo. Aby to zrobić, przeniesiemy pozycję x obu naszych metod moveTo i pozycję początkową elementu (w tym przypadku łuk). Aby to osiągnąć, zastąpimy każdą liczbę prostym równaniem, aby wygenerować odpowiednią współrzędną x za każdym razem, gdy element jest rysowany:

x + pozycja startowa

Nasz kod będzie teraz wyglądał następująco:

var x = 0;



smileCtx6.beginPath ();

smileCtx6.fillStyle = '# F1F42E';

smileCtx6.arc (x + 100,100,99,0, Math.PI * 2); // głowa

smileCtx6.stroke ();

smileCtx6.fill ();

smileCtx6.beginPath ();

smileCtx6.moveTo (x + 170,100);

smileCtx6.arc (x + 100,100,70,0, Math.PI); // Usta

smileCtx6.stroke ();

smileCtx6.beginPath ();

smileCtx6.fillStyle = 'czarny';

smileCtx6.moveTo (x + 60, 65);

smileCtx6.arc (x + 60,65,12,0, Math.PI * 2); // Lewe oko

smileCtx6.fill ();

smileCtx6.beginPath ();

smileCtx6.moveTo (x + 140,65);

smileCtx6.arc (x + 140,65,12,0, Math.PI * 2); // Prawe oko

Dla poprzedniego kodu x jest ustawione na 0, ale aby przesunąć buźkę po ekranie, musimy zmienić pozycję x. Zrobimy to za pomocą prostego stwierdzenia, które odpowiednio zwiększa lub zmniejsza wartość x (spowoduje to przesunięcie jej po ekranie, a następnie z powrotem). Jest jeszcze jedna wartość, którą musimy określić: szybkość animacji. Jeśli po prostu zwiększymy wartość o 1, uśmiechnięta buźka przesunie się tylko o jeden piksel na iterację. Chcemy dodać trochę wigoru do tej animacji, więc stworzymy nową zmienną o nazwie speed i ustawimy ją na 6. Kiedy ta liczba zostanie dodana do bieżącej pozycji x, przesunie uśmiechniętą buźkę do przodu lub do tyłu o sześć pikseli , zwiększając w ten sposób prędkość. Spójrzmy na kod:

var speed = 6; // px porusza się w każdej pętli określa, jak szybko się porusza

x + = prędkość;

if (x <= 0 || x> = 600) {// tak daleko, jak możemy się posunąć bez odcinania

speed = -speed; // określa, czy porusza się do przodu czy do tyłu;

}

Implementowanie requestAnimationFrame

Jak wspomniano wcześniej, requestAnimationFrame to nowa specyfikacja w rodzinie HTML5. Jest tak nowy, że większość przeglądarek obsługuje tylko jego wersję z prefiksem. Aby wykorzystać ją w nowoczesnych przeglądarkach, musimy szybko sprawdzić, której wersji metody musimy użyć, a następnie zbudować do niej odniesienie. W naszym przykładzie użyjemy metody requestAnimationFrame, aby przejść przez naszą animację. Aby to osiągnąć, użyjemy go do wywołania tego samego losowania metody cyklicznej. Pamiętaj, że liczba klatek na sekundę zostanie określona przez requestAnimationFrame, ponieważ wywoła metodę draw, gdy tylko przeglądarka będzie gotowa do narysowania kolejnego ekranu.

Kładąc wszystko razem

Metoda requestAnimationFrame jest tak naprawdę klejem, który łączy ten przykład. Aby wszystko działało poprawnie, ustawimy nasze zmienne u góry naszej strony, a następnie podzielimy nasz kod na dwie metody. Pierwsza określi nową wartość x, a następnie wywoła metodę draw. Metoda rysowania najpierw wyczyści płótno z poprzedniej klatki, a następnie narysuje nową ramkę. Ta metoda jest wywoływana w kółko. Nasz ostateczny kod składa się w następujący sposób:

var x = 0;

var speed = 6; // px porusza się w pętli określa, jak szybko się porusza

var canvas = document.getElementById ("moveSmile");

var smileCtx = canvas.getContext ("2d");

function animate () {

reqAnimFrame = window.mozRequestAnimationFrame || window.webkitRequestAnimaationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame

reqAnimFrame (animate);

x + = prędkość;

if (x <= 0 || x> = 600) {

speed = -speed; // zobacz, czy porusza się do przodu czy do tyłu;

}

draw();

}

function draw () {

smileCtx6.clearRect (0, 0, 800, 200);

smileCtx6.beginPath ();

smileCtx6.fillStyle = '# F1F42E';

smileCtx6.arc (x + 100,100,99,0, Math.PI * 2); // głowa

smileCtx6.stroke ();

smileCtx6.fill ();

smileCtx6.beginPath ();

smileCtx6.moveTo (x + 170,100);

smileCtx6.arc (x + 100,100,70,0, Math.PI); // Usta

smileCtx6.stroke ();

smileCtx6.beginPath ();

smileCtx6.fillStyle = 'czarny';

smileCtx6.moveTo (x + 60, 65);

smileCtx6.arc (x + 60,65,12,0, Math.PI * 2); // Lewe oko

smileCtx6.fill ();

smileCtx6.beginPath ();

smileCtx6.moveTo (x + 140,65);

smileCtx6.arc (x + 140,65,12,0, Math.PI * 2); // Prawe oko

smileCtx6.fill ();

}

animate();

Nasza uśmiechnięta buźka zaczyna się po lewej stronie elementu canvas, a następnie animuje skrajną prawą stronę. Następnie będzie powtarzał ten krok w kółko.

Twórz "natywne" ilustracje za pomocą skalowalnej grafiki wektorowej

Skalowalna grafika wektorowa (SVG) jest zwykle najbardziej "znanym" formatem grafiki w rodzinie technologii HTML5. Ten hack szybko sprawi, że będziesz pracować z formatem SVG, jakby był częścią DOM (wskazówka: naprawdę jest częścią DOM!). Scalable Vector Graphics to rekomendacja W3C dotycząca ilustracji internetowych. Podobnie jak Flash, SVG jest językiem znaczników do opisu dwuwymiarowej grafiki wektorowej, ale jest otwartym językiem opartym na XML, a nie zastrzeżonym. Pomyśl o SVG jako graficznym odpowiedniku HTML-a i tym podobnych . HTML, SVG bezproblemowo współpracuje z innymi technologiami przeglądarek, takimi jak JavaScript, CSS i DOM.

Dlaczego SVG?

W porównaniu do wszystkich innych technologii graficznych i multimedialnych wprowadzonych w HTML5, SVG ma kilka głównych zalet. Podstawową zaletą jest sama technologia. Będąc językiem opartym na XML, SVG nie wymaga programu do edycji, takiego jak Flash, Photoshop czy nawet Paint. Możesz tworzyć i edytować obrazy SVG za pomocą dowolnego prostego edytora tekstu lub ulubionego edytora internetowego. S w SVG oznacza skalowalne i skalowalne jest! SVG jest niezależny od rozdzielczości. Obrazy SVG można powiększać lub pomniejszać, a nawet drukować w dowolnym rozmiarze i nadal zachowują swoją jakość, co jest główną zaletą tej technologii. Będąc czystym XML, SVG można natywnie przeszukiwać, indeksować i łatwo kompresować. Osadzanie tekstu w plikach SVG i stylizowanie ich za pomocą CSS jest również całkiem naturalne. Łatwo jest też dostosować grafikę SVG do amerykańskiej ustawy o niepełnosprawnościach (ADA), umieszczając opisy obrazów w samym pliku SVG.

Tworzenie obrazu SVG

W większości przypadków SVG jest zarządzany we własnym pliku. To jest plik tekstowy z rozszerzeniem .svg. Następnie osadziłbyś ten plik w DOM w sposób podobny do pracy z obrazem. W naszym przykładzie zaczniemy od nowego pliku SVG o nazwie smiley.svg i osadzimy go na naszej przykładowej stronie z następującym kodem:

< object data = "smiley.svg" type = "image / svg + xml" / >

Technicznie rzecz biorąc, nasz plik SVG jest obiektem na stronie, a nie obrazem, dlatego jest osadzony w pliku obiektowym. W tym momencie zobaczymy nasz obiekt w DOM, ale nic nie wyświetli, ponieważ plik SVG jest pusty. Ale naprawimy to. Teraz, aby naprawdę zaimponować naszym przyjaciołom i wrogom, utworzymy obiekt SVG przedstawiający międzykulturowy symbol miłości, pokoju i nadziei: uśmiechniętą buźkę.

Rysowanie za pomocą XML W przeciwieństwie do obrazu JPEG lub PNG, gdzie obraz jest przesyłany w formacie Unicode, obraz SVG jest rysowany za pomocą szeregu reguł zgodnych ze schematem XML. To powoduje, że obrazy są lekkie i bardzo skalowalne. W poprzednim przykładzie kodu utworzyliśmy element obiektu, który ma atrybut danych wskazujący na plik SVG. Ten plik SVG zawiera kilka wierszy kodu, które rysują naszą buźkę. Ta bezczelna buźka jest naprawdę prosta. Plik SVG składa się tylko z pięciu elementów, a każdy element staje się odrębnym elementem DOM po zaimportowaniu na stronę. Jako elementy DOM podlegają tym samym regułom i mają dostęp do tych samych interfejsów API, co wszystkie inne elementy strony. Rzućmy okiem na każdy element składający się na naszą buźkę:

< circle cx = "300" cy = "164" r = "160" fill = "yellow" stroke = "black" stroke-width = "2" / >

Ten pierwszy element to żółte kółko przedstawiające głowę uśmiechniętej buźki. Jak można się dowiedzieć z poprzedniego kodu, element jest w rzeczywistości elementem okręgu, który ma atrybuty reprezentujące następujące elementy:

cx, cy

Są to pozycje X i Y okręgu w odniesieniu do obiektu SVG na stronie.

r

To jest promień okręgu przedstawionego w punktach (wartość liczbowa).

fill

Odnosi się do sposobu malowania wnętrza obiektu. Element można wypełnić kolorem, gradientem lub wzorem (np. Zaimportowanym obrazem).

stroke

Przedstawia rzeczywisty kształt obiektu lub linii (łącznie z tekstem). Obrys można pokolorować za pomocą tych samych opcji, co wypełnienie.

stroke-width

Jest to konieczne tylko wtedy, gdy masz zadeklarowany udar. Jak widać w nazwie atrybutu, deklaruje to szerokość obrysu w punktach. Wartość domyślna to 1

Kolejne dwa elementy to oczy uśmiechniętej buźki. Zawierają wiele takich samych atrybutów, jak poprzednie koło. Te dwa okręgi są identyczne, z wyjątkiem pozycji x, które rysują je po różnych stronach głowy.

< circle cx = "210" cy = "100" r = "20" fill = "black" / >

< circle cx = "380" cy = "100" r = "20" fill = "black" / >

Ścieżka przycinająca może być nieoczekiwanym elementem na tej ilustracji. Nie po to, żeby zdradzić zakończenie, ale ostatnim elementem będzie kolejny okrąg, który reprezentuje uśmiechnięte usta na ilustracji.

< clipPath id = "MyClip" >

< rect x = "30" y = "200" width = "600" height = "100" / >

< /clipPath >

Ścieżka przycinania jest elementem nadrzędnym dla innych elementów SVG, które mają efekt obcinania zamiast efektu malowania. Ścieżka klipu ma jeden atrybut:

id

Identyfikator wygląda bardzo podobnie do identyfikatora DOM, ponieważ jest to identyfikator DOM. W tym przypadku konieczne jest, abyśmy odnosili się do ścieżki klipu z innego pliku elementu SVG. Ścieżka do klipu zawiera kolejny element:

< rect x = "30" y = "200" width = "600" height = "100" / >

Dokładnie tak to wygląda. Zostałeś już wprowadzony do elementu okręgu; cóż, to jest element prostokąta. Gdyby element prostokątny nie był zawarty w ścieżce przycinania, rysowałby prostokąt o wymiarach 600 × 100 na obiekcie SVG.

< circle cx = "300" cy = "160" r = "120" fill-opacity = "0" stroke = "black" stroke-width = "5" clip-path = "url (#MyClip)" / >

Ostatnim przedmiotem są usta. Ten okrąg ma dwa nowe atrybuty, którym chcemy się przyjrzeć:

fill-opcity

Jest to wartość z zakresu od 0 do 1, która deklaruje, jak nieprzezroczyste powinno być nasze wypełnienie. Ponieważ chcemy, aby okrąg wydawał się pusty, ustawiliśmy go na 0.

clip-path

Odwołuje się do identyfikatora DOM dla ścieżki klipu w naszym pliku SGV. Kiedy odnosimy się do ścieżki klipu, kształt zostaje zastosowany do tego elementu w sposób, który odcina wszystko (wypełnienie lub obrys) w obrazie. Mogliśmy narysować linię ust uśmiechniętej buźki, ale narysowanie tego kształtu w XML wymagałoby znacznie więcej pracy niż po prostu zadeklarowanie całego koła, a następnie odcięcie jego połowy. Kiedy weźmiemy wszystkie te elementy SVG i zawiniemy je w znacznik < svg >, zobaczymy, jak prosty jest kod:

< svg version = "1.1"

baseProfile = "pełny"

xmlns = http://www.w3.org/2000/svg >

< circle cx = "300" cy = "164" r = "160" fill = "yellow" stroke = "black"

stroke-width = "2" / >

< circle cx = "210" cy = "100" r = "20" fill = "black" / >

< circle cx = "380" cy = "100" r = "20" fill = "black" / >

< clipPath id = "MyClip" >

< rect x = "30" y = "200" width = "600" height = "100" / >

< /clipPath >

< circle cx = "300" cy = "160" r = "120" fill-opacity = "0" stroke = "black"

stroke-width = "5" clip-path = "url (#MyClip)" / >

< /svg >

Te 11 linijek kodu to wszystko, czego potrzebujemy, aby narysować naszą przyjazną uśmiechniętą buźkę. Kod jest znacznie lżejszy niż JPEG lub nawet GIF, który reprezentowałby ten sam obraz. Dodatkowo, jak już omówiliśmy, odziedziczysz wszystkie zalety pierwszorzędnych obiektów DOM.

Styl elementów SVG za pomocą CSS

SVG ma te same przywileje, co wszystkie inne elementy DOM, w tym możliwość stylizacji za pomocą CSS. Ten hack pokazuje, jak łatwo jest tworzyć elementy za pomocą SVG, a następnie przekształcać je w ilustracje za pomocą CSS. Najpotężniejszą częścią SVG jest jego pozycja w DOM. Elementy SVG są pierwszorzędnymi elementami w HTML5 i mają takie same uprawnienia, jak inne elementy DOM. Mimo to łatwo jest kontrolować prezentację tych elementów za pomocą CSS. SVG ma możliwość kontrolowania prezentacji swoich elementów poprzez ustawienie atrybutów na samych elementach. Oto niektóre z bardziej popularnych atrybutów prezentacji w formacie SVG:

*fill

*stroke

*stroke-width

*fill-opacity

*height

*width

*x, y

*cx, cy

*orientation

*color

*cursor

*clipPath

Często sensowne jest osadzenie tych atrybutów w samym pliku SVG, skąd można je pobrać jako jeden plik. Innym razem bardziej elastyczne może być utworzenie naszych podstawowych elementów SVG w pliku SVG i nadanie im stylu w języku, który dobrze znamy: CSS.

Począwszy od SVG

Na początek zilustrujemy prostą buźkę z elementami SVG. To jest podstawowa ilustracja, która składa się z pięciu elementów i dziewięciu wierszy kodu:

< svg version="1.1" baseProfile="full" xmlns=http://www.w3.org/2000/svg >

< circle cx="300" cy="164" r="160" fill="yellow" stroke="black" stroke-width="2" / >

< circle cx="210" cy="100" r="20" fill="black" / >

< circle cx="380" cy="100" r="20" fill="black" / >

< clipPath id="MyClip" >

< rect x="30" y="200" width="600" height="100" / >

< /clipPath >

< circle cx="300" cy="160" r="120" fill-opacity="0" stroke="black" stroke-width="5" clip-path="url(#MyClip)" / >

< /svg >

Ten prosty fragment kodu jest przechowywany w pliku o nazwie smiley.svg i osadzany na naszej stronie za pomocą tagu