Text Ellipsis with Gradient Fade in Pure CSS

The other day I encountered a small but very interesting effect, visible in Bitbucket issues’ table. Some of the cells were slightly too narrow for the text they contained, and it had to be ellipsized. Usually this is done by cropping some of the text’s trailing chars and replacing them with dots – mostly because that’s what the text-ellipsis style is doing. Here, however, I saw something much more original: the text was fading out in gradient-like style, going from full black to full transparent/white over a distance of about 30 pixels. It made quite of an eye-catching effect.

So, I decided to bring up Firebug and find out how this nifty trick actually works. Taught by past experiences, I expected a tightly coupled mis-mash of DOM and CSS hacks, with lots of moving parts that need to be carefully adjusted in face of any changes. Alas, I was wrong: it turned out to only use CSS, in succinct and elegant manner. After simple reverse-engineering, I uncovered a clever solution involving gradients, opacity and :before/:after pseudo-elements. It definitely deserves some press, so let’s look into it.

Dwa podejścia do technologii

Tematy związane z technologiami komputerowymi są zaskakująco często motywem wielu zażartych sporów między ich użytkownikami. Nie jest to w sumie nowość, bo tak zwane święte wojny są niemal tak stare, jak szeroko pojęta kultura hakerska – a więc liczą sobie dziesiątki lat. Teraz jednak wspomniane technologie są wszędzie i w związku tym dyskusje między zwolennikami poszczególnych rozwiązań zataczają o wiele szersze kręgi. Wydaje mi się też, że w przeważającej części inny jest też ich charakter. Zaryzykuję też twierdzenie, że wiele z nich – w tym te najbardziej prominentne – maja u swych podstaw jedną przyczynę, której uczestnicy sporów nie są najczęściej świadomi.

Uważam mianowicie, że istnieją dwa wyraźnie różne podejścia do rozwiązań technologicznych dowolnego rodzaju. Z braku lepszych terminów określę je mianem geeka i laika. To właśnie zasadnicze różnice w postrzeganiu nowoczesnych technologii między tymi dwoma podejściami są, według mnie, główną przyczyną zażartych, często jałowych i zawsze niekonkluzywnych pojedynków na słowa.
Doprecyzowując, chodzi o priorytety: skłonność do poświęcenia pewnego zbioru cech produktów, rozwiązań i technologii na rzecz innego zbioru właściwości. Nie muszą to być zresztą własności ze sobą sprzeczne, ale zwykle każdy ze zbiorów może być dość jednoznacznie przypisany do jednego konkretnego rozwiązania z danej kategorii.

W przypadku, gdy mówimy o laiku, pożądanymi własnościami będą przede wszystkim: atrakcyjne wykonanie, bezproblemowe działanie i prostota obsługi. To będą główne kryteria, jakimi kierować się będzie osoba reprezentująca to podejście i będą one wpływały na dokonywane przez nią wybory konkretnych opcji spośród wielu możliwości.
Przykłady oczywiście znaleźć nietrudno. Jeśli ktoś reprezentuje taką postawę, to będzie używał raczej systemu Windows (lub OS X-a) niż Linuksa; przeglądał sieć raczej za pomocą Chrome’a niż Firefoksa; posługiwał się raczej iPhonem niż innym rodzajem smartphone‘a; preferował raczej laptopy lub tablety niż komputery stacjonarne – i tak dalej, żeby wspomnieć tylko o tych najbardziej rozgrzewających Internet debatach.
Dla geeka cennymi wartościami będzie natomiast zupełnie inny zestaw: elastyczność, rozszerzalność i szerokie pole manewru w zakresie dostosowywania do specyficznych potrzeb. To zaś potencjalnie koreluje z opcjami, które w wymienionych wcześniej alternatywach były określone jako mniej prawdopodobne.

Te dwie postawy nie są w żadnym wypadku wykluczające się – zwłaszcza wtedy, gdy przejawiają się wyborami w osobnych, mało związanych ze sobą dziedzinach. Sądzę jednak, że przewaga częstości występowania jednej lub drugiej mogłaby sugerować związek z jakimiś bardziej fundamentalnymi cechami charakteru czy osobowości danej osoby. Przy okazji należałoby oczywiście oszacować wpływ takich czynników jak podatność na działania marketingowe czy łatwość zmiany przyzwyczajeń.
W sumie więc mógłby to być interesujący temat do badań porównawczych, potencjalnie skutkujący gazetowymi nagłówkami w stylu: Amerykańscy naukowcy odkryli, że użytkownicy Linuksa jedzą więcej fistaszków ;-)

Odchudzanie lisa

Jak można przeczytać tu i ówdzie (a potem sprawdzić u źródła), premiera czwartej wersji przeglądarki Firefox przesunie się z końca tego roku na początek przyszłego. Zwolennicy tzw. bardziej nowoczesnych przeglądarek zapewne skorzystają z okazji, by używać tego faktu jako argumentu na rzecz tezy, że Ognisty Lis pozostaje w tyle pod względem szybkości, zgodności z sieciowymi standardami oraz estetyki i komfortu interfejsu.
Nawet jako jego użytkownik muszę przyznać, że przynajmniej ostatni z tych zarzutów faktycznie może być zasadny – ale tylko pod jednym zastrzeżeniem, które w przypadku Firefoksa jest po prostu nie fair. O ile bowiem FF3.6 out-of-the-box jest faktycznie dość siermiężny, o tyle nadrabia to z nawiązką możliwościami konfiguracji, których nie można w uczciwym zestawieniu pominąć.

Standardowy interfejs Firefoksa

Żeby jednak nie być gołosłownym pozwolę sobie pokazać, jak w kilku krokach możemy ów niezbyt imponujący, standardowy interfejs przekształcić w coś bardziej ‘nowoczesnego’. Mój opis można będzie potem potraktować jako swego rodzaju konstruktywną ripostę w świętych wojnach przeglądarkowych :)

Co to jest przeglądarka?

Prawie dokładnie dwa lata temu pisałem o tym, że przeglądarki WWW wpisują w dziwny trend przyswajania sobie coraz to nowych funkcjonalności. Część z nich nie musi być zresztą w jakikolwiek sposób związana z przeglądaniem stron. Aż chciałoby się jeszcze dodać, iż wkrótce użytkownicy zapomną, do czego ich przeglądarki tak naprawdę służą oraz gdzie się “kończą”.

No i voila – to już się dzieje. Oto powstała strona internetowa, z której można się dowiedzieć… czym są przeglądarki, dlaczego nie są tym samym co internetowe wyszukiwarki i czym różnią się od reszty systemu operacyjnego. Tę wiedzę możemy posiąść między innymi poprzez oglądnięcie wielce interesującego filmiku. Żeby było jeszcze zabawniej, wspomnę, że tę edukacyjną witrynę przygotował nie kto inny, jak tylko sam… Google!
W rzeczywistości jednak nie ma się z czego śmiać. Skoro już nawet tam dostrzegana jest potrzeba szerszego informowania o tym, że Firefox jest czym innym niż Windows, a pasek adresu to nie to samo co pole zapytań wyszukiwarki, to ze stanem tej wiedzy wśród tzw. przeciętnych użytkowników musi być naprawdę źle. A skoro granica między online i offline tak bardzo się zatarła, to ani się obejrzymy i zawód programisty zostanie zastąpiony przez web developera…Brr! Chciałbym, żeby tym razem moje przewidywania w tej dziedzinie się nie sprawdziły :P

Chromowane gogle

Od wczoraj trudno jest zrobić cokolwiek, aby przy okazji nie usłyszeć o nowym produkcie Google’a, czyli przeglądarce internetowej Chrome. Zdaje sobie niestety sprawę, że pisząc o tym mimowolnie wpisuję się w trend, który – jak mniemam – wkrótce sprawi, że będziemy z lekkim niepokojem otwierać lodówki ;P Jak dotąd na szczęście Google tam nie wtargnął, ale i tak wygląda na to, że narobił sporo zamieszania. Głównie medialnego, rzecz jasna: jego szczytem jest stwierdzenie, że “Chrome być może stanie się wkrótce synonimem przeglądarki internetowej”, które można znaleźć w gazecie.pl. No cóż, nie od dziś mainstreamowe popisują się totalną ignorancją, gdy chodzi o IT.

Żarty żartami, ale w rzeczywistości pojawienie się Chrome’a przede wszystkim stwarza kolejny problem dla webmasterów i twórców aplikacji internetowych. Jest całkiem prawdopodobne, że na samej tylko marce Google’a (niezależnie od obiektywnej jakości) Chrome zdobędzie przynajmniej kilka procent udziału w rynku, być może zrównując się z Operą. A to oznacza ni mniej, ni więcej tylko to, że do trzech liczących się silników przeglądarek WWW, z którymi teraz muszą liczyć się twórcy stron, wkrótce dojdzie czwarty. Gdyby tak jeszcze wszystkie przynajmniej próbowały być nieco bardziej zgodne z sieciowymi standardami… ale cóż, takie życie :P
W każdym razie nowa i potencjalnie popularna przeglądarka to nowy i potencjalnie dotkliwy ból głowy dla developerów. Może więc chociaż użytkownicy dostają w zamian coś nowatorskiego? Oprócz zwiększającego stabilność otwierania zakładek w osobnych procesach – prawdopodobnie nie. Zresztą, czy czegoś podobnego nie miał przypadkiem już Eksplorator Windows i to zaledwie 10 lat temu? :)

Lis w operze

Parę dni temu odbyła się premiera nowej wersji przeglądarki Opera, oznaczonej numerkiem 9.5. Z kolei jutro z wielką pompą opublikowana zostanie trzecia edycja Firefoksa. Przy tej zresztą okazji Mozilla organizuje Dzień Pobierania, z zamiarem ustanowienia rekordu ilości ściągnięć oprogramowania w ciągu jednej doby. (Mam aczkolwiek przeczucie, że prawdopodobne jest ustanowienie innego rekordu: najdłużej niedziałającego serwera pobierania ;]).
Zbieżność tych dwóch wydarzeń zapewne nie jest przypadkowa. Tym bardziej dziwi mnie to, że przy tej okazji zaprzysięgli fani któregoś z tych dwóch programów zajmują się głównie wykazywaniem w każdym możliwym miejscu, iż to właśnie ich ulubiona przeglądarka jest lepsza od tej drugiej. Naturalnie, argumentów jest przy tym mnóstwo: a to gesty myszki, a to współdzielenie zakładek i Ulubionych między komputerami, nie wspominając o tysiącach dostępnych rozszerzeń i wtyczek, coraz lepszych wynikach testów typu Acid3, wbudowanych klientach innych usług niż WWW, kilogramach skórek i pewnie wielu jeszcze innych zaletach. Część z nich może i jest ważna i interesująca. Rzecz w tym, że – statystycznie rzecz biorąc – nie obchodzą one psa z kulawą nogą.

Smutna prawda jest taka, że nadal większość użytkowników Internetu korzysta z “jedynie słusznej” przeglądarki pewnej znanej skądinąd firmy, a o dywagacjach na temat wyższości innych nad jeszcze innymi nigdy tak naprawdę nie słyszeli i raczej nie mają zamiaru usłyszeć. A to z wielu powodów niepokojące, chociażby ze względu na bezpieczeństwo czy powszechność stosowania standardów sieciowych. Wzajemne zwalczanie się zwolenników przeglądarek “niezależnych” (że je tak umownie nazwę…) na pewno nie zaradzi temu, iż połowa internautów wciąż używa do przeglądania Sieci programów przestarzałych i dziurawych jak ser szwajcarski.
A bliskość premier nowych edycji dwóch bezpiecznych, wygodnych i nowoczesnych przeglądarek to przecież całkiem dobra okazja, żeby coś na to poradzić. Zamiast więc bezowocnie spierać się, czy Safari jest lepsze od Opery, a ta od Firefoksa czy Camino, można by wspólnie zwiększyć wysiłki na rzecz uświadamiania użytkownikom niesłusznie najpopularniejszych przeglądarek, że istnieją dla nich o wiele lepsze alternatywy. Cóż bowiem z tego, że oto “wszyscy” przerzucą się czy na to Firefoksa, Operę czy inny tego typu program, jeśli ci ‘wszyscy’ to tak naprawdę ledwie 1/3 internautów?…

Cały świat w przeglądarce

Internet powstał dobrych kilka dziesięcioleci temu, lecz jego obecnie najważniejsza część – czyli World Wide Web – liczy sobie “jedynie” około dwudziestu lat. Od momentu jej wynalezienia sukcesywnie jednak zyskuje na znaczeniu i można wręcz powiedzieć, że powoli wypiera niektóre z pozostałych usług sieciowych.

Już kilka lat temu dla wielu osób (szczególnie nowicjuszy) wyrazy ‘Internet’ i ‘WWW’ były właściwie synonimami, a przeglądanie stron główną formą sieciowej aktywności. Od tamtej pory ten trend coraz bardziej się nasila i strony WWW może nie tyle zastępują, co “połykają” inne usługi internetowe.
Weźmy taki webmail, czyli witryny służące dostępowi konta e-mail z poziomu przeglądarki. Bardzo często z powodzeniem zastępują one tradycyjne programy pocztowe, pozwalając na wykonywanie wszystkich typowych czynności związanych z pocztą. Oprócz tego mamy też wszelkiego rodzaju internetowe czaty, których większość jest dostępna w formie apletów Javy osadzonych na stronach WWW. W końcu nie sposób nie wspomnieć o forach dyskusyjnych, które stały się poważną alternatywą dla tradycyjnych grup Usenetowych.

Szczególnie Google przoduje w tym “uprzeglądarkowianiu”. Zaczęło się od GMaila, początkowo dostępnego tylko z poziomu strony WWW, zaś ostatnim wynalazkiem z tej serii jest Google Docs – czyli niemalże cały pakiet biurowy, w całości w formie zdalnej strony internetowej. Wszystko to jest oczywiście oznaczone magicznym słówkiem AJAX, które bynajmniej nie oznacza tutaj nazwy płynu do mycia szyb :)
Z jednej strony mamy więc witryny internetowe, które zachowują się jak programy. Z drugiej strony narzędzia służące do korzystania z nich – czyli przeglądarki – same stają się coraz bardziej rozbudowane. Standardem jest już wbudowany menedżer zarządzający pobieranymi plikami czy czytnik kanałów RSS; niektóre przeglądarki oferują znacznie więcej. Rekordy pod tym względem bije Opera, o której zwykłem mawiać, że chyba tylko prać i prasować jeszcze nie potrafi ;P

Czy taki kierunek ewolucji WWW i Internetu jest korzystny? Z jednej strony możliwość korzystania z wszystkich dobrodziejstw sieci (i nie tylko sieci) bez “ruszania się” z przeglądarki jest wygodna. Osobiście uważam jednak, że przeglądarki stron WWW powinny robić przede wszystkim to, na co wskazuje ich nazwa, zaś ich rozwój powinien polegać na dążeniu do jak najlepszego spełnienia standardów sieciowych, zwiększenia wygody użytkownika czy efektywności. To ostatnie jest szczególne istotne, gdyż nowe aplikacje webowe są coraz bardziej skomplikowane i zużywają coraz więcej zasobów systemowych.
A to jeszcze nie wszystko. Przecież skoro przez WWW mogą działać choćby edytory tekstu, to dlaczego nie… systemy operacyjne? I choć takie wynalazki jak ajaxWindows są póki co tylko ciekawostkami, kto wie, dokąd nas ostatecznie zaprowadzi ta przeglądarkomania…