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:

Link do omawianej strony: http://one-div.com/