Kiedyś słowo "hack" w aspekcie CSS kojarzyło się raczej z kombinowaniem i męczarniami, aby strona wyglądała na wszystkich przeglądarkach tak samo, również na wszystkich wersjach IE. Obecnie na całe szczęście słowo zyskało przyjemniejsze znaczenie. Teraz każdy lubi hacki, bo hacki rozwiązują pewne problemy w sprytny i prosty sposób. Mamy checkbox hack, mamy radio hack, mamy również inne efekty, które jeśli nie całe w sobie, to częściowo używają jakichś innych hacków. Apetyty rośnie w miarę jedzenia i chciałoby się poznać kolejny hack, skoro tak, to niech tak się stanie.
Fantastyczna trójka.
Wspomniany checkbox hack znasz. Wiesz, że używając pseudoklasy :checked można uzależniać style sąsiadów za tymże checkboxem. Pseudoklasę :hover też znasz. Zresztą ta była już znana od dawna i nic to wielkiego. Masz też wiedzę na temat używania elementów LABEL oraz INPUT/TEXTAREA, a dokładnie możliwości ich wzajemnego powiązania poprzez np. atrybuty id oraz for. Stostując takie powiązanie masz pewność, że klikając na element LABEL kontrolka uzyska fokus. A czy wiesz, że kiedy najedzisz myszą na element LABEL, to na kontrolce "wywoła się" pseudoklasa :hover? Czyli robiąc hover na LABEL mamy :hover na INPUT. Ciekawe, co? A jeszcze ciekawsze jest to, że wiążąc te dwa elementy poprzez wspomniane atrybuty wcale nie muszą znajdować się one obok siebie w strukturze DOM. Jednego możesz posadzić w Australii, drugiego w Polsce, a i tak komunikacja będzie działać z prędkością światła, niczym telepatia.
Jak to wykorzystać? Sam nie miałem pomysłu, aż do dziś. To pewnie jeden z tysiąca i jednego pomysłów. Tak więc pokażę Ci ten, a pozostałe 1000 możesz wymyślić Ty, w wolnej chwili. Skoro elementy LABEL możemy umieścić w dowolnym miejscu, to oznacza, że mogą być oddalone od checkboxów i nawet zagnieżdżone w innych elementach. Stworzymy więc z nich etykietyki do legendy. Legenda co prawda nie będzie elementem LEGEND, ale tak się składa, że LABEL będą etykietkami, w trochę innym znaczeniu niż standardowo, ale będą.
<input type="checkbox" id="s" />
<input type="checkbox" id="b" />
<input type="checkbox" id="d" />
<span class="s">a</span>
<span class="b">A</span>
<span class="s d">ą</span>
<span class="b d">Ą</span>
<span class="s">b</span>
<span class="b">B</span>
<span class="s">c</span>
<span class="b">C</span>
<span class="s d">ć</span>
<span class="b d">Ć</span>
<div>
<label for="s">małe</label>
<label for="b">wielkie</label>
<label for="d">z ogonkami</label>
</div>
+
body {
font-family: 'Shadows Into Light Two', cursive;
font-size:32px;
color:#444;
margin:20px;
}
/* ukrywamy checkboxy
*/
input[type="checkbox"] {
height: 0;
width: 0;
position: absolute;
}
/* kiedy jest :hover
na danym checkbox
to podświetlamy
odpowiadające im
elementy <span>
*/
#s:hover ~ span.s,
#b:hover ~ span.b,
#d:hover ~ span.d {
font-weight: bold;
color: #000;
}
div {
margin-top: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: #000;
}
Co to w ogóle jest?! Elementy SPAN stanowią poszczególne litery alfabetu (tutaj część). Wielkie litery mają nadaną klasę b, małe s, a te z ogonkami, literę d. Oczywiście litera może mieć kilka klas. Pod spodem literek jest element DIV, który stanowi kontener/legendę, a w nim elementy LABEL jako poszczególne etykiety legendy. Jeśli teraz najedziemy na wybraną etykietkę, to wywoła się :hover na checkboxie (swoją drogą wcale nie musi to być checkbox). Teraz stosujemy wariację checkbox hack - zamiast pseudoklasy :checked stosujemy :hover. Jeśli więc najadę myszą na etytkietę oznaczoną jako małe litery, to oznacza, że wywołam :hover na checkboxie o id="s", a to z kolei dzięki regule :hover ~ span, podświetli elementy SPAN z odpowiednią klasą.
Całość działa tak:
Można jeszcze delikatnie zmodyfikować CSS dodając do istniejącyc reguł z :hover trzy dodatkowe:
span.s:hover ~ div label[for="s"],
span.b:hover ~ div label[for="b"],
span.d:hover ~ div label[for="d"]{
}
W ten sposób po najechaniu na wybraną literę dowiemy się do jakich kategorii należy - czyli dodatkowy, odwrotny efekt do wcześniejszego.To akurat nie byłoby możliwe gdyby legenda była powyżej lub przed elementami SPAN.
Tak jak pisałem to jeden z pomysłów. Można go wykorzystywać do wykresów, diagramów. Można też powiązać elementy nawigacji na górze z strony z odpowiadającymi im elementami w stopce, czy innym miejscu, choć to trochę niesemantyczne.
Pozostańmy powiązani do następnego wpisu. Do przeczytania!