http://witia.jogger.pl/

Channel Description:

Latest Articles in this Channel:

05/17/08--13:26: Praca dla webmastera (chan 2284504)

Przeglądając ogłoszenia o pracy skierowane do webmasterów i webdeveloperów można odnaleźć w nich pewne tendencje.

Pozytywny jest fakt, że firmy dostrzegają istnienie specjalizacji w tak szerokich pojęciach jak webmaster czy webdeveloper. Poszukują więc np. specjalisty w technologiach, takich jak (X)HTML, CSS i JavaScript, albo osoby biegłej w programowaniu obiektowym w PHP i znającą zagadnienia MVC. Nadal jednak są i takie ogłoszenia, gdzie ktoś wpisał prawdopodobnie wszystko, co mu się skojarzyło z tworzeniem stron: HTML, CSS, JavaScript, PHP, MySQL, Flash, Photoshop i jeszcze administracja Apachem - a czemu by nie. Wszystko koniecznie z obowiązkową adnotacją - "biegła znajomość". Takie oczekiwania mają często firmy, które działają w innej branży, ale chcą mieć kogoś "od internetu". Sensowną strategią jest omijanie takich ofert szerokim gestem myszki.

W większości ogłoszeń nie ma wymagań co do wykształcenia informatycznego, ale od czasu do czasu zdarza się taki punkt. Oczywiście, każdy ma prawo mieć swoje oczekiwania, ale nie wydaje się, by takie wykształcenie było najważniejszą sprawą, zwłaszcza, gdy poszukiwany jest koder HTML/CSS. Ciekawe, czy Eric Meyer miałby szanse na zatrudnienie w takiej firmie.

Znacznie gorzej wygląda jednak to, co firmy oferują. Tutaj panuje urodzaj słów, ale nieurodzaj konkretów.

Najważniejszą atrakcją ma być praca w "młodym i dynamicznym zespole". Ten punkt jest rozwijany w różnych wariantach, aczkolwiek niezbyt twórczych: "praca w młodym, dynamicznym i twórczym zespole", "praca w młodym, twórczym zespole", "praca w młodym, dynamicznym zespole". Pierwsza oferta wygląda najatrakcyjniej - zespół jest zarówno dynamiczny, jak i twórczy. Pozostałe dwa zespoły, są albo dynamiczne, albo twórcze.

Równie istotne jest uczestnictwo w bliżej nieokreślonym, ale niezwykłym projekcie: "praca przy ciekawych i innowacyjnych projektach", "praca w dynamicznie rozwijającym się projekcie medialnym", "udział w tworzeniu ciekawego, nieprzeciętnego projektu informatycznego".

Dla specjalisty ważny jest ciągły rozwój, zatem w kolejnych ogłoszeniach otrzymujemy mantrę: "możliwość rozwoju zawodowego", "możliwość rozwoju zawodowego", "możliwość rozwoju zawodowego", czasami tylko dla wytchnienia przerwaną wpisem "możliwość ciągłego uczenia się i podnoszenia swoich kompetencji".

Z rozwojem zawodowym wiąże się obcowanie z najnowszymi technologiami, aczkolwiek również tutaj firmy niechętnie wyjawiają szczegóły. Zdarzają się jednak chlubne wyjątki: "praca z nowoczesnymi technologiami (np. wiki, widgets, api)". Praca z wiki ostatecznie przebija konkurencję. Potencjalni pracownicy będą pchali się drzwiami, oknami i łączami internetowymi, by móc wreszcie obcować z tą technologią, której dotąd byli pozbawieni.

Na koniec przyziemna sprawa, czyli wynagrodzenie. Owszem, pojawia się w ogłoszeniach i jest zwykle "atrakcyjne".

Właściwie najbardziej konkretną informacją na temat oferowanych warunków jest przeważnie informacja, czy praca jest stała i w jakim mieście. Czasami jest mowa o pakiecie socjalnym lub opiece medycznej.

Zatem, czytając część ogłoszenia z oferowanymi warunkami, należałoby od razu na siatkówce oka odfiltrowywać te wszystkie młode, dynamiczne zespoły, ciekawe projekty i możliwości rozwoju zawodowego. I liczyć, że zostanie przynajmniej jeden konkretny punkt.

Można mieć podejrzenia, że ogłoszenie o pracę jest gatunkiem literackim o dokładnie określonej budowie i forma ta ma licznych adeptów ściśle przestrzegających świętego kanonu. Precyzyjna struktura haiku to przy tym małe miki.




06/18/09--03:47: Firefox 3.5 przez 35 dni - wizje przyszłości sieci (chan 2284504)

Poniższy tekst jest tłumaczeniem artykułu "Firefox 3.5 for 35 days - dreaming about the future of the web", zamieszczonego na stronie hacks.mozilla.org na licencji Creative Commons Attribution 3.0 United States License. Autorem tekstu jest Christopher Blizzard. Spis wszystkich tłumaczeń artykułów z hacks.mozilla.org dostępny jest na stronach wiki.aviary.pl.



Przez kolejne 35 dni [począwszy od 4 czerwca 2009 - przyp. tłum.] będziemy mówili o nowych funkcjach Firefoksa 3.5, skierowanych do twórców.

Nadchodzące wydanie Firefoksa 3.5 wprowadza wiele zmian dla użytkowników. Zaliczają się do nich nowe funkcje prywatności, ulepszona interaktywność i nowy silnik JavaScript, który przyniesie nowe doznania użytkownikom stron bogatych w skrypty. Są to wszystko funkcje, które docenią użytkownicy i będą mogli o nich rozmawiać.

Ale Firefox 3.5 stanowi ogromny postęp dla sieci samej w sobie. Wprowadziliśmy wsparcie dla audio i wideo, wątki w JavaScript, nowe funkcje elementu canvas, masę nowych funkcji CSS, ładowanie czcionek oraz geolokalizację. Podczas gdy Firefox 3 był znacznym ulepszeniem dla użytkowników sieci, Firefox 3.5 robi to samo dla twórców.

Ze względu na dużą liczbę nowych funkcji dla twórców w Firefoksie 3.5, spędzimy kolejne 35 dni opisując wszystkie z nich, w dwóch postach dziennie, każdego dnia. Pierwszy post w każdym dniu będzie opisywał dogłębnie nową funkcję Firefoksa 3.5 - jak jej używać, dlaczego pojawia się tutaj, a także pokaże kilka przykładów, co dana funkcja może zrobić. Drugi post będzie miał lżejszy charakter - znajdą się w nim przykłady, co ludzie mogą wspólnie zrealizować, używając funkcji dostępnych w Firefoksie 3.5.

Osobiście wierzę, że te posty pokażą wizje Mozilli związane z przyszłością sieci. Nie jesteśmy przedsiębiorstwem jak pozostali dostawcy przeglądarek - naszą podstawową misją jest rozwój i ochrona sieci. Firefox 3.5 prezentuje naszą myśl o tym, jakie będzie następne stadium rozwoju sieci - interaktywne aplikacje, wideo, strony wymieniające i współdzielące informacje - wszystko poprzez przeglądarkę. Mamy nadzieję, że wszyscy z was przyjmą to, o czym tu piszemy, zachęcą innych dostawców przeglądarek do zastosowania podobnych rozwiązań, tam gdzie jeszcze ich nie ma, oraz że podtrzyma to wasz zapał dla sieci.




06/20/09--14:25: Manipulacja pikselami przy użyciu canvas (chan 2284504)

Poniższy tekst jest tłumaczeniem artykułu "Pushing pixels with canvas", zamieszczonego na stronie hacks.mozilla.org na licencji Creative Commons Attribution 3.0 United States License. Spis wszystkich tłumaczeń artykułów z hacks.mozilla.org dostępny jest na stronach wiki.aviary.pl.

Artykuł ten został napisany przez Paula Rougeta, który jest członkiem zespołu Mozilla Evangelism. Paul mieszka w Paryżu we Francji i jest dobrze znany między innymi ze swych zadziwiających prac związanych z otwartym wideo w sieci.

Element canvas, na swoim najprostszym poziomie, jest łatwym sposobem rysowania danych bitmapowych na stronie HTML. Posiada on metody pozwalające rysować prostokąty, łuki, krzywe i inne proste figury. Jednak dla niektórych rodzajów efektów i rysunków potrzebny jest bezpośredni dostęp do pikseli.

W Firefoksie 3.5 dodaliśmy do elementu canvas nową metodę - createImageData. Wywołanie createImageData jest wygodną metodą utworzenia czystego zestawu pikseli do manipulacji, które na końcu mogą być z powrotem skopiowane do elementu canvas.

Ponieważ mówimy o pojedynczym wywołaniu, myślimy, że może być wartościowe przejście przez wszystkie wywołania, które można przeczytać, obrobienie i aktualizacja pikseli bezpośrednio w elemencie canvas i umieszczenie createImageData w jego pełnym kontekście.

Wydobywanie danych pikseli

W elemencie canvas nie można bezpośrednio manipulować pikselami. W celu dokonania zmian danych w elemencie canvas należy najpierw skopiować dane, wykonać zmiany i skopiować z powrotem zmienione dane do docelowego elementu canvas.

Wywołanie getImageData pozwala skopiować prostokąt pikseli poza element canvas. Wywołanie w celu pobrania wszystkich danych pikseli elementu canvas wygląda następująco:

var canvas = document.getElementById('myCanvasElt');
var ctx = canvas.getContext('2d');
var canvasData = ctx.getImageData(0, 0, canvas.width, canvas.height);

Obiekt canvasData zawiera dane pikseli. Posiada następujące człony:

canvasData {
    width:  nieoznaczona długość, // szerokość elementu canvas
    height: nieoznaczona długość, // wysokość elementu canvas
    data:   CanvasPixelArray      // wartości pikseli
}

Człon "data" to płaska tablica wartości, która ma jedną wartość dla każdego komponentu w pikselu, zorganizowana od lewej do prawej, od góry do dołu, z każdym pikselem reprezentowanym jako cztery wartości w porządku RGBA.

Na przykład w elemencie canvas 2×2 powinny być 4 piksele reprezentowane przez 16 wartości, które wyglądają jak poniżej:

0,0  0,1  1,0  1,1
RGBA RGBA RGBA RGBA

Można więc obliczyć długość tablicy wg następującej formuły: width * height * 4.

W większych elementach canvas, aby poznać wartość barwy niebieskiej w pikselu o współrzędnych x = 10, y = 20, można użyć następującego kodu:

var x = 10;
var y = 10;
var blue = canvasData.data[(y * width + x) * 4 + 2];

Należy pamiętać, że każda z wartości RGB piksela mieści się w przedziale 0-255 z bitem alfa (przezroczystości) z zakresu 0-255, gdzie 0 oznacza zupełną przezroczystość, a 255 pełną nieprzezroczystość.

Tworzenie nowego zestawu pikseli

Aby utworzyć nową matrycę od podstaw, wystarczy użyć wywołania createImageData, które wymaga dwóch argumentów: wysokości i szerokości matrycy.

Należy zwrócić uwagę, że wywołanie createImageData nie kopiuje pikseli z istniejącego elementu canvas, tworzy ono czystą matrycę pikseli z wartościami ustawionymi na przezroczysty czarny (255,255,255,0).

Poniżej znajduje się przykład pokazujący, jak stworzyć zestaw pikseli o wymiarach elementu canvas:

var canvas = document.getElementById('myCanvasElt');
var ctx = canvas.getContext('2d');
var canvasData = ctx.createImageData(canvas.width, canvas.height);

Trzeba pamiętać, że jest to metoda, którą należy używać do tworzenia danych pikselowych. Poprzednie wersje Firefoksa dopuszczały tworzenie obiektu canvasData poza prostym obiektem JavaScript i użycie go w późniejszych wywołaniach w celu aktualizacji danych canvas. Wywołanie to zostało dodane, by zachować kompatybilność z WebKit, który używa wyspecjalizowanego obiektu zamiast ogólnego obiektu JavaScript.

Aktualizacja pikseli

Jeśli istnieje już obiekt canvasData, można zaktualizować wartości piksela w tablicy. Oto przykład, jak przejść tablicę, odczytując i aktualizując wartości.

for (var x = 0; x < canvasData.width; x++)  {

    for (var y = 0; y < canvasData.height; y++)  {

        // Indeks piksela w tablicy
        var idx = (x + y * width) * 4;

        // Pobranie wartości piksela
        var r = canvasData.data[idx + 0];
        var g = canvasData.data[idx + 1];
        var b = canvasData.data[idx + 2];
        var a = canvasData.data[idx + 3];
 
        //[...] operacje na wartościach

        // Aktualizacja wartości piksela
        canvasData.data[idx + 0] = ...; // Kanał czerwony
        canvasData.data[idx + 1] = ...; // Kanał zielony
        canvasData.data[idx + 2] = ...; // Kanał niebieski
        canvasData.data[idx + 3] = ...; // Kanał alfa (przezroczystość)
    }
}

Aktualizacja elementu canvas

Teraz, po aktualizacji zestawu pikseli można użyć prostego wywołania putImageData. Wywołanie to przyjmuje obiekt canvasData oraz położenie x,y, w którym ma być narysowany prostokąt pikseli w elemencie canvas:

var canvas = document.getElementById('myCanvasElt');
var ctx = canvas.getContext('2d');
var canvasData = ctx.putImageData(canvasData, 0, 0);

Pełny przykład zastosowania getImageData

Poniżej znajduje się kod, który przekształca kolorowy obrazek na wersję w odcieniach szarości. Można również zobaczyć na żywo przykład na stronie Paula.

var canvas = document.getElementById('myCanvasElt');
var ctx = canvas.getContext('2d');
var canvasData = ctx.getImageData(0, 0, canvas.width, canvas.height);

for (var x = 0; x < canvasData.width; x++) {

    for (var y = 0; y < canvasData.height; y++) {

        // Indeks piksela w tablicy
        var idx = (x + y * canvas.width) * 4;

        // Wartości RGB
        var r = canvasData.data[idx + 0];
        var g = canvasData.data[idx + 1];
        var b = canvasData.data[idx + 2];

        // Aktualizacja wartości piksela;
        var gray = (r + g + b) / 3;

        canvasData.data[idx + 0] = gray;
        canvasData.data[idx + 1] = gray;
        canvasData.data[idx + 2] = gray;
    }
}
ctx.putImageData(canvasData, 0, 0);

Pełny przykład zastosowania createImageData

Poniższy kod narysuje fraktal w elemencie canvas. Również w tym przypadku można obejrzeć na żywo przykład działania tego kodu na stronie Paula.

var canvas = document.getElementById('myCanvasElt');

var ctx = canvas.getContext('2d');
var canvasData = ctx.createImageData(canvas.width, canvas.height);

 
// Mandelbrot
function computeColor(x, y) {
    x = 2.5 * (x/canvas.width - 0.5);

    y = 2 * (y/canvas.height - 0.5);

    var x0 = x;
    var y0 = y;

 
    var iteration = 0;
    var max_iteration = 100;

 
    while (x * x + y * y <= 4 && iteration < max_iteration ) {

        var xtemp = x*x - y*y + x0;

        y = 2*x*y + y0;
        x = xtemp;

        iteration++;
    }
 
    return Math.round(255 * iteration / max_iteration);

}
 
for (var x = 0; x < canvasData.width; x++) {

    for (var y = 0; y < canvasData.height; y++) {

        var color = computeColor(x, y);
 
        // Indeks piksela w tablicy

        var idx = (x + y * canvas.width) * 4;

 
        // Aktualizacja wartości piksela;
        canvasData.data[idx + 0] = color;

        canvasData.data[idx + 1] = color;
        canvasData.data[idx + 2] = color;

        canvasData.data[idx + 3] = 255;
    }
}
 

ctx.putImageData(canvasData, 0, 0);

Dodatkowe informacje

Więcej informacji o elemencie canvas można znaleźć na witrynie MDC, gdzie tej tematyce poświęcone są artykuły:

• Pixel Manipulation with Canvas
• Canvas Documentation
• Drawing Graphics with Canvas

Mamy nadzieję, że ten tekst był przydatny i umieszcza pojedyncze wywołanie w jego pełnym kontekście.




06/21/09--14:07: Dodawanie cienia przy użyciu -moz-box-shadow (chan 2284504)

Poniższy tekst jest tłumaczeniem artykułu "Shadow boxing with -moz-box-shadow", zamieszczonego na stronie hacks.mozilla.org na licencji Creative Commons Attribution 3.0 United States License. Autorem tekstu jest Frederic Wenzel. Spis wszystkich tłumaczeń artykułów z hacks.mozilla.org dostępny jest na stronach wiki.aviary.pl.

Jeszcze jedną ciekawą funkcją CSS3, wprowadzoną w Firefoksie 3.5, są cienie pudełka (box). Ta funkcja pozwala na otaczanie cieniem ramki niemal każdego dowolnego elementu

Ponieważ prace nad własnością box shadow w CSS3 jeszcze trwają, w Firefoksie zaimplementowano ją jako -moz-box-shadow. W ten sposób, poprzez dodanie przedrostka “-moz-&#8221 do nazwy, Mozilla testuje eksperymentalne własności CSS. Kiedy specyfikacja zostanie skończona, nazwa własności będzie zmieniona na “box-shadow.”

Jak do działa

Dodawanie cienia elementu jest proste. Standard CSS3 dopuszcza jako jego wartości:

none | <shadow> [ <shadow> ]*

gdzie <shadow> to:

<shadow> = inset? && [ <length>{2,4} && <color>? ]

Dwie pierwsze liczby w <length> są odpowiednio poziomym i pionowym rozmiarem cienia. Trzecia liczba jest promieniem rozmycia (porównaj to z promieniem rozmycia we własności text-shadow). Wreszcie czwarta liczba jest promieniem rozpiętości, pozwalającym cieniowi powiększać się (wartości dodatnie) lub zmniejszać (wartości ujemne) względem rozmiaru elementu rodzica.

Słowo inset jest dobrze opisane w samym standardzie:


jeśli jest obecne, zmienia cień z zewnętrznego (cień od elementu w stronę tła, jakby znajdował się ponad nim) na cień wewnętrzny (cień od tła w stronę elementu, jakby element był wycięty w tle i przesunięty pod nie).

Jako że jeden obraz wart jest tysiąca słów, spójrzmy na kilka przykładów.

Aby dodać prosty cień, wystarczy jedynie zdefiniować rozmiar i kolor:

 -moz-box-shadow: 1px 1px 10px #00f;

 



(Każdy z przykładów w tym artykule składa się najpierw z własności zastosowanej na żywo , po której następuje zrzut ekranu z Firefoksa 3.5 w systemie OSX).

Podobnie można dodać wewnętrzny cień przy użyciu słowa inset.

-moz-box-shadow: inset 1px 1px 10px #888;

 



Przy użyciu promienia rozpiętości można zdefiniować mniejsze (lub większe) cienie niż element, do którego są przypisane:

-moz-box-shadow: 0px 20px 10px -10px #888;

 



W razie potrzeby można też zdefiniować złożone cienie, umieszczając definicje kilku cieni oddzielone przecinkami (dzięki uprzejmości Markusa Stange'a):

-moz-box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;

 



Poszczególne cienie łączą się wzajemnie bardzo łagodnie, i - jak można zauważyć - kolejność, w której są zdefiniowane, jest istotna. Jako że box-shadow jest własnością CSS3, Firefox 3.5 stosuje się do kolejności rysowania CSS3. Oznacza to, że pierwszy zdefiniowany cień pojawia się na górze i należy pamiętać o tym przy definiowaniu złożonych cieni.

Jako końcowy przykład chciałbym pokazać połączenie -moz-box-shadow z definicją koloru RGBA. RGBA jest tym samym, co RGB, ale dodaje kanał przezroczystości alfa, służący do zmiany przezroczystości koloru. Wykonajmy czarny, nierozmyty cień z przezroczystością 50% na żółtym tle:

-moz-box-shadow: inset 5px 5px 0 rgba(0, 0, 0, .5);

 



Jak można zauważyć - żółte tło jest widoczne poprzez półprzezroczysty cień. Ta funkcja staje się szczególnie interesująca, kiedy użyte są obrazki tła - można je dostrzec przebijające przez cień pudełka.

Zgodność z przeglądarkami

Jako nowa własność, należąca do opracowywanego dopiero CSS3, własność box-shadow nie jest jeszcze szeroko zaadoptowana przez twórców przeglądarek.

• Firefox 3.5 wspiera tę opcję jako -moz-box-shadow, w tym złożone cienie, komendę inset i promień rozpiętości.
• Safari/WebKit przyjęło podobny jak Firefox sposób sposób implementacji funkcji jako -webkit-box-shadow. Złożone cienie są wspierane od wersji 4.0, cienie wewnętrzne i zasięg przesunięcia nie są jeszcze obsługiwane przez WebKit.
• Opera i Microsoft Internet Explorer nie wprowadziły jeszcze własności box shadow, W MSIE można spróbować jego własnego filtra DropShadow.

Aby wykorzystać jak najszerzej istniejące implementacje, wskazane jest użycie wszystkich trzech rodzajów składni: -moz, -webkit i standardu CSS3. Poszczególne przeglądarki wybiorą wtedy i zastosują tę, którą obsługują:

 -moz-box-shadow: 1px 1px 10px #00f;
 -webkit-box-shadow: 1px 1px 10px #00f;
 box-shadow: 1px 1px 10px #00f;

Dobrą wiadomością jest to, że własność box-shadow jest elegancko ignorowana w przeglądarkach pozbawionych jej wsparcia. Na przykład, wszystkie powyższe przykłady będą wyglądały w MSIE jak zwykłe i nudne pudełka bez cieni.

Podsumowanie

Własność CSS3 box-shadow nie jest jeszcze tak szeroko dostępna w przeglądarkach (i tym samym dla użytkowników), jak np. własność text-shadow, jednak dzięki częściowemu wsparciu w WebKit i pełnemu wsparciu wprowadzonemu w Firefoksie 3.5 (tak długo, jak odpowiada obecnemu statusowi przyszłej specyfikacji) coraz więcej użytkowników będzie mogło zobaczyć rodzaje cieni definiowane w CSS.

Twórcy stron mogą więc używać tej funkcji ze świadomością, że dostarczają doskonalszych wrażeń użytkownikom nowoczesnych przeglądarek, a jednocześnie nie odwracają się od użytkowników starszych przeglądarek.

Dodatkowe zasoby
Dokumentacja

• https://developer.mozilla.org/en/CSS/-moz-box-shadow
• http://dev.w3.org/csswg/css3-background/#the-box-shadow

Przykłady

• http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/
• http://www.css3.info/preview/box-shadow/
• http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html




07/06/09--06:50: Stylowy tekst przy użyciu text-shadow (chan 2284504)

Poniższy tekst jest tłumaczeniem artykułu "Stylish text with text-shadow", zamieszczonego na stronie hacks.mozilla.org na licencji Creative Commons Attribution 3.0 United States License. Autorem tekstu jest Frederic Wenzel. Spis wszystkich tłumaczeń artykułów z hacks.mozilla.org dostępny jest na stronach wiki.aviary.pl.

Własność CSS text-shadow robi to, co sugeruje jej nazwa: pozwala utworzyć lekko rozmytą i przesuniętą kopię tekstu, która przypomina prawdziwy cień.

Własność text-shadow została po raz pierwszy wprowadzona w CSS2, ale była wtedy nieodpowiednio zdefiniowana, pominięto ją w CSS2.1. Własność została przywrócona w CSS3 i obecnie wprowadzono ją w Firefoksie 3.5.

Jak to działa

Zgodnie ze specyfikacją CSS3 własność text-shadow może przyjmować następujące wartości:

none | [<shadow>, ] * <shadow>,

<shadow> jest definiowane jako:

[ <color>? <length> <length> <length>? | <length> <length> <length>? <color>? ],

gdzie dwie pierwsze wartości <length> odpowiadają za poziomie i pionowe przesunięcie, zaś trzecia wartość - za opcjonalne rozmycie. Najlepszym sposobem opisania własności są przykłady.

Można utworzyć prosty cień, jak na poniższym przykładzie:

text-shadow: 2px 2px 3px #000;

A simple shadow



(Wszystkie przykłady składają się z przykładu na żywo, a następie obrazka przedstawiającego działanie funkcji — można zatem porównać zachowanie własnej przeglądarki z Firefoksem 3.5 w systemie OSX)

Jeśli ktoś woli ostre krawędzie, może zupełnie powstrzymać się od używania rozmycia:

text-shadow: 2px 2px 0 #888;

I don’t like blurs



Tekst z poświatą i wielokrotne cienie

Dzięki elastyczności funkcji możliwości jej zastosowań nie kończą się na powyższych przykładach. Zmieniając wartości przesunięcia, rozmycia i oczywiście koloru, można osiągnąć różne efekty, np. tajemniczą poświatę:

 text-shadow: 1px 1px 5px #fff;

Glowing text



lub zwykłe, niewyraźne rozmycie:

text-shadow: 0px 0px 5px #000;

Blurry text



Można też dodać więcej niż jeden cień, co pozwala na uzyskanie efektu “ognia” (na podstawie http://www.css3.info/preview/text-shadow/ css3.info):

text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200

Multiple shadows are hot



Liczba definicji text-shadow, którą można dodać jednocześnie w Firefoksie 3.5, jest — w teorii — nieograniczona, chociaż lepiej utrzymywać je w rozsądnych granicach granicach. Jak wszystkie własności CSS, tak i text-shadow można modyfikować w locie przy użyciu JavaScript:

Animated shadows with JavaScript


Uruchom/zatrzymaj animację

Wykonywanie, dostępność i zgodność z przeglądarkami

Czasy wykorzystywania w sieci obrazków (lub - jeszcze gorzej - Flasha) do uzyskania cienia tekstu są policzone z dwóch powodów:

Po pierwsze - stosowanie tekstu zamiast obrazków przynosi znaczne korzyści. Nieużywanie obrazków oszczędza przepustowość łącza i ogólne koszty połączeń HTTP. Dostępność, zarówno dla osób używających czytników ekranowych, jak i dla wyszukiwarek, jest znacznie poprawiona. Powiększanie strony działa lepiej, ponieważ skalowany jest tekst, nie zaś obrazek przy użyciu interpolacji pikseli.

Po drugie - ta funkcja jest kompatybilna z wieloma przeglądarkami:

• Opera obsługuje text-shadow od wersji 9.5. Wg danych z Mozilla Developer Center Opera 9.x obsługuje do 6 cieni dla jednego elementu.
• Safari ma tę funkcję od wersji 1.1 (a co za tym idzie - inne przeglądarki oparte WebKit związane z tą wersją).
• Internet Explorer nie obsługuje własności text-shadow, jednak ta funkcja upraszcza się poprawnie do zwykłego tekstu. W celu naśladowania w MSIE niektórych efektów text-shadow można użyć jego własnych filtrów ”Shadow” i ”DropShadow”.
• Podobnie jak MSIE, inne, starsze przeglądarki nieobsługujące tej funkcji (włączając w to Firefoksa 3 lub starszego) pokażą zwykły tekst bez żadnych cieni.

Trudnością, o której trzeba wspomnieć, jest ”kolejność rysowania”: o ile Opera 9.x stosuje się do kolejności rysowania CSS2 (to znaczy - pierwszy zdefiniowany cień jest rysowany na dole), to Firerox 3.5 używa kolejności rysowania CSS3 (pierwszy zdefiniowany cień jest na górze). Należy pamiętać o tym używając wielokrotnych cieni.

Podsumowanie

Własność text-shadow jest niewielką, lecz dającą ogromne możliwości, własnością CSS, która prawdobodobnie będzie szeroko zaadoptowana w sieci w niedalekiej przyszłości — obecnie obsługuje ją Firefox 3.5. Dzięki bezproblemowemu pomijaniu jej przez starsze przeglądarki może być bez obaw używana przez twórców stron i z czasem być dostępna dla coraz większej liczby użytkowników.

Na koniec odrobina rozważań: Jak każdą błyskotkę, należy używać jej jak soli do zupy — z umiarem, nie pełną garścią. Jeśli twórcy stron z całego świata przesadzą z jej stosowaniem, własność text-shadow może szybko umrzeć bolesną śmiercią. Byłoby to smutne, gdyby użytkownicy wzdragali się na widok tekstu z cieniem, jak miłośnicy typografii na stronie “Papyrus”, i dlatego trzeba trzymać tę funkcję głęboko w swoim skarbcu.

To powiedziawszy: Wypróbujcie ją!

Dodatkowe zasoby

Dokumentacja

• https://developer.mozilla.org/en/CSS/text-shadow
• http://www.quirksmode.org/css/textshadow.html
• http://www.w3.org/TR/css3-text/#text-shadow

Przykłady

• http://maettig.com/code/css/text-shadow.html
• http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/
• https://bug10713.bugzilla.mozilla.org/attachment.cgi?id=273985
• https://bug10713.bugzilla.mozilla.org/attachment.cgi?id=197360




07/13/09--10:42: Eleganckie czcionki przy użyciu @font-face (chan 2284504)

Poniższy tekst jest tłumaczeniem artykułu "Beautiful fonts with @font-face", zamieszczonego na stronie hacks.mozilla.org na licencji Creative Commons Attribution 3.0 United States License. Autorem tekstu jest John Daggett. Spis wszystkich tłumaczeń artykułów z hacks.mozilla.org dostępny jest na stronach wiki.aviary.pl.

Firefox 3.0 poprawił wyświetlanie typografii poprzez dodanie wsparcia dla kerningu, ligatur oraz zróżnicowanych wag czcionek równocześnie ze wsparciem kompleksowych skryptów renderujących. Autorzy stron są jednak ciągle ograniczeni do używania w swoich projektach powszechnie dostępnych czcionek. Firefox 3.5 usuwa te ograniczenia wprowadzając wsparcie dla reguły CSS @font-face, która jest metodą linkowania czcionek TrueType i OpenType, tak jak obecnie linkuje się kod i obrazki. Safari wspiera ten rodzaj linkowania czcionek od wersji 3.1, zaś Opera zapowiada wprowadzenie obsługi tej funkcji w Operze 10.

Użycie @font-face do linkowania czcionek jest stosunkowo proste. W arkuszu stylów każda reguła @font-face definiuje nazwę rodziny czcionek do użycia, zasób, z którego ma być pobrana oraz charakterystykę stylu danego kroju jak pogrubienie czy pochylenie. Firefox 3.5 pobiera czcionkę tylko wtedy, kiedy jest to potrzebne, zatem arkusz stylów może zawierać pełną listę czcionek, z których wybranych zostanie tylko kilka aktualnie używanych.

/* Graublau Sans Web (www.fonts.info) */
 
@font-face {
  font-family: Graublau Sans Web;
  src: url(GraublauWeb.otf) format("opentype");
}
 
body {
  font-family: Graublau Sans Web, Lucida Grande, sans-serif; 
}

Przeglądarki wspierające @font-face wyświetlą tekst przy użyciu czcionki Graublau Sans Web, zaś starsze przeglądarki do wyświetlania tekstu zastosują czcionkę Lucida Grande lub domyślną czcionkę bezszeryfową. Przykład jest tutaj:





Szczegóły

Większość rodzin czcionek zawiera obecnie tylko cztery odmiany: normalną, pogrubioną, pochyloną oraz pogrubioną pochyloną. Do definiowania każdej z tych odmian używane są instrukcje font-weight oraz font-style. Definiują one styl czcionki, nie ma tutaj informacji o kaskadowości lub dziedziczeniu. Gdy własności nie są wprost zdefiniowane, przyjmują wartość ‘normal’:

/* Gentium by SIL International   */
/* http://scripts.sil.org/gentium */
 
@font-face {
  font-family: Gentium;
  src: url(Gentium.ttf);
  /* font-weight, font-style ==> default to normal */
}
 
@font-face {
  font-family: Gentium;
  src: url(GentiumItalic.ttf);
  font-style: italic;
}
 
body { font-family: Gentium, Times New Roman, serif; }

Przykładowy tekst poniżej wyświetlony jest przy użyciu tej rodziny czcionek:





Cechą, którą łatwo przeoczyć, jest to, że @font-face pozwala tworzyć rodziny z więcej niż tylko normalnym i pogrubionym stylem - dla pojedynczej rodziny można zdefiniować do dziewięciu wag czcionek. W systemie Windows ograniczenia platformy zmiejszają zwykle wybór rodzin czcionek tylko do wagi normalnej i pogrubionej. Czcionki, takie jak japoński projekt open source M+ Fonts, mają aż siedem wag. Część z nich użyta jest na przykładzie poniżej:





W niektórych sytuacjach autorzy mogą preferować używanie czcionek dostępnych lokalnie, zaś pobierać czcionki tylko wtedy, kiedy odpowiednie kroje nie są dostępne. Jest to możliwe poprzez podanie local() w definicji src reguły @font-face. Przeglądarka będzie sprawdzała listę czcionek podanych w src, aż załaduje pomyślnie którąś z nich.

/* MgOpen Moderna                      */
/* http://www.zvr.gr/typo/mgopen/index */

 
@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue"), 
       local("HelveticaNeue"), 
       url(MgOpenModernaRegular.ttf);
}
 
@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"), 
       local("HelveticaNeue-Bold"), 
       url(MgOpenModernaBold.ttf);
  font-weight: bold;
}
 
body { font-family: MyHelvetica, sans-serif; }

Zrzut ekranu poniżej pokazuje (od góry do dołu) rezultaty na systemach Mac OS X, Windows i Linux prostego testu, który używa rodziny czcionek zdefiniowanej powyżej:





Rodzina czcionek Helvetica Neue jest dostępna na większości systemów Mac OS X, ale generalnie nie ma jej na komputerach z system Windows lub Linux. Gdy przykład jest wyświetlany na Mac OS X, używana jest lokalna czcionka Helvetica Neue i żadna czcionka nie jest ładowana. Pod Windowsem i Linuksem próba załadowania lokalnej czcionki nie udaje się i w zamian pobierany jest odpowiednik - czcionka MgOpen Moderna. MgOpen Moderna jest zaprojektowana jako zamiennik czcionki Helvetica, więc daje efekt podobny do Helvetica Neue. W ten sposób autor może zapewnić odpowiedni wygląd tekstu, przy tym uniknąć ładowania czcionki, jeśli nie jest to konieczne.

Nazwa użyta do przypisania konkretnej czcionki jest pełną nazwą pojedynczej czcionki. Zwykle jest to nazwa czcionki wraz z określeniem jej stylu (np. “Helvetica Bold”). W systemie Mac OS X nazwa jest podana w panelu informacyjnym danej czcionki. Należy wybrać styl, a następnie polecenie ‘Show Font Info&#8217 z menu Preview w FontBook:



Podobne narzędzia istnieją pod Linuksem. W Windows można użyć narzędzia font properties extension, darmowego programu Microsoftu, który pokazuje te nazwy. Kiedy rozszerzenie jest zainstalowane, panel właściwości pokazuje informacje o poszczególnych czcionkach. Pełna nazwa jest podana w polu “Font Name” w panelu Names:



Safari wspiera tylko wyszukiwanie nazw PostScript pod Mac OS X, więc w tym systemie operacyjnym są również wspieranie te nazwy. Dla czcionek OpenType PS (często oznaczonych rozszerzeniem .otf) pełna nazwa jest taka sama, jak nazwa PostScript pod Windowsem. Zatem dla tych czcionek autorzy powinny podawać zarówno pełną nazwę, jak i nazwę PostScript, by uzyskać międzyplatformową interoperacyjność.

Wsparcie wielu języków

Wiele języków cierpi na niedostatek powszechnie dostępnych czcionek. Dla rzadkich języków i starych pism możliwości wyboru często zmniejszają się do jedynie niewielkiej liczby. Zastosowanie @font-face pozwala autorom, używającym tych języków, naprawić ten problem poprzez włączenie czcionek na swoją stronę.

@font-face {

  font-family: Scheherazade;
  src: url(fonts/ScheherazadeRegAAT.ttf) format("truetype-aat"), 
       url(fonts/ScheherazadeRegOT.ttf) format("opentype");

}
 
body { font-family: Scheherazade, serif; }

W językach takich jak arabski znaki mogą mieć różny kształt, gdyż na sposób wyświetlania danego znaku wpływają znaki go otaczające. Różne systemy wspierają różne technologie renderowania w celu uzyskania kształtu tekstu; pod Mac OS X wymagane są czcionki AAT, podczas gdy pod Windowsem i Linuksem wymagane są czcionki OpenType. Bez czcionek w formacie wymaganym przez dany system kształt tekstu nie będzie wyświetlany prawidłowo.





W systemie Mac OS X ładowania jest wersja AAT czcionki. W Windows i Linuksie, które nie wspierają wyświetlania przy użyciu czcionek AAT, ładowanie czcionek AAT jest pomijane, a zamiast nich użyte są czcionki OpenType. Dzięki temu tekst jest wyświetlany poprawnie we wszystkich systemach.

Używanie czcionek na wielu stronach

Firefox 3.5 domyślnie pozwala na ładowanie czcionek dla stron pochodzących z jednej witryny. Zapobiega to swobodnemu wykorzystywaniu czcionek znalezionych na innych stronach. W przypadku witryn, które chcą jawnie zezwolić na wykorzystywanie czcionek na innych stronach, Firefox 3.5 wpiera użycie nagłówków kontroli dostępu w celu kontroli nad tą opcją. Poprzez umieszczenie dodatkowego nagłówka w nagłówkach HTTP, wysyłanego razem z plikami czcionek, strona może udostępnić czcionki dla innych witryn.

# Przykładowy plik .htaccess Apache'a dodający nagłówek kontroli dostępu
 
<FilesMatch "\.(ttf|otf)$">

<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Przy włączonym powyższym nagłówku każda strona może mieć dostęp do czcionek na tej witrynie, nie tylko strony wchodzące w skład tej samej witryny.

Problemy licencjonowania czcionek

Gdy używa się czcionek na stronie, ważne jest, by zawsze upewnić się, czy licencja czcionki dopuszcza jej użycie w sieci. Jeśli umowa licencyjna jest wypełniona niejasnym żargonem prawniczym, nie obawiaj się nadmiaru ostrożności i ustal to z dostawcą czcionki przed użyciem jej na stronie. Jeśli licencja dopuszcza użycie, dobrym pomysłem jest dodanie komentarza przy regułach @font-face wskazującego licencję - dla przyszłych zastosowań.

“Znalazłem darmową czcionkę. Czy mogę wykorzystać ją na mojej stronie?”

Czasami tak, czasami nie. Część darmowych czcionek jest dystrybuowana jako zapowiedź produktu do sprzedaży i nie dopuszcza redystrybucji ani umieszczania na serwerze internetowym. Należy sprawdzać licencję również dla darmowych czcionek.

“Chcę użyć [wstaw tutaj nazwę ulubionej czcionki] na mojej stronie. Czy to możliwe?”

W tej chwili raczej nie. Używanie w sieci linkowanych czcionek jest jeszcze w stadium początkowym. Większość czcionek, które są obecnie dostarczane z zamkniętymi systemami operacyjnymi, ma licencje ograniczające użycie do standardowych aplikacji desktopowych, zatem umieszczanie tych czcionek na serwerze internetowym jest prawie na pewno niedozwolone. Piractwo było w przeszłości plagą branży zajmującej się czcionkami, zatem większość dostawców czcionek obawia się zezwalać na używanie ich czcionek poza stosunkowo ograniczonym kontekstem. Wielu dostawców czcionek skupia się na potrzebach przemysłu wydawniczego i względna złożoność umów licencyjnych często to odzwierciedla. W przyszłości część projektantów czcionek może dojść do wniosku, że korzyści ze sprzedaży czcionek jako czcionek sieciowych przeważą nad potencjalnymi stratami wskutek piractwa, część może jednak nie zdecydować się na taki krok. Ich umowy licencyjne będą odzwierciedlały ten wybór i należy go respektować.

Rynek sprzedaży fotografii jest często opisywany jako rynek o wartości 2 miliardów dolarów, lecz rynek czcionek sieciowych jest jeszcze rynkiem o wartości zero dolarów, zatem może tylko iść w górę!

Linkowanie czcionek w Internet Explorerze

Linkowanie czcionek w Internet Explorerze jest możliwe, jednak tylko dla czcionek w zamkniętym formacie EOT. Jedynym sposobem na stworzenie czcionek EOT jest zastosowanie narzędzia Microsoft WEFT, dostępnego jedynie w systemie Windows. Do formatu EOT mogą być konwertowane jedynie czcionki TrueType i OpenType TT, czcionki OpenType PS (.otf) nie mogą zostać użyte.

Internet Explorer rozpoznaje jedynie instrukcje font-family i src w regułach @font-face, zatem każda rodzina może zawierać tylko pojedynczy krój. Nie rozpoznaje informacji format() i zignoruje każdą regułę @font-face zawierającą takie wskazówki. To zachowanie może być użyte do międzyplatformowego linkowania czcionek:

/* Definicja czcionki Internet Explorera */
/*        (*musi* być pierwsza)          */
@font-face {
  font-family: Gentium;
  src: url(Gentium.eot) /* nie może zawierać format() */;
}
 
/* Definicja czcionki dla innych przeglądarek */
@font-face {
  font-family: Gentium;
  src: url(Gentium.ttf) format("opentype");

}

Przyszłość

W Firefoksie 3.5 nie są obsługiwane instrukcje font-stretch oraz unicode-range. Czcionki definiowane w dokumentach SVG również nie są jeszcze wspierane. Rozważane jest ich wprowadzenie w przyszłych wydaniach. Jak zwykle mile widziane są łatki!

Dodatkowe informacje

Dokumentacja

• MDC @font-face documentation
• CSS2 Fonts specification
• CSS3 Fonts draft
• Cross-Origin Resource Sharing Working Draft

Przykłady

• CSS @ Ten: The Next Big Thing
• Example layout using Graublau Sans
• Examples of Interesting Web Typography
• The Elements of Typographic Style Applied to the Web

Czcionki

• Font Squirrel
• 10 Great Free Fonts for @font-face
• Web-based font subsetting tool
• 40 Excellent Free Fonts by Smashing Magazine
• FontTools/TTX - Python scripts for displaying font data

Polityka czcionek

• Microsoft’s Bill Hill about Font Embedding
• Microsoft’s Chris Wilson about direct linking to TrueType fonts
• Robert O’Callahan’s blog post on web font formats
• Discussion of font formats at W3C TPAC meeting
• Mark Pilgrim’s post critical of font foundries
• David Baron’s thoughts about downloadable font formats




07/20/09--09:52: Nowe własności CSS3 w Firefoksie 3.5 - nth-* (chan 2284504)

Poniższy tekst jest tłumaczeniem artykułu "New CSS3 properties in Firefox 3.5 - nth-*", zamieszczonego na stronie hacks.mozilla.org na licencji Creative Commons Attribution 3.0 United States License. Autorem tekstu jest Christopher Blizzard. Spis wszystkich tłumaczeń artykułów z hacks.mozilla.org dostępny jest na stronach wiki.aviary.pl.

Firefox 3.5 obsługuje kilka nowych selektorów CSS3. W tym artykule przedstawione zostaną cztery z nich: :nth-child, :nth-last-child, :nth-of-type oraz :nth-last-of-type.

Każdy z nich nazywany jest pseudoklasą i może być użyty w celu dodania stylów do istniejących selektorów. Najlepszą metodą opisania sposobu ich działania jest podanie kilku przykładów.

:nth-child

Ta pseudoklasa pozwala dodać style dla grup elementów. Najczęściej spotykanym przypadkiem jest podświetlanie nieparzystych lub parzystych pozycji w tabeli:

tr:nth-child(even)
{
    background-color: #E8E8E8;
}

Przykład (działa w Firefoksie 3.5):

Wiersz 1

Wiersz 2

Wiersz 3

Wiersz 4

Tej własności można również użyć do nadania stylów dla więcej niż dwóch grup przy zastosowaniu specjalnej notacji. Dokumentacja tych zasad jest nieco zawiła, ale generalnie “3″ w przykładzie dzieli wszystkie elementy na grupy trójek, zaś “+1″ oznacza pozycję w tej grupie. W specyfikacji dostępnych jest też więcej przykładów.

tr:nth-child(3n+1) {  background-color: red; }
tr:nth-child(3n+2) {  background-color: green; }
tr:nth-child(3n+3) {  background-color: blue; }

Przykład (działa w Firefoksie 3.5):

Wiersz 1

Wiersz 2

Wiersz 3

Wiersz 4

Wiersz 5

Wiersz 6

:nth-last-child

Pseudoklasa :nth-last-child działa dokładnie jak pseudoklasa :nth-child z wyjątkiem tego, że zlicza elementy w odwrotnej kolejności:

tr:nth-last-child(3n+3) {  background-color: red; }
tr:nth-last-child(3n+2) {  background-color: green; }
tr:nth-last-child(3n+1) {  background-color: blue; }

Przykład (działa w Firefoksie 3.5):

Wiersz 1

Wiersz 2

Wiersz 3

Wiersz 4

Wiersz 5

Wiersz 6

:nth-of-type

Pseudoklasa :nth-of-type używa podobnej składni jak inne elementy tutaj omawiane, ale pozwala na wybór oparty o typ elementu.

div:nth-of-type(odd) { border-color: red }

div:nth-of-type(even) { border-color: blue }

Przykład (działa w Firefoksie 3.5):

Powinienem być czerwony!




Powinienem być niebieski!

:nth-last-of-type

Podobnie jak w przypadku :nth-last-child, :nth-last-of-type działa tak samo, jak :nth-of-type z wyjątkiem tego, że zlicza w odwrotnej kolejności.

Cztery opisane własności pozwalają osiągnąć interesujące rezultaty ze stylami i grupami elementów i mamy nadzieję, że ułatwią dodawanie stylów do stron.




07/22/09--13:12: Nowe własności CSS3 w Firefoksie 3.5 - *-of-type (chan 2284504)

Poniższy tekst jest tłumaczeniem artykułu "New CSS3 properties in Firefox 3.5 - *-of-type", zamieszczonego na stronie hacks.mozilla.org na licencji Creative Commons Attribution 3.0 United States License. Autorem tekstu jest Christopher Blizzard. Spis wszystkich tłumaczeń artykułów z hacks.mozilla.org dostępny jest na stronach wiki.aviary.pl.

Ten artykuł przedstawia pokrótce trzy nowe pseudoklasy CSS3: only-of-type, first-of-type oraz last-of-type. Są one bardzo podobne do klas *-nth opisanych we wcześniejszym artykule.

first-of-type i last-of-type

Te dwie pseudoklasy pozwalają wybrać pierwszy i ostatni element na liście elementów będących rodzeństwem wewnątrz innego wskazanego elementu. Można użyć ich do pokolorowania pierwszego elementu listy, zastosować wraz z opacity do przyciemnienia ostatniego akapitu na stronie, a także do uzyskania wielu innych efektów. Poniższy przykład ustawia wersaliki w pierwszym akapicie dokumentu:

#type-ex1 div:first-of-type {
    font-variant: small-caps;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nulla neque, cursus venenatis vehicula ac, rutrum id libero. Nullam porttitor ultricies eros, laoreet mollis nunc vestibulum in. Sed iaculis nibh nec tellus vulputate pulvinar. Aliquam ultricies mauris vel nulla semper ac dignissim arcu sollicitudin.




Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras molestie elit sed libero pretium faucibus. Ut sed lacus eget est gravida aliquet sed sed risus. Maecenas vitae volutpat purus. Fusce porttitor aliquam lectus sit amet vehicula. Nulla molestie mi lacus.

only-of-type

Pseudoklasa only-of-type jest podobna do dwóch poprzednich, ale wybiera element tylko wtedy, gdy nie ma on rodzeństwa o tej samej nazwie. Poniżej znajduje się nieco sztuczny przykład*, który ukrywa pojedynczy obrazek wewnątrz elementu div. Jeśli zaś element div zawiera więcej niż jeden obrazek, wtedy obrazki będą widoczne:

.type-ex2 img:only-of-type {
    display: none;
}

To jest tekst przed pojedynczym obrazkiem.



To jest tekst za pojedynczym obrazkiem.




To jest tekst przed dwoma obrazkami.




To jest tekst za dwoma obrazkami.

I to wszystko. Życzymy powodzenia!

[ * Uwaga: Jeśli ktoś dysponuje lepszymi przykładami zastosowania only-of-type, chętnie je poznamy. Istnieje bardzo mało przykładów, w których jest to użyteczne. ]




08/03/09--11:05: Ładne tabele z selektorami CSS3 (chan 2284504)

Poniższy tekst jest tłumaczeniem artykułu "Slick tables with css 3 selectors", zamieszczonego na stronie hacks.mozilla.org na licencji Creative Commons Attribution 3.0 United States License. Autorem tekstu jest Eric Shepherd. Spis wszystkich tłumaczeń artykułów z hacks.mozilla.org dostępny jest na stronach wiki.aviary.pl.

Ten artykuł i demo otrzymaliśmy dzięki uprzejmości Ivana Enderlina, autora frameworka HOA i doświadczonego webdevelopera.

Jest to artykuł, który opisuje poniższe demo, pokazujące zastosowanie selektorów CSS3, wprowadzonych w Firefoksie 3.5, do łatwego tworzenia eleganckich tabel.



Zobacz demo | Selektory CSS3 dla szybkich i ładnych tabel


Zobacz demo krok po kroku.

Podstawowy kod HTML tabeli

Rozpoczniemy od napisania prostego kodu HTML tabeli. Uwaga: nie mamy żadnych atrybutów class ani id, co czyni tę metodę tak interesującą:

<table>
  <thead>
    <th>...</th>
    ...
    <th>...</th>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      ...
      <td>...</td>
    <tr>
    ...
    <tr>
      <td>...</td>
      ...
      <td>...</td>
    <tr>
  </tbody>
</table>

A teraz napiszmy trochę kodu CSS, by nadać prostemu układowi tabeli nieco elegancji:

table {
    font: 90%/1.5em "Lucida Grande", Geneva,
                    "DejaVu Sans", "Bitstream Vera Sans", AnjaliOldLipi,
                    "Lucida sans", "Trebuchet MS", Arial, Verdana;
    text-align: center;
    border: 4px black double;
    border-spacing: 0;
    -moz-border-radius: 12px;
    -moz-box-shadow: #6a3d37 5px 5px 6px;
    -webkit-border-radius: 12px;
    -webkit-box-shadow: #6a3d37 5px 5px 6px;
    border-radius: 12px;
    box-shadow: #6a3d37 5px 5px 6px;
    background: #b59d5c
}

Użycie własności border-spacing, border-radius i box-shadow pozwala w szybki i łatwy sposób upiększyć nieco tabelę.

Pierwszy wybór

Teraz chcielibyśmy nadać style wszystkim znacznikom th. Z selektorami CSS jest to proste:

th {
    color: #fff;
    font-size: 110%;
    text-shadow: #6a3d37 2px 2px 2px
}

Przypomnienie: jeśli napiszemy table th, to wybierzemy wszystkie elementy th będące potomkami elementu table, zaś jeśli napiszemy thead > th, to wybierzemy wszystkie elementy th, które są bezpośrednio dziećmi elementu thead. To gwoli przypomnienia

Bardziej skomplikowany wybór

Znacznik th reprezentuje nagłówek tabeli. Chcielibyśmy wybrać pierwszy nagłówek tabeli. Hmmm.. może powinniśmy użyć pseudoklasy first-of-type. Reprezentuje ona element, który jest pierwszy w rodzeństwie elementów swojego typu na liście dzieci jego elementu nadrzędnego. Zatem mamy teraz:

 
th:first-of-type {
font-weight: bold;
font-style: italic
}

Parzyste i nieparzyste wiersze

Powtarzającym się problemem z tabelami jest to, jak wybrać parzyste i nieparzyste wiersze. Rozwiązaniem jest pseudoklasa nth-child(). Wszystkie te pseudoklasy rozpoznają składnię an+b - aby wybrać wszystkie parzyste elementy, należy użyć 2n; aby wybrać wszystkie nieparzyste elementy, należy użyć 2n+1, aby wybrać każdy co trzeci element, należy użyć 3n.

Nadajmy zatem style parzystym i nieparzystym wierszom:

 
tr:nth-child(odd) {
    color: #e0d8cb;
    background: #474644
}
 
tr:nth-child(even) {
    color: #6a3d37
}

Dopełnienie pierwszej i ostatniej kolumny

Teraz możemy ustawić dopełnienie (padding) pierwszej i ostatniej kolumny. Ponownie przypominam, że nie mamy żadnych klas ani identyfikatorów, oraz że liczba kolumn jest nieznana.

Rozwiązaniem są pseudoklasy first-of-type i last-of-type. Wybieramy wszystkie pierwsze i ostatnie elementy th i td w poniższy sposób:

 
th:first-of-type,
td:first-of-type {
    padding: 0 0 0 4em
}

 
th:last-of-type,
td:last-of-type {
    padding: 0 4em 0 0
}

Dwa ostatnie wiersze

Teraz połączymy wiele pseudoklas (i wprowadzimy jedną nową).

Załóżmy, że chcielibyśmy wybrać wiersz numer 1, numer 4 i numer 7. Wyrażenie matematyczne nie jest tak proste, jak byśmy tego oczekiwali. Rozwiązaniem jest podzielenie naszych wierszy na grupy złożone z trzech wierszy w następujący sposób: 3n. Ale w ten sposób zostaną wybrane wiersze numer 3, 6 i 9. W tych grupach wybierzemy pierwszy element przy pomocy 3n+1 (lub 3n-2, jeśli ktoś chce skomplikować sprawę).

To dobrze, ale wybrany będzie wiersz w naszych dwóch ostatnich półprzezroczystych wierszach. Najlepiej byłoby powiedzieć: "wybierz pierwszy wiersz każdej grupy trzech wierszy, z wyjątkiem ostatniego wiersza (będzie wybrany, ponieważ ostatni wiersz jest siódmym wierszem)". To proste. Użyjemy pseudoklasy not połączonej z pseudoklasą last-child (lub last-of-type, która również tutaj zadziała).

A zatem:

 
tr:nth-last-child(-n+2) {
    opacity: .75
}
 
tr:nth-child(3n+1):not(:last-child) td {
    text-shadow: red 0 0 8px
}

Końcowy kod źródłowy:

table {
    display: table;
    font: 90%/1.5em "Lucida Grande", Geneva,
                    "DejaVu Sans", "Bitstream Vera Sans", AnjaliOldLipi,
                    "Lucida sans", "Trebuchet MS", Arial, Verdana;
    text-align: center;
    border: 4px black double;
    border-spacing: 0;
    -moz-border-radius: 12px;
    -moz-box-shadow: #6a3d37 5px 5px 6px;
    -webkit-border-radius: 12px;
    -webkit-box-shadow: #6a3d37 5px 5px 6px;
    border-radius: 12px;
    box-shadow: #6a3d37 5px 5px 6px;
    background: #b59d5c
}
 
th {
    color: #fff;
    font-size: 110%;
    text-shadow: #6a3d37 2px 2px 2px
}
 
    th:first-of-type {
        font-weight: bold;
        font-style: italic
    }
 
tr:nth-child(odd) {
    color: #e0d8cb;
    background: #474644
}
 
tr:nth-child(even) {
    color: #6a3d37
}
 
th:first-of-type,
td:first-of-type {
    padding: 0 0 0 4em
}
 
th:last-of-type,
td:last-of-type {
    padding: 0 4em 0 0
}
 
tr:nth-last-child(-n+2) {
    opacity: .75
}
 
tr:nth-child(3n+1):not(:last-child) td {
    text-shadow: red 0 0 8px
}


Zobacz demo krok po kroku.




08/10/09--04:16: Krótkie wprowadzenie do zapytań o media w Firefoksie 3.5 (chan 2284504)

Poniższy tekst jest tłumaczeniem artykułu "A short introduction to media queries in Firefox 3.5", zamieszczonego na stronie hacks.mozilla.org na licencji Creative Commons Attribution 3.0 United States License. Autorem tekstu jest Eric Shepherd. Spis wszystkich tłumaczeń artykułów z hacks.mozilla.org dostępny jest na stronach wiki.aviary.pl.

Autorem tego postu jest Eric Shepherd, który kieruje projektem dokumentacji Mozilli na Mozilla Developer Center.

W dzisiejszych czasach ważne jest, by renderowanie zawartości stron wspierane było na zwiększającym się asortymencie urządzeń. Użytkownicy oczekują, że treść będą odbierać nie tylko na swoich domowych komputerach lub czytać wydrukowaną na papierze, ale chcą także mieć do niej dostęp na urządzeniach przenośnych, telefonach komórkowych i innych gadżetach, które mają zróżnicowane możliwości, zarówno pod względem wydajności, jak i dokładności wyświetlania.

CSS 2 wprowadziło pojęcie typów mediów, które pozwala zdefiniować odmienne reguły stylów w zależności od tego, na jakim typie urządzenia treść jest renderowana. Na przykład, w poniższy sposób można włączyć specyficzny arkusz stylów, kiedy treść jest renderowana do druku:

<link rel="stylesheet" media="print" href="print.css">

Był to dobry pierwszy krok, jednak nie dostarcza to możliwości dopracowania renderowania treści w oparciu o cechy, takie jak rozdzielczość urządzenia, proporcje czy orientacja pionowa lub pozioma.

Firefox 3.5 wspiera zapytania o media (media queries) — nową cechę CSS 3, która sprawia, że możliwe jest bardziej precyzyjne definiowanie, które style zastosować w konkretnych przypadku.

Funkcjonuje to dzięki ustaleniu zapytań, które sprawdzają wartości różnych cech mediów. Jest ich wiele, włączając w to głębię kolorów, szerokość i wysokość obszaru renderowania, rozdzielczość w pikselach, wyświetlanie w kolorze lub nie, i tak dalej. Pełną listę można znaleźć w artykule o zapytaniach o media na Mozilla Developer Center.

Zapytania o media są potężne, ale bardzo łatwe w użyciu. Można przyjrzeć się im na przykładowej stronie stworzonej dla tego artykułu.

Przykładowa strona używa dwóch arkuszy stylów, które są zdefiniowane przy użyciu poniższych reguł:

<link rel="stylesheet" media="all and (orientation:portrait)"
 href="portrait.css">

Powyższy kod wykorzystuje zapytania o media all i (orientation:portrait), by wskazać, że użyty ma być arkusz stylów portrait.css, jeśli treść jest renderowana w obszarze wyświetlania (takim jak okno w Firefoksie) o większej wysokości niż szerokości.

<link rel="stylesheet" media="all and (orientation:landscape)"
 href="landscape.css">

Powyższy kod określa, że dołączony powinien być arkusz stylów landscape.css, gdy treść jest renderowana na obszarze o większej szerokości niż wysokości.

Ogromną zaletą zapytań o media jest to, że sprawdzają one parametry za każdym razem, gdy zmienia się tryb wyświetlania, np. jeśli otworzysz przykładową stronę i rozpoczniesz skalowanie okna, to zobaczysz, że kiedy okno jest szersze niż wyższe (przy orientacji poziomej), pasek narzędziowy umieszczony jest po lewej stronie.

Gdy zmieniasz rozmiar okna i przybiera ono orientację pionową, pasek narzędziowy przenoszony jest na górę okna. Dzieje się to na bieżąco podczas skalowania okna.

Jeśli zajrzysz do pliku landscape.css, zobaczysz, że jest w nim użytych kilka zapytań o media, a także, że zmieniany jest styl elementu <body> w oparciu o szerokość okna. Domyślnie tekst w tym elemencie ma rozmiar 14 pikseli.

@media all and (min-width: 600px) {
  body {
    font-size: 16px;
  }
}

Jednak to zapytanie o media wskazuje, że, jeśli okno ma szerokość większą niż 600 pikseli, rozmiar czcionki całego dokumentu powinien zwiększyć się do 16 pikseli.

@media all and (min-width: 700px) {
  body {
    font-size: 20px;
  }
}

Podobnie powyższe zapytanie o media ustawia podstawowy rozmiar czcionki na 20 pikseli, gdy szerokość okna wynosi ponad 700 pikseli. I dalej - analogiczne zapytanie o media ustawia jeszcze większy rozmiar czcionki, gdy okno ma ponad 800 pikseli szerokości.

Zatem podczas skalowania okna można zobaczyć, że Firefox nie tylko automatycznie przełącza się między arkuszami stylów portrait.css i landscape.css, gdy zmienia się szerokość okna, ale podczas renderowania przy użyciu arkusza stylów landscape.css, style zmieniają się precyzyjnie także w oparciu o to, jak szerokie jest okno.

Jeszcze jednym przydatnym zastosowaniem tej cechy jest ustawianie liczby kolumn wyświetlanej treści w oparciu o szerokość obszaru wyświetlania.

Zapytania o media są obecnie wspieranie przez przeglądarki Firefox 3.5, Safari 3 oraz Opera 7 lub nowsza, przy czym kolejne wersje często wprowadzają wsparcie dodatkowych opcji związanych z mediami.

Szczegółowe informacje na temat zapytań o media wspieranych w Firefoksie można przeczytać na witrynie MDC w artykule o zapytaniach o media. Zapytania o media obsługiwane przez Operę 9.5 są wymienione na końcu tego artykułu. Nie byłem w stanie znaleźć informacji o wsparciu zapytań o media w WebKit.

Zapytania o media oferują doskonałą metodę na udoskonalenie wyglądu zawartości na różnych urządzeniach. Używając odpowiednich zapytań, można wyświetlać w odmienny sposób w oparciu o rozmiar ekranu, rozdzielczość i wiele innych cech. Przy tej metodzie optymalizacji treści nie ma znaczenia, w jaki sposób użytkownik ma do niej dostęp.