Swego czasu opisywałem jak zrobić “pseudo” kategorie na blogu a od kilku dni myśli zaprzątało mi wyświetlanie “filetypeów” na stronie WWW.

O co chodzi?

Wyobraźmy sobie sytuację, w której nasza strona zawiera pliki multimedialne, a my chcielibyśmy wizualnie poinformować użytkownika, jakiego typu plik skrywa się pod niepozornym linkiem. Możemy dopisywać ręcznie np (Flash) w nazwie linka, jednak przy kilku tysiącach plików jest to rozwiązanie mało wygodne. Lepszym rozwiązaniem byłoby jakieś PHP, ASP, czy JSP; jednak nie zawsze mamy do tego dostęp. Pozostaje client-side – Javascript, Greasemonkey i… CSS.

Właśnie, z racji tego, że JS i Greasemonkey mnie nie zadowala, chciałem rozwiązania opartego o CSS.

Szczypta HTML

Nasz przykładowy fragment kodu będzie wyglądał następująco:

  • <a href="http://przykładowy.com/film.swf">jakiś film</a>
  • <a href="http://przykładowy.com/film.mov">jakiś film</a>
  • <a href="http://przykładowy.com/film.qt">jakiś film</a>

CSS – nasz bohater

W trzecim wcieleniu CSS dorobił się kilku nowych selektorów, które według mnie są zdecydowanie bardziej użyteczne od swoich starszych braci.

Ja skorzystam z jednego – $=.

Niektórzy mogą kojarzyć również trzeci z nowych selektorów – ^=. Służy on do wybierania elementów, których początek nazwy zaczyna się od wpisanego ciągu. Na przykład: a[href^="http://"]{text-decoration: none;}.

$= natomiast, wybiera nam elementy, które kończą się danym ciągiem. Na przykład: a[href$=".jpg"]{color: #f00;}.

Hmm.. chwila. Czy myślicie o tym samym, o czym ja? (nie, wcale nie o tym).

Do rzeczy

Wiemy już zatem jak wybrać odpowiedni element. Ale na razie możemy zmienić atrybuty linka pasującego do wzorca, a ja wspominałem, że chciałbym w sposób bardziej intuicyjny (opisowy) poinformować użytkownika jakiego typu plik znajduje się pod nazwą linka.

Do tego posłuży nam pseudoklasa ::after i atrybut content:

Bez przeciągania, zabieramy się za nasz kod:

  • a[href$=".swf"]::after{content: "(Flash)"; color: red; font-size: 60%; vertical-align: text-top; text-decoration: none;}
  • a[href$=".mov"]::after{content: "(Mov)"; color: black; font-size: 60%; vertical-align: text-top; text-decoration: none;}
  • a[href$=".avi"]::after{content: "(AVI)"; color: #f90; font-size: 60%; vertical-align: text-top; text-decoration: none;}
  • a[href$=".qt"]::after{content: "(QuickTime)"; color: #90f; font-size: 60%; vertical-align: text-top; text-decoration: none;}

Voila. Od tej pory, każdy link pasujący do wzorca będzie miał odpowiedni podpis, zależnie od tego, do jakiego typu pliku prowadzi. Oczywiście, nic nie stoi na przeszkodzie, by zamiast tekstowego opisu dorobić ikonę czy coś innego.

Można także zmienić zachowanie elementów poprzez zastosowanie :hover czy :focus. Na przykład:

  • a[href$=".swf"]:hover::after{content: "(Flash)"; color: red; font-size: 60%; vertical-align: text-top; text-decoration: none;}

Minusy?

Sposób ten działa tylko w Gecko’watych.

Ale wspominałeś coś o komentarzach?

Tak, ale po przemyśleniu muszę napisać uwagę niczym mój matematyk w liceum – jest to rozwiązanie poprawne ale błędne. Niestety, bez modyfikacji w kodzie joggera (bądź specyfikacji CSS) nie widzę możliwości by je poprawić. Dodałem prośbę o modyfikację do Buggera i wypada czekać. Co prawda nie wiem co pojawi się najpierw – możliwość wybierania elementu nadrzędnego dla dziecka w CSS czy poprawka w kodzie Joggera…

Opis metody

Być może ktoś jeszcze pamięta, jak chwilę po pseudokategoriach chciałem stworzyć pseudokategorie komentarzy. Na przykład wyróżnić komentarze właściciela jogga spośród innych. Tamten sposób zawiódł, ale postanowiłem go poprawić.

Z pomocą przyszedł mi inny selektor CSS3, wspominany już *=, który po prostu wybiera elementy pasujące do wartości, niezależnie, czy jest ona oddzielana spacjami, myślnikami, kropkami, znajduje się na początku czy na końcu ciągu.

Nasz kod HTML w komentarzach wygląda, z tego co pamiętam, mniej-więcej tak:

  • <h3><a href="nbw.jogger.pl"></h3>

CSS do tego:

  • a[href*="nbw"]{border: 1px solid #000;}

Jeśli chcielibyśmy wyróżnić cały komentarz, to tak jak kiedyś pisałem – dodajemy <COMMENT_NICK/> do title= div’a z komentarzem. Przy czym stosujemy pojedynczy cudzysłów. Kod dla takiego diva wyglądałby mniej więcej tak:

  • div[title*="nbw"]{border: 1px solid #000;}

Sprawdziłem tę metodę w przeglądarkach – działa. Można także uspokoić validator poprzez przestawienie DOCTYPE w HTML4.01. Niemniej ze względu na fakt, że kod taki wyglądałby tak:

  • <div title='<a href="http://nbw.jogger.pl">nbw</a>'>

skutki stosowania tej metody mogą byc “nieprzewidywalne
.

Powiązane wpisy:

  1. Selektory CSS3
  2. Selektory w CSS1 i 2 – podstawy
  3. A Ty jak brzmisz?
  4. [XHTML] Kategorie, blogi a komentarze
  5. [XHTML] Komentarze Warunkowe, czyli jak zachować zgodność z dziadkiem MS IE.