최근에 저는 방사형 디자인을 만들기 위해 개발한 CSS 프레임워크를 공개했습니다. 개발하는 동안 다양한 기능을 테스트하는 등 여러 가지 문제에 직면했습니다. 나는 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
궤도 지원 문서: https://zumerlab.github.io/orbit-docs/tools/support/

더 자세히 알아보세요: https://heydonworks.com/article/testing-html-with-modern-css