nagradzam tutoriale

  • O stylowaniu linków słów kilka

    dodano 16.12.2007 / komentarzy: 0 / autor: palmiak

    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:

    <a href="obrazek.jpg">tu jest link do obrazka jpg</a>
    <a href="obrazek.png">tu jest link do obrazka png</a>

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

    a[href$=".jpg"] {
             background:url(jpg.png) no-repeat 100% 7px;
             padding:0 40px 0 0;
             }

    a[href$=".png"] {
             background:url(png.png) no-repeat 100% 7px;
             padding:0 40px 0 0;
             }

    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.

    <a href="http://onet.pl/costam">Onet</a>
    <a href="http://wp.pl/costam">Wp.pl</a>
    <a href="http://gazeta.pl/costam">Gazeta.pl</a>
    <a href="http://onet.pl/jakistam">jeszcze jeden artykuł z Onetu</a>

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

    a[href^="http://onet.pl"] {
             background:url(onet.png) no-repeat 100% 7px;
             padding:0 40px 0 0;
             }

    a[href^="http://wp.pl"] {
             background:url(wp.png) no-repeat 100% 7px;
             padding:0 40px 0 0;
             }

    a[href^="http://gazeta.pl"] {
             background:url(gw.png) no-repeat 100% 7px;
             padding:0 40px 0 0;
             }

    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:

    a[href^="http://graffik.biz"] {
            display:none;
             }

    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.

    Napisz komentarz