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

Прогресс в 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>

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

Часто дизайнеры рисуют скролбар так, чтобы он подходил под дизайн. Не задумываясь о том, как это будет сделано. Если дизайн скролбара критичен, то приходится использовать 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.

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

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

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.