Любой веб-сайт с годами становится все больше и больше. Не смотря на рост скорости интернета, сайт все равно грузится все дольше и дольше. Что же делать?
Все известно, что в какой-то определенный момент гигант продаж кривых операционных систем решил сделать общую Windows для компьютеров и мобильных устройств.
Окей, идея не нова, майкрософт богата – должно что-нибудь получиться. Да и разрабатывать должно стать как бы легче. Но...
Вот с майкрософт всегда есть какие-то «но». Вместо того, чтобы взять чужие наработки, общепринятые стандарты и иже с ними, решили изобрести велосипед и добавили префикс MS к Pointer Events. Все смирились и в коде появились вот такие строки:
$('.selector').on('MSPointerDown', function () {
//...
});
$('.selector').on('MSPointerMove', function () {
//...
});
$('.selector').on('MSPointerUp', function () {
//...
});И снова НО. В своем последнем браузере, в одной из последних версий, майкрософт без всяких предупреждений просто взяли и выкинули поддержку своего собственного молодого стандарта. Все то, что написано выше перестало работать.
А все вот почему, в корпорации решили, что префикс MS и camelCase никому не нужны, плюнув на обратную совместимость. Нынче делать надо так.
$('.selector').on('pointerdown', function () {
//...
});
$('.selector').on('pointermove', function () {
//...
});
$('.selector').on('pointerup', function () {
//...
});Теперь самое интересное. Если вы не используете какие-либо библиотеки, то:
document.querySelector('.selector').addEventListener('MSPointerDown', function() {
//...
}, false);работать будет! Вопрос: ПОЧЕМУ и ЗАЧЕМ?
Немного полезного. Определить одно или другое можно вот таким нехитрым образом:
var supports = (function() {
return {
msPointerEvents: window.navigator.msPointerEnabled || false,
pointerEvents: window.navigator.pointerEnabled || false
};
})();Сейчас повсеместно ставят всякие 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'" />Работает везде.
Как-то раз столкнулся с необходимостью сгенерировать в Javascript хэш из строки. Да не просто сгенерировать, а так, что бы он полностью совпал с хэшем, сделанным в Java. Полазил в интернете и нашел.
String.prototype.hashCode = function() {
var hash = 0;
try {
if (this.length == 0) return hash;
for (i = 0; i < this.length; i++) {
char = this.charCodeAt(i);
hash = ((hash << 5) - hash) + char;
hash = hash & hash; // Convert to 32bit integer
}
return hash;
} catch (e) {
throw new Error('hashCode: ' + e);
}
};
Часто возникает необходимость в JavaScript найти данные в массиве или объекте по ключу и значению. Стандартной функции или метода к сожалению не существует. Ниже пример такой функции, в которую нужно передать параметр arr (массив или объект) и keyObj (ключ и значение, например {id:10}).
Всем давно и доподлинно известно, что использовать глобальные переменные в JavaScript не принято. Почему? Существует масса причин, все они, конечно же, глупы, но давайте придерживаться такой теории.
Однако иногда возникает необходимость иметь и пользовать глобальную переменную. Но как тогда быть? А если вдруг мы пишем для Node.js, там ведь нету глобального объекта window, там root? А если я хочу использовать свой код и во фронтенде и на сервере?
За сим предлагаю такое решение, которое знатно растиражированно, но никто о нем никогда не помнит.
var global = (function () {
return this || (1, eval)('this');
}());
Теперь у нас есть глобальный объект global, который обладает всеми свойствами window / root. Элегантное и просто решение.
Придумал не я, украл вот тут.
Однажды один мой товарищ попросил сделать для одного его проекта кнопку удаления, которая содержала бы внутри себя подтверждение. Т.е. как это сделано обычно? Нажимаешь удалить - выскакивает окно с вопросом "Вы уверены, что ходите удалить то-то и то-то?" - нажимаешь "Да", после чего удаляется то, что надо. Так вот, он хотел чтобы нажимаешь "Удалить", внутри кнопки меняется текст на "Вы уверены?", нажимаешь еще раз и происходит удаление.
Идея показалась мне интересной, и я решил поделиться способом простой реализации.
Ниже несколько интересных CSS-хаков и свойств, о существовании которых забывают, а то и вовсе не знают.
html {
overflow-y: scroll;
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
Вы знаете, что если для html жестко указать скролл по вертикали, то при динамическом добавлении контента у вас не будет неожиданного ресайза, когда скролл понадобиться, а мобильные браузеры не будут подстраивать размер шрифта если задать text-size-adjust.
Оформление современных сайтов состоят из множества стилей, которые могут работать или не работать в тех или иных браузерах. Чтобы всё работало везде, для некоторых свойств необходимо использовать префиксы разных браузеров. По английски они называются vendor prefixes.
Ниже список самых необходимых и популярных свойств, использующих префиксы (или где их ставят по ошибке):
border-radius : Если не нужна поддержка Firefox 3.6 или iOS 3.2
box-shadow : Если не нужна поддержка Firefox 3.6 или iOS 4.3 или Safari 5.0
text-shadow
border-image
CSS Transitions : -webkit- для Safari 6.0
CSS 3D Transforms : -webkit- для Safari и Chrome
CSS Animation : -webkit- для Safari и Chrome
CSS Gradients : -webkit- для Safari
Box Sizing : -moz-.
CSS Calc : -webkit- для Safari 6.0
CSS Transforms : -webkit- для Safari и Chrome и -ms- для IE9
Flex Box : -webkit- и -ms-.
Columns : -webkit- и -moz-.
Почему я не упомянул про префикс -o-, который использовался в опере до 12 версии включительно? Потому, что о ней стоит упоминать только в контексте сайтов, которые будут сделаны для просторов СНГ. Если это ваш случай, то помните - Opera <=12 занимает около 9 процентов СНГ-шного рынка браузеров. В таком случае префикс -o- необходимо добавлять для свойтсв, для которых могут ставиться префиксы -webkit- или -moz-.
Существует несколько популярных вариантов отображения иконок на веб-странице:
В своей работе я, например, чаще всего использую картинки (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 и несут внутри себя сотник классных иконок.
Экономьте свои силы и траффик пользователей, используйте встроенные шрифты. Кстати, это очень кроссбраузерно и кросссистемно.
1.1 тыс.
2.5 тыс.
17.1 тыс.
2.2 тыс.
3 тыс.
13.2 тыс.