Недавно я обнародовал разработанную мною CSS-инфраструктуру для создания радиальных дизайнов. Во время разработки я столкнулся с несколькими проблемами, включая тестирование различных функций. Я заметил, что CSS-линтеры и другие инструменты не позволяют мне понять, почему что-то не работает, даже если не было элементарных ошибок. Еще одна типичная проблема CSS заключалась в том, как она использовалась в разных браузерах. К счастью, я обнаружил, что некоторые новые функции CSS можно использовать для создания серии тестов в реальном времени. Это @support, @container и :has().

Объединив эти функции, я разработал систему тестирования, позволяющую не только проверить, работает ли фреймворк в браузере, но и, что самое важное, проверить, правильно ли мы применяем HTML в соответствии с требованиями браузера и избегаем непроизвольных ошибок при разработке. приложение.

Поскольку моя структура CSS обязательно использует функции, которые есть только в новейших браузерах, такие как тригонометрические функции, такие как cos() и sin(), я создал серию правил, чтобы проверить, поддерживаются ли они браузером. Если это не так, появится сообщение с просьбой обновить браузер. Аналогично, если браузер не поддерживает :has(), который используется во всей платформе.

Также бывают типичные случаи несовместимости браузеров, поэтому в некоторых некритических случаях я использую @support или @container, чтобы скрыть определенные функции Orbit, не влияющие на его использование. Например, Safari не принимает контекстные штрихи SVG, поэтому я их скрываю.

Однако, помимо этих критических проверок и совместимости, наиболее распространенной проблемой при использовании CSS-фреймворка является незнание того, как его правильно использовать. Вот почему я создал другие правила CSS, которые позволяют анализировать, имеет ли родительский элемент необходимые дочерние элементы, а не другие. Здесь во время разработки также появляются визуальные оповещения, подсказывающие, где в коде находится ошибка.

Я не хочу утомлять вас подробностями, касающимися Orbit, но я оставлю вам ссылку на источник поддержки и соответствующую документацию.

Репозиторий: https://github.com/zumerlab/orbit
Исходный файл: https://github.com/zumerlab/orbit/blob/main/src/scss/_support.scss
Документация поддержки Orbit: https://zumerlab.github.io/orbit-docs/tools/support/

Полезно углубиться: https://heydonworks.com/article/testing-html-with-modern-css