Interaction Media Features

Interaction Media Features — это тип медиа-запроса в стилях. Определяет каким путем пользователь может взаимодействовать с вашим приложением.
Простой способ разделить стили для устройств с различными типами взаимодействия, например, тач-устройства и десктоп, управляемый мышкой.
Сейчас во многих интерфейсах управляющие элементы показываются только при наведении курсора мыши по событию :hover. Но на тач-девайсах такое событие отсутствует как класс. И вот тут нам как раз пригодится рассматриваемый медиа-запрос.
Вот простой пример кода:
HTML

<div class="parent">
  parent
  <div class="child">child</div>
</div>

CSS

.parent:not(:hover) .child {
  /* здесь мы указываем показывать child элемент только при наведении на parent'а */
  display: none;
}
@media (hover:none) {
  .child {
/* а тут указываем, что child должен быть виден на устройствах, где hover отсутствует */
    display: block!important;
  }
}

И таким образом мы покажем пользователю с тач-устройством то, что на ему недоступно без события :hover.
И живой пример на codepen.

See the Pen Interaction Media Features by Sergey Kirichenko (@oknechirik) on CodePen.


Для проверки работы медиа-запроса откройте инспектор и переключите вид на мобильное устройство.
Toggle device toolbar

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

Верстка на атрибутах элементов и ИЕ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 в чувство.

Safari browser как ИЕ6 наших дней

Если вы спросите меня какой браузер сейчас самый сложно поддерживаемый,то я не задумываясь скажи, что это Сафари. Такого количества непредсказуемых багов, как в Сафари, я никак не ожидал.
Это и проблема с градиентами в SVG, если у вас используется тег BASE, и проблемы с flexbox, и некорректная работа с такими единицами измерения, как VH и VW при зуме. Жесть.
UPD. В продолжение темы :)

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

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

Прогресс в CSS нагнал и меня

Сколько бы я не сопротивлялся, прогресс в CSS нагнал и меня. Когда я пришел на нынешнее место работы, SASS, который тут использовали, показался мне громоздким и неудобным. Но со временем, изучив его возможности, я так с ним сроднился, что переход на что-то другое мне казался пустой тратой времени и сил. К тому же кода уже столько, что миграция просто пугает.
Но вот пришло время изменений. Сборка стилей SASS’ом стала чуть ли на самым узким местом в проекте. Сборка стилей длится в секундах, что печалит.
Решили переходить на использование postcss. А для пущего интереса в связке с CSSNext.
На ближайшие дни и недели меня ждет увлекательное изучение нового и менее увлекательное переписывание старого.
Постараюсь описывать найденные и собранные грабли.
Всем добра!
Намасте!

Темы в angular material

Немного экзотичный кейс. В проекте использован angular material и, частично, его механизм темизации интерфейса. Есть несколько приложений, использующих общие стили. Часть стилей переопределяет стили из матириала. В одном из приложений имя темы указывается явно на все приложение, а другом не используются вообще, а применяются кастомные стили. Это дано.
Что надо? Чтобы в случае, если для приложения явно указана тема, отличная по оформлению от кастомных стилей, использовались кастомные стили, а не стили темы.
В angular material есть механизм указания темы для отдельных элементов библиотеки через атрибут md-theme. Так вот, если вам на каком-то элементе не нужно, чтобы использовалась тема приложения или даже дефолтная тема, оставьте значение этого атрибута пустым. И пишите кастомные стили, какие вам нужны.

<md-radio-group ng-model="model" md-theme="">
  <md-radio-button ng-repeat="setting in settings" 
                      ng-value="setting.value"
                      class="app-color">
    <span ng-bind="setting.title"></span>
  </md-radio-button>
</md-radio-group>

Конец эпохи Firebug

Немного печальная новость, закрывается firebug. Каким событием было его появление в свое время, просто революция! Неоценимая помощь для разработчика!!!
Но все проходит. Firebug был первым и задал пути развития инструментов для разработчиков. А сейчас и Chrome DevTools, и Firefox Developer Tools предоставляют больше возможностей да и работают быстрее.
Король умер! Да здравствует король!!!

Стайл-гайд для SASS

Залез, работая с bourbon.io, в их исходники. И там нашел короткий, но исчерпывающий стайл-гайд для написания кода в SASS. Просто процитирую:

SCSS Style Guide

  • Two spaces, no tabs.
  • Dashes instead of underscores or camel case: linear-gradient not linear_gradient or linearGradient
  • Names should be descriptive and written in full-words: $all-text-inputs-hover not $hover or $alltxthvr
  • Space between property and value: width: 20px not width:20px
  • Declarations within a block should be ordered alphabetically.
  • Blank lines between rules.
  • No trailing whitespace. Blank lines should not have any space.

Хочется подписаться под каждой строчкой! Всем красивого и легко читаемого кода.

Намасте!

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

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

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

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

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