W tym tutorialu pokażę Wam jakie cuda można zrobić za pomocą CSS oraz dlaczego należy korzystać z normalnych przeglądarek.

Formaty obrazków

Fajną sprawą by było widzieć na pierwszy rzut oka czy plik znajdujący się po drugiej stronie linka jest obrazkiem w formacie JPG czy może plikiem DOC. Od biedy możemy sobie napisać klasy i nadawać je odpowiednim <a> (np. <a href="" class="pdf">). Jednak jest to dodatkowa robota. Na szczęście z pomocą przychodzi nam CSS

W naszym przykładzie mamy taki fragment kodu:

teraz piszemy w CSS następującą rzecz:

Dzięki temu obok JPG pojawi się tabliczka z napisem JPG a obok PNG z napisem PNG. Spójrzcie na przykład (pierwszy akapit).

Jak widać a[href$=".jpg"] wyszukuje wszystkie linki które kończą się na .jpg i tam wstawiają odpowiednią tabliczkę.

Różne strony

Teraz rozpatrzmy inną sytuację. Chcemy, żeby nam oznaczało w inny sposób artykuły które są na stronie wp.pl, gazeta.pl i onet.pl. Poprzedni trick nie zadziała bo sprawdzał on kończówkę linka, a my musimy sprawdzać początek.

Ale i tak sobie damy radę. W CSS piszemy:

Tym razem zastosowalismy formułkę a[href^="http://gazeta.pl"] która nam sprawdza co jest na początku linka. Dalej już wszystko działa analogicznie. Drugi akapit w naszym przykładzie.

Użyjmy tego jako cenzurę

Poza oznaczaniem różnych rodzajów stron spróbujmy wykorzystać to jako moduł cenzury. Załóżmy, że nie chcemy by na naszej stronie pojawiał się adres np. http://graffik.biz. Wystarczy napisać w CSS:

I po sprawie Spójrzcie na ostatni akapit w przykładzie.

Wady takiego rozwązania

Takie rozwiązanie ma niestety kilka wad. Trzeba pamiętać, że http://gazeta.pl i http://www.gazeta.pl to dla niego dwie różne rzeczy, więc trzeba zawsze rozpatrywać dwa przypadki. To samo się tyczy zamykających “/”.

Poza tym w IE6 to nie działa (nie to, żebym był zaskoczony). Nie wiem jak IE7 - będę dźwięczny za sprawdzenie.

Ale i tak warto znać tą technikę, bo w normalnych przeglądarkach może naprawdę ułatwić życie oraz wyglądać efektownie.