Rustam Bainazarov

От легких обрывов анимации при быстром наведении/отведении никуда не деться, ибо мы меняем значение свойства transform-origin, чтобы сделать ваш эффект. Его (transform-origin) в данном случае анимировать не стоит вовсе, иначе вообще вся анимация ломается.

Можно без JS так сделать:



Ну как без JS... там по клику надо будет получать нужный рейтинг.

Можно сделать на CSS (IE11+).

Как все изображения товаров сделать квадратными? — подробное описание.

Если для нормальных браузеров, то так и через один псевдоэлемент:


Если для браузеров а-ля IE11 (+ всех нормальных), то так и через два псевдоэлемента:

Думаю, соотношение всего будет несложно понять. В примере эмуляция gap'а в 20px. На flex'ах сейчас только так можно. Gap для flex'а планируют позже, кстати.

Потому что такой синтаксис комментариев в CSS недопустим. Он вам и рушит CSS.

Я про:
// комментарий

Вы явно скопировали код для препроцессора а-ля SASS. В CSS комментарии имеют исключительно следующий синтаксис:
/* CSS-комментарий */
https://developer.mozilla.org/ru/docs/Web/CSS/%D0%...

Заменил на нормальные комментарии, и всё заработало:

Это ошибка не SASS, а исключительно CSS из-за того, что вы импортируете медиазапросы до объявления основных стилей, тогда как нужно делать наоборот.

Изучайте flex.

Например, так:


Или так:

Вот так не работает:

*:not(.cms-home-page) .block {

}

Поэтому так (да-да, пробелы тут не ошибка, селектор просто такой):

body :not(.cms-home-page) .block {

}

Это баг рендеринга в Safari из-за overflow, opacity и т. п.

Я решал так, например:

/* Добавляем к этому правилу следующее */
.checkout .checkout-form .info-container.visible {
    transform: translateZ(0);
}

Попробуйте.

Можно ещё всякой ерудны сделать простой (что-то лучше и.сложнее — это к SVG или, например, Rive), но для полного контроля всё равно понадобится JS:


Даже без каких-то сложных конструкций с SVG удобно работать через CSS для простых анимаций:

Так, например:



Не зависит от высоты изображения.

С помощью только CSS — никак в таком виде. CSS не умеет трансформировать форматы цветов. Очевидно, что внутри RGBA должен быть цвет в формате RGB.

Поэтому только так:



Если через SASS, то можно конвертировать HEX в RGB с его помощью а-ля так (лучше отдельную функцию использовать)

Outline закруглить можно только в Firefox.

Такую штуку, как у вас, в силу ограничений кроссбраузерной стилизации outline, делают с помощью, например, отдельного элемента (псевдоэлемента):

Код скриншотами никто не высылает.

Вот так, например:

Ваши ссылки перекрываются псевдоэлементами figure. Хоть они и прозрачные, но они лежат поверх ссылок, т. к. имеют габариты всего блока figure, поэтому клик по ним идёт. Чтобы сделать блок невидимым для клика, нужно добавить ему pointer-events: none:



Ну и хаком для h1 на таблицах уже никто не должен пользоваться как минимум лет 10, поэтому я привел вам пример типичной разметки h1 на все случаи жизни. Так же у вас везде жёсткие габариты, поэтому всё вылетает при адаптивности, исправил пару моментов, теперь это всё не разлетается при сжатии экрана.