Connect with us

Cześć, czego szukasz?

Internet Maker

Jakie jeszcze możliwości ma CSS?

Banalną składnię CSS-a można rozszerzyć. Zobacz jak dodać do niego zmienne i jakie frameworki przyśpieszą pracę.

„O ile łatwiejszy byłby CSS, gdyby wyposażyć go w zmienne, szablony i biblioteki, dzięki którym nie musiałbym za każdym razem pisać wszystkiego od zera” – powiedział niedawno znajomy programista, który musiał zająć się zakodowaniem arkusza stylów. Nie jest jedynym, który wpadł na taki pomysł. Niektórzy nawet zaimplementowali gotowe rozwiązania jego problemów.

Czego brakuje CSS-owi?

CSS nie posiada zmiennych takich jak w innych językach. Nie możemy na początku arkusza zdefiniować kodu typu:

kolorGlowny = #666;
kolorPomocniczy = #f00;
kolorTrzeci = #eee;

aby w dalszej części używać nazw, a w razie potrzeby zmieniać tylko pojedynczych wartości. Za każdym razem kiedy chcemy zmienić kolor z #666 na #555 musimy przeszukiwać cały dokument. Jeśli zmieniamy kolor za pomocą edytora nie jest to problemem, ale co, jeśli zmiany mają być generowane przez skrypt? Zmienne byłyby bardzo użyteczne.

Jeśli mielibyśmy zmienne, to dlaczego nie pójść dalej i nie stworzyć funkcji zwracających kod na podstawie podanych argumentów? Albo wyrażeń arytmetycznych pozwalających na ustalenie marginesu akapitu jako 1,5 wysokości zdefiniowanego jako zmienna marginesu podstawowego? Takie efekty można uzyskać korzystając z preprocesorów kodu CSS takich jak:

Preprocesory CSS

Preprocesory CSS działają na podobnej zasadzie. Analizują arkusz stylów zapisany w pliku własnego typu w poszukiwaniu rozszerzonych konstrukcji takich jak np. zmienne albo wyrażenia arytmetyczne i generują na ich podstawie poprawny plik CSS. Ma to ułatwić tworzenie i utrzymanie kodu oraz wprowadzenie zmian. Możliwości i składnia preprocesorów są podobne. Różnią się głównie wymaganiami systemowymi (np. modułem do Apache’a lub interpreterem języka skryptowego) i oczywiście implementacją.

Przyjrzyjmy się działaniu preprocesora na podstawie LESS CSS. Ma on kilka wersji napisanych m.in. w PHP, .NET i… JavaScriptcie. Ta ostatnia wersja oczywiście nie nadaje się do kodu produkcyjnego, gdyż przy każdym otwarciu strony wymaga przekształcenia kodu z wersji LESS na CSS, ale sprawdzi się do przetestowania możliwości preprocesora. Aby go uruchomić wystarczy dodać w sekcji head strony kod:

W arkuszu możemy już używać dodatkowych opcji, o ile zmienimy jego rozszerzenie na .less i zalinkujemy:

Zmienne z LESS CSS

Zmienne definiujemy tak jak w językach programowania:

@moj_kolor: #222;

Następnie możemy ich używać w kodzie:

h1 {color: @moj_kolor }; //h1 {color: #222 };

Na zmiennych możemy przeprowadzać wyrażenia arytmetyczne.

h2 {color: @moj_kolor * 2 }; //h2 {color: #444 };

Jeśli zmienne to za mało, w ten sam sposób możemy skorzystać z klas mieszanych (mixins). Definiujemy całą klasę wraz z domyślną wartością argumentu:

.zaokrąglone_rogi (@promien: 5px) {
 -moz-border-radius: @promien;
 -webkit-border-radius: @promien;
 border-radius: @promien;
}

Za każdym razem kiedy w arkuszu pojawi się kod {html}.zaokrąglone_rogi;{/html} preprocesor przekształci go na kod:

-moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;

Argument domyślny możemy zmienić za pomocą kodu {html}.zaokrąglone_rogi (@promien: wartość);{/html}. Zmienne @promien zostaną zastąpione wartością podanego argumentu.

Zagnieżdżenia kodu

Możemy również zmienić strukturę arkusza, żeby odpowiadała logicznej strukturze serwisu. Zamiast pisać:

#header { 
 color: red
}
#header a { 
 font-weight: bold;
 text-decoration: none;
}

Możemy użyć łatwiejszej do uporządkowania konstrukcji:

#header {
 color: red;
 a {
  font-weight: bold;
  text-decoration: none;
 }
}

Ponadto taki zapis pozwala stosować zmienne lokalne (rozpatrywane tylko w zasięgu klamerek) i globalne. Style mogą być wielokrotnie zagnieżdżone. Więcej przykładów znajduje się w dokumentacji ({html}http://lesscss.org/docs{/html}).

Frameworki CSS

Kolejną po braku zmiennych niedogodnością CSS-a jest nieobecność frameworków znanych z języków programowania. Ruby ma swoje Rails, JavaScript – jQuery, a PHP – Zend. Okazuje się jednak, że również koderzy CSS-a stworzyli własne {link_wew 4689}frameworki{/link_wew}, w dodatku jest ich całkiem sporo jak na tak prosty język jak CSS.

Frameworki CSS mogą być przydatne do szybkiego złożenia szablonu strony, gdyż dostarczają klasy do najczęściej stosowanych elementów takich jak układ dwukolumnowy, stopka na szerokość całej strony czy lightbox. Niestety większość pobranego kodu będzie nigdy nieużywana, a wprowadzenie zmian wymusza zagłębianie się w zoptymalizowany pod względem rozmiaru a nie czytelności kod, co nie jest ani proste, ani przyjemne.

Innym wyjściem może być skorzystanie tylko z fragmentów frameworka, np. pliku ujednolicającego typografię z Blueprint ({html}http://www.blueprintcss.org/blueprint/src/typography.css {/html}).

A może wystarczy reset stylów?

Prawie wszystkie frameworki CSS wyposażone są ponadto w tzw. reset stylów. Przeglądarki różnią się domyślnymi stylami (marginesami, ramkami, rozmiarami i wagą fontu oraz złamaniem linii) przypisanymi niektórym elementom. Np. w IE8 i Firefoksie domyślny margines formularza (form) ma wartość „0”, w Operze i Safari „0 0 1em”, a w IE7 „14.25pt 0”. Inne różnice przedstawia tabela http://lists.w3.org/Archives/Public/www-style/2008Jul/att-0124/defaultstyles.htm.

Żeby strona wyglądała tak samo pod wszystkimi przeglądarkami można zacząć arkusz od ustawień ujednolicających indywidualne wartości atrybutów różnych przeglądarek. To tzw. reset stylów. Można go dokonać „masowo” za pomocą wpisu {html}*{margin:0;padding:0;border:0 none;font-size:100%;line-height:1;font-weight:400;}{/html} albo bardziej złożonych arkuszy uwzględniających wyłącznie zmieniane elementy. Popularne zestawy reguł resetujących style:

Niestety reset ma wady: wyzerowane wartości trzeba ponownie ustawić dla każdego elementu (przez co rozmiar pliku rośnie) a zastosowanie selektora uniwersalnego może wprowadzić nieoczekiwane konsekwencje (np. wyzeruje również pseudoklasę :focus) i powodować opóźnienia ze względu na złożoność obliczeniową wyrednerowania takiej strony.

Do resetowania stylów, frameworków i preprocesorów należy więc podejść ostrożnie, ale warto mieć świadomość istnienia różnic w działaniu przeglądarek i sposobów ich naprawy, możliwości dodania zmiennych czy faktu, że ktoś już napisał kod do takiego szablonu jakiego potrzebujemy.

Freelancer związa­ny z mediami od 2007 roku. Opublikował do tej pory ­ponad 500 artykułów m.in. dla Magazynu T3, Gazety Wyborczej, Onetu czy Nexta. Jako bloger pomaga przy projektowa­niu i wdroże­niach serwisów internetowych. Jest prezesem zarządu Stowarzyszenia FreelanCity.org.

Może cię też zainteresować

Publikacje

Zaprojektowanie i wykonanie nowej strony z pozoru nie jest sprawą prostą, a opanowanie wiedzy potrzebnej do jej stworzenia może być bardzo czasochłonne. Co jednak powiedzielibyście, gdyby była możliwość zbudowania firmowego portalu...

Internet Maker

Dziś stworzymy galerię zdjęć z opcją zoom po kliknięciu. Dodamy także przycisk do zamknięcia grafiki po tym, jak zostanie ona powiększona. I najlepsze- wszystko to wykonamy tylko przy użyciu CSS.

Internet Maker

W poniższym tutorialu będziemy ustalać style dla bloków tekstowych oraz buttonów przy tworzeniu ciekawych formularzy do wyszukiwania.

Internet Maker

Artykuł ten przedstawi użyteczne a zarazem darmowe narzędzie przydatne w pracy każdej osobie zajmującej się Webdesignem. Stworzone przez Leę Verou, które powinno pomóc uwolnić się od męczących prefiksów...