Используете ли вы Flexbox? Часть 2-я

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

$flex-properties: (
    justify-content: (flex-start flex-end center space-between space-around),
    align-items: (flex-start flex-end center baseline stretch),
    align-content: (flex-start flex-end center space-between space-around stretch)
);

Затем циклом перебираем все свойства:

@each $key, $properties in $flex-properties {
    @each $property in $properties {
        [#{$key}="#{$property}"] {
            #{$key}: #{$property};
        }
    }
}

И получаем на выходе вот такой CSS:
Читать далее Используете ли вы Flexbox? Часть 2-я

Firefox, button and flexbox

Как интересно! Если вы хотите красиво расположить внутри кнопки несколько элементов, используя чудную технологию flexbox, то вас может ждать неприятный сюрприз. Внутри элемента button в Firefox 46.0.1 (в других не проверял) flexbox не работает :(
Как это хотелось бы видеть и как это выглядит в Хроме и даже в ИЕ11:
flexbox внутри button в Хроме
И как это в Firefox:
flexbox внтури кнопки в Firefox

See the Pen eZqEGy by Sergey Kirichenko (@oknechirik) on CodePen.

P.S. Для себя эту проблему решил, обернув содержимое кнопки div’ом.
P.P.S. И баг есть такой.

Update: проблема решена в Firefox 52!!!

Используете ли вы Flexbox?

Чудесная технология для верстки этот flexbox. Чем больше им пользуюсь, тем больше нравится.
На текущем проекте использую подход, позаимствованный у Angular Material. Angular Material вместо CSS-классов использует атрибуты. Вот и ваш покорный слуга решил использовать этот подход. Для задания свойства display: flex; flex-direction: row; атрибут mo-layout без значения, а для display: flex; flex-direction: column; тот же атрибут но со значением column. Примерно так:

[mo-layout] {
    display: flex;
    flex-direction: row;
}
[mo-layout="column"] {
    display: flex;
    flex-direction: column;
}

Flexbox

Чудесная технология. Позволяет решить практически любую задачу по разметке. Исключением будет разве что необходимость сверстать грид с табличной гибкой структурой. То есть, когда есть необходимость растяжения колонок на ширину самой широкой ячейки. Но для этого есть display: table;display: table-row;display: table-cell;. Сам я изучил flexbox по простому и исчерпывающему гайду на CSS-Tricks.

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

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

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

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

ИЕ10+ и нелюбовь. Небольшой хак для 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).

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

Только что узнал о замечательном псевдоэлементе ::-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;

Как-то так:)