Dzień 25: Używanie prawdziwych linii (albo dobrze udawanych)

Załóżmy, że chcesz mieć jakiś element oddzielający wpisy na Twoim blogu. Normalne linie poziome (tag <hr>) są nudne i nieefektowne, więc używasz zamiast nich obrazka. To działa i łatwo może być zrobione bardziej dostępnym za pomocą odpowiedniego tekstu w atrybucie alt.

Jednak można pójść dalej i używać prawdziwych linii poziomych, a za pomocą małego triku CSS wyświetlać je jako obrazek w nowoczesnych przeglądarkach. Stare przeglądarki oraz przeglądarki tekstowe zignorują ten styl CSS i pokażą normalną linię poziomą. (Przeglądarki tekstowe zazwyczaj używają tutaj serii znaków podkreślenia lub myślników na całej szerokości strony.)

Przykłady obu technik podamy za chwilę.

Kto na tym skorzysta?

  1. Jadzia skorzysta. Jak widzieliśmy, JAWS czyta nazwę pliku dla każdego obrazka bez atrybutu alt.
  2. Marek skorzysta. Lynx pokazuje nazwę pliku dla każdego obrazka bez atrybutu alt. Natomiast gdy użyjesz prawdziwego taga linii poziomej to Lynx pokaże go jako serię znaków podkreślenia na całą szerokość ekranu.
  3. Michał skorzysta. Links nie pokazuje w ogóle obrazków bez atrybutu alt, więc Michał nie zobaczy Twojej poziomej linii. Tutaj też potrzebujemy tekstu alt, albo jeszcze lepiej prawdziwego taga <hr>, który zostanie przez Linksa pokazany jako seria myślników na szerokość całej strony.

Jak to zrobić?

Jeżeli używasz obrazków do symulowania linii poziomej, to najłatwiejszym sposobem na uczynienie ich dostępnymi jest dodanie atrybutu alt do taga <img>. Trzeba również dodać pusty atrybut title, aby przeglądarki graficzne nie pokazywały tekstu alternatywnego dla tego obrazka po najechaniu na niego kursorem myszki. Zatem jeśli masz np. taki kod:

<img src="/images/fancyrule.gif" width="442" height="25">

zamień go na taki:

<img alt="--" title="" src="/images/fancyrule.gif" width="442" height="25">

Nie przesadzaj i nie wpisuj 80 myślników jako tekst alt. Dwa lub trzy w zupełności wystarczą.

Jak to zrobić: sposób zaawansowany

Zaawansowana (i zalecana) metoda wykorzystuje faktyczny tag <hr>. Jednak, ponieważ obsługa stylów dla taga <hr> w przeglądarkach jest całkiem pochrzaniona, użyjemy pustego taga <div> do wyświetlenia obrazka. Dopisz poniższy kod do sekcji <style> w swoim szablonie. (Jeżeli używasz zewnętrznych plików jak np. style.css, wpisz to gdzieś w tym pliku. Jeżeli używasz kilku arkuszy stylów, wpisz to w tym przeznaczonym dla Netscape 4.)

div.hr {display: none}
/*/*/a{}
div.hr {
  display: block;
  height: 25px;
  background-image: url(/images/fancyrule.gif);
  background-repeat: no-repeat;
  background-position: center center;
  margin: 1em 0 1em 0;
}
hr {display:none}
/* */

(W atrybut height wpisz wysokość swojego obrazka, a w background-image wpisz jego adres.)

Następnie na swojej stronie lub w szablonach, w miejscu gdzie zechcesz wstawić poziomą linię, wpisz to:

<div class="hr"></div><hr />

Rezultat:

  • Wszystkie nowoczesne przeglądarki pokażą obrazek zamiast standardowej linii poziomej.
  • Netscape 4 pokaże zwykłą linię poziomą.
  • Przeglądarki tekstowe zawsze ignorują style CSS, więc pokażą normalną linię (zazwyczaj utworzoną ze znaków podkreślenia albo z myślników).

Zobacz także (strony w języku angielskim)

  • Hiding CSS From Netscape 4. Ukrywanie stylów przed Netscape 4, bez użycia osobnych arkuszy CSS. Opis techniki, która została użyta w zaawansowanym przykładzie powyżej.
  • CSS1 and the Decorative HR, jeśli czujesz w sobie wystarczająco dużo odwagi i chcesz zrobić ozdobne linie poziome za pomocą CSS w Netscape 4. Powodzenia.
 
<< Dzień 24: Odpowiedniki tekstowe dla map graficznych | Spis treści | Dzień 26: Używanie względnych rozmiarów czcionek >>