Этот баг до сих пор не пофиксили, сегодня с ним столкнулся. Функционально кнопка работает и по клику мышью, и по нажатию пробела, — с этим никаких проблем. Только вот визуально нажатой кнопка становится по клику мышью, а на пробел ей наплевать. Думал, я накосячил, ан нет.
P.S. Оказалось проще заменить button на div и отрисовать нажатое состояние ручками. В принципе, можно было оставить и button, но, к сожалению, Chrome отрисовывает нажатое состояние button по клику мышью не так, как Firefox.
Здравствуйте, Lazytech, Вы писали:
L>68851 – HTML buttons should go :active on keydown (spacebar)
L>Этот баг до сих пор не пофиксили, сегодня с ним столкнулся. Функционально кнопка работает и по клику мышью, и по нажатию пробела, — с этим никаких проблем. Только вот визуально нажатой кнопка становится по клику мышью, а на пробел ей наплевать. Думал, я накосячил, ан нет.
L>P.S. Оказалось проще заменить button на div и отрисовать нажатое состояние ручками. В принципе, можно было оставить и button, но, к сожалению, Chrome отрисовывает нажатое состояние button по клику мышью не так, как Firefox.
Надо оставлять button, несмотря ни на что.
Доступность важнее единичного бага в далеко не самом распространённом браузере.
Здравствуйте, Doom100500, Вы писали:
D>Надо оставлять button, несмотря ни на что. D>Доступность важнее единичного бага в далеко не самом распространённом браузере.
В итоге остановился на
<input type="button" ...>
Но все-таки сделал кастомный вид для нажатой кнопки, не зависящий ни от конкретного браузера, ни от способа нажатия кнопки (клик мыши или клавиша пробела либо Enter).
Оказывается, для того, чтобы в Chrome не было своего browser-specific вида нажатой кнопки по клику мышью, достаточно прописать одну строчку в стилях:
Здравствуйте, Lazytech, Вы писали:
L>68851 – HTML buttons should go :active on keydown (spacebar)
L>Этот баг до сих пор не пофиксили, сегодня с ним столкнулся. Функционально кнопка работает и по клику мышью, и по нажатию пробела, — с этим никаких проблем. Только вот визуально нажатой кнопка становится по клику мышью, а на пробел ей наплевать. Думал, я накосячил, ан нет.
Немного офф, а на это кто-то вообще обращает внимание? Можно же считать это трактовкой так: пробел это акселератор, никто же не возмущается при нажатии esc что не происходит восхитительных показов картинок
Здравствуйте, RonWilson, Вы писали:
RW>Немного офф, а на это кто-то вообще обращает внимание? Можно же считать это трактовкой так: пробел это акселератор, никто же не возмущается при нажатии esc что не происходит восхитительных показов картинок
Я по наивности думал, что отрисовка нажатия кнопки не должна зависеть от способа нажатия.
Кстати, сегодня столкнулся с еще одной мелкой проблемой, обнаруженной в Firefox, но не в Chrome. Есть кастомный выпадающий список с CSS-анимацией.
Часть стилей для выпадающего списка в закрытом состоянии:
Стили для выпадающего списка в открытом состоянии:
transform: scaleY(1);
В Firefox в процессе раскрытия списка один из элементов, накрываемых сверху списком, на долю секунды проглядывал из-под раскрывающегося списка, что было весьма заметно.
Проблему удалось решить, внеся нехитрое изменение в transition:
P.S. Рано я радовался: проблема с проглядывающим элементом как была, так и осталась. Только вот почему-то проявляется она только в build-версии (доступна по приведенной выше ссылке), а в development-версии ее вроде бы нет.
Здравствуйте, RonWilson, Вы писали:
RW> Немного офф, а на это кто-то вообще обращает внимание? Можно же считать это трактовкой так: пробел это акселератор, никто же не возмущается при нажатии esc что не происходит восхитительных показов картинок
Согласен. Просто всем пофиг. При нажатии мышкой нужен визуальный feedback что ты нажал туда куда хотел. А при работе с клавиатурой ты видишь фокус и факт нажатия. Что ещё надо?
Здравствуйте, ·, Вы писали:
RW>> Немного офф, а на это кто-то вообще обращает внимание? Можно же считать это трактовкой так: пробел это акселератор, никто же не возмущается при нажатии esc что не происходит восхитительных показов картинок ·>Согласен. Просто всем пофиг. При нажатии мышкой нужен визуальный feedback что ты нажал туда куда хотел. А при работе с клавиатурой ты видишь фокус и факт нажатия. Что ещё надо?
Ну, единообразная реакция на клик мышью и нажатие клавиши — это как бы хорошо. Я вон сразу полез копать, где у меня в коде ошибка, не обнаружив визуального фидбека.
А еще я до недавнего времени думал, что на веб-странице достаточно обеспечить перемещение между всякими-разными контролами и управление ими с помощью мыши, тогда как поддержка клавиатуры в общем случае не обязательна. Оказывается, это не совсем так.
Здравствуйте, Lazytech, Вы писали:
L>Оказывается, для того, чтобы в Chrome не было своего browser-specific вида нажатой кнопки по клику мышью, достаточно прописать одну строчку в стилях: L>
Спасибо, я уже в курсе, что это такое и для чего используется. Насколько я понял, заглянув в CSS-код normalize.css и HTML5-Reset, ни одна из этих двух либ не обеспечивает единообразного отображения нажатой кнопки. Хотя, наверное, можно поискать другие...
Сегодня обнаружил в Chrome одну навязчивую фичу: если при вводе в контроле <input type="text" ...> выбрать одно из подсказанных браузером значений, то фон контрола принудительно станет сероватым, а текст — черным. Штатным способом эта фича не отключается, но можно применить грязный хак:
/* https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/ */
input.registration-form__input__field:-webkit-autofill,
input.registration-form__input__field:-webkit-autofill:hover,
input.registration-form__input__field:-webkit-autofill:focus {
/* Prevents Chrome from applying its own styles on autofill */
-webkit-box-shadow: 0 0 0px 1000px #FFFFFF inset;
-webkit-text-fill-color: #2C2738;
}
Здравствуйте, RonWilson, Вы писали:
RW>Скажите, а на это серьезно кто-то смотрит? А в следующей версии все поломают и чёрный будет не чёрный, а «нейтральный» кому какое дело
Поясню, почему пришлось отрубить Chrome-specific подсветку контрола при autofill.
Нетрудно заметить, что на форме есть три внешне одинаковых контрола <input type="text" ...>, а под ними — выпадающий список, в закрытом виде очень на них похожий (за исключением кнопки-галочки). Когда фон каких-то из этих контролов белый, а каких-то — серый, неопрятненько как-то получается.
Здравствуйте, Lazytech, Вы писали:
L>Речь всё еще идет об этой форме: https://reactjs-form-layout-test-20210130.netlify.app/
L>Нетрудно заметить, что на форме есть три внешне одинаковых контрола <input type="text" ...>, а под ними — выпадающий список, в закрытом виде очень на них похожий (за исключением кнопки-галочки). Когда фон каких-то из этих контролов белый, а каких-то — серый, неопрятненько как-то получается.
Ну я точно не эстет, оценить не могу работает да и ладно, а что там серое или малиновое, от темы же должно зависеть OS/2
Здравствуйте, RonWilson, Вы писали:
RW>Ну я точно не эстет, оценить не могу работает да и ладно, а что там серое или малиновое, от темы же должно зависеть OS/2
Я тоже не эстет и даже не дизайнер, но отсутствие единообразия даже мне бросается в глаза.
Здравствуйте, Lazytech, Вы писали:
L>Здравствуйте, RonWilson, Вы писали:
RW>>Ну я точно не эстет, оценить не могу работает да и ладно, а что там серое или малиновое, от темы же должно зависеть OS/2
L>Я тоже не эстет и даже не дизайнер, но отсутствие единообразия даже мне бросается в глаза.
Здравствуйте, Lazytech, Вы писали:
L>Спасибо, я уже в курсе, что это такое и для чего используется. Насколько я понял, заглянув в CSS-код normalize.css и HTML5-Reset, ни одна из этих двух либ не обеспечивает единообразного отображения нажатой кнопки. Хотя, наверное, можно поискать другие...
А можно не заниматься ерундой, и взять готовый CSS фреймворк, где большинство проблем уже порешали, включая те, с которыми ты еще даже не сталкивался. По крайней мере, если ты не планируешь отказаться от программирования и заняться вплотную версткой.
Переубедить Вас, к сожалению, мне не удастся, поэтому сразу перейду к оскорблениям.
Здравствуйте, ути-пути, Вы писали:
УП>А можно не заниматься ерундой, и взять готовый CSS фреймворк, где большинство проблем уже порешали, включая те, с которыми ты еще даже не сталкивался. По крайней мере, если ты не планируешь отказаться от программирования и заняться вплотную версткой.
Нет, от программирования отказаться не планирую. Но, к сожалению, не знаю ни одного CSS-фреймворка, решающего вышеупомянутые проблемы.
Да и вообще, насколько я понимаю, CSS-фреймворки решают несколько иные проблемы. Например, обеспечение изоляции стилей между компонентами. Причем даже эту проблему фреймворки, как я недавно узнал, не всегда решают на 100%.
Добавлю, что от начинающих фронтенд-разработчиков обычно требуют знание всего, включая верстку.
Здравствуйте, Lazytech, Вы писали:
L>Нет, от программирования отказаться не планирую. Но, к сожалению, не знаю ни одного CSS-фреймворка, решающего вышеупомянутые проблемы.
Так это вообще не проблема, а перфекционизм.
L>Да и вообще, насколько я понимаю, CSS-фреймворки решают несколько иные проблемы. Например, обеспечение изоляции стилей между компонентами. Причем даже эту проблему фреймворки, как я недавно узнал, не всегда решают на 100%.
Они позволяют написать class="button" и вообще больше не думать о виде этой кнопки, она будет везде больмене приемлемо выглядеть и работать. А все тонкости пусть верстальщики ковыряют, если это вообще нужно
Переубедить Вас, к сожалению, мне не удастся, поэтому сразу перейду к оскорблениям.
Здравствуйте, ути-пути, Вы писали:
УП>Так это вообще не проблема, а перфекционизм.
У меня пока недостаточно опыта даже для того, чтобы отличить проблему от перфекционизма.
УП>Они позволяют написать class="button" и вообще больше не думать о виде этой кнопки, она будет везде больмене приемлемо выглядеть и работать. А все тонкости пусть верстальщики ковыряют, если это вообще нужно
Смутно подозреваю, что всё равно иногда приходится поработать напильником. Просто потому, что не бывает идеально работающих универсальных инструментов. Что касается «пусть верстальшики ковыряют», меня пока даже верстальщиком не возьмут, не то что фронтенд-программистом.
Здравствуйте, Lazytech, Вы писали:
L>Смутно подозреваю, что всё равно иногда приходится поработать напильником.
Иногда — не часто.
L>Просто потому, что не бывает идеально работающих универсальных инструментов.
Зато бывают типовые решения с дизайном, где все идеально, и скорее всего они тебя по большей части устроят.
L>Что касается «пусть верстальшики ковыряют», меня пока даже верстальщиком не возьмут, не то что фронтенд-программистом.
Ну вот и не распыляйся.
Переубедить Вас, к сожалению, мне не удастся, поэтому сразу перейду к оскорблениям.
Здравствуйте, ути-пути, Вы писали:
УП>Зато бывают типовые решения с дизайном, где все идеально, и скорее всего они тебя по большей части устроят.
Форма, ссылку на которую я привел выше, — моя попытка выполнить найденное на hh.ru тестовое задание по созданию React-компонента по готовому макету на Figma. Одним из условий этого задания был прямой запрет на использование CSS-фреймворков.
УП>Ну вот и не распыляйся.
Увы и ах, обычно ищут многорукого шиву. Доходит до того, что некоторым требуется джун-фулстек.
В принципе, можно было оставить и button, но, к сожалению, Chrome отрисовывает нажатое состояние button по клику мышью не так, как Firefox. 
