Если вы используете HEX-нотацию для задания цветов в своих стилях и хотите использовать прозрачность в цвете, то вот простая подсказка, если не хочется пересчитывать прозрачность. Уже все пересчитали за нас: Шестнадцатеричный код цвета для прозрачности от 100% до 0% списком.
Placeholder по-русски
Чем заменить слово placeholder в описании задачи по-русски?
— Окнечирик (@oknechirik) August 21, 2018
Как открыть меню разработчика на реальном устройстве при отладке React-Native
You can use this command from the shell to open react native dev menu
?спользуйте команду:
adb shell input keyevent 82
?ли просто хорошенько встряхните аппарат :)
Дебаг React-Native приложения в браузере
При разработке React Native приложения удобно отслеживать изменения с помощью браузера. Включить это возможность на эмуляторе можно так:
-
- Ctrl+M
- Debug JS remotly
Откроется вкладка Chrome, в консоли которой вы сможете видеть свои console.log, ошибки etc.
Но по умолчанию открывается вкладка с адресом http://10.0.2.2:8081/debugger-ui. Точнее по такому адресу не открывается. Замените на http://localhost:8081/debugger-ui и все заработает.
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.
Для проверки работы медиа-запроса откройте инспектор и переключите вид на мобильное устройство.
Поддержка браузерами уже достаточная, на мой взгляд, чтобы пользоваться этим меди-запросом.
Верстка на атрибутах элементов и ИЕ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. В продолжение темы :)
Я в шоке — если на div повесить onClick и не указать cursor: pointer, то в iOS событие не сработает. o_0
— Dimox (@Dimox_ru) 10 октября 2017 г.
Свойство 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;