В продолжение
https://t.me/nik_alex_flow/77 и
https://t.me/nik_alex_flow/114На видео цветная матрица, отрисованная полностью на css. Размер 2000 на 500, то есть миллион элементов! И это не предел, я тестировал и на большем количестве.
Зачем это?
Нативный скролл, зум и наведение мыши. Быстрая отрисовка, браузер оптимизирован отрисовывать CSS. То же самое на
canvas пришлось бы делать с огромным количеством ручных перерисовок, чтобы в памяти держать небольшой видимый буфер.
Где пригодится? На работе есть один старый проект, где эти матрицы лягут идеально, показывает связность свитчей между датацентрами. Да и возможность показать сразу все виртуальные машины в датацентре на одном экране заманчива (главное чтобы их порядок был предсказуем).
Было (и есть) несколько забавных проблем с отрисовкой сетки в safari и firefox. Дело в том, что пиксельные расстояния в
repeating-linear-gradient не совпадают с расстояниями высоты блоков (даже если поставить родителю grid и
repeat(N, 1fr)). Поэтому горизонтальные линии для сетки пришлось делать через
box-shadow (если делать через border, то в сафари начинает сбоить
linear-gradient). Вообще все эти особенности браузеров тянут на отдельный пост.
Напомню, что на видео не миллион дивов, а 2000, внутри которых
linear-gradient, при этом не из 500 отрезков, а намного меньше, так как одинаковые цвета сливаются в один отрезок. Поэтому чем разреженнее матрица, тем легче браузеру её отрисовать. Но легко справляется, даже если рандомом значения ставить.
Также прикрутил показ активного элемента и тултип при наведении. Всё это будет оформлено как опенсорс библиотека. Возможно ещё смогу прикрутить показ текста на ячейках, но это уже намного сложнее.
Всем CSS!
🧙♂️