Inne spojrzenie na style CSS 4 Styczeń 2011

Wstęp

Ostatnio coraz częściej zdarza mi się pracować na frontend-zie. W sumie zawsze myślałem, że to nie może być ciekawe, ale przyznaje – myliłem się… W dobie, cały czas tworzonego jeszcze, HTML5 oraz wdrażanego CSS3 można naprawdę fajnie się pobawić tymi nowymi mechanizmami. Oczywiście największym problemem w tej warstwie aplikacji webowej jest integracja ze wszystkimi popularnymi przeglądarkami które nie zawsze interpretują nasz kod tak jak trzeba, natomiast można też przyczepić się do ograniczeń płynących z samego CSS-a.

 

Jeśli się zastanowić nad tym to dojdziemy do wniosku, że jedyne zmiany dokonywane są przez dodawanie nowych właściwości (rzadziej selektorów czy pseudoklas) Oczywiście, to bardzo duże zmiany – opacity, border-radius, box-shadow etc. otwierają nam drogę ku naprawdę fajnym rozwiązaniom. Natomiast brak zmian w tzw. warstwie core. W sumie to logiczne, bo z tym co mamy możemy zrobić wszystko, tyle, że nie zawsze jest to takie łatwe, proste i czytelne.

 

Czego brakuje

Zapewne zastanawiasz się teraz o czym mowa. Chodzi np. o przekazywanie zmiennych do arkusza styli, dzięki czemu możemy uzyskać efekt personalizacji strony. Obojętnie czy to będzie kolor tła na podstawie pogody/pory roku/pory dnia czy inny styl zależny od miejsca aktualnie zalogowanego użytkownika w rankingu. Z tym co dziś mamy da się to zrobić w całkiem prosty, lecz nie do końca elegancki sposób.

 

Wystarczy skrypt PHP generujący i zwracający plik CSS (z odpowiednim nagłówkiem).

 

   <link href="/css/generator.php?season=<?=$season?>" rel="stylesheet"/>

 

Dzięki czemu w generator.php mamy dostęp do zmiennej GET o nazwie season i na jej podstawie używamy konkretnych kolorów, obrazków etc.

 

Tak btw. można by nadpisywać style:

 

   <link href="/css/general.css" rel="stylesheet"/>
   <link href="/css/<?=$season?>.css" rel="stylesheet"/>

 

ale dla większej ilości zmiennych chyba tego nie ogarniemy…

 

Rozwiązanie generatorem styli jest jak najbardziej dobre tyle, że zawsze trzeba by kopiować ten sam początek z pliku generator.php, należało by zadbać o jakiegoś cache-a tak aby dla każdego użytkownika nie generować na nowo tego samego szablonu. Poza tym, taki frontend-owiec tworzący arkusz styli nie powinien być zmuszony znać chociaż w minimalnym stopniu PHP. Warto by stworzyć odrębny mini-język, z pętlami, warunkami, możliwością deklarowania zmiennych, oraz garstką funkcji. Jeśli chodzi o HTML-a, popularne są systemy szablonów jak np. bardzo krytykowane Smarty czy, raczej chwalone polskie, OPT. Dlaczego nie stworzyć czegoś takiego dla CSS-a? A najlepiej jak ten parsowany język byłby taki sam jak w systemach szablonów HTML-owych. Tak aby popularne systemy szablonów miały dwie części: szablony HTML-owe oraz CSS-owe.

 

Kolejnym powodem dla którego warto stworzyć takie cudo są właśnie nowe właściwości rodem z CSS3. Jak wiadomo, aktualnie przeglądarki wykorzystują swoje odmiany nowych właściwości, najczęściej poprzedzone prefixem, np: aby uzyskać efekt przezroczystości działający cross-browser musimy napisać:

 

#foo {
  opacity:0.5;
  -moz-opacity:0.5;
  -khtml-opacity:0.5;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter:alpha(opacity=50);
}

 

Jeśli chcemy nadać przezroczystość większej ilość elementów, musimy albo kopiować te 5 linijek i wklejać je za każdym razem, albo stworzyć klasę .opacity01, .opacity02… .opacity1 i nadawać je w atrybucie class dla wszystkich tych elementów. Oba te rozwiązania nie są zbyt elegancje. Jakże ładniej byłoby gdybyśmy mogli napisać w ten sposób:

 

function opacity($val){
  opacity:$val;
  -moz-opacity:$val;
  -khtml-opacity:$val;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=$val*100)";
  filter:alpha(opacity=$val*100);
}

#foo {
  opacity(0.5);
}
#bar div a {
  opacity(0.7);
}

 

Tworzenie funkcji przydałoby się także w “zwykłych” przypadkach, np:

 

function absolute($top, $left, $zIndex = auto){
  position: absolute;
  top: $top;
  left: $left;
  if(false!==$zIndex){
    z-index: $zIndex;
  }
}

#foo { absolute(50, 100, 9999); }
#bar{ absolute(10, 200, false); }

 

Zawszę jest też problem z kolorami. Nie oszukujmy się, zapis #45B27F czy rgb(127, 46, 78) nie jest łatwy do zapamiętania. Poza tym głównych kolorów których używamy na stronie jest kilka, warto by tworzyć sobie tablice definicji kolorów i wtedy jest to po prostu dla nas czytelniejsze:

 

$colors = {
  blueLight:"#0080e0",
  blueDark:"#00599c"
};

#foo { border: 1px solid $colors.blueLight; color: $colors.blueDark; }
#bar{ background-color: $colors.blueDark; }

 

Już nie mówię o przypadku kiedy w stylach CSS mielibyśmy rozpoznaną wersje i rodzaj przeglądarki:

 

if(CORE_BROWSER_TYPE == FIREFOX && CORE_BROWSER_VERSION < 2.1){
  //
}
else{
  //
}

Naprawdę fajnie było by gdyby powstał taki framework do CSS-a.
W jednym z kolejnych wpisów spróbuje zaprezentuje pokrótce Scaffold CSS Framework.