Nowe technologie, a z mojego punktu widzenia zwłaszcza HTML 5 z CSS 3 znane są z niesamowitych możliwości i mnóstwa fajerwerków upraszczających pracę front-endowców. Jako że są to dla mnie dalej dziewicze tematy, a dziewicze tematy najlepiej zaczynać od podstaw przyjrzałam się bliżej wprowadzonym selektorom w CSSie. Ku mojemu zdziwieniu jeden z nich, :target z łatwością może zastąpić pewne proste operacje, które do tej pory wykonywane były za pomocą języka JavaScript. Mianowicie chodzi o onclick.

Oczywiście CSS jako taki nie nadaje się do niczego więcej niż pewne nieskomplikowane przekształcenia, nie ma bowiem możliwości nawet prostego języka programowania, wszak służy do odpowiedniej prezentacji treści, a przynajmniej było to jedno z założeń jego twórców. Jednakże sama możliwość uzyskania efektu onclick w czystym HTMLu i CSSie bez mieszania do tego dodatkowego języka jest sporym krokiem w przód. Inną zaletą jest oczywiście działanie przy wyłączonym JS.

Co :target robi? Wykrywa, na podstawie adresu (dokładniej anchora) do którego elementu w drzewie DOM powinien się odnieść. Wykrywanie następuje na podstawie id elementu, który musi być taki sam jak anchor. Ogólnie cały mechanizm opiera się na standardowym linkowaniu wewnątrz jednej podstrony HTML. Mamy więc gdzieś w dokumencie zarówno link jak i element, do którego link się odnosi:

<a href="#moj-element">Link do # moj-element</a>
<!-- dużo innego kodu -->
<div id="moj-element">Tutaj tekst.</div>

CSS natomiast dzięki swojemu targetowi jest w stanie określić, który z elementów jest aktualnie aktywny i oczywiście ostylować go według zadanych mu reguł.

Można więc poeksperymentować i zbadać dalsze możliwości. Poniższe przykłady jednakże ze względu na sporą jeszcze niekompatybilność i display: none nie nadają się do wielu zastosowań i są raczej zajawką możliwości.

Stronicowanie długich treści

Niekiedy artykuły publikowane w internecie są długie i ze względu na użyteczność powinny być stronicowane. Standardowo wykonuje się to albo po stronie serwera, z przeładowaniem stron przy przejściu pomiędzy kolejnymi podstronami, albo ajaxem, dzięki dynamicznemu dociąganiu dalszej treści.
Ja pozwoliłam sobie przenieść to na czysty HTML+CSS.

Kod strony:

<section>
  <header>Bardzo fajny artykuł</header>
  <article>
    <section id="article-1">
      Tekst 1
      <br>
      <a href="#article-2">czytaj dalej</a>
    </section>
    <section id="article-2">
     Tekst 2
      <br>
      <a href="#article-3">czytaj dalej</a>
    </section>
    <section id="article-3">
      Tekst 3
      <br>
      <a href="#article-4">czytaj dalej</a>
    </section>
    <section id="article-4">
     Tekst 4
    </section>
  </article>
  <div class="pager">
    <ul>
      <li><a href="#article-1">1</a></li>
      <li><a href="#article-2">2</a></li>
      <li><a href="#article-3">3</a></li>
      <li><a href="#article-4">4</a></li>
    </ul>
  </div>
</section>

Style:

article section {
  width: auto;
  margin: 10px 15px;
  border: 0;
  box-shadow: 0 0 0;
  border-radius: 0;
  display: none;
  text-align: justify;
}
article section:target {
  display: block;
}

Wszystko jak widać polega na odpowiednich identyfikatorach poszczególnych sekcji oraz odpowiednich adresach href w linkach. Resztę wykonuje CSS zmieniając zwyczajnie display: none nadany domyślnie na display: block.

Stronicowanie artykułu

Dynamiczne menu

Jest to bardzo prosty przykład, po zastosowaniu dodatkowych stylów, np. animujących elementy mogłoby wyjść coś naprawdę godnego uwagi pod wizualnym względem. I wszystko bez użycia JavaScript.

Kod strony:

<nav>
  <ul>
    <li><a href="#sub-1">Sekcja główna (kliknij)</a>
      <ul id="sub-1">
        <li><a href="#">Podsekcja</a></li>
        <li><a href="#sub-2">Podsekcja</a></li>
      </ul>
    </li>
    <li><a href="#">Sekcja główna</a></li>
    <li><a href="#sub-2">Sekcja główna (kliknij)</a>
      <ul id="sub-2">
        <li><a href="#">Podsekcja</a></li>
        <li><a href="#sub-2">Podsekcja</a></li>
      </ul>
    </li>
    <li><a href="#">Sekcja główna</a></li>
    <li><a href="#">Sekcja główna</a></li>
  </ul>
</nav>

Style:

ul ul {
  display: none;
}
ul:target {
  display: block;
}

Banalne - standardowa zagnieżdżona lista z menu + odpowiednie atrybuty id + odpowiednie style.

Dynamiczne menu

Wady rozwiązania

  • Lista przeglądarek obsługujących :target to dalej jednak nie wszystkie na rynku (a zwłaszcza ich starsze wersje). Mogę tylko dodać, że na IE9 mimo deklaracji W3C śmiga bez problemów.
  • Problematyczny display: none serwowany na wstępie. Problemy z użytecznością i tego typu sprawy.
  • Nadmiarowa ilość atrybutów id.
  • Nadmiarowa ilość zaciąganych danych w przykładzie z artykułem.

Zalety rozwiązania

  • Po podaniu odpowiedniego linku automatycznie przejdzie do odpowiedniej treści. Żadne dodatkowe kodowanie nie jest wymagane.
  • Nie jest wymagany włączony JS, CSS sam się wszystkim zajmie.
  • Zdecydowanie prostsze i wygodniejsze rozwiązanie niż kody JavaScriptowe.

Czy warto aktualnie inwestować w tego typu technologie? Przy ważnej funkcjonalności należy się jeszcze wstrzymać, jeśli jednak brak obsługi :target nie wpłynie na kluczowe elementy serwisu myślę że warto poeksperymentować i zapoznać się z ciekawymi możliwościami.

Komentarze

  • CSS obsługuje zdarzenie onclick od dawna - grubo wcześniej zanim pojawił się CSS3. A mianowicie - umożliwia klikanie odsyłaczy i stylowanie ich pseudoklas :focus i :active. Wykorzystując to można powiększać obrazki, tworzyć galerie obrazków, odkrywać bloki z tekstami i obrazkami - wszystko klikaniem, a nie tylko przez najeżdżanie kursorem. Powtarzam - to jest możliwe od dawna. Tyle że nie było popularne. A ponadto tę sielankę zepsuł Webkit, który w przeglądarce Google Chrome (i chyba także Safari - nie sprawdzałem) obsługuje pseudoklasy :focus i :active zupełnie inaczej niż inne przeglądarki. Otóż Webkit za pośrednictwem pseudoklas :focus i :active zmienia styl odsyłacza tylko na ułamek sekundy, a nie aż do czasu kliknięcia innego odsyłacza na stronie. Z kolei Webkit chyba od początku powstania obsługuje pseudoklasę :target. Zatem teoretycznie można byłoby połączyć wszystko w jedno - style klikanych odsyłaczy oprzeć na :focus i :active dla IE, a na :target dla innych przeglądarek. Ba - nie wszystkie inne przeglądarki obsługują CSS3, w tym :target. Jednak za parę lat Lightbox bez JavaScriptu, bo przy pomocy :target, może stać się normą, zwłaszcza że IE9 obsługuje :target.

  • Zdecydowanie nie udało mi się spotkać z tak zaawansowanymi przykładami. Jednakże z tego co przeczytałam wygląda to na ciekawe rozwiązanie i zdecydowanie warto więcej na ten ten temat poszukać.
    Z wymienionymi pseudoklasami zapoznałam się już dawno, natomiast nie w tak zaawansowanym stopniu, połączenie IE i pozostałych przeglądarek wygląda obiecująco.
    Dziękuję za obszerne wyjaśnienie.

  • W sieci można znaleźć wiele wersji Rollovera CSS i tylko nieliczne zaawansowane przykłady obsługi kliknięć przez CSS wykorzystujące co najwyżej :target, który przecież nie działa w Internet Explorerze do wersji 8 włącznie. Dlatego sam stworzyłem rozwiązania, o których wspomniałem w poprzednim wpisie. Mogłem je niedawno ukończyć, bo dopiero niedawno znalazłem wreszcie hack dla styli odczytywany tylko przez WebKit (czyli Google Chrome i Safari). Całość jest dostępna pod linkiem http://www.anderszewski.eu/interactive_links.htm

Dodaj komentarz