Тут проблема в том, что условное фото с шириной 300px будет хорошо смотрется на десктопе. Но на мобильном/планшете float уже будет лишним. И это бы решалось медиазапросом, если бы фото всегда имело одну и ту же ширину. Но оно может быть и 200 и 500.
Если в условиях указаны координаты начала и конца секций, то проще вместо всего этого кода использовать IntersectionObserver. Тогда и необходимость в event resize отпадет.
Max Sagaidak, svg файл содержит набор спрайтов в виде тега symbol с уникальными id.
После в html мы можем их вывести с помощью тега use <svg><use href="my-icon-id"></svg>
Таким образом этот способ удовлетворяет все условия автора - компактный html и возможность менять цвет с помощью css
В спецификации все довольно запутано, мне не удалось найти какую либо информацию касательно ::before и ::after у input. Но есть вот такая статья https://www.scottohara.me/blog/2021/09/24/custom-r... от Scott O'Hara, который учавствует в разработке стандартов. В ней он пишет, что при использовании appearance: none для радиокнопок и чекбоксов можно будет использовать псевдоэлементы. Полагаю, ему можно верить.
Евгений Мокрышев, ну если у вас сейчас тоже показывает cls 0, то вероятно проблема в плагине. Если есть возможность, используйте нативный атрибут loading="lazy"
