Kategorie
Bez kategorii

Lista ikonek pod artykułem

W 8 kroków do zmniejszenia ilości obrazków na stronie Łukasz Sobek rozprawia się z prezentacją odnośników do portali społecznościowych. Wywiązała się dość burzliwa dyskusja wraz z przykładami jak to zrobić: Semantyka HTML: lista nieuporządkowana i ten wpis prawie rozwiązuje zagadnienie.

Dlaczego prawie?

Są w nim dwa niedociągnięcia: nadmiarowy span oraz „display:none” którego należy unikać, ze względu na „nieczytanie” przez czytniki głosowe. Skoro nie widać, to nie trzeba czytać, prawda?

Jak to poprawić?

Usunąć tag „span”

Jest … niepotrzebny.

<ul>
<li class="d"><a href="#">del.icio.us</a></li>
<li class="t"><a href="#">technorati</a></li>
<li class="w"><a href="#">wykop</a></li>
</ul>

Schować tekst za pomocą tekst indent

<style type="text/css">
li{
background-image:url(socicons.gif);
list-style:none;
margin:0;
float:left;
margin-right:2px
}
a{
display:block;
width:16px;
height:16px;
text-indent:-99em
}
li.t{background-position:-16px}
li.w{background-position:-32px}
</style>

Inne uwagi

  • ograniczyć nadmiarowy css
  • ograniczyć nadmiarowe identyfikatory

I to by było na tyle.

4 odpowiedzi na “Lista ikonek pod artykułem”

Ostatnia cegiełka i mamy kod poprawny, wyświetlający się wszędzie i w dodatku przystosowany dla osób korzystających z czytników głosowych. Dziekuję :)

Jak pisałem już w komentarzu u Łukasza, ja wstawiłem ikony jako tło (w tym przypadku listy, choć u mnie nieco inaczej to wygląda). Poszczególne elementy listy nie muszą wówczas posiadać własnej klasy, ale tracimy wówczas możliwość zmiany kolejności linków bez edycji grafiki.
Plusem jest jednak mniejszy kod HTML i CSS (coś za coś).

Możliwość komentowania jest wyłączona.