Css

Od czasu do czasu przychodzi mi napisać coś co ma wyglądać jako aplikacja natywna na iOS albo Android, ale oczywiście oszukujemy i robimy ją w JavaScript i HTML. Jest sporo dostępnych rozwiązań na rynku, np. jQuery mobile (ciężkie, stare i wolne). Jeśli szukacie czegoś lekkiego i szybkiego polecam Ratchet

LESS to procesor CSS. Idea jest prosta – CSS jest coraz bardziej skomplikowany, LESS to narzędzie które pozwala na uproszczenie i wprowadzenie dodatkowych funkcji do CSS. Jakich funkcji – jakich jak zmienne, zagnieżdzanie styli, mixins (nie mam pojęcia jak to przetłumaczyć) i kilku innych dobrodziejstw jak np. funkcje. Można go używać na kilka różnych sposobów – jednym z nich jest załączenie less.js w kodzie strony który kompiluje pliki .less w locie, albo kompilowanie ich przy pomocy kompilatora.

Bardzo ciekawe rozwiązanie uwalniające od tworzenia specjalnych reguł CSS dla każdej z przeglądarek. Piszę tutaj o rozwiązaniach pozwalających na tworzenie gradientów w tle, czy okrągłych narożników: -webkit-border-radius: 50%; -moz-border-radius: 50%; [ . Żeby było ciekawiej – rozwiązanie to działa client-side, czyli cała zabawa jest po stronie przeglądarki i nie wymaga instalowania niczego na serwerze. Wystarczy zaimportować 2KB JavaScript i problem z głowy. Zapomniałbym o odnośniku do serwisu: -prefix-free . Przykład zastosowania poniżej:

Nie wiem jak wy, ale ja nie pamiętam wszystkich parametrów i możliwych właściwości paremetrów CSS. Zwykle gdy mam jakiś problem zaczynam googlować i czasami wynik trafia się od razu, czasami… po chwili. Dobra dokumentacja to podstawa, dlatego polecam projekt Instant CSS – w jednym miejscu zebrano opisy właściwości CSS3. Do tego mamy bardzo wygodną wyszukiwarkę, która pozwala szybko odnaleźć zadany parametr.

Nigdy nie byłem specjalnym fanem frameworków HTML5. Wprawdzie zdarzyło mi się kilka razy użyć Blueprint  ale finalnie kończyło się zawsze na pisaniu wszystkiego od podstaw. Potem wchodziła do gry optymalizacja pod IE i po pewnym czasie strona wyglądała przyzwoicie. Niestety w dobie dzisiejszych technologii, gdzie nasza strona musi wyglądać dobrze zarówno na zwykłym PC, jak i na każdym urządzeniu mobilnym począwszy od telefonu, przez pady skończywszy na duuużych ekranach.

Nazwa serwisu jest odrobinę myląca – początkowo myślałem, że w końcu doczekałem się porządnej realizacji terminala SSH przez przeglądarkę. Okazuje się jednak, że WebPutty to całkiem przyzwoity edytor CSS online. Cały serwis jest w fazie beta, ale wygląda bardzo przyzwoicie. System pozwala na edycję plików CSS z rzeczywistem podglądem zmian na edytowanej stronie. Aby go wypróbować niezbędne jest konto w serwisie gmail.

Bardzo ciekawy i jednocześnie specyficzny projekt. CSS Pivot  pozwala na edycję CSS na niekoniecznie swoich stronach WWW. Dzięki czemu możemy “wstrzykiwać” CSS do obcych stron WWW pokazując jak coś może wyglądać po naszych zmianach, bez faktycznej edycji serwisu WWW i jego zawartości.

Czy idea jest wystarczająco jasna? Nie? To może na przykładzie. Zakładamy że mamy stronę X – chcemy pokazać komuś alternatywną wersję z innymi plikami / zmianami w CSS. Mamy do wyboru skopiowanie całej strony i podmianę plików CSS, stworzenie alternatywnej wersji plików CSS i wskazanie ich w nagłówkach, albo… użycie CSS Pivot.

Pamiętam za starych dobrych czasów na pl.lang.perl – (kto pamięta grupy dyskusyjne?, pytanie pomocnicze: kto używał chamstera?) – organizowany był konkurs o nazwie “golf”. Jego główną ideą było stworzenie jak najkrótszego kodu realizującego określone zadanie. Wiadomo – Perl język bardzo fajny, szczególnie do realizowania wszelakich zadań związanych z obróbką tekstu, plików i… zasadniczo do każdego innego działania. Był to mój pierwszy prawdziwy skryptowy język server-side. Znając go odrobinę lepiej, można było (i nadal można) stworzyć w nim praktycznie wszystko a znając jego składnię i “sztuczki” można tworzyć naprawdę “zwięzły” i nieczytelny kod. No… ale nie o Perlu chciałem pisać a o CSS.