Category: firefox

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! :)

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:

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.