Wróćmy jednak na chwilę do pracy. Porównując to co aktualnie robię z tym czym zajmowałem się na etacie mogę śmiało powiedzieć, że różnica poziomów jest fenomenalna. O ile w poprzedniej pracy nauczyłem się naprawdę dużo, to jako freelancer pochłaniam wiedzę dużo szybciej. W kolejnych kilku artykułach chciałbym napisać jak przebiega mój standardowy dzień oraz jakich używam narzędzi oraz technik aby usprawnić swoją pracę. Temat na dzisiaj to kompilator CSS.

Czym jest kompilator CSS?

Kompilatory CSS to proste programy wprowadzające różnego rodzaju ulepszenia do języka arkuszy stylów. Dodają one nowe elementy do CSS, które po procesie kompilacji są zamieniane na zwykłe reguły rozumiane przez przeglądarki internetowe.

Prosty przykład:

Najbardziej przydatnym elementem wszystkich kompilatorów jest zagnieżdżanie reguł. Dzięki temu wizualnie widzimy, który element znajduje się wewnątrz innego.

#element{
    font-size: 16px;
    strong{ color: red; }
    em{ color: blue; }
}

W tym przypadku posiadamy element o id #element który może posiadać wewnątrz siebie elementy strong i em. Kod ten zostanie przekompilowany do postaci:

#element{
    font-size: 16px;
}
 
#element strong{
    color: red;
}
 
#element em{
    color: blue;
}

Dlaczego warto?

Przede wszystkim skraca się czas tworzenia strony, a w przypadku jej przyszłej modyfikacji praca nad arkuszem jest dużo prostsza. Podczas tworzenia małych stronek się tego nie odczuwa jednak przy większych projektach moim zdaniem kompilator CSS jest niezbędny. Aktualnie tworzę szablony do WordPressa i klienci często chcą aby dodać im jakąś funkcjonalność albo zgłaszają problemy kompatybilności szablonu z różnymi egzotycznymi wtyczkami(często pojawiają się konflikty CSS). W przypadku odpowiedniego kompilatora zarządzanie tym wszystkim nawet po upływie miesiąca jest dużo prostsze. Co więcej, kompilatory często zgłaszają błędy składni, niektóre wymagają idealnego porządku(np. średnika na końcu każdej reguły), udostępniają kompresowanie kodu i dużo, dużo więcej.

Dostępne rozwiązania

Kompilatorów CSS jest na prawdę sporo. Ja ograniczę się do czterech najbardziej popularnych. Praktycznie wszystkie spośród przedstawionych przeze mnie aplikacji udostępniają podstawowe funkcje kompilatora CSS np:

• Zagnieżdżanie elementów
• Zmienne(w tym możliwość użycia zmiennych do nazw parametrów)
• Operacje arytmetyczne
• Obsługa importowania
• Mieszanie reguł
• Wiele wbudowanych funkcji np. zaogkrąglanie liczb, rozjaśnianie kolorów, czy zmiana koloru na szary odpowiednik

Oczywiście różne kompilatory obsługują wymienione opcje w różnym stopniu. Pozostawiam to wam do dokładniejszego przetestowania.

Sass

Mój faworyt. Lekki, napisany w Ruby kompilator działający w czasie rzeczywistym.

Dodatkowo obsługiwane opcje:

• Instrukcje sterujące: @if, @while, @for oraz @each
• Tryb interaktywny
• Praca w czasie rzeczywistym
• Dwa rodzaje składni: klasyczna, kompatybilna z CSS oraz oparta na wcięciach(podobna jak w plikach YAML, Pythonie lub Ruby)
• Wsparcie dla Eclipse oraz NetBeans(poprzez nieoficjalne wtyczki)

Strona projektu: http://sass-lang.com

Less

Bardzo potężny kompilator napisany w JavaScript. Jego ogromnym atutem jest działanie na dwóch płaszczyznach — po stronie klienta oraz po stronie serwera. Pierwsze rozwiązanie możemy zastosować podczas pracy nad stroną, drugie aby skompilować ostateczny plik i umieścić na serwerze.

Ciekawe opcje:

• Podwójny tryb pracy: po stronie klienta oraz poprzez konsolę
• Przestrzenie nazw
• Bardzo fajna składnia CSS-podobna
• Możliwość umieszczania kodu JavaScript wewnątrz arkusza stylów
• Bardzo fajna dokumentacja

Strona projektu: http://lesscss.org

CleverCSS

Trzeci na mojej osobistej liście. Lekki, napisany w Pythonie(lub w Haskellu). Posiada podstawową funkcjonalność i obsługuje tylko składnię opartą na wcięciach.

Przykład użycia:

#main p:
  font->
    family: Verdana, sans-serif
    size: 1.1em
    style: italic

#main p {
    font-family: Verdana, sans-serif;
    font-size: 1.1em;
    font-style: italic;
}

CleverCSS w Pyhonie: http://sandbox.pocoo.org/clevercss/

CleverCSS w Haskellu: http://sandbox.pocoo.org/clevercss-hs/

Hss

Ostatni komplator umieszczam ze względu na sentyment do niego(oraz referer ale o tym za chwilę). Był on pierwszym kompilatorem, którego używałem i ze względu na jego prostotę jest ciekawym rozwiązaniem na początek. Jest to francuska produkcja na potrzeby firmy Motion-Twin(jeżeli ktoś zajmuje się programowaniem gier to zapewne ich zna) — firmy, która stworzyła bardzo przyjemną grę typu „Arkanoid“ — Alpha Bounce (Jeżeli chcesz się zarejestrować możesz podać mój nick jako referer — „Hellson“).

Niestety HSS jest bardzo sztywnym kompilatorem. Jego jedynym plusem jest wsparcie dla tzw. „CSS hacks“. Wpisując np. opacity: 0.6 kompilator sam doda odpowiednie filtry dla IE. Oczywiście nie zawsze jest to plus. Wiele osób(w tym ja) stara się tworzyć czyste pliki css a wszelkiego rodzaju sztuczki dla IE umieszczać w oddzielnych plikach.

Strona projektu: http://ncannasse.fr/projects/hss

W następnym artykule postaram się zaprezentować kilka najważniejszych elementów kompilatora SASS. Jeżeli jednak to was nie interesuje(np. jeżeli wolicie sami poczytać dokumentację), to proszę piszcie. Zajmę się wtedy artykułem na temat kolejnych ciekawych elementów mojej codziennej pracy.

Klasycznym przykładem jest menu oparte o grafikę. Zawsze jest problem ze zdarzeniem najechania myszki. Podczas pierwszego najechania grafika musi się załadować co powoduje opóźnienie zmiany tła.

Przykład

Programiści różnie sobie z tym radzą, często w bardzo dziwny sposób(np. tworząc preloadery w JavaScript). Rozwiązanie jest dużo, dużo prostsze.

Tworzymy Sprite

Pierwszym krokiem jest stworzenie grafiki zawierającej wszystkie elementy.

Zamiast operować na kilku plikach modyfikujemy położenie tła.

#menu li{
    background: #491312 url('images/menu.png');
}
 
#menu li:hover{
    background: #820403 url('images/menu.png');
    background-position:0px 35px;
}
 
#menu li.active{
    background: #261f1f url('images/menu.png');
    background-position:200px 0px;
}
 
#menu li.active:hover{
    background: #000 url('images/menu.png');
    background-position:200px 35px;
}

Zobacz efekt

Poza widocznym gołem okien usprawnieniem menu, dodatkowo odciążyliśmy serwer. Pierwsza wersja strony generowała aż 4 zapytania do serwera, druga tylko jedno. W prostych projektach jest to mało ważne, lecz w przypadku np. google.com jest to ogromny wyciek transferu. Sprawdzaliście kiedyś kod html google.com i ilość odwołań strony głównej do oddzielnych plików? Grafika w google.com jest upchana do 2 plików. Pierwszym jest logo, drugim zestaw ikon przycisków itp. Wygląda to tak.

W jakich sytuacjach używać sprite’ów? Zdecydowanie gdy mamy do czynienia z ikonami oraz drobnymi elementami wyglądu strony. Nie ma sensu łączyć dużych grafik lub zdjęć.

Składnia jest bardzo prosta:

border-radius: promień zaokrąglenia;

Przykład:

border-radius: 20px;

Oczywiście możemy zdefiniować różne wartości dla poszczególnych narożników:

border-radius: przekątna-od-górnego-lewego przekątna-od-górnego-prawego;

border-radius: 20px 0px;

Przykład 2:

border-radius: góra-lewy góra-prawy dół-prawy dół-lewy;

border-radius: 5px 20px 0px 50px;

Możemy również określić stopień zaokrąglenia pionowego i poziomego każdego z narożników. Trzeba jednak użyć do tego standardowej nazwy parametrów dla kazdego z narożników tj. border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius. Każdy z tych parametrów posiada 2 opcje — promień poziomy oraz promień pionowy.

Przykład:

border-top-left-radius: 50px 20px;

Obsługa w różnych przeglądarkach

Niestety składnia nie jest ujednolicona. W przypadku przeglądarek opartych o silnik WebKit wystarczy dodać –webkit– na początku kazdego z parametrów, dla firefoxa są to:

• –moz-border-radius,
• –moz-border-radius-topleft,
• –moz-border-radius-topright,
• –moz-border-radius-bottomleft,
• –moz-border-radius-bottomright

Opera nie obsługuje zaokrągleń lecz można użyć SVG do emulacji tego efektu(pamiętajmy jednak, że nie będzie on posiadał tych samych właściwości).

background:  silver url("border.svg");
-webkit-border-radius: 1em;
-moz-border-radius: 1em; border-radius: 1em;

Plik border.svg

<rect fill="white"  x="0" y="0" width="100%" height="100%" />
<rect fill="silver"  x="0" y="0" width="100%" height="100%" rx="1em"/>

O formacie SVG jednak napiszę kilka oddzielnych notek ponieważ technologia ta bardzo mi się podoba a jest pomijana w artykułach oraz pracach tworzonych przez współczesnych programistów stron internetowych.

1

box-shadow: przesuniecie-poziome przesuniecie-pionowe promien-rozmycia zasieg kolor inset

Niestety parametr ten obsługują jedynie przeglądarki w oparciu o silnik gecko(Firefox 3.5) oraz WebKit(Safari, Chrome):

Przykład zastosowania:

1
2

box-shadow: 5px 10px 10px 5px #bbb;
-moz-box-shadow: 5px 10px 10px 5px #bbb;

Lorem ipsum dolor sit amet

Zasięg możemy również określić jako ujemny co spowoduje kurczenie się cienia.

1
2

box-shadow: 15px 20px 10px -10px #bbb;
-moz-box-shadow: 15px 20px 10px -10px #bbb;

Lorem ipsum dolor sit amet

Umyślnie pominąłem deklaracje dla silnika WebKit ponieważ nie uwzględnia on zasięgu i cień byłby po prostu niewidoczny. Zalecam więc użycie wersji z 4 parametrami.

1
2
3

box-shadow: 5px 5px 10px #ccc;
-moz-box-shadow: 5px 5px 10px #ccc;
-webkit-box-shadow: 5px 5px 10px #ccc;

Lorem ipsum dolor sit amet

Zastosowanie cieni bez efektu rozmycia:

1
2
3

box-shadow: -5px -5px 0px #ccc;
-moz-box-shadow: -5px -5px 0px #ccc;
-webkit-box-shadow: -5px -5px 0px #ccc;

Lorem ipsum dolor sit amet

Cień wewnętrzny:

Słowo kluczowe inset(uwaga w szkicu W3C jest zapytanie o zmianę nazwy na inner) zmienia zachowanie cienia. Po jego zastosowaniu cień będzie wewnątrz boksu a nie na zewnątrz.

Niestety inset działa jedynie w przeglądarce FireFox 3.5.

1
2
3

background:#ddd;
box-shadow: 5px 5px 10px #fff inset;
-moz-box-shadow: 5px 5px 10px #fff inset;

Lorem ipsum dolor sit amet

Cienie wielokrotne

Dla każdego elementu możemy określić kilka róznych cieni. Odzielamy je przecinkami.

1
2
3

box-shadow: -5px -5px 0px #ccc, 5px 5px 10px #000;
-moz-box-shadow: -5px -5px 0px #ccc, 5px 5px 10px #000;
-webkit-box-shadow: -5px -5px 0px #ccc, 5px 5px 10px #000;

Lorem ipsum dolor sit amet

text-shadow

Aby dodać cień do naszego tekstu wystarczy zdefiniować jego właściwości za pomocą text-shadow.

1

text-shadow: przesuniecie-poziome przesuniecie-pionowe rozmycie kolor;

Przykład użycia

1
2

font-size:14px;
text-shadow: -10px 5px 2px #f00;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et nunc id erat tempus iaculis. Phasellus congue nunc quis nibh congue rutrum sit amet eu velit. Etiam non ligula convallis tortor scelerisque consectetur at nec nunc. Integer eu purus odio, ac placerat erat

Przy umiejętnym zastosowaniu efekty mogą być zadziwiające. Można np. ustawiając wysokie rozmycie zemulować efekt podświetlanego tła.

1
2
3
4

background:#111;
font-size:18px;
text-shadow: 0px 0px 4px #999;
color:#f90;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et nunc id erat tempus iaculis. Phasellus congue nunc quis nibh congue rutrum sit amet eu velit. Etiam non ligula convallis tortor scelerisque consectetur at nec nunc. Integer eu purus odio, ac placerat erat

Cienie wielokrotne

Dla każdego napisu możemy zdefiniować kilka róznych cieni oddzielając je przecinkiem.

1
2
3

line-height:40px;
font-size:18px;
text-shadow: -6px -6px 6px #f00, 0px 0px 6px #00f, 6px 6px 6px #f90;

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Internet Explorer

Okłamałbym was gdybym nie napisał, że w Internet Explorerze da się uzyskać podobny efeket. Microsoft udostępnił parametr filter: shadow, który działa nawet w IE5(sic!). Użycie wygląda mniej więcej tak:

1

filter: Shadow(Color=#333, Direction=135, Strength=5);

Nie będę jednak zagłębiał się w ten temat, gdyż nie jest to poprawne ze standardami W3C.