Comments 47
Это отличная статья, спасибо огромное.
Я бы может еще проверял, всякие мета-теги. Для тех же самых шарингов в соц сетях.
Но очень интересует вопрос, как лучше всего проверять верстку на мобильных устройствах, ибо все же мы знаем что есть всевозможные Huawei у которых стандартные браузеры, если девайс ниже версии 4.4.
Убрать случаное выделение текста по двойному клику (user-select: none)
пожалуйста, не надо делать!
Я привык выделять текст двойным и тройным кликом, и когда кто-то меняет привычное поведение на своем сайте, во мне умирает одна нервная клетка, несущая добро людям.
Не использовать много сторонних библиотек и хитрых возможностей препроцессоров. Они мешают другим разработчикам быстро вникнуть в суть кода
Для кого-то и сами препроцессоры — хитрая возможность, так может вообще от них тогда нужно отказаться, лишь бы другим разработчикам комфортно было? Я видел верстальщиков которых даже each в saas-е в тупик ставил, но это не повод отказываться от него.
Тут же можно и проверить как будет отображаться на разных устройствах: Тыц
Из-за того что на клавиатуре нет нужных клавиш, в вебе используются знаки, которые не соответствуют правилам русского языка.
Клавиши-то есть, а вот раскладка(раскладка Бирмана, например), обычно, отсутствует. Более того типограф ещё добавляет неразрывные пробелы, например.
А так да, прогонять через типограф — обязательное дело :)
Ждем псевдокласс :blank)
Особенно для таких бакендеров как я, на которых просто берут и фронт вешают.
Завтра всем верстальщикам нос утру!
Про анимацию стоит написать, что transition, может быть как входным, так и выходным, очень больно смотреть на тултипы у которых время появление такое же длинное, как и исчезновение. То же самое касается анимации бэкраунда у менюшек.
Добавить привычный курсор руки вместо стрелки (cursor:pointer)
Очень плохая практика пихать везде этот «палец». Он предназначен для ссылок и исключительно для них.
Все любят про спецификации говорить, но одно маленькое предложение в ней для всех видимо совсем маленькое, чтобы его замечать: https://www.w3.org/TR/css-ui-3/#cursor
pointer
The cursor is a pointer that indicates a link.
Хватит тащить в веб эту блаж от дизайнеров не знающих спецификаций веба. Если особо упоротые и требуют — тыкните их носом в эту ссылку. В спеке это не спроста, это нативное поведение, в ОСях (всех, кстати) этот поинтер используется исключительно для ссылок.
Существуют не только текстовые ссылки, но и ссылки блоки. Логотип сайта чаще всего является ссылкой на главную. На новостных сайтах блок новости с картинкой и текстом тоже ссылка.
Эта часть спеки не менялась очень давно и я бы обратил внимание на опыт компаний. Я походил по сайтам и обнаружил, что большинство из них используют pointer на дропдаунах. Часть использует pointer на всех кнопках (например, хабр). Интересно, что 3 бутстрап использовал везде pointer на кнопках, а в 4 версии уже нет.
Мне попалась подробная статья про этот вопрос. Там в том числе приведены и другие аргументы за и против pointer.
Существуют не только текстовые ссылки, но и ссылки блоки.
А причём тут это? Если у элемента есть атрибут
href, то курсор автоматом будет pointer. И делать ничего не надо. А если его нет — то pointer там абсолютно лишний, ибо никуда клик по этому элементу не переводит.Эта часть спеки не менялась очень давно
И это очень хорошо!
Я походил по сайтам и обнаружил, что большинство из них используют pointer на дропдаунах. Часть использует pointer на всех кнопках (например, хабр).
Потому что спеку не читали, и привыкли из дивов городить что угодно, хоть чёрта лысого, а потом обвешивать эти дивы всем, что показалось нужным.
Мне попалась подробная статья про этот вопрос.
У Романа все статьи хорошие, кроме этой. По поводу её появления было бурное негодование в слаке Веб-стандартов. Даже не припомню, был ли на его стороне ещё кто-то.
В спеке это не спроста, это нативное поведение, в ОСях (всех, кстати) этот поинтер используется исключительно для ссылок.
Часть использует pointer на всех кнопках (например, хабр).
Потому что спеку не читали
Microsoft, Apple, Google тоже не читали спеков (и пофиг что по-сути они сами их сейчас и создают и развивают). Потому что у них на сайтах все элементы, на которые можно кликнуть и которые при клике запустят какое-то действие — поинтеры. Это и кнопки (как текстовые, типа "войти", так и иконочные, типа лайков), и ссылки, и дропдауны, и таббары. Причём, на главной у МС, например, у меня на слайдере с картинкой поинтер (потому что при нажатии на слайд из этого слайдера открывается другая страница), а внизу на самом слайде 2 кнопки (play/pause). Так вот, одна из них — поинтер, а вторая — стрелка. Мне сразу стало ясно, что та, которая стрелка в данный момент неактивна, эта кнопка не выполнит действия. И да, на практике так и оказалось. Если бы МС следовала вашим советам, то мне было бы совершенно непонятно, произойдёт ли что-то до нажатия на элемент.
С поинтером же всё чётко: если я его вижу при ховере, то я ожидаю какого-то действия при нажатии. Если поинтера нет, то при нажатии на такой элемент ничего не должно случаться. И при этом, в ОС от вышеупомянутых компаний поведение курсора и элемента при ховере отличается от веба.
Вопрос спорный, но вы правы больше, за вас спецификация) Действительно, если убрать pointer у всего кроме ссылок и сделать понятный hover, то этого хватит.
Однако, присутствие pointer не так катастрофично и спека не запрещает его использование. Пользователи уже совсем перестали отличать ссылки от кнопок, особенно после отказа от подчеркиваний. Интересен сам факт, что в очень большом количестве проектов не ленятся ставить cursor: pointer. Ведь его нужно не забыть еще поставить. Значит спрос есть на это)
Было бы интересно посмотреть различные статистики про курсоры. Может какой-нибудь амазон тестировал, что на ссылку с рукой ждут на 10% больше. Или Google.
Я уже не говорю про спорные моменты такие как чекбоксы или радио кнопки внутри лейблов. Многие не знают, что можно нажать текст вместо чекбокса.
Кликабельность можно и нужно показывать другими методами: сменой цвета фона, обводки, анимацией и так далее. Но никак не рукой, которая означает указание на объект, а не возможность по нему кликнуть. А то получится как в Яндекс.Маркете, наводишь на товар и курсор становится в виде руки, пытаешься открыть в новом окне, а не получается. Потом выясняется, что это всего-лишь кнопка для открытия оверлея!
Ну раз 99% сайтов используют его для указания на интерактивность, значит, теперь "здесь так принято". Какая разница, что было заложено изначально, интерфейсы эволюционируют, часто не в том направлении, как предполагалось. И тот же Apple теперь на своем сайте использует его так же, как и все остальные.
При зарождении этих гайдов, кроме кнопки и ссылки, взаимодействовать-то особо и не с чем было.
Ну с таким подходом можно вообще не оглядываться на спецификации и просто делать как все. Как, собственно, большинство и поступает, и получаются такие сайты и такие выводы. Курсор руки делается исключительно для тех, кто понимает что такое ссылка и он в свою очередь является моментальным индикатором этого свойства (следующим идёт подсветка адреса ссылки). Конечно, можно делать как все и забить на это свойство, это ваш выбор. А ещё можно копнуть поглубже и подумать почему так вышло что для кнопок используют этот курсор и разобраться, а нужно ли делать как все?
Чек-лист вёрстки