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.
Łukasz Sobek
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ę :)
Marcin
Chyba będę musiał Ci ufundować jakąś nagrodę, czy co? Jestem moim najwierniejszym komentatorem.
Szymon
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ś).
Marcin
Szymon: w podanym przeze mnie rozwiązaniu nie musisz niczego edytować. Dodajesz po prostu na końcu.