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:

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

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-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-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:

Co zamienia się na:

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”. :)