Уже с давних пор, при добавлении ссылки на пост в моем блоге в сообщение твиттера, в приложении сервиса или у них на сайте можно увидеть вот такую карточку статьи:

Называется это Twitter Card и делается это очень легко с помощью нескольких мета-тегов на странице:

<meta name="twitter:site" content="@mobilaname">
<meta name="twitter:creator" content="@ashorror">
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="http://blog.mobila.name/post/543cf10b11d0c/">
<meta name="twitter:title" content="Украина, Херсонская область">
<meta name="twitter:description" content="Вчера утром поездом выехал в Украину. Первый пункт назначения - Новая Каховка.Поезд примчал меня в Мелитополь. Сюда едут те, кто потом едет на отдых на Азовское море. Население Мелитополя - 150 тысяч человек.">
<meta name="twitter:image" content="http://ic.pics.livejournal.com/larchanka/20861394/31955/original.jpg">

Давайте разберем их все.

• twitter:site - аккаунт сайта в твиттере, включая '@'
• twitter:creator - аккаунт автора в твиттере, включая '@'
• twitter:card - Тип карточки: summary, photo или video.
• twitter:url - Адрес страницы в интернете.
• twitter:title - Заголовок статьи.
• twitter:description - Описание статьи до 200 символов.
• twitter:image - Изображение для карточки.

Когда все эти теги уже вставлены на страницы вашего сайта, самое время подать заявку для вашего домена. Подтверждение заявки – символический процесс и проходит почти сразу. Сделать этом можно на специальной странице.

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

Вот способ узнать необходимые параметры с помошью неизменяемых свойств naturalWidth и naturalHeight.

var src="http://path.to/image.jpg",
    img = new Image();

img.src = src;

img.onload = function() {
    console.log('Ширина изображения: %s пикселей', this.naturalWidth);
    console.log('Высота изображения: %s пикселей', this.naturalHeight);
}

При разработке отзывчивых сайтов в CSS используются всеми любимые @media-запросы. В 99% случаев в коде можно увидеть только запросы содержащие min-width, max-width, min-device-width и max-device-width. Иногда попадаются запросы на тип устройства и его положение в пространстве.

С выходом устройст с высокой плотностью экрана, например Retina от Apple, возникала проблема отрисовки некоторых элементов на таких дисплеях. В CSS есть специальный media-query и для этих целей.

Пример для экранов «яблочных устройств»:

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* CSS для ретины */
}

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

/* 1.25 dpr */
@media
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi){
    /* CSS для ретины */
}

/* 1.3 dpr */
@media
(-webkit-min-device-pixel-ratio: 1.3),
(min-resolution: 124.8dpi){
    /* CSS для ретины */
}

/* 1.5 dpr */
@media
(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi){
    /* CSS для ретины */
}

/*2.0 dpr */
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi){
    /* CSS для ретины */
}

Взял отсюда.

Делать одностраничные сайты – модный нынче тренд. Но всегда встает вопрос написания плавной анимации по разделам сайта. Можно конечно взять jQuery и какой-никакой готовый плагин. Но не для всех страниц есть смысл подключать «массивную» библиотеку, проще написать свое решение.

Напишем наше меню:

<ul class="menu">
    <li><a onclick="return app.scrollTo(this)" href="#news">Новости</a></li>
    <li><a onclick="return app.scrollTo(this)" href="#about">О нас</a></li>
    <li><a onclick="return app.scrollTo(this)" href="#contacts">Контакты</a></li>
</ul>

Дабы не писать метод добавления обработчика кликов по меню, я вписал вызов функции прямо в ссылку: onclick="return app.scrollTo(this)". Не самое лучшее, но сто процентов работающее решение.

В начале каждого раздела для любого элемента должен быть проставлен id с соответствующим значением, например id="news".

var app = {
    scrolled: 0,
    newPosition: 0,
    interval: null,
    speed: 0,

    scrollTo: function(el) {
        var link = el.getAttribute('href').replace('#', ''),
            anchor = document.getElementById(link);

        var location = 0;
        if (anchor.offsetParent) {
            do {
                location += anchor.offsetTop;
                anchor = anchor.offsetParent;
            } while (anchor);
        }
        location = location >= 0 ? location : 0;

        this.animateScroll(location);
        return false;
    },

    animateScroll: function(pos) {
        document.documentElement.scrollTop = 1;
        var element = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement : document.body,
            start = element.scrollTop,
            change = pos - start,
            currentTime = 0,
            increment = 20,
            duration = 300;

        var animateScroll = function(){        
            currentTime += increment;
            var val = Math.easeInOutQuad(currentTime, start, change, duration);
            element.scrollTop = val;
            if(currentTime < duration) {
                setTimeout(animateScroll, increment);
            }
        };
        animateScroll();
    }
};      

Функция, реализующая ускоряющуюся и замедляющуюся в конце анимацию (не моя):

Math.easeInOutQuad = function (t, b, c, d) {
    t /= d/2;
    if (t < 1) return c/2*t*t + b;
    t--;
    return -c/2 * (t*(t-2) - 1) + b;
};

В продолжение примеров различных UI-элементов сайтов, которые можно сделать без Javascript, сегодня распишу как можно сделать выезжающее меню на чистом CSS.

И снова ДЕМО, для начала.

Карусели, несмотря на всю свою ущербность, продолжают отсаватся очень востребованным компонентом на тысячах сайтов. Чаще всего для из создания используется Javascript. В этой статье я попробую описать технику создания отзывчивой (резиновой, responsive) карусели на чистом CSS.

Для начала ДЕМО.

Любой веб-сайт с годами становится все больше и больше. Не смотря на рост скорости интернета, сайт все равно грузится все дольше и дольше. Что же делать?

Все известно, что в какой-то определенный момент гигант продаж кривых операционных систем решил сделать общую 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
    };
})();

Вот тот 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'" />

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