Тестирование HTML при помощи CSS
Ох, как я люблю такие элегантные решения. Хейдон Пикеринг рассказывает, как реализована библиотека REVENGE.CSS (именно капсом, иначе она не работает).
Суть в том, что многие HTML-конструкции можно легко проверить банальной проверкой атрибутов. А в CSS для этого всё есть. Ещё часть можно проверить вложенностью, и тут нас радует
1. Прямо в интерфейсе жутким шрифтом Comic Sans на розовом фоне выводим текстом предупреждение.
2. В DevTools в CSS-переменную записываем информативное сообщение об ошибке, чтобы его было видно при разработке.
Хейдон дополнительно использует новомодную директиву
В общем, кажется, я затащу эту библиотеку к себе в проекты и дотюню до своих требований. Многие рекомендации по доступности можно так реализовать довольно быстро.
https://heydonworks.com/article/testing-html-with-modern-css/
Ох, как я люблю такие элегантные решения. Хейдон Пикеринг рассказывает, как реализована библиотека REVENGE.CSS (именно капсом, иначе она не работает).
Суть в том, что многие HTML-конструкции можно легко проверить банальной проверкой атрибутов. А в CSS для этого всё есть. Ещё часть можно проверить вложенностью, и тут нас радует
:has(). Когда видим конструкцию, которая нас смущает, делаем две вещи:1. Прямо в интерфейсе жутким шрифтом Comic Sans на розовом фоне выводим текстом предупреждение.
2. В DevTools в CSS-переменную записываем информативное сообщение об ошибке, чтобы его было видно при разработке.
Хейдон дополнительно использует новомодную директиву
@layers, чтобы создать слой tests в проекте. Подключает его в самый низ слоёв, чтобы тестовые стили наверняка применились.В общем, кажется, я затащу эту библиотеку к себе в проекты и дотюню до своих требований. Многие рекомендации по доступности можно так реализовать довольно быстро.
https://heydonworks.com/article/testing-html-with-modern-css/