Wojciech Bednarski

Odświeżyłem nieco wygląd bloga. Dodałem kilka cieni, przeniosłem datę i link do komentarzy w bardziej domyślne miejsce czyli pod treścią. Dodałem licznik odsłon postów, który liczy od 20 czerwca tego roku.

Największe zmiany dotyczą stopki i ilości wyświetleń postów na stronie, która została zmniejszona z 10 do 3 co czyni blog bardziej czytelnym.

Dodałem tabindex do nagłówków, które są linkami do wpisów. Zatem można w bardzo prosty sposób za pomocą tabulatora “skakać” po nagłówkach ostatnich wpisów a następnie wciskając enter otrzymać pełny tekst.

Cały problem w tym, że jeśli dodamy np. tabindex="3" do nagłówka wpisu, który znajduje się w głównej pętli WordPressa to po wygenerowaniu statycznego kodu przez taką pętlę na stronie wszystkie nagłówki będą miały tabindex równy 3.

No dobra, ale czy to jest błąd? Gdy przeglądarka trafi na taką konstrukcję będzie podążać za kolejnością ich wystąpienia w kodzie. Jednak w specyfikacji WCAG 1.0 jest mowa o logicznym ponumerowaniu tabindexów. Więc kilka tabindexów o tej samej wartości wydaje się być błędęm.

By nie mieć żadnych wątpliwości, że jakiś UserAgent wykrzaczy się na tej konstrukcji można bardzo prosto ponumerować w sposób rosnący tabindexy.

Przed główną pętlą WordPressa przypisujemy wartość zmiennej odpowiedzialnej za nasz tabindex o jeden większą od poprzedniej a w miejsce wartości tabidexu przy nagłówku wypisujemy tą zmienną i zwiększamy ją o jeden.

Wygląda to mniej więcej tak:

<!-- Begin loop -->

 <?php $tabindex = 2; ?>

 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

 (…)

 <h2>
  <a href=”<?php the_permalink() ?>” tabindex=”<?php echo $tabindex++; ?>”><?php the_title(); ?></a>
 </h2>

żeby podkreślić aktualnie zaznaczony link, można użyć pseudo klasy :focus do selektora a.

To rozwiązanie oczywiście nie zadziała w Internet Explorze, ponieważ to już jest CSS2 co dla tego programu jest za trudne, myślę że nikt tu się nie zdziwił.

Opera zachowuje się co prawda lepiej niż IE, tzn. podświetla aktywne linki jednak nie pozwala na zmianę swojego zachowania przy użyciu CSS. Co więcej, gdy próbujemy ostylować a:focus ujawniamy jeden z dziwnych bagów tej przeglądarki. Pisze dziwny bug, ponieważ generalnie pseudo klasa focus w Operze działa, jednak nie w tym przypadku.

Gecko oczywiście reaguje poprawnie. Najbardziej zaskoczyła mnie przeglądarka Safari, która w ogóle nie reaguje na tabindex! Jestem tak zaskoczony, że zanim coś więcej o tym napiszę muszę ta sprawę dokładnie przestudiować.

Wracając do sprawy. Kod takiego podświetlenia, może wyglądać tak:

a:focus {
 background:#FFFF00;
 color:#000!important
}

Może żółty kolor nie pasuje najbardziej, jednaka po przeskoczeniu tabulatorem ewidentnie widać, który link jest zaznaczony.

Można też zlikwidować standardowe szare, przerywane obramowanie generowane przez przeglądarkę po przed dodanie outline:none.