Скрол, что не останавливается

Если вы хотите, чтобы на устройствах с тачскрином скроллинг не останавливался, когда вы прекращаете скролить (отрываете палец от экрана), а продолжался ещё некоторое время, используйте свойство -webkit-overflow-scrolling.

У него есть два значения: auto и touch. ? если вам нужно описанное выше поведение, используйте значение touch.

.box {
    -webkit-overflow-scrolling: touch;
}

IE10+ и нелюбовь. Небольшой хак для CSS для IE10+

Моя нелюбовь как разработчика к Internet Explorer насчитывает уже много лет. Но уже достаточно долго я не ругался на него так, как за последние недели. В очередном проекте со навороченными интерфейсами ??Е проявил себя во всей красе. ?? мне пришлось, как и много лет назад, искать хаки для ??Е. Благо на проекте поддерживается ??Е только в версиях от 10-го и выше. Найденный хак @media -ms-high-contrast очень облегчил мне жизнь:


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   /* стили только для IE10+ */
}

Update: Мне нужен был хак, чтобы разоброться с багами в ??Е с flexbox. Вместо долгого и пространного описания дам ссылку на известные баги с flexbox’ом.

Разная скорость анимации при использовании css-transition на события mouseover и mouseout

Скажем, возникла необходимость, чтобы скорость анимации для CSS-transition была разная при событиях mouseover и mouseout. Пусть при наведении (mouseover) курсора прозрачность элемента меняется плавно, а при уходе с элемента (mouseout) прозрачность восстанавливается быстрее.
Для этого надо написать следующую последовательность CSS-правил:


.selector {
    opacity: 1;/*for example*/
    transition: opacity .5s ease-in-out;
}
.selector:hover {
    opacity: .5;/*for example*/
    transition: opacity 1s ease-in-out;
}

Время анимации указанное в первом правиле будет использовано при анимации на mouseout!
А время из второго правила — для анимации на mouseover!

P.S. Браузерные префиксы к transition можете добавить как вручную, так и используя пре- или пост-процессоры для CSS (grunt, gulp плагины etc).

Odesk и тест на знание

Зарегистрировался из любопытства на сервисе Odesk и указал навыки. Заглянул в профиль и увидел предложение пройти тесты, чтобы оценить указанное. Я уж грешным делом думал, что знаю CSS, мой инструмент и хлеб. Но вопросы, предложенные в тесте, оказались таковы, что я набрал только 3.25 из 5 баллов. Хоть это и выше среднего, но всё равно печально )
Надо подтянуть теоретические знание будет, а то использование GRUNT, SASS и LESS, сняв с меня много рутины с помощью миксинов, префиксеров и т.п., расслабило сильно. Учим мат.часть на зимних каникулах.

О сколько нам открытий чудных :)

Только что узнал о замечательном псевдоэлементе ::-ms-clear. Он задаёт стиль кнопки для очистки текстового поля в браузерах семейства IE.
P.S. Не является стандартом.

Flexbox и растягивание вложенных элементов на всю ширину родителя

Если хотите, чтобы вложенные элементы, так сказать flex-items, заняли всю ширину родителя (если у вас flex-direction: row) или по высоте (если flex-direction: column), пропишите им свойство flex-grow, отличное от 0 (нуля), что задано по умолчанию.
P.S. Flexbox нереально крут :) Очень удобный инструмент для создания разметки. Вовсю стал его использовать только недавно.

Retina и фоновые картинки

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

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
    .class {
        background-image: url(retina_image);
    }
}

Вероятно я не был внимателен, читая этот рецепт. Оказалось, что недостаточно подпихнуть ретине картинку с удвоенным разрешением. Обязательным является прописывание свойства background-size. Например, так:

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
    .class {
        background-image: url(retina_image);
        background-size: contain;
    }
}

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

background-size: 100px 100px;

Как-то так:)

И снова о внимательности и аккуратности

В очередном проекте необходимо было использовать кросс-доменный аякс. Конечно, воспользовался решением предлагаемым библиотекой jQuery.

Написал всё честь по чести, два почти одинаковых запроса, на один и то же домен, проверяю. Первый запрос проходи на ура, второй выдает ошибку:


XMLHttpRequest cannot load http://domain-name.example/test?params. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://test.local' is therefore not allowed access.

А вот приблизительный вид запросов:

$.ajax({
    url : 'http://domain-name.example/test?params',
    dataType : 'jsonp',
    jsonp : 'callbackFuncName',
});

и

$.ajax({
    url : ' http://domain-name.example/test?params2',
    dataType : 'jsonp',
    jsonp : 'callbackFunc2Name',
});

И вот второй вызов и давал ошибку.

Если внимательно посмотреть, то видно, что вся разница в вызовах — это пробел в значении url перед http.

Не знаю ж откуда он там взялся, это пробел. Но мне он стоил нескольких часов гугления и экспериментов. Узнал за это время что-то новое для себя по ajax, jsonp etc.

Когда заметил пробел и убрал его, то всё замечательно заработало!

Так что вот. Очередной призыв быть внимательным и аккуратным со своим кодом :)

P.S. А вообще удивительно, хотя я могу не охватывать все варианты, но почему в строке url не вырезается на уровене библиотеки jQuery пробел в начале строки.

Внутренний DNS-кеш в Хроме

Относительно недавно узнал, что в гугловском Chrome есть внутренний DNS cashe. Чтобы его очистить, необходимо в адресной строке набрать chrome://net-internals/#dns  и нажать на кнопку Clear host cache.

Лень или безразличие разработчиков Vaio Care

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

Сегодня в очередной раз обновилась мало нужная, на мой взгляд, предустановленная на  мой Vaio софтина (намеренно так, не очень уважительно) Vaio Care. После обновления оно самозапустилось и предстало во всей красе:

vaio-care

 

Обратите внимание на ярко-голубой прямоугольник с надписью 0 Проблем(а/о) и ниже на белом фоне продолжение Обнаруженные в системе на данный момент. Не правда ли, звучит очень не по-русски: 0 Проблем(а/о) Обнаруженные в системе на данный момент, — но разработчики предусмотрели все сразу варианты, не заморачиваясь на падежи и всё остальное. У меня такой подход вызывает сильное неприятие.

Ведь насколько было бы лучше, если бы было  предусмотрено несколько вариантов:

  1. Если проблем нет, то написать: Проблем не обнаружено. Не добавляя ни количество 0, не несущее никакой полезной информации, ни добавление, что 0 проблем в некоей системе, что тоже излишне и усложняет ненужным образом сообщение. Проблем не обнаружено. ? точка :)
  2. А далее немного поиграть с окончаниями при разном количестве проблем:
    1. 1 проблема,
    2. 2, 3, 4 проблемы,
    3. 5, 6, 7 и так далее проблем обнаружено.

? опять же без упоминания некой системы.

Ведь так сообщения Vaio Care будут восприниматься гораздо легче. ? не будут выглядеть, как что-то недоделанное.