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

1. ograniczyć nadmiarowy css

2. ograniczyć nadmiarowe identyfikatory

I to by było na tyle.

#css #listanieuporządkowana #poradnikwebmastera