Верстка на атрибутах элементов и ИЕ11

CSS предоставляет нам возможность использовать не только классы, элементы и ID, но и атрибуты. При этом у атрибута может быть свое значение. И по по этом значению мы можем применять к элементам разное оформление. На нынешнем проекте я попробовал использовать такой подход. Для разметки на flexbox я создал в стилях вот такие конструкции:

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

И так далее и тому подобное для использования возможностей flexbox.
А потом решил посмотреть на всё в Internet Explorer 11.
Сказать, что ничего не работало, не могу. Но все работало настолько удручающе медленно, что пользоваться интерфейсом было почти совершенно невозможно.
Немного технических деталей о проекте.
Это SPA на Angular 1x. Идет медленная миграция на React. Для стилей изначально использовали SASS, сейчас переписываем на PostCSS. Графические ресурсы в виде SVG.
Когда ИЕ11 начал подтупливать, я списывал это на большое количество JS и медленность Angular. Но когда простейший hover эффект стал отрабатывать с задержкой в секунду и более я таки решил посмотреть на вкладку Производительность, что встроена в отладчик ИЕ11.
К своему большому огорчению увидел, что основное время ИЕ11 тратит на расчёт и перерасчёт стилей :( На каждый элемент разметки, а их на странице очень много (списки, таблицы etc), ИЕ тратил от 2 до 4 десятых секунды!!!
И я стал искать.
И интернет подсказал, что проблема может крыться в использовании атрибутов для написания стилей.
В одной из статей на подобную проблему автор привел и пример своего решения. У них тоже в продукте использовался Ангуляр, и чтобы не перелопачивать кучу шаблонов для удаления атрибутов и замены их аналогичными по содержанию классами, автор написал несколько директив, которые просто добавляли классы элементам, у которых были атрибуты.
HTML

<div layout></div>

JS

module.exports = ['layout', /* @ngInject */ () => {
    return {
        restrict: 'A',
        controller: /* @ngInject */ ($element,$attrs) => {
            if($attrs.layout === 'column') {
                $element.addClass('layout-column');
            } else {
                $element.addClass('layout');
            }
        }
    }
}];

И вот такая замена стилей на атрибутах на обычную верстку на классах снизила нагрузку на расчет стилей почти на порядок: теперь для расчет стилей уходило от 1/100 до 1/10 секунды на элемент. 1/10 это тоже немало, но таких элементов немного и это обычно неизвестные ИЕ11 теги, которые неизбежны, когда продукт построен на ангулярных компонентах. Вот таких например:

<grid-item ng-repeat="file in files"></grid-item>

В общем и целом вывод таков: пока жив ИЕ, не стоит отказываться от рекомендаций по производительной верстке. Использовать классы и не использовать атрибуты и элементы, особенно со многими вложенностями.
А я пока продолжу искать узкие места в своей верстке, чтобы окончательно привести ИЕ 11 в чувство.

Свойство flex (продолжение)

В предыдущей заметке по свойству flex есть короткая запись:

/* Одно значение, ширина/высота: flex-basis */
flex: 10em;

Вроде бы удобно, но есть одно но. Если вы хотите указанным способом задать только flex-basis, то для в браузере мы получим:

flex: 1 1 10em;

Все бы ничего, но если ранее вы указали для нужного элемента свойства flex-shrink или flex-grow, отличные от 1 1, то краткая запись flex: 10em; (например, в media query вам надо указать flex-basis) переопределит вышеуказанные flex-shrink или flex-grow.

Чудесны дела твои, webkit

А знаете ли вы, что браузерах семейства Webkit/Blink у элемента input[type="file"] есть псевдо-элемент ::-webkit-file-upload-button.
И этот псевдо-элемент можно оформлять средствами CSS. Хоть вот так :)

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

Первый postcss плагин.

В продолжение темы postcss. Если коротко, то я в восторге!
Второй день работы с postcss, и я уже пишу себе плагинчик, для перевода пикселей в EM’ы. Да, вы скажете, что уже есть такое, но дело в том, что в наследие от работы с SASS в стилях осталось много мест с вызовом SASS-функции em($font-size, $context). И чтобы не менять пока, на время миграции, этот подход, набросал плагинчик, повторяющий подобное поведение.
Не хватает пока, разве что, указания точности в настройках (precision). Чтобы уменьшить количество знаков после запятой.

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