Чисто для справки:
{
ignoreKeys: {
8: 'backspace'
, 9: 'tab'
, 13: 'enter'
, 16: 'shift'
, 17: 'control'
, 18: 'alt'
, 27: 'esc'
, 33: 'page up'
, 34: 'page down'
, 35: 'end'
, 36: 'home'
, 37: 'left'
, 38: 'up'
, 39: 'right'
, 40: 'down'
, 45: 'insert'
, 46: 'delete'
, 116: 'f5'
, 123: 'f12'
, 224: 'command'
}
}
В продолжение темы postcss. Если коротко, то я в восторге!
Второй день работы с postcss, и я уже пишу себе плагинчик, для перевода пикселей в EM’ы. Да, вы скажете, что уже есть такое, но дело в том, что в наследие от работы с SASS в стилях осталось много мест с вызовом SASS-функции em($font-size, $context). ? чтобы не менять пока, на время миграции, этот подход, набросал плагинчик, повторяющий подобное поведение.
Не хватает пока, разве что, указания точности в настройках (precision). Чтобы уменьшить количество знаков после запятой.
Сколько бы я не сопротивлялся, прогресс в CSS нагнал и меня. Когда я пришел на нынешнее место работы, SASS, который тут использовали, показался мне громоздким и неудобным. Но со временем, изучив его возможности, я так с ним сроднился, что переход на что-то другое мне казался пустой тратой времени и сил. К тому же кода уже столько, что миграция просто пугает.
Но вот пришло время изменений. Сборка стилей SASS’ом стала чуть ли на самым узким местом в проекте. Сборка стилей длится в секундах, что печалит.
Решили переходить на использование postcss. А для пущего интереса в связке с CSSNext.
На ближайшие дни и недели меня ждет увлекательное изучение нового и менее увлекательное переписывание старого.
Постараюсь описывать найденные и собранные грабли.
Всем добра!
Намасте!
Любопытную штуку завел Яндекс: платформу для издателей Яндекс Дзен.
Не удержался и завел себе канал. Поиграемся, интересно.
Бывает, что есть чем поделиться, а этот способ вроде как прост и быстр!
Немного экзотичный кейс. В проекте использован 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>Ограничусь ссылкой, но зато очень интересной, на статью об особенностях z-index. Z-index и его применение в разных в контестах
Часто дизайнеры рисуют скролбар так, чтобы он подходил под дизайн. Не задумываясь о том, как это будет сделано. Если дизайн скролбара критичен, то приходится использовать 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.
Немного печальная новость, закрывается firebug. Каким событием было его появление в свое время, просто революция! Неоценимая помощь для разработчика!!!
Но все проходит. Firebug был первым и задал пути развития инструментов для разработчиков. А сейчас и Chrome DevTools, и Firefox Developer Tools предоставляют больше возможностей да и работают быстрее.
Король умер! Да здравствует король!!!
Залез, работая с 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.
Хочется подписаться под каждой строчкой! Всем красивого и легко читаемого кода.
Намасте!
А используете ли вы мягкий перенос в своих текстах? Просто глас в пустыне :)
Это бывает очень удобно и при этом ваш текст начинает смотреться красиво! Например:
See the Pen Мягкий перенос с помощью символа by Sergey Kirichenko (@oknechirik) on CodePen.
В первом варианте и текст лучше смотрится, и места текст меньше занимает. Сплошные плюсы!
Удачи всем!