After Front Row 2011

At Front Row Conference this week I had the pleasure to speak about the new features coming to JavaScript with ECMAScript.next (slides) and to host the “Mozilla & the Open Web: How You Can Help” open space session that was meant to encourage you to contribute to the Mozilla Developer Network, experiment with upcoming HTML, CSS and JS features and submit any bugs you find (with testcases!) to all browser vendors. I’d welcome your feedback about both of these sessions, so feel free to comment here or send feedback by email.

Overall, FRC was great and I’d like to thank the organizers – Olga and Mariusz and their team for all the great work they did. It was also a great opportunity to meet (and party with!) some of the industry’s smartest people, so I am really happy to have participated.

Looking forward to FRC 2012! :)

Prosimy nie regulować odbiorników

Już wkrótce wrócę do częstszego blogowania, a tymczasem nieskromnie polecam wywiad, jaki w ramach cyklu “Ludzie Front-Endu” przeprowadził ze mną Damian Wielgosik – trochę o Aviary.pl i Mozilli, trochę o HTML5. :)

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

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:

Zrzut ekranu - demo 1

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:

Zrzut ekranu - demo 2

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:

MDN

Better JavaScript docs for a better Web on MDN

Archiwum