View posts in English only. (RSS feed)

Tag cloud w WordPressie

Ostylowałem moje kategorie w stylu tag cloud. Użyłem pluginu WordPress Cat Cloud Plugin.

Niestety jego accessibility leży. Linki (tagi) nie są niczym oddzielone, jak wiadomo tak nie możne być.

Najprostsze wyjście to wstawić po każdym <a /> przecinek, lub jakikolwiek inny znak nie będący linkiem. Przykładowo <span>,</span>. Takie rozwiązanie ma tą wadę, że widać przecinek. Można oczywiście ostylować go przy pomocy span {display:none} lub span {visibility:hidden}.

Niestety przy zastosowaniu takich technik ukrywania tekstu nie wszystkie user agents będą w stanie poprawnie odczytać nasze intencje.

Jedynym rozsądnym sposobem na poprawienie accessibility jest lista. Należy edytować zawartość pliku z pluginem. Zamienić <div /> na listę <ul /> i objąć linka listą <li />.

$output['data'] = '<ul id="catcloud">'."\n";
foreach (explode("\n", $all_cats) as $cat) {
preg_match('{a href="([^"]+)" title="([^"]+)".*?>(.+)</a> ?\((\d+)\)}', $cat, $matches);
list(,$url, $title, $name, $count) = $matches;
$output['data'] .= sprintf("\t".'<li><a href="%s" title="%s (%s %s)" class="size-%d">%s</a></li>'."\n",
$url, $title, $count, abs($count) != 1 ? 'entries' : 'entry', $count, $name);
$counts[$count] = 1;
}
$output['data'] .= '</ul>'."\n";

Pozostało jeszcze tylko zmodyfikować style CSS, tak by lista była pozioma.

#catcloud li {
 float:left
}

#catcloud li a {
 display:block;
 padding-right:4px
}

Wygląda to np. tak:

przykład tag cloud

Jeśli chcesz mieć na swoim WordPressowym blogu tagi w stylu, jak to się teraz mówi? Web 3.0 chyba i idąc dalej w duchu 3.0 powinienem napisać hat trick accessibility.

Tak czy inaczej polecam ten plugin do WordPressa z moimi drobnymi, aczkolwiek ważnymi poprawkami w kwestii dostępności.

IE7 - CSS hacks

Czy Internet Explorer 7 też będzie technologicznym troglodytą jak jego poprzednicy?

Na blogu Internet Explorera w wątku Call to action developerzy IE proszą, by nie używać hacków w kodzie CSS, a istniejące już arkusze stylów wyczyścić z konstrukcji typu * html i zamiast nich użyć komentarzy warunkowych [if IE]

Co w sytuacji kiedy zrobiony przez nas projekt poszedł już w świat a użyliśmy np. tych hacków?

Na szczęście narazie nic niespodziewanego z IE7 Beta się nie dzieje o czym możemy przeczytać na blogu Erica Meyera. Nie wiadomo co będzie w wersji finalnej IE7. Beta ignoruje te hacki, ale developerzy IE z jakiegoś powodu proszą o wyczyszczenie styli.

Dlaczego tą notkę zacząłem od retorycznego pytania czy IE7 będzie technologicznym troglodytą jak jego poprzednicy? Bo będzie. Gdyby developerzy z IE potrafili/chcieli zrobić dobrą przeglądarkę, to nie wypisywali by na swoim blogu o zamienianiu CSS hacków na komentarze warunkowe… Gdyby IE7 miał być dobrą przeglądarką to powinien ignorować te hacki, tak jak robią to nowoczesne przeglądarki np. Firefox.

Jak widać developerzy IE7 boją się, że przeglądarka może się wysypać na tych hackach, co doskonale świadczy o jakości kodu tego programu…

Osobiście uważam, że nie ma sensu (na razie) usuwać hacków, poczekamy na oficjalną wersje IE7 i zobaczymy. Microsoft wypuścił Internet Explorery, które obsługę CSS mają spaczoną do granic możliwości, zmuszając nas do używania hacków w kodzie CSS. Teraz będzie IE7 więc rozcielmy mu dywanik (usuńmy hacki), by biedaczek sobie zębów nie połamał…

Jak to wszystko może się skończyć? Będzie należało robić trzy arkusze styli:

  1. dla przeglądarek internetowych
  2. dla programów IE5.x i 6.0
  3. dla programu IE7

Developerzy IE nie widzą w tym nic dziwnego. Więc w czym problem?…

  • Wednesday, 19 October 2005
  • 4,209 views
  • no responses

Animacja CSS

Lampy zlikwidowane. W najbliższym czasie ta ciężka jak Titanic animacja wykonana w CSS trafi do CSS Demo.

Myślę, że obecny styl jest zdecydowanie lepszy. Może nie ma takich bajerów jak zaświecające się lampy, ale napewno jest lżejszy i czytelniejszy.

Gecko vs. Presto

Kilka osób mówiło mi, że moja animacja zrobiona w CSS podczas przewijania przycina całą stronę. Problem występuje tylko w Gecko. Ja na codzień używam Fx i nie mam żadnych problemów z przycinaniem się strony.

Dziś zmieniając ustawienia Serwera X, przypadkowo znalazłem rozwiązanie problemu. Wybrałem sterownik nv, oczywiście nie po to by go używać, tylko zobaczyć jaka jest różnica w glxgears.

Coś mnie tknęło i odpaliłem moją stronę i … zonk. Rwie jak diabli, nie da się przewijać. Problem ten występuje tylko w Gecko i KHTML, choć ten drugi zdecydowanie lepiej sobie z tym radzi. Jedynie Opera 8.01 bez problemu sobie radzi z tak dużą ilością zafiksowanej grafiki na tak marnym sterowniku jak nv.

To jak słaby jest sterownik karty graficznej, chyba nie usprawiedliwia Gecko do zacinania się na mojej stronie? Bo na czerwonego smoka na tym sterowniku w tym momencie działa mega ociężałe KDE i jakoś działa płynnie!

Chyba za bardzo się rozpędziłęm zachwalając Opere… Dostałem screeny z windowsowej Opery 8.02 i powiedzmy delikatnie. Jest źle.

To chyba jedyna znana mi przeglądarka, która w tej samej wersji w zależności od platformy inaczej reaguje na CSS. No cóż, wygląda na to, że Opera Software na drugim planie ma użytkowników popularnego systemu operacyjnego. Tak czy inaczej w wersji linuksowej jest wszystko w porządku.