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;

Как-то так:)

Не могу заблокировать экран в свежепоставленной Ubuntu 13.10

Ну что ты будешь делать с этой мегасистемой? Ни привычное сочетание CTRL+ALT+L, ни через верхнее меню не позволяют блокировать экран. Ни тот, ни другой способ ни к чему не приводит!
Оказывается, чтобы иметь возможность блокировать экран, необходимо доустанавливать пакет gnome-screensaver.

sudo apt-get install gnome-screensaver

Я не понимаю логики создателей Ubuntu.

Незнание закона не освобождает от ответственности, или почему надо читать документацию jQuery… �? не только :)

Мелочь, но отняла время: оказывается, читать доки по jQuery полезно :)
Задача простая: если длина значения в текстовом поле меньше некой величины, то кнопка остаётся неактивной, то есть disabled. Действовал по доступной мне логике:


if( length >= someValue ) {
    btn.removeProp( 'disabled' );
} else {
    btn.prop( 'disabled' , true );
}

�? вот если первое условие отрабатывало, то второе, то есть при удалении символов из поля, когда длина значения становилась меньше someValue, нет! �? кнопка оставалась «включённой». Потыкался, потыкался, полез в гугл, первая же ссылка, весьма давняя, дала ответ с отсылкой на документацию.
А там оказывается написано:

Note: Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead.

То есть метод removeProp() полностью удаляет такое свойство, и добавить его методом prop() не представляется возможным. Всё просто и очевидно.
�? вышеприведенный код должен быть таким:


if( length >= someValue ) {
    btn.prop( 'disabled', false);
} else {
    btn.prop( 'disabled', true );
}

Надо чаще читать доки!

CSS3 selectors. Частный случай

Люблю, знаете ли, селекторы в CSS3. Позволяют делать очень удобные штуки.
Вот, например, есть блок с иконками, расстояния между которыми не одинаковые (лого соц.сетей). Можно было бы каждой иконке дать свой класс, чтобы регулировать расстояния. Но я воспользовался селектором, проверяющим наличие строки в атрибуте элемента, а именно:

E[foo*="bar"]

Я проверял атрибут SRC у тега IMG для иконки Фейсбука, назвав иконку fb.png. Получилось что-то в этом роде:

img[src*="/assets/i/ico/fb.png"]

Таким образом, не имея доступа в шаблон, есть возможность с легкостью менять отображение документа. Для, собственно, CSS и предназначен)

P.S. Правда в этом частном случае я просто поленился сделать из иконок спрайт, что по умолчанию привело бы к наличию у каждой иконки своего класса. Грешен, каюсь.