Заметки

Вот тот CSS-файл, который я написал для сайта, сделанного в 2000-м году, поддерживаемого товарищами до 2002 года и работающему (частично до сих пор).

body {
    font-size: 15px;
    font-family: "Times New Roman", Times, serif;
}

select {
    background: #000000;
    font-size: 8pt;
    color: #FF9900;
    cursor: hand;
}

input.but {
    background: #000000;
    border-bottom: #000000 1px solid;
    border-right: #000000 1px solid;
    border-top: #777777 1px solid;
    border-left: #777777 1px solid;
    font-size: 8pt;
    color: #FF9900
}

td.menu {
    color: #FF9900;
    font-size: 12pt;
}

a:link {
    color: #FFAA00;
    font-size: 11pt;
    text-decoration:none;
}
a:visited {
    color: #FFAA00;
    font-size: 11pt;
    text-decoration:none;
}
a:hover{
    color: #CCCCCC;
    font-size: 11pt;
    text-decoration:none;
}

a.menu:link {
    color: #FFAA00;
    font-size: 12pt;
    text-decoration:none;
}
a.menu:visited {
    color: #FFAA00;
    font-size: 12pt;
    text-decoration:none;
}
a.menu:hover{
    color: #FF9900;
    font-size: 12pt;
    text-decoration:underline;
}

a.author:link {
    color: #777777;
    font-size: 8pt;
    text-decoration:none;
}
a.author:visited {
    color: #777777;
    font-size: 8pt;
    text-decoration:none;
}
a.author:hover{
    color: #CCCCCC;
    font-size: 8pt;
    text-decoration:none;
}

a.other:link {
    color: #777777;
    font-size: 11pt;
    text-decoration:none;
}
a.other:visited {
    color: #777777;
    font-size: 11pt;
    text-decoration:none;
}
a.other:hover{
    color: #CCCCCC;
    font-size: 11pt;
    text-decoration:none;
}

h3 {
    color: #FF9900;
    font-size: 15pt
}

Сам сайт вот здесь.

Сейчас повсеместно ставят всякие Retina и другие экраны с большой плотностью пикселей. Обычные картинки смотрятся архаично. Можно конечно ставить изображения увеличенные в два раза, а можно просто ипользовать векторные картинки формата SVG. Но, несмотря на 2014 год, иногда все еще можно встретить компьютеры, в которых утсановленны браузеры, неподдерживающие эту технологию. По этой причине многие ищут способы использования SVG, но чтобы IE тоже мог что-то показать вместо белого квадратика.

На самом деле все легко. Если SVG используется в качестве фонового изображения, то можно делать вот так:

.block-with-svg {
    background-image: url(/path/to/image.png);
    background-image: url(/path/to/image.svg), none;
}

А если вы просто вставили картинку, то:

<img src="/path/to/image.svg" onerror="this.src='/path/to/image.png'" />

Работает везде.

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

При разработке таких веб-приложений часто возникает множество вопросов. Один из самых важных – задержка между нажатием на какую-либо ссылку и срабатыванием события click. И чем больше устройств выходит на рынок, тем более острым становится этот вопрос. Если для Android и iOS просто необходимо было обрабатывать события на touchstart, touchmove, touchend, то с выходом новой Windows Mobile появились MSPointer events.

В данный момент существует большое количество решений этой проблемы. Однако Илья pukhalski Пухальский, с моей посильной помощью (очень маленькой), написал библиотечку tap, которая просто добавляет к стандартным событиям в JavaScript новое событие tap.

Теперь, подключив эту библиотеку, можно вешать обработчики на событие tap и все будет работать быстро и красиво.

Вот пример для Vanilla JS:

document.getElementById('any-element').addEventListener('tap', function (e) {
    // All the magic happens here
});

А вот для Jquery:

$('#any-element').on('tap', function (e) {
    // All the magic happens here
});

Посмотреть и скачать можно здесь: github.com/pukhalski/tap. Там же примеры для Zepto, Dojo, YUI, ExtJS.

Safari

Это мой основной браузер, им я пользуюсь чаще всего для празного «шатания» по интернету.

Продолжение

На календаре очередное 9 мая. По этой причине решил вот напомнить про то, как Великая Отечественная война «прошлась» по любимому Бобруйску.

Продолжение