Капелька типографики

А используете ли вы мягкий перенос ­ в своих текстах? Просто глас в пустыне :)
Это бывает очень удобно и при этом ваш текст начинает смотреться красиво! Например:

See the Pen Мягкий перенос с помощью символа ­ by Sergey Kirichenko (@oknechirik) on CodePen.


В первом варианте и текст лучше смотрится, и места текст меньше занимает. Сплошные плюсы!
Удачи всем!

Как спрятать «глаз» у поля пароля в IE

В браузерах от Microsoft для поля типа пароль (input type=password) есть возможность посмотреть, что вы ввели. Для этого в поле справа появляется «глаз», когда вы начинаете вводить пароль. При клике на «глаз» вы увидите пароль. Но не всегда этот «глаз» вписывается, в дизайн вашего сайта или приложения. Хочется или спрятать его, или заменить на свой.
Этот элемент — это псевдо-элемент ::-ms-reveal. �? им можно управлять через CSS. Например вот так:

::-ms-reveal {display: none;}

Вращение через CSS transform rotate

Забавная штука. Если вы вращаете элемент через CSS-transform, то вращение в Хроме будет в одну сторону, а в ФФ и �?Е в другую)
Чтобы вращение было в одну сторону надо установить начальное значение для rotate.

�?спользуете ли вы 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;
}

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).