HTML5 & CSS3

Hitch – sposób na poszerzenie możliwości CSS

Nowe trendy w projektowaniu stron internetowych (czy generalnie interfejsów sieciowych) sprawiają twórcom stron co raz więcej problemów. Niestety nie zawsze technologia jest po naszej stronie. Wprawdzie W3C sukcesywnie poszerza możliwości kaskadowych arkuszy stylów, ale niestety to nie zawsze wystarcza. Dlatego często pomagamy sobie różnymi sztuczkami, a ostatnio popularne stały się preprocesory CSS, o których również na łamach webroad pisaliśmy. Dzisiaj chciałbym Wam przedstawić Hitch, który jest prollyfill’em napisanym w JavaScript. Hitch pozwala poszerzyć możliwości arkusza stylów i usprawnić jego pisanie, a więc osiągamy te same cele co w przypadku bardziej znanych preprocesorów.

O tym co stało za stworzeniem Hitch i czym w skrócie on jest możecie się dowiedzieć dzięki zamieszczonemu poniżej filmikowi. Jeśli nie chcecie go teraz oglądać to zapraszam do czytania dalszej części artykułu.

Czym jest Hitch?

Jak już wspomniałem Hitch jest prollyfill’em poszerzającym możliwości naszego arkusza stylów. Mówiąc prościej tłumaczy on przeglądarce jak robić rzeczy, których normalnie CSS nie potrafi robić :) Jak twierdzi autor dzięki Hitch będziesz mógł żyć przyszłością, a nie o niej marzyć. Brzmi kusząco, więc warto sprawdzić, czy to prawda.

Dodawanie Hitch

Hitch dodajemy do naszej strony w wyjątkowo prosty sposób. Najpierw linkujemy do naszego dokumentu skrypt:

<script type="text/javascript" src="https://www.hitchjs.com/dist/hitch-0.6.1.min.js"></script>

Następnie pożądanemu linkowi do arkusza stylów bądź tagom <style></style> dodajemy data atrybut data-hitch-interpret.

<style type="text/css" data-hitch-interpret>
// tutaj CSS
</style>

W tym momencie możemy korzystać z tego co Hitch nam domyślnie zapewnia. Na te podstawowe możliwości składają się:

1. @ Rules

@-hitch-requires

Tak właściwie to robią one mniej więcej to samo co znany z CSS @import, ale dotyczą importowania dodatkowych zasobów Hitch. O tym czym one są napiszemy później.

@-hitch-requires  package:bkardell.math/1;

@-hitch-const

W tym przypadku Hitch wykorzystuje @-hitch-const aby zamienić podany tekst na inny. Każdy kto miał do czynienia z preprocesorami zna schemat tego mechanizmu. Dzięki niemu możemy ustalić sobie np. paletę kolorów, którą będziemy z łatwością mogli wykorzystywać w całym arkuszu stylów bez konieczności przepisywania i powtarzania deklaracji albo sztucznego „zapychania” HTML’u klasami. Z pewnością nasz CSS stanie się bardziej suchy (DRY) i bardziej przejrzysty.

@-hitch-const baseColor #000;
@-hitch-const secondaryColor #fff;
@-hitch-const specialColor #e1e1e1;

@-hitch-beta

To chyba jedna z najfajniejszych zastosowań Hitch. W końcu wszystkie prefixy zapiszemy używając jedynie -hitch-beta. W ten sposób możecie też zastępować prefixy dla selektorów poziomu czwartego, które w prefixowanej formie pojawiają się już w niektórych przeglądarkach.

-hitch-args

Dokumentacja podaje następujący przykład jako opis tej funkcjonalności:

@-hitch-const -tab  .tabcontainer .tabpanel:nth-child(:-hitch-args);

-tab(1){ background-color: red; }
-tab(2){ background-color: white; }
-tab(3){ background-color: blue; }

Co zamienia się na:

.tabcontainer .tabpanel:nth-child(1){background-color: red;}
.tabcontainer .tabpanel:nth-child(2){background-color: white;}
.tabcontainer .tabpanel:nth-child(3){background-color: blue;}

To rozwiązanie może być używane jedynie z @-hitch-const.

2. Pseudoselektory

Kolejnym sposobem na wykorzystanie Hitch jest użycie dostarczanych bez bibliotekę pseudoselektorów. Tych logicznych mamy ich cztery, a ich funkcja sprowadza się do wprowadzenia do naszego CSS pewnych podstawowych operacji logicznych.

:-hitch-anyof – wyszukuje, którekolwiek elementy pasujące do selektora
:-hitch-allof – wszyukuje wszystkie elementy pasujące do selektora
:-hitch-oneof – wyszukuje elementy dokładnie pasujące do selektora
:-hitch-noneof – wyszukuje elementy nie pasujące do selektora

Nie ulega wątpliwości, że nawet na przy możliwościach selektorów CSS trzeciego poziomu tego typu funkcjonalność jest dużym udogodnieniem szczególnie na stronach z dużą ilością skomplikowanego kodu znaczników lub takich gdzie wiele razy powtarzają się podobne do siebie kombinacje klas i znaczników, które chcielibyśmy inaczej stylować w zależności od kontekstu w jakim się pojawiają.

Hitch udostępnia też jeden pseudoselektor strukturalny, a jest nim :-hitch-has Wprowadza on możliwość wybierania rodziców jakiegoś elementu. Możemy np. wybrać wszystkie div’y zawierające paragrafy o klasie .rozowy-tekst i (przykładowo) odpowiednio dostosować tło tych div’ów tak aby pasowało do naszej różowej czcionki… Prawda że „sweetaśnie”? :)

3. Modyfikowanie HTML

Dzięki Hitch możemy też modyfikować kod HTML. Są specjalne rozszerzenie do biblioteki, które umożliwiają np. dodawanie do naszej strony guzików social media lub paypal’a przy użyciu kilku predefiniowanych data-atrybutów. Te rozszerzenia mają własne dokumentacje i są hostowane na CDN. Można je zobaczyć na stronie repozytorium w zakładce „HTML”.

Na razie istnieją trzy, ale myślę, że jeśli Hitch zdobędzie szersze zainteresowanie szybko pojawią się nowe.

Rozszerzenia Hitch

Oprócz rozszerzeń umożliwiających zabawę z HTML’em na naszej stronie. Ukazały się również rozszerzenia dodające nowe selektory. Nie będziemy ich wszystkich opisywać bo są dobrze udokumentowane i wszystko możecie sobie sprawdzić na stronie repozytorium.

Główną zaletą tych dodatków (oczywiście) jest to, że jeszcze bardziej poszerzają możliwości biblioteki dając nam do rąk nowe narzędzia np. filtry matematyczne albo filtry tekstowe.

Podsumowanie

Myślę, że Hitch jest ciekawą alternatywą dla innych preprocesorów. Liczę, że w przyszłości pojawi się społeczność chcąca rozwijać tę bibliotekę i dzięki temu Hitch rozwinie się w zaawansowany i w pełni funkcjonalny preprocesor dla CSS. Istnienie wspomnianych rozszerzeń już świadczy o tym, że pojawiły się osoby chcące wspomóc projekt.

Zresztą możecie stać się jednymi z nich bo Hitch umożliwia pisanie własnych „hitch’y”. :)

komentarzy 5

  • Awatar
    Marcin Jagielnicki

    21 sierpnia 2013 10:13

    Czyli Hitch działa bezpośrednio u klienta. Wolę LESS jest zdecydowanie bardziej optymalny jeżeli posiadamy duże arkusze stylów.

    Odpowiedz
    • Awatar
      Mr.Mr

      21 sierpnia 2013 10:56

      W tym momencie Hitch jest raczej ciekawostką. Realnie może się przydać przy średnich/małych projektach jeśli potrzebujemy rozszerzyć trochę możliwości CSS lub gdy mamy w nich bardziej skomplikowaną strukturę HTML.

      Natomiast możliwe, żę rozwinie się w coś znacznie większego.

      Zobaczymy :P

      Odpowiedz
  • Awatar
    Stefan

    21 sierpnia 2013 13:37

    „Hitch udostępnia też jeden pseudoselektor strukturalny, a jest nim :-hitch-has Wprowadza on możliwość wybierania rodziców jakiegoś elementu. Możemy np. wybrać wszystkie div’y zawierające paragrafy o klasie .rozowy-tekst i (przykładowo) odpowiednio dostosować tło tych div’ów tak aby pasowało do naszej różowej czcionki… Prawda że „sweetaśnie”? :)”

    Możliwości mogą być ciekawe, ale stosowanie JS-a do stylowania to kolejny przejaw „javaskryptyzacji” wszystkiego co się tylko da – bo można. Ja nie przepadam za tym trendem.

    1. Mielenie pliku CSS po stronie klienta, co zajmie sporo czasu i mocy
    2. Czy to się będzie wykonywać w kółko przy każdym przeładowaniu strony ?
    3. Co się stanie gdy wyłączymy JS ? Zniknie pół strony ?

    Nie zmieniajmy naszych CSS-ów w skrypty…

    Odpowiedz
    • Awatar
      Mr.Mr

      21 sierpnia 2013 14:41

      JavaScript jest wszędzie i raczej nie ma od tego odwrotu :)

      Odpowiedz
    • Awatar
      Maciej Szpakowski

      21 sierpnia 2013 14:54

      „Co się stanie gdy wyłączymy JS ? Zniknie pół strony ?”
      Pokaże się komunikat że strona wymaga JS :)

      W pełni się z tobą zgadzam, ale uważam że strony potrzebują javascript-u(ale nie do stylowania) i że to jest przyszłość!

      Odpowiedz

Zostaw odpowiedź