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:

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:

Is HTML 5 by Apple really HTML 5?

(Ta notka jest także dostępna po polsku)

Apple recently released a number of demos, which they call HTML 5 demos. In this post, I’d like to analyze whether these demos are really HTML 5 or not. I am not going into ideological stuff here (but, to be honest, I do agree with Chris Blizzard’s point of view) – I’m going to check only the technological side of these demo pages.

One thing before we begin. Please note that the “long story short” sentences at the end of each paragraph relate to what I think is really demoed on each page, not to the formal presence of HTML 5 tags. For example, if a page uses HTML 5 section tags (and most of them do), but the demo itself is actually about style transitions, I do not consider it an HTML 5 demo. With this in mind, let’s start.

Video – indeed uses HTML 5 <video> tag, embedding an h.264 video file. Perspective and masking effects are not part of HTML 5, they are possible thanks to Apple’s experimental extensions to the CSS standard. So, this is indeed an HTML 5 demo, but not all the cool stuff here is actually HTML 5.
Long story short, HTML 5: yes, CSS 3: not really, Apple’s proprietary CSS extensions: yes.

Typography – HTML 5 has nothing to do with font embedding. Font embedding is standard CSS 2 (though only recently widely implemented by browser vendors). Horizontal slider is made out of plain old HTML 4 elements (mainly divs), instead of standard HTML 5 <input type=range> element, which is actually supported by Safari. Transparency works thanks to the widely supported CSS 3 Color Module opacity property. Rotation is powered by Apple’s experimental -webkit-transform property, which is actually supported by other browser vendors with their own prefixes (-moz-transform in Firefox 3.6 and -o-transform in latest Operas). Text shadow is applied through the text-shadow property from CSS 3 Text Module. It is also supported by Mozilla and Opera. No HTML 5 here other than <nav> and <section> elements, used throughout the demo site (though, there are lots of HTML4 <div>s there, too). You could make a basically identical page with plain old HTML 4, all the good stuff is, in fact, CSS 3 or experimental additions to CSS 3.
Long story short, HTML 5: not really, CSS 3: a bit, CSS 2: yes, Apple’s proprietary CSS extensions: yes.

Gallery – the only HTML 5 elements here, apart from <nav> and <section>, are <figure> elements, containg the image and prev/next buttons. All the cool stuff is actually made of Apple’s experimental CSS transforms and transitions (other browsers do support some or most of the same transforms and transitions with different vendor prefixes, i.e. Opera has -o-transition instead of -webkit-transition). While cool, these things are not standard yet, and never will be part of any HTML version – as they are extensions to CSS.
Long story short, HTML 5: a bit, CSS 3: no, Apple’s proprietary CSS extensions: yes.

Transitions – are all about the same above-mentioned CSS transforms and transitions. HTML 5 is only used in the navigation part (the links starting off each transition are inside a <section> element, and the header is indeed an HTML 5 <header> element). The real part of the demo – the images that are transformed through CSS, are in plain old <div>s, though. All the coolness thanks to proprietary extensions to CSS.
Long story short, HTML 5: not really, CSS 3: no, Apple’s proprietary CSS extensions: yes.

Audio – a real HTML 5 demo, uses <audio> and <canvas> HTML 5 elements. The song is in the proprietary and patent-encumbered MP4 format, though.
Long story short, HTML 5: yes. Whoohoo!

360° – a JavaScript script cycles through many images of the iPod touches as you move your mouse. Nicely done, but the only thing here that was not possible a few years ago is touchscreen compatibility thanks to Apple’s proprietary events souch as ontouchstart. If you ignore the touchscreen-related events, you can make an identical demo even in piece-of-crap browsers like IE 6 with little effort. So, as the touch events are the only really new thing here, it seems that this is in fact a demonstration of these iPod/iPad/iPhone-related touch events, not of any HTML 5 features.
Long story short, HTML 5: no, CSS 3: no, Apple’s proprietary events: yes.

VR – lots of Apple’s proprietary experimental CSS transforms and transitions shown here plus some JavaScript, but not much of HTML 5.
Long story short, HTML 5: not really, CSS 3: no, Apple’s proprietary CSS extensions: yes.

Apple says:

The demos […] show how the latest version of Apple’s Safari web browser, new Macs, and new Apple mobile devices all support the capabilities of HTML5, CSS3, and JavaScript.

As you can see, with some exceptions (video/audio and canvas) and some marginal features outside of the core of each demo (navigation and sectioning), the real objective of these demos is to show Apple proprietary features, mostly CSS extensions. To be fair to the Cupertino company, some of them are pushed by Apple for standarization in the W3C, which is a good thing. Still, it does not make them standards at this moment, and once they become standards, they might look a bit or a lot diffrent.

There’s nothing inherently wrong in the demos themselves (and, as always with Apple, they are cool eye candy), but calling them “HTML 5” – while they do not show a lot of real HTML 5 features – and “standards” – while they’re mostly Apple’s proprietary non-standard extensions – seems to me slightly insincere. What is shown here is actually the great potential of the WebKit rendering engine. If they called it “Apple WebKit demos”, that would be correct and honest.

Post Scriptum for buzzword lovers: Of course, some people (like PPK) are trying to make a buzzword out of “HTML 5”, with meaning shifted from “HTML – the markup language and related APIs” to “all the cool new stuff without Flash”. If you’re one of those people, feel free to agree with Apple on this, and disagree with me.

PS #2. Am I an Apple hater? I wrote this on my MacBook… ;-)