Существует несколько популярных вариантов отображения иконок на веб-странице:

• картинки
• svg
• иконочные шрифты

В своей работе я, например, чаще всего использую картинки (png, в частности), но в последнее время стал уделять большое внимание иконочным шрифтам.

Их так же существует привеликое множество: FontAwesome, Entypo и другие.

Но в процессе тестирования на разных устройством были обнаружены некторое особенности отображения иконок. Самым интересным стало то, что браузер IE на Windows Phone 7.5 вдруг вместо иконок шрифта Entypo отрисовал свои иконки, которые вышлядели практически идентично.

Задавшись этим вопросом, мы с товарищем @pukhalski стали «читать» интернет.

В этом месте, следует уточнить, что для отрисовки иконок мы использовали следующую контрукцию:

.icon {
    display: inline-block;
    font-family: 'entypo';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon:before {
    content: "\2606";
}

В данном примере 2606 - Unicode для отображения здездочки. Т.е. вы должны увидеть примерно вот это: ☆.

Оказалось, что во все более или менее человечкие операционные системы встроен шрифт serif, который уже содержит множество иконок. Вот по этому адресу можно их все увидеть.

Стоит также вспомнить о шрифтах Webdings, Wingdings, Wingdings 2, Windings 3, которые точно присутствуют в Windows и Mac OS и несут внутри себя сотник классных иконок.

Экономьте свои силы и траффик пользователей, используйте встроенные шрифты. Кстати, это очень кроссбраузерно и кросссистемно.

В PHP есть шикарная функция uniqid. Она позволяет сгенерировать случайный идентификатор состоящий из цифр и букв, основанный на текущем времени. Выглядит он примерно вот так 526439af76c56.

Я очень часто пользуюсь ей (функцией), когда делаю что-то на ПХП. Конечно же мне очень хватало этой функции в JavaScript, поэтому я поискал в интернете, нашел один неплохой вариант, немного его подправил и вуаля:

(function () {
    this.uniqid = function (pr, en) {
        var pr = pr || '', en = en || false, result, us;
    this.seed = function (s, w) {
        s = parseInt(s, 10).toString(16);
        return w < s.length ? s.slice(s.length - w) : 
                  (w > s.length) ? new Array(1 + (w - s.length)).join('0') + s : s;
    };

    result = pr + this.seed(parseInt(new Date().getTime() / 1000, 10), 8) 
                + this.seed(Math.floor(Math.random() * 0x75bcd15) + 1, 5);

    if (en) result += (Math.random() * 10).toFixed(8).toString();

    return result;
};
})();

Использовать можно:

• так uniquid() - результат 52643b81917b3
• или вот так uniqid('prefix_') - результат prefix_52643bb682821
• и даже вот так uniqid('prefix_', true) - результат prefix_52643bdf3b1fb7.38568327

Пользуйтесь на здоровье.

Тут ссылка на Gist.

Мое выступление на первом митапе WebNotBombs.

В эпоху развития и массового внедрения мобильных технологий в жизнь простых граждан, все стремятся сделать свои сайты одинаково красивыми и доступными как на компьютерах, так и на телефонах и планшетах. Разработка таких сайтов требует определения типа браузера, чтобы максимально использовать преимущества каждого устройства. Разнообразие браузеров и движков создало большое количество уникальных для каждого из них функций. Их использование в JavaScript делает сайт лучше и привлекательнее для посетителя.

Чтобы правильно использовать эти функции необходимо знать, какой браузер в данный момент использует пользователь. Единственный правильный способ определить браузер в JavaScript - Useragent. Вот небольшой скрипт, который возвращает объект с различными свойствами, в том числе - мобильный или нет браузер, а также версию Android (может оказаться полезным):

var uAgent = navigator.userAgent || '';
var browser = {
version : (uAgent.match( /.+(?:me|ox|on|rv|it|era|ie)\/: / ) || [0,'0'])[1],
opera : /opera/i.test(uAgent),
msie : (/msie/i.test(uAgent) && !/opera/i.test(uAgent)),
msie6 : (/msie 6/i.test(uAgent) && !/opera/i.test(uAgent)),
msie7 : (/msie 7/i.test(uAgent) && !/opera/i.test(uAgent)),
msie8 : (/msie 8/i.test(uAgent) && !/opera/i.test(uAgent)),
msie9 : (/msie 9/i.test(uAgent) && !/opera/i.test(uAgent)),
msie10 : (/msie 10/i.test(uAgent) && !/opera/i.test(uAgent)),
mozilla : /firefox/i.test(uAgent),
chrome : /chrome/i.test(uAgent),
safari : (!(/chrome/i.test(uAgent)) && /webkit|safari|khtml/i.test(uAgent)),
iphone : /iphone/i.test(uAgent),
ipod : /ipod/i.test(uAgent),
iphone4 : /iphone.OS 4/i.test(uAgent),
ipod4 : /ipod.OS 4/i.test(uAgent),
ipad : /ipad/i.test(uAgent),
ios : /ipad|ipod|iphone/i.test(uAgent),
android : /android/i.test(uAgent),
bada : /bada/i.test(uAgent),
mobile : /iphone|ipod|ipad|opera mini|opera mobi|iemobile/i.test(uAgent),
msie_mobile : /iemobile/i.test(uAgent),
safari_mobile : /iphone|ipod|ipad/i.test(uAgent),
opera_mobile : /opera mini|opera mobi/i.test(uAgent),
opera_mini : /opera mini/i.test(uAgent),
mac : /mac/i.test(uAgent),
webkit : /webkit/i.test(uAgent),
android_version: parseFloat(uAgent.slice(uAgent.indexOf("Android")+8)) || 0
};

Очень часто необходимо сделать на сайте выпадающее при наведении меню. Большинство веб-девелоперов используют для этого JavaScript / Jquery. Это конечно хорошо, но такого роди задачи легко решаются с помощью HTML / CSS.

Вот простой пример HTML-кода меню...