Jeśli zależy wam na optymalizacji waszych aplikacji od strony frontendu, na pewno korzystacie z techniki CSS Sprite. W skrócie polega ona na umieszczeniu wszystkich/większości grafik w jednym pliku i wyświetlanie poszczególnych elementów przy pomocy pozycjonowania tła. Niby nic wielkiego, ale w przypadku dużej ilości grafik, określenie ich położenia nie jednego doprowadzi do szału. Wprawdzie mamy do dyspozycji szereg narzędzi generujących sprite’y oraz CSS, jednak jeszcze żaden z tych automatów nie spełnił moich oczekiwań.

Z pomocą przychodzi nam Sprite Cow – narzędzie, które nie stworzy nam sprite’a, tylko CSS dla wskazanego elementu. Wystarczy, że uploadujemy plik, a następnie będziemy klikać na poszczególne elementy. Aplikacja przygotuje za nas odpowiednie reguły CSS.

Narzędzie znajdziecie pod adresem www.spritecow.com.

Myślę, że nie popełnię dużego błędu, jeśli powiem, że każdy, kto kiedykolwiek potrzebował tłumaczenia pewnych informacji z nieznanego języka na "swój", na pewno trafił kiedyś na narzędzie Google Translate. Jest to bezsprzecznie jeden z najlepszych translatorów na rynku, także trudno się dziwić, że jest tak powszechnie wykorzystywany. Także my, twórcy stron internetowych często korzystamy z [...]

Dobrze przeczytaliście. Animacja 3D przy użyciu CSS3 jest możliwa. Udowodnił to James Long, web developer Mozilli, który przygotował kilka przykładów animacji 3D. Co ciekawe nie użył do tego celu ani SVG ani canvas. Jedyne co zrobił, to wykorzystał właściwość transform w celu przygotowania bryły oraz szczyptę JavaScript do wprawienia bryły w ruch.

Dokładny opis sposobu utworzenia animacji znajdziecie pod adresem http://jlongster.com/s/dom3d/index.html. Dema do obejrzenia pod adresem http://jlongster.com/s/dom3d/example3.html. Działją tylko w przeglądarkach Firefox oraz Chrome.

Od jakiegoś czasu grzebię sobie po GitHubie. Pomyślałem, że rozpocznę cykl opisów skryptów, które wzbudziły moją ciekawość lub wg mnie mogą być dosyć przydatne dla webmasterów. Na pierwszy ogień idzie CSS Crush — narzędzie do automatycznego zmniejszania wielkości plików CSS.

Zapewne każdy kto szukał kiedyś możliwości zaoszczędzenia nieco transferu natknął się na różne programy do miniaturyzacji skryptów. Chyba najpopularniejsze narzędzie to YUI Compressor, które przyjmuje pliki JavaScript lub CSS i próbuje powyrzucać trochę „niepotrzebnych” znaków. Minusem w/w programu jest to, że jest napisany w Javie. Co prawda powstał port w JavaScript, ale powiedzmy, że szukamy wygodniejszego rozwiązania, które daje się rozszerzać.

CSS Crush to właściwie jedna klasa plus kilkanaście funkcji (makr) rozbudowujących. To trochę dziwna klasa, bo WSZYSTKO mamy statyczne. Nawet mnie się to nie podoba, no ale niech będzie. Widocznie autor ma ważne podstawy żeby tak robić.

Używa się tego bajecznie prosto. Gdzieś wcześniej żądamy dołączenia pliku CSS_Crush.php, a następnie w sekcji head gdzie linkujemy nasz kod CSS wystarczy wpisać

<link rel="stylesheet" type="text/css" href="<?php echo CSS_Crush::file('/styles/style.css'); ?>">

i właściwie tyle. Skrypt sam sobie utworzy zminimalizowany plik i zwróci do niego ścieżkę dostępu. Jest to na tyle sprytne, że jeżeli nie wprowadzaliśmy żadnych zmian do pliku źródłowego CSS, to skrypt nie będzie mielił go ponownie.

Proces miniaturyzacji pliku przebiega w zasadzie zgodnie z tym co robi YUI Compressor, czyli m.in. wywalanie zbędnych enterów, spacji, średników, nadmiarowych zer i zamianę kolorów podanych w rgb na hexy.

CSS Crush można również rozszerzać o makra. Aktualnie dostępne są ułatwiacze w stylu automatycznego dodawania -moz- i -webkit- oraz dodawanie kilku hacków.

Programem można sterować poprzez dodanie mu tablicy asocjacyjnej jako drugiego argumentu przy CSS_Crush::file. Są to booleany 'macros', 'comments', 'minify' i 'versioning'. Jako swego rodzaju mankament można uznać formułkę, która wyświetla się na początku każdego zmielonego pliku. Zaproponowałem autorowi dodanie opcji 'boilerplate', za pomocą której wywalimy nagłówek pliku.

Chyba jest o co walczyć, skoro plik CSS Gazety.pl z 77,6 KB zmniejszył się do 67 KB. Ta wartość razy kilkaset tysięcy odwiedzin jakieś oszczędności na transferze nam zapewni.

Istnienie konferencji takich jak Falsy Values skłania nas coraz bardziej do zagłębienia się w szczegóły możliwości oferowanych przez język JavaScript. Pomysły na rozwój tego języka, takie jak m. in. nowości standardu ECMAScript 6, biblioteka Node.js i Fabric.js, czy też zupełnie inne spojrzenie na tą technologię - gdzie dumnie wypina pierś projekt CASSIS, to tylko niektóre, [...]

Internet Explorer 6 odchodzi na emeryturę. Czy zasłużoną, zbada jakaś komisja, która zrobi z tego medialny cyrk. Nieco w cieniu swojego starszego brata, nadal straszy IE7 i nie ma najmniejszego zamiaru przestać. Skoro wszyscy uwzięli się na “szóstkę”, “siódemka” ma jeszcze sporo luzu i daje popalić bogu ducha winnym frontendowcom. Jednym z ukrytych talentów IE7 jest nierespektowanie z-index dla pozycjonowanych elementów.

Na czym polega problem? Na pewno nie raz się z nim spotkaliście – menu z uporem maniaka nie chce zasłonić listy rozwijanej (popularnego selecta) lub chowa się pod inne elementy strony i za żadne skarby nie daje się przekonać do poprawnego wyświetlenia. Winowajcą jest tutaj bug w IE7 powodujący, że z-index jest resetowany dla pozycjonowanych elementów nie znajdujących się w tym samym pojemniku.

Okazuje się, że rozwiązanie tego problemu jest o wiele bardziej banalne niż mogłoby się wydawać. Zapomnijcie o iframe’ach, skryptach JavaScript ukrywających elementy strony, magicznych zaklęciach i wymyślonych w gniewie przekleństwach. Wystarczy ustawić wartość relative dla właściwości position kontenerów zawierających niepoprawnie wyświetlające się elementy. Dokładny opis tego “ultimate solution” znajdziecie pod adresem http://jonathanstegall.com/2009/01/15/ie-z-index-bug-with-css-dropdown-menu/.

Enjoy.

Wizualny aspekt stron internetowych to dosyć skomplikowany temat - po pierwsze ze względu na różne gusta klientów / użytkowników, po drugie ze względu na dużą trudność w uzyskaniu jednakowego wyglądu na wielu wersjach przeglądarek. Dlatego ważne jest, żebyśmy cały czas podnosili swój poziom wiedzy i doświadczenia poprzez poznawanie nowych sposobów i mechanizmów tworzenia dobrych rozwiązań. [...]