Mozilla Hacks: ECMAScript 5 Strict Mode – tryb ścisły w ECMAScripcie 5

W tym odcinku tłumaczeń artykułów z Mozilla Hacks – notka Jeffa Waldena o trybie ścisłym w JavaScripcie. Jeff zajmuje się rozwojem SpiderMonkey, silnika JS Firefoksa.

Zarówno oryginalny artykuł, jak i to tłumaczenie dostępne są na licencji Creative Commons – Attribution Share-Alike v3.0.

ECMAScript 5 strict mode – tryb ścisły ES w Firefoksie 4

Programiści ze społeczności Mozilli znacząco usprawnili silnik JavaScriptu w Firefoksie 4. Wiele wysiłku włożyliśmy w zwiększenie wydajności, ale pracowaliśmy także nad nowymi możliwościami. W szczególności skupiliśmy się na ECMAScripcie 5, najnowszej wersji standardu będącego podstawą JavaScriptu.

Tryb ścisły (ang. strict) jest najbardziej interesującą nowością ECMAScriptu 5. Programiści mają możliwość skorzystania ze ściślejszego, bardziej ograniczonego wariantu JavaScriptu. Tryb ścisły nie jest tylko podzbiorem języka: ma celowo inną semantykę w porównaniu ze zwykłym kodem. Przeglądarki, które nie obsługują trybu ścisłego, będą uruchamiać kod w nim napisany w inny sposób niż przeglądarki tryb ścisły obsługujące – nie należy więc ślepo polegać na trybie ścisłym bez testowania (wykrywania) wsparcia istotnych aspektów tego trybu.

Continue reading “Mozilla Hacks: ECMAScript 5 Strict Mode – tryb ścisły w ECMAScripcie 5” →

Atrybut placeholder znacznika input w HTML5 i jego stylowanie

HTML5 wprowadza atrybut placeholder elementu input. Służy on do określenia tekstu wyświetlanego przez ten element, kiedy nie została wprowadzona do niego żadna wartość. Jest on obsługiwany przez silnik Gecko Firefoksa oraz WebKit (Safari, Chrome).

Na przykład, jeśli chcemy, by niewypełnione pole służące do wprowadzenia adresu e-mail wyświetlało napis “Wpisz adres e-mail”, wystarczy nadać ten atrybut wybranemu inputowi (demo #1):

<!DOCTYPE html>
<html lang="pl">
<title>input placeholder demo</title>
<form method="POST">
<label>E-mail: <input type=email placeholder="Wpisz adres e-mail"></label>
</form>

Tak to będzie wyglądało:

Firefox od następnej wersji beta (a w nightly buildach – od dziś) obsługuje ponadto stylowanie tego napisu. Oznacza to, że może on mieć np. inny kolor lub tło niż domyślny szary. Przydaje się to szczególnie, jeśli zmieniliśmy kolory tła naszych inputów.

W chwili obecnej standard CSS nie opisuje zasad stylowania takiego tekstu, przeglądarki implementują więc na razie własne, niestandardowe rozwiązania. Do ustawienia stylu dla tekstu placeholdera w Gecko używamy pseudoklasy :-moz-placeholder. W przeglądarkach opartych na silniku WebKit korzystamy z pseudoelementu ::-webkit-input-placeholder. Tak więc, by w Firefoksie, Chrome i Safari nadać zielony kolor placeholderowi, musimy jak na razie użyć dwóch regułek (demo #2):

<!DOCTYPE html>
<html lang="pl">
<title>input placeholder demo</title>
<style>
input:-moz-placeholder {color: #00cc00}
input::-webkit-input-placeholder {color: #00cc00}
</style>
<form method="POST">
<label>E-mail: <input type=email placeholder="Wpisz adres e-mail"></label>
</form>

Efekt:

Ważne: ponieważ regułka CSS jest odrzucana przez parser, jeśli przynajmniej jeden z selektorów oddzielonych przecinkiem jest dlań niezrozumiały, niestety NIE możemy uprościć tych regułek do postaci:

input:-moz-placeholder,
input::-webkit-input-placeholder {color: #00cc00}

ponieważ żadna przeglądarka nie rozumie ::-webkit-* i :-moz-* równocześnie. Muszą to być zatem dwie osobne regułki, tak jak we wcześniejszych przykładach.

Uwaga: różnice między pseudoklasą a pseudoelementem sprawiają, że nieco inny jest zakres możliwości stylowania tego tekstu (porównaj demo #3 w Gecko i WebKicie). Dopóki jednak ograniczamy się do prostych rzeczy (np. zmiana koloru), można uzyskać w obu silnikach taki sam wygląd.

Mozilla Hacks: Funkcja calc() z CSS3 w Firefoksie 4

W tym odcinku tłumaczeń artykułów z Mozilla Hacks – notka Paula Rougeta o calc() w CSS. Zarówno oryginalny artykuł, jak i to tłumaczenie dostępne są na licencji Creative Commons – Attribution 3.0.

Funkcja calc() z CSS3 w Firefoksie 4

Poniżej omówiona została funkcja calc() z CSS3. Firefox jej jeszcze nie obsługuje, ale trwają prace nad jej implementacją.

Firefox będzie obsługiwał wartość calc() w CSS (na etapie eksperymentalnym jako -moz-calc() – przyp. tłum.), pozwalającą wyliczyć wymiary danego elementu jako wynik wyrażenia arytmetycznego. Przyda się to przy określaniu wymiarów div-ów, wielkości marginesów, obramowań itp.

Poniżej układ, którego zakodowanie bez użycia funkcji calc() wymagałoby sporo akrobacji (lub użycia JavaScriptu – przyp. tłum.):

/*
* Dwa divy obok siebie, oddzielone marginesem o szerokości 1em
*/
#a {
  width:75%;
  margin-right: 1em;
}
#b {
  width: -moz-calc(25% - 1em);
}

W poniższym przykładzie zadbamy o to, żeby pole tekstowe nie pokrywało się ze swym elementem nadrzędnym:

input {
  padding:2px;
  border:1px solid black;
  display:block;
  width: -moz-calc(100% - 2 * 3px);
}

Jedną z bardziej przydatnych możliwości, jakie daje nam funkcja calc(), jest łączenie wartości w różnych jednostkach:

width: -moz-calc(3px + 50%/3 - 3em + 1rem);

Obecna implementacja obsługuje operatory: +, -, *, /, mod, min i max.

Będziemy również obsługiwać funkcje min() i max(), które można będzie wykorzystać na przykład tak:

div {
  height: -moz-min(36pt, 2em);
  width: -moz-max(50%, 18px);
}

Więcej informacji:

Ile HTML 5 w HTML 5 – co właściwie pokazało Apple?

(This post is also available in English)

Apple udostępniło ostatnio kilka przykładów, które nazywa “demonstracjami możliwości HTML 5”. W tej notce chciałbym sprawdzić, czy faktycznie demonstrowane są tutaj możliwości HTML 5, czy może czegoś innego. Nie zamierzam tu zagłębiać się w ideologię (choć, szczerze mówiąc, całkowicie zgadzam się tutaj z Chrisem Blizzardem) – chcę się skupić wyłącznie na kwestiach technicznych.

Jeden drobiazg, zanim zaczniemy. Każde podsumowujące zdanie “krótko mówiąc” dotyczy tego, co moim zdaniem jest demonstrowane na danej stronie, a nie formalnej obecności znaczników HTML 5 w kodzie. Przykładowo, jeśli strona stosuje znaczniki sekcji HTML 5 (a większość z nich to robi), ale demo dotyczy tak naprawdę przejść (tranzycji) stylów, nie uważam jej za demo HTML 5. Mając to na uwadze – zacznijmy.

Video – faktycznie używa znacznika <video> HTML 5 do osadzenia pliku wideo w formacie h.264. Natomiast perspektywa i efekty maskowania nie są częścią HTML 5 – umożliwiają je eksperymentalne rozszerzenia CSS Apple’a. Tak więc jest to demo HTML 5, ale nie wszystkie fajne rzeczy w nim zawarte są częścią HTML 5.
Krótko mówiąc, HTML 5: tak, CSS 3: nie bardzo, rozszerzenia CSS Apple’a: tak.

Typography – HTML 5 nie ma nic wspólnego z osadzaniem czcionek. Osadzanie czcionek zostało opisane w specyfikacji CSS 2 (choć dopiero od niedawna jest to szerzej obsługiwane przez przeglądarki). Suwak poziomy został tutaj zbudowany ze starych elementów HTML 4 (głównie divów), nie wykorzystano tu standardowego elementu <input type=range> HTML 5, który jest obsługiwany przez Safari.
Przezroczystość działa dzięki szeroko dziś obsługiwanej własności opacity z CSS 3 Color Module. Rotacje umożliwia eksperymentalna własność CSS Apple’a -webkit-transform, która tak naprawdę ma swoje odpowiedniki w innych przeglądarkach – z innymi prefiksami producenta (-moz-transform w Firefoksie 3.6 i -o-transform w nowych Operach). Cień pod tekstem dołożony został przez własność text-shadow z CSS 3 Text Module. Jest to także obsługiwane przez Mozillę i Operę. Z wyjątkiem elementów <nav> i <section>, stosowanych we wszystkich stronach z tej grupy, nie ma tu nic z HTML 5 (mamy za to sporo <div>-ów z HTML 4). Można więc zrobić stronę wyglądającą i zachowującą się identycznie w starym dobrym HTML 4. Wszystkie bajery tutaj to tak naprawdę CSS 3 lub eksperymentalne rozszerzenia CSS Apple’a.
Krótko mówiąc, HTML 5: nie bardzo, CSS 3: trochę, CSS 2: tak, rozszerzenia CSS Apple’a: tak.

Gallery – poza <nav> i <section> z HTML 5 mamy tu tylko elementy <figure>, zawierające obrazki i przyciski prev/next. Ponownie, wszystkie bajery zapewniane są przez eksperymentalne rozszerzenia CSS Apple’a – transformacje (transforms) i efekty przejścia (transitions). Inne przeglądarki również to obsługują, ale z innymi prefiksami w nazwie, tj. Opera ma np. -o-transition w miejsce -webkit-transition. Fajnie to wygląda, ale nie jest to jeszcze ustandaryzowane i nigdy nie będzie częścią żadnej wersji HTML – jako że to rozszerzenia CSS.
Krótko mówiąc, HTML 5: trochę, CSS 3: nie, rozszerzenia CSS Apple’a: tak.

Transitions – to demko również dotyczy przejść i transformacji. HTML 5 używany jest tylko do nawigacji (linki odpalające przejścia są zawarte w elemencie <section>, a nagłówek – w HTML 5 <header>). Istotna część demonstracji – obrazki przekształcane przez CSS – siedzą w starych, dobrych <div>-ach. Wszystkie bajery pochodzą z rozszerzeń CSS Apple’a.
Krótko mówiąc, HTML 5: trochę, CSS 3: nie, rozszerzenia CSS Apple’a: tak.

Audio – w końcu prawdziwe demo HTML 5, używające elementów <audio> i <canvas> z HTML 5. Piosenka jest we własnościowym formacie MP4.
Krótko mówiąc, HTML 5: tak. Hurra!

360° – skrypt w języku JavaScript przełącza pomiędzy kolejnymi zdjęciami iPodów touch podczas przeciągania myszą. Fajnie zrobione, ale jedyna nowa rzecz tutaj, której nie można było zrobić dawniej, to zgodność z ekranami dotykowymi dzięki zdarzeniom takm jak ontouchstart, które są niestandardowym rozszerzeniem DOM Apple’a. Pomijając zdarzenia dla ekranów dotykowych, można przy niewielkim wysiłku zrobić identyczne demo działające nawet w badziewnych przeglądarkach jak IE 6. Jako że jedyną nowością są tu właśnie te zdarzenia dotykowe dla iPoda/iPada/iPhone’a, wydaje się, że właśnie ich pokazanie było celem tej demonstracji, a nie HTML 5.
Krótko mówiąc, HTML 5: nie, CSS 3: nie, własne zdarzenia Apple’a: tak.

VR – wiele różnych transformacji i przejść z eksperymentalnych rozszerzeń CSS Apple’a plus trochę JavaScriptu, ale niespecjalnie dużo HTML 5.
Krótko mówiąc, HTML 5: nie bardzo, CSS 3: nie, rozszerzenia CSS Apple’a: tak.

Apple mówi:

Te demonstracje […] pokazują, w jaki sposób najnowsza wersja przeglądarki Safari Apple’a, nowe Macintoshe i nowe urządzenia przenośne Apple’a obsługują funkcjonalności HTML5, CSS3 i JavaScriptu.

Jak widać, z kilkoma wyjątkami (video/audio i canvas) i mniej istotnymi częściami poza sercem każdego demo (nawigacja i sekcje), głównym ich celem wydaje się tutaj pokazanie własnych, niestandardowych funkcjonalności Apple’a, głównie rozszerzeń CSS. Owszem, część z nich Apple przekazało do W3C i są one obecnie standaryzowane, co jest istotnym plusem. Niemniej jednak, nie są one standardem na chwilę obecną, a kiedy już zostaną ustandaryzowane, mogą wyglądać nieco lub bardzo inaczej.

W samych demkach nie ma nic złego (i, jak zawsze u Apple’a, wyglądają super), ale nazywanie ich “demonstracjami HTML 5” – kiedy nie pokazują wiele z HTML 5 – i “demonstracjami standardów”, podczas gdy prezentują głównie niestandardowe rozszerzenia Apple’a – wydaje mi się trochę nieuczciwe. Co tutaj widać, to wielki potencjał silnika WebKit. Określenie tych stron “Demonstracją możliwości Apple WebKit” byłoby więc bardziej zgodne z rzeczywistością.

PS. Oczywiście, niektórzy (jak PPK) chcą uczynić z “HTML 5” tzw. buzzword, który nie ma znaczyć już “HTML – język znakowania oraz powiązane API”, tylko “wszystkie fajne nowe rzeczy bez Flasha”. Jeśli do nich należysz, masz prawo zgodzić się tutaj z Apple, a nie ze mną.

PS #2. Czy jestem wrogiem Apple? Napisałem tę notkę na MacBooku… ;-)

Mozilla Hacks: Firefox, YouTube i WebM

W dzisiejszym odcinku tłumaczeń z Mozilla Hacks notka Chrisa Blizzarda, jednego z głównych „ewangelizatorów” Mozilli, na temat formatu WebM. Wprawdzie sam napisałem o tym formacie w poprzedniej notce, ale myślę, że warto posłuchać oficjalnego głosu Mozilli. Jak większość treści z MozHacks, zarówno oryginalny artykuł, jak i poniższe tłumaczenie dostępne są na warunkach licencji Creative Commons Attribution 3.0 USA.

Dzisiaj pięć ważnych rzeczy:

1. Google wyda VP8 jako open-source i bez żadnych opłat (royalty-free). VP8 to wysokiej jakości kodek, w którego posiadanie Google weszło po zakupie firmy On2. Kodek VP8 jest znacznie lepszy pod względem stosunku jakości do liczby bitów niż Theora, a sama jego jakość porównywalna jest z H.264.

2. Kodek VP8 zostanie połączony z kodekiem audio Vorbis i podzbiorem formatu kontenera Matroška w jeden nowy standard otwartego wideo dla WWW – zwany WebM. Więcej na ten temat można znaleźć na w nowej witrynie projektu: http://www.webmproject.org/.

3. Dodamy obsługę WebM do Firefoksa. Już teraz można pobrać bardzo wczesne kompilacje Firefoksa z obsługą WebM. WebM będzie również obsługiwany przez Google Chrome i Operę.

4. Wszystkie filmy na YouTube zostaną przekodowane do WebM. Dziś w tym formacie YouTube udostępnia około 1,2 miliona filmów, a w najbliższym czasie Google zajmie się przekodowaniem archiwum. Obiecują wspierać wszystko.

5. Nowy format jest wspierany przez wielu partnerów – a nie tylko Google i paru innych. Dostawcy treści – jak Brightcove – zadeklarowali wsparcie WebM jako część kompletnego rozwiązania wideo HTML5. Na liście wspierających WebM firm są producenci sprzętu, dostawcy enkoderów i innych elementów stosu technik związanych z wideo. Także Adobe będzie wspierać WebM we Flashu. Firefox, dzięki swemu udziałowi w rynku i dzięki wartościom, które za nim stoją, oraz YouTube, z największym zasięgiem wśród dostawców wideo, to najważniejsi partnerzy w tym przedsięwzięciu, ale jesteśmy tylko drobną częścią większego ekosystemu wideo.

Cieszymy się niezmiernie widząc, jak Google dołącza do nas, by wspierać Otwarte Wideo. Udostępniają technologię na warunkach spójnych z ideą Otwartego WWW i zasad licencyjnych Royalty-Free W3C. Co najważniejsze, Google zapewnia o całkowitym wsparciu pełnego stosu technologii Otwartego Wideo na największej witrynie z wideo na świecie. Ten ruch całkowicie zmienia krajobraz internetowego wideo, określając nowe podstawy, które inne witryny muszą spełniać, żeby dotrzymać kroku YouTube’owi i nowościom technicznym. Ważne też jest wsparcie ze strony przeglądarek o rosnącym udziale w rynku i popychających naprzód technologię w sieci WWW.

Mozilla zawsze chciała, by wideo na WWW rozwijało się tak szybko, jak reszta WWW. Potrzebna była więc podstawa oparta na otwartej technologii, na której można budować nowe rzeczy. Theora była dobrym pierwszym krokiem, VP8 jest znacznie lepsze. Spodziewajcie się od nas mocnego nacisku na dalsze innowacje związane z wideo. Będziemy rozwijać nowe technologie tak, jak rozwija się WWW, przesuwając się z krańców do środka, dzięki dziesiątkom małych rewolucji, które po połączeniu stają się czymś więcej niż tylko sumą elementów. VP8 to jeden z tych elementów, HTML5 to następny. Jeśli zaglądacie na ten blog (lub moje jego tłumaczenia – przyp. tłum.), zauważycie, jak pojawiają się kolejne kawałki. Sieć WWW pełna jest coraz to nowych technologii, a Firefox jest tutaj liderem. Zamierzamy w dalszym ciągu być w awangardzie rozwoju sieci WWW ponad HTML5, do następnego miejsca, w którym powinna być.

Dziś jest dzień wielkiej zmiany. Jutro będzie kolejny.