Ребят, привет!
Есть скрипт, который выполняет манипуляции с Домом: совершает проверку на ширину окна и перемещает элементы дома (в общем это хедер, который на десктопе одного вида, другого - на мобилке)
При загрузке видно, как сперва загружается html со стилями, и те элементы, которые должны переместиться, ещё не переместились. Потом же скрипт срабатывает и все становится как надо, однако я получаю эту «дерганость» при загрузке

Как мне выполнить скрипт с манипуляциями Дома перед тем как сам дом показывается?!?

проект на Реакт. Стили - styled components.
если на мобилке сделать долгий тап по кнопке (или задержать палец на кнопке при прокрутке), то у кнопки остается :hover.
На реальной мобилке все также. Не подскажете почему так может быть?

Так работает hover на мобилке, это норма. На ней же нет эффекта наведения. Для эффекта клика на мобилке используйте :active, а hover можно отключить через медиа, например

у меня в одной кнопке есть такой css

@media (hover: none) {
    &:hover {
      background-color: blue;
    }

    &:active {
      background-color: red;
    }
  }

цель кода - для устройств, где нет ховера :hover переопределил на обычный цвет кнопки, а смену цвета сделал через :active (будет меняться в момент нажатия).
Проблема в том что в FireFox на мобилке после долгого тапа цвет кнопки меняется на нужный, а при отпускании пальца цвет кнопки остается такой же как и в момент нажатия. Баг в FireFox мобильном не пойму почему.

А не проще ли тебе просто все hover эфекты офнуть на экранах шириной меньше Xpx

а как обратиться ко всем ховерам?

*:hover ? :)

точняк)

спс

Подскажите, где можно найти маску для Финляндских номеров телефона

на сайте у кнопки, которая только на телефонах отображается, есть такая анимация

&:active {
      background-color: green;
      transition: background-color 0.3s ease;
      // мне бы здесь отключить анимацию
    }
    
    animation: pulse-button infinite ease-in-out 2s;    
    @keyframes pulse-button {
      0% {
        opacity: 1;
      }
      50% {
        opacity: .7;
      }
      100% {
        opacity: 1;
      }
    }

&:active я добавил чтобы при нажатии цвет кнопки менялся. теперь бы хотелось чтобы при active анимация отключалась.
можно ли с помощью css внутри &:active {} как-то отключить анимацию?

Использовали ли вы фреймворк для Реакта под названием Next.js? Они умеют автоматом конвертировать картинки в WebP, если этот формат поддерживает браузер.
Пользовались ли вы этой фишкой(автоконвертация)? Не было ли проблем?

intl-tel-input
https://intl-tel-input.com/
github.com/jackocnr/intl-tel-input

Спасибо, запишу себе

Всем привет. Никому не нужна помощь в репозитории? Хотел бы несколько PR сделать для hactoberfest'а.

Можно прописать такое css свойство:
animation-play-state: paused;

Использовали ли вы фреймворк для Реакта под названием Next.js? Они умеют автоматом конвертировать картинки в WebP, если этот формат поддерживает браузер.
Пользовались ли вы этой фишкой(автоконвертация)? Не было ли проблем?

а вложенность какая?

иконка находится внутри header?