Niedawno powstała strona One Div, na której przeglądać możemy różne ikony. Na pierwszy rzut oka wygląda to na standardowy zbiór ikon, których pełno w sieci, jednak po najechaniu myszką na konkretną ikonę ukazują nam się informacje o kompatybilności ikon z różnymi przeglądarkami.
O co chodzi ? Otóż ikony wykonane są dzięki wykorzystaniu najnowszych możliwości CSS. Oprócz tego style muszą działać maksymalnie na 1 elemencie DIV, co pozwalać na generowanie poprawnego semantycznie kodu.
Oczywiście nie ma róży bez kolców. Poza brakiem zgodności z niektórymi przeglądarkami możemy zaobserwować postrzępione lub nierówne krawędzie, a skalowanie strony powoduje rozjechanie się elementów składowych ikon. Wniosek z tego taki, że nadal najlepszą i najwydajniejszą metodą implementacji ikon na stronie jest Font Icons, czyli umieszczanie ikon w czcionce dodanej do strony, gdzie zamiast liter wyświetlają nam się ikony. Jakość doskonała (bo to wektory), a do tego można używać na nich stylów CSS. Na ikony w CSS może przyjdzie czas w przyszłości.
Warto wspomnieć, że do wykonania ikon została użyta dobrze już znana metoda z pseudo-elementami :before i :after. Koła na nowo nie ma co wynajdywać, więc po więcej szczegółów odsyłam do artykułów:
- „Przewodnik po pseudo-elementach :before i :after„
- „Learning To Use The :before And :after Pseudo-Elements In CSS„
- „A Whole Bunch of Amazing Stuff Pseudo Elements Can Do„
Link do omawianej strony: http://one-div.com/
To jest bardzo ciekawy trend, który jest odpowiedzią na używanie fontów jako ikon. W swoim artykule na blogu popełniłem wpis o tym jak tworzyć ikony w CSS: artykuł o tworzeniu ikon w CSS.
Daje to pewien pogląd na to jak czasem trudne może to być zadanie. Tym bardziej, że za pomocą CSS można generować obrazy typu reprodukcje, zdjęcia, itp.
Mam złe przeczucie że to się stanie bardziej popularne niż SVG. Jako ciekawy hack oczywiście bardzo fajna sprawa, ale obyśmy nie skończyli w świecie gdzie grafika wektorowa jest powszechnie robiona za pomocą ciekawego hacka a nie w formacie odpowiednim do grafiki wektorowej.