Przy okazji porządków na serwerze znalazłem kolekcję swoich starych skryptów i innych dokumentów publikowanych jeszcze na starym blogu. Ponieważ wiem, że niektóre z nich jeszcze mogą się komuś przydać postanowiłem pomóc Google, które linkuje niemiłosiernie do nie istniejących już adresów i wrzucić skrypty do sieci.

Chciałbym przypomnieć, że skrypty te mogą być nie aktualne, mogą nie odzwierciedlać aktualnie stosowanych metod, nie działać czy też być proste do odtworzenia w totalnie lepszy sposób - jest to do przewidzenia, zważywszy, że większość z nich ma ponad dwa lata.

Poniżej lista z krótkimi opisami:

• Animowane menu - jak stworzyć menu graficzne z innymi wyglądami po najechaniu na element
• Dodaj do ulubionych i uwstaw jako stronę startową - chyba nie trzeba tłumaczyć, skrypt wykrywa przeglądarki, które tego nie obsługują i wyświetla stosowny komunikat
• Własna wyszukiwarka w Firefox - czyli jak zdefiniować wyszukiwarkę dla swojej strony i umożliwić użytkownikowi dodanie jej do swojej przeglądarki
• Stronicowanie - HTML i CSS - HTML i CSS dla ostylowania podziału na strony podobnie jak na Digg.com
• Stronicowanie - PHP - tym razem kawałek PHP odpowiedzialny za podział elementów na strony
• Przeźroczyste opisy - rozwiązanie CSS pozwalające na dodanie przeźroczystej warstwy z tekstem np. nad obrazkiem
• Rozwijane menu - rozwijane menu (dropdown) w CSS i HTML, (prawie) bez JS
• Zakładki - przykład wykonania boksu z kilkoma zakładkami, z zaznaczeniem aktywnej.

Jeszcze raz - to są stare skrypt, które mogą być już nie aktualne - proszę o nie wytykanie błędów ;-)

Wraz z tym jak co raz więcej przeglądarek zaczyna obsługiwać nowe kolejne wersje CSS możliwe jest stosowanie coraz to nowych technik, w celu osiągnięcia efektów, które do tej pory wymagały przemyślnych tricków HTML/CSS/JS albo stosowania grafiki.

Jednym z takich elementów są "odznaki", zwykle dodawane do produktu czy usługi w celu zakomunikowania klientowi, że są one godne jego uwagi - przykładowa odznaka wygląda tak:

Zwykle w celu zastosowania takiego rozwiązania przygotowuje się obrazek graficzny z gwiazdką, czy też innym kształtem i umieszcza go na stronie jako obrazek czy też tło znacznika HTML. Jeżeli mamy kilka rozmiarów lub kolorów - trudno, robimy albo kilka obrazków, albo - dla trochę bardziej zaawansowanych - używamy odwrotnego obrazku jako maski kadrującej tło.

Na szczęście z nadejściem wsparcia dla nowszego CSS możliwe stało się wstawienie takiego (oraz podobnych) elementów bez użycia grafiki. Na początek pokażę co chcemy osiągnąć:

CSS3!

Wygląda tak samo (prawie) jak wyżej? Super - Twoja przeglądarka wspiera "zaawansowane" właściwości CSS. Nie wygląda tak samo? Przestań używać IE. Niestety, nawet IE9 preview nie wspiera w tym momencie zastosowanych tu technik, więc musisz sam siebie zapytać, czy IE nie stanowi większości Twoich odbiorców. Nie? Świetnie - przystąpimy do sekcji elementu. Na pierwszy ogień HTML:

<span class="badge"><span><span>CSS3!</span></span></span>

Jak widać, nie ma obrazków - są za to 3 zagnieżdżone elementy - w tym wypadku span, ale jeżeli np. chcesz, by element był klikalny i dobry dla SEO nic nie stoi na przeszkodzie by zamienić kombinację na np.:

<a class="badge"><span><strong>OKAZJA!</strong></span></a>

Ok, HTML wydaje się prosty - zostaje nam zatem CSS:

.badge,
.badge span {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: red;
    color: white;
    line-height: 40px;
    text-align: center;
    -moz-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    rotation: 30deg;
}

.badge {
    -moz-transform: rotate(300deg);
    -webkit-transform: rotate(300deg);
    -o-transform: rotate(300deg);
    rotation: 300deg;  
}

Ok, bez paniki - tak na prawdę jest to prostsze niż wygląda. Większość właściwości znamy już z poprzednich wersji CSS. display: inline-block oczywiście nakazuje traktowanie obiektu jako element blokowy, jednak pozostaje on w linii z tekstem, width i height określają szerokość i wysokość naszej odznaki. Dochodzi za to jedna nowa własność - rotation (zapisy -*-transform: rotate przeznaczone są dla konkretnych przeglądarek, samo rotation jest proponowane w standardzie CSS i niejako zapewnia nam kompatybilność, kiedy już właściwość ta będzie w pełni obsługiwana).

Co mówi nam ta właściwość? Prosto się domyśleć - nakazuje, by przeglądarka po wyrenderowaniu elementu obróciła go o podaną wartość wyrażoną w stopniach wg. jego środka. Jak widać przy 3 elementach suma obrotów sprowadza się do 360°, tak, by napis był w odpowiedniej postaci. De-facto nasza gwiazdka składa się z 3 nałożonych na siebie elementów:

    CSS3!

Oczywiście odpowiednio modyfikujące (dodając kolejne span) kod HTML oraz CSS (zmniejszając kąt oraz dobierając width/height) możemy zwiększyć ilość ramion naszej gwiazdy. A Ci, którzy wolą kwiatki, mogą zastosować jeszcze border-radius:

CSS3!

Oczywiście zdaję sobie sprawę, że póki IE nie zacznie obsługiwać poprawnie CSS nie ma co marzyć o stosowaniu takich technik w komercyjnych rozwiązaniach, ale samorozwój jest zawsze pożądany ;)

Aktualizacja

Wasacz, w komentarzu wypomina mi, że efekt ten można stworzyć także w CSS z wykorzystaniem selektora :after: oraz :before - i rzeczywiście jest taka możliwość:

CSS3!

By osiągnąć taki efekt musimy użyć nieco bardziej zawiłego CSS:

.badgeSt:after,
.badgeSt:before,
.badgeSt {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: red;
    color: white;
    line-height: 40px;
    text-align: center; 
    position: relative;
}

.badgeSt:after 
.badgeSt:before {
    z-index: -1;
    content: "";   
    position: absolute;
    top: 0;
    left: 0;           
}

.badgeSt:after {
    -moz-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    rotation: 30deg;  
}

.badgeSt:before {
    -moz-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    rotation: -30deg;
}

Pojawiają się dwa nowe zagadnienia - wspomniane :after, :before oraz właściwość content. Selektory pozwalają nam na stworzenie i ostylowanie elementu HTML który zostanie umieszczony (odpowiednio) za oraz przed zawartością wskazanego elementu - tak jakby został on na sztywno wpisany do znacznika. Nowo utworzony element nie jest jednak żadnym znacznikiem (nie jest to ani span, ani stron etc.) więc by został wyświetlony musimy wstawić do niego jakąś zawartość - chociażby pusty łańcuch znaków - tu właśnie wkracza kolejna nowość czyli content. Parametr ten pozwala nam na określenie zawartości znacznika za pomocą CSS (więcej w specyfikacji). Dla poprawy wyświetlania musimy jeszcze zastosować z-index tak, by nasz tekst był na wierzchu.

Przyszła uwaga - strona wyświetla się błędnie w przeglądarkach pod Linuxem i Maciem. Chodzi o najnowszego Firefox. Czemu? Nie wiem - walczyłem z tym już dłuższą chwilę, wydawało mi się, że się poprawiło (i u mnie i u znajomego było ok) jednak znalazł się ktoś, komu wyświetla się źle.

Przychodzi polecenie od klienta, mail przechodzi przez zarząd i trafia do mnie - poprawić. Trudno, trzeba zainstalować kolejnego Linuxa w VM i sprawdzić. Tylko właściwie czemu? Wg. ranking.pl użytkownicy Linux wszelkiej maści i Mac w sumie nie mają nawet 1/3 tego, co ma IE6, który przez wielu jest odrzucany jako produkt przestarzały i używany przez tak małą grupę użytkowników, że nie warto sobie nim zawracać głowy.

Co okazuje się być źródłem problemu? Ano to, że dane Ubuntu domyślnie zdaje się nie posiadać Tahomy, czyli jednej z popularniejszych w sieci czcionek, zaś alternatywna powoduje, że zastosowanie paddingu o takiej a nie innej wartości rozwala stronę...

Na odbywającej się właśnie konferencji Google I/O 2010 internetowy gigant zaprezentował swój nowy produkt - tytułowe Google Font API szybko okrzyknięte przez niektórych zbawieniem webdeveloperów, krokiem ku przyszłości czy "jednolinijkowym rozwiązaniem". Czy aby na pewno?

Na początek wypada wyjaśnić o co właściwie chodzi. Każdy, kto kiedykolwiek zajmował się na poważnie tworzeniem serwisów internetowych wie, że możliwość korzystania z różnorodnych dostępnych czcionek ograniczona jest tym, jakie czcionki posiada zainstalowany odwiedzający - jeżeli nie ma tej, którą wybraliśmy, wyświetli mu się alternatywna (zdefiniowana przez nas lub przez jego przeglądarkę). Oczywiście pojawiały się różne próby dodania obsługi czcionek w CSS - jednak jak to bywa z przeglądarkami, Microsoft wprowadził do IE swoje standardy, część przeglądarek zaczęła adaptować rozwiązanie zaproponowane dla CSS3, IE6 nie obsługiwał prawie nic .... Teraz, kiedy zbliża się czas w którym IE6 będziemy mogli porzucić a większość przeglądarek zdaje się już finalizuje obsługę font-face z CSS3 możemy zacząć rozważnie stosować te technikę.

Jak to dokładnie działa? W CSS możemy zdefiniować sobie nowe czcionki w oparciu o udostępnione przez nas pliki, np:

@font-face {
        font-family: Delicious;
        font-weight: bold;
        src: url('Delicious-Bold.otf');
}

Zadeklaruje nam nową czcionkę o nazwie "Delicious" i do jej wyświetlenia użyje pliku "Delicious-Bold.otf" dostępnego na naszym serwerze. Oczywiście, każdy z użytkowników musi pobrać te czcionkę co powoduje dwie rzeczy:

1. Do czasu pobrania czcionki tekst wyświetlany jest przy użyciu czcionki alternatywnej
2. Każdy użytkownik musi pobrać plik czcionki przez co wzrasta transfer nasz i odwiedzającego

I tutaj wchodzi Google - nowa usługa polega na udostępnianiu czcionek prosto z serwerów Google co pozwala nam zaoszczędzić na transferze, odwiedzający zaś pobierze czcionkę tylko raz - jeżeli przejdzie na inną stronę, która także używa danej czcionki i również korzysta z usługi Google nie musi pobierać jej ponownie.

I o ile jest to rozwiązanie korzystne na pierwszy rzut oka, o tyle nie jest ono w żaden sposób rewolucyjne - nie jest to żadne "end-all" rozwiązanie wprowadzające jakąś technologiczną nowość czy dodające funkcjonalność, której do tej pory przeglądarki nie miały. Nie sprawi to, że magicznie nowe czcionki pojawią się w IE6 - po prostu jest to rozwiązanie CSS3 wykorzystujące CDN (ang. content delivery network, sieć dostarczania treści - pozwala to na dostarczenie użytkownikowi materiałów z serwera który znajduje się "najbliżej" jego lokacji) Google.

I tu pojawia się problem dla mnie. Po pierwsze dodajemy kolejny supełek na linie łączącej nas z Google - jeżeli nagle panom znudzi się usługa i postanowią ją wyłączyć zostajemy na lodzie i mamy kilka stron do poprawienia. Czcionki dodawane do Google Font Directory udostępniane są na licencji open source, co daje nam pewność, że nie każą nam za nie nagle płacić, ale wybór (na razie) jest mizerny. No i pozostaje sam CDN - mam nadzieję, że będzie działać on dużo lepiej niż Google AJAX Libraries API który potrafi notorycznie wieszać się i wisieć na "Trwa pobieranie z google..." co w przypadku JS potrafi zawiesić działanie reszty strony.

Ktoś powie, że ten ostatni problem jest specyficzny dla JS i nie powinien powodować problemów w CSS - przecież czcionkę pobieramy raz. Czcionkę tak, plik CSS od Google nie - jeżeli serwer będzie odpowiadał wolno, przyjdzie nam czekać na załadowanie CSS by wskazał czcionkę, którą już mamy na dysku.

Podsumowując - cały szum wokół Google Font API zdaje się być zupełnie chybiony - cała "aplikacja" jest przecież tylko frontendem do Google Font Directory pozwalającym w 2 linijkach HTML i CSS zrobić to, co od dłuższego czasu możemy zrobić w 3-4 CSS...

aktualizacja: okazuje się, że byłem w błędzie i jak to wytkną mi trójkąt w komentarzach Google Fonts API radzi sobie nawet w IE6 (chociaż u mnie mało stabilnie, ale może to być wina nie natywnej wersji IE6 - IETester). Jeżeli żądanie czcionki wyjdzie z "nowej" przeglądarki - serwer Google odpowie nam wysyłając czcionkę w formacie TTF. Jeżeli zaś to samo żądanie, pod ten sam URI wyślemy z IE6 - serwer Google wyśle nam plik EOT - jest to format czcionek obsługiwanych przez IE od dłuższego czasu.

Biję się w pierś i przyznaje - jednak jest w tym rozwiązaniu coś interesującego :-)