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 в чувство.

Свойство 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.

Свойство flex

Краткая запись для трех отдельных свойств flex элементов: flex-grow, flex-shrink и flex-basis.
(Здесь — для памяти.)

/* 0 0 auto */
flex: none;

/* Одно значение, число без размерности: flex-grow */
flex: 2;

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

/* Два значения: flex-grow | flex-basis */
flex: 1 30px;

/* Два значения: flex-grow | flex-shrink */
flex: 2 2;

/* Три значения: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* Глобальные значения */
flex: inherit;
flex: initial;
flex: unset;

Стили для скролбара

Часто дизайнеры рисуют скролбар так, чтобы он подходил под дизайн. Не задумываясь о том, как это будет сделано. Если дизайн скролбара критичен, то приходится использовать Javascript-решения, имитирующие браузерный скролбар. Но ведь это чисто оформительская задача, почему бы не использовать ля этих целей CSS, который как раз и отвечает за оформление сайта/интерфейса. Но, к сожалению, только браузеры на Webkit дают нам контроль над внешним видом скролбара.


::-webkit-scrollbar { width: 3px; height: 3px;}
::-webkit-scrollbar-button {  background-color: #666; }
::-webkit-scrollbar-track {  background-color: #999;}
::-webkit-scrollbar-track-piece { background-color: #ffffff;}
::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
::-webkit-scrollbar-corner { background-color: #999;}}
::-webkit-resizer { background-color: #666;}

Да еще ИЕ позволяет частично перекрасить скролбар.


body{
    scrollbar-base-color: #C0C0C0;
    scrollbar-base-color: #C0C0C0;
    scrollbar-3dlight-color: #C0C0C0;
    scrollbar-highlight-color: #C0C0C0;
    scrollbar-track-color: #EBEBEB;
    scrollbar-arrow-color: black;
    scrollbar-shadow-color: #C0C0C0;
    scrollbar-dark-shadow-color: #C0C0C0;
}

А вот в Firefox такой возможности нет от слова совсем. И на багзилле давным-давно заведен баг по этому поводу. И есть возможность проголосовать за то, чтобы Firefox имплементировал возможность оформить скролбар средствами CSS.

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

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

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

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

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

Немного боли от angular material (глас вопиющего)

О, создатели
Зачем, зачем, зачем вы делаете вот так?

md-select-menu.md-default-theme md-content md-option:not([disabled]):focus, 
md-select-menu md-content md-option:not([disabled]):focus, 
md-select-menu.md-default-theme md-content md-option:not([disabled]):hover, 
md-select-menu md-content md-option:not([disabled]):hover {
    background: rgb(238,238,238);
}

Или так:

.md-chips md-chip ._md-chip-remove md-icon {}

Четверная вложенность и элементы в селекторах!
Вот и поди переопредели эти свойства при необходимости :'(