Ivan Bogachev

Approximately 10% of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

Только часть контента может быть отрендерена без ожидания загрузки ресурсов, которые вы убрали в конец страницы. Решается это тем, что вы в начало страницы вставляете элемент style с критичными стилями для первого экрана. В качестве бонуса это уменьшает время загрузки страницы по ощущениям пользователя. Это автоматизируется разными способами. Гуглите critical css + название вашей системы сборки.

Если говорить о таком поведении в реальном времени, то красиво будет сделать все на кастомных свойствах, также известных, как CSS-переменные. Выглядит примерно так:

body.-red {
    --my-color: #f00;
}

.test {
    color: var(--my-color);
}

Добавляете класс "-red" к body и цвет текста в .text поменяется на красный. Главное преимущество этого подхода - нет полного дублирования селекторов. Главная проблема - работает это только в вечнозеленых браузерах и последнем Edge. Можете посмотреть живой пример. Если нужна поддержка более старых браузеров, то идею для миксина для SASS вы можете подсмотреть в этой статье.

Посмотрите подборку от freefrontend.com. 117 менюшек, начиная от самых простых и заканчивая довольно интересными в плане "сделать это самому и взять приемы на вооружение".

Как вам моя схема...

В том виде, как она сейчас есть - не очень. Ничего личного, это простой психологический эффект - привыкнув к определенному качеству сложно от него отказаться. После таких схем (перевод) ваш скриншот из какой-то офисной программы уже "не вставляет". Плюс, как сказали бы в определенных кругах, это - аккордеон, т.е. информация не новая и многим успела надоесть. Если у вас есть желание делиться с общественностью - или рисуйте все красиво или делайте шпаргалки по темам, которые еще не особо раскрыты в интернете.

Где я могу выкладывать...

Если добавить осмысленный текст, то получится статья. В сети есть много мест, где можно ее опубликовать - хабр (с пометкой "для начинающих"), медиум, свой сайт (почему бы не начать с него), даже вконтакте любят картинки-шпаргалки в тематических группах.

Если вы можете решать любые задачи, которые перед вами возникают в процессе работы и не задаетесь вопросом "знаю/не знаю" - все хорошо, вы усвоили ваш язык. Возможна переодическая потеря памяти и необходимость загуглить что-то что "знаю, но забыл". Если вы хотите прям какой-то тест в процентах - то knot-it-all будет в самый раз. Бесполезная статистика, но все в одном месте - довольно занятно.

Может быть есть какие-то полезные ресурсы, где уже описано, какие свойства ведут себя некорректно в определенных браузерах и как с этим бороться?

Да, есть - flexbugs.

Как сделать на чистом css?

Сергей говорит, что CSS не может отслеживать скролл и это действительно так. Его вариант решения задачи является общепринятым и я бы тоже использовал его. Но если вы хотите доказать, что у вас скилл CSS равен 95% - придется шаманить. Мысль следующая: если взять большой блок с кривым градиентом и аккуратно перекрыть его слоями, которые не будут скроллиться (position: sticky будет очень кстати), оставив небольшую видимую полоску, то можно получить занятный эффект зависимости содержимого полоски от этого самого скролла - codepen (будьте осторожны, проверено только в последних версиях хрома и ff). Понятно, что идея сырая, но если ее доработать, то можно будет запилить что-то похожее на вашу картинку.

Алгоритм примерно такой:
- Берем обычный canvas, на нем что-то пишем или выводим картинку (в данном случае строго 2 цвета).
- Берем imageData у того, что получилось.
- Проходим по всем пикселям этой imageDatы с каким-то шагом, делаем объект "частица" с нужными координатами когда цвет соответствует определенному (если писали черным по белому - значит если цвет пикселя черный).
- Стираем надпись.
- Проходим по массиву частиц, рисуем небольшой круг (что угодно, но пусть будет круг) на месте с координатами этой частицы.
- PROFIT.

По вкусу к частице добавляется параметр "цвет" (лучше полупрозрачный) и "размер". Можно сделать функцию обновления, которая будет менять эти параметры и координаты, requestAnimationFrame нам в помощь. Координаты частицы меняются по определенному закону в каком-то радиусе от ее изначального положения, можно взять параметрическое уравнение любой замкнутой кривой и использовать его для вычисления отклонения частицы от ее изначального положения.

google.com/get/noto/

Возьмите animate.css и добавляйте нужные классы к элементам. Или, что еще лучше, достаньте из нее только необходимые вам анимации (postcss-animation может это дело автоматизировать) или посмотрите идеи в исходниках и сами их напишите, чтобы не тащить всю библиотеку ради пары десятков строк. Если хотите что-то совсем кастомное и необычное - идите на codepen, смотрите идеи там и адаптируйте под свои нужды. Тут главное не переборщить, все-таки сильно нестандартные или длинные анимации интересны первые пару-тройку раз, потом начинают раздражать.