Pull to refresh

Comments 13

Известны ли вам какие-нибудь полезные способы работы с кнопками, которые остались за рамками этой статьи?
Мощная подборка.
Можно дополнить рекомендациями для трендового Mobile First… Впрочем, это переводная статья.
Кстати, в конце оригинала есть три ссылки на Related Articles, тоже некороткие, и там тоже слово «mobi» не находится в тексте.
Крутой гайдлайн, теперь заворачиваем всё в и ок =)
Спасибо за статью. Много полезной информации в одном месте.

Есть пара замечаний:
.c-button span
Не очень хороший пример, даже в статье мы увидели, как внезапно появился второй span, который должен быть снизу и с другими стилями. Эта кнопка хорошо демонстрирует преимущества БЭМ. Практичнее было бы написать так:
.c-button__title
.c-button__desc

Тоже самое с модификаторами размера шрифта --md и --lg ни о чем нам не говорят, а вот если так:
.c-button_font-size_md
.c-button_font-size_lg

то сразу понятно и у нас остается возможность управлять параметрами других свойств, ( например c-button_size_md ) и понимать что они делают.

По поводу скрытия текста:

.c-button--multiple span:after {
    content: "240K+ subscribers";
    display: block;
    font-weight: 400;
    margin-top: 0.25rem;
}

Возможен еще такой вариант:
<button class="c-button">
    <div class="c-button__title">Subscribe to our newsletter</div>
    <div class="c-button__desc" data-desc="240K+ subscribers"></div>
</button>


.c-button__desc:after {
    content: attr(data-desc);
    display: block;
    font-weight: 400;
    margin-top: 0.25rem;
}


Вам рассказывают о работе с цсс при использовании кнопок, вы же, зачем-то, суете БЭМ, который тут вообще не при чем, еще и говоря, что автор приводит плохой пример. Не нужно так делать
Простите, зачем извращаться так со вторым спаном(дивом в данном случае)? Когда существует aria-hidden?
А зачем в статье пример с прописанным content в after?:
Цитата
.c-button--multiple span:after {
    content: "240K+ subscribers";
    display: block;
    font-weight: 400;
    margin-top: 0.25rem;
}


Наверное чтобы показать варианты решения проблемы и сделать статью более полной.

Хорошие раскопки.
Но мне кажется в 2020 нужно посетить кнопки при помощи all: unset

Как будто кто то против. Поддержка только слабоватая.
любая кнопка внутри формы даже без указания типа и без обертки js будет работать как type=«submit»

Кнопка работает как submit и за пределами формы, т.к. это стандартное значение атрибута type. Просто отправлять при этом нечего.

Какая-то забавная некрофилия :-)
Форм на странице может быть несколько, а может не быть вообще :-) Кнопок submit внутри формы может быть тоже несколько, и у них даже value можно прописать. Я этим бывает даже пользуюсь для поиска разных сущностей из одного поля ввода (ну например фото, альбомы, пользователи)

Sign up to leave a comment.