हाल ही में, मैंने रेडियल डिज़ाइन बनाने के लिए विकसित एक सीएसएस फ्रेमवर्क को सार्वजनिक किया है। विकास के दौरान, मुझे विभिन्न सुविधाओं का परीक्षण करने सहित कई चुनौतियों का सामना करना पड़ा। मैंने देखा कि सीएसएस लिंटर और अन्य उपकरण मुझे यह देखने की अनुमति नहीं देते थे कि कोई चीज़ काम क्यों नहीं कर रही है, भले ही कोई बुनियादी त्रुटियाँ न हों। एक अन्य सामान्य सीएसएस समस्या यह देख रही थी कि इसे विभिन्न ब्राउज़रों में कैसे साझा किया गया था। सौभाग्य से, मुझे पता चला कि कुछ नई सीएसएस सुविधाओं का उपयोग वास्तविक समय परीक्षणों की एक श्रृंखला बनाने के लिए किया जा सकता है। ये विशेषताएं हैं @support, @container, और :has().

इन सुविधाओं को मिलाकर, मैंने न केवल यह जांचने के लिए एक परीक्षण प्रणाली विकसित की कि क्या फ्रेमवर्क ब्राउज़र में काम करता है, बल्कि यह भी, और सबसे महत्वपूर्ण बात, यह देखने के लिए कि क्या हम ब्राउज़र की आवश्यकताओं के अनुसार HTML को सही ढंग से लागू कर रहे हैं और विकसित करते समय अनैच्छिक त्रुटियों से बच रहे हैं। एक आवेदन.

चूंकि मेरा सीएसएस ढांचा आवश्यक रूप से उन सुविधाओं का उपयोग करता है जो केवल नवीनतम ब्राउज़रों में हैं, जैसे कि कॉस () और पाप () जैसे त्रिकोणमितीय फ़ंक्शन, मैंने यह जांचने के लिए नियमों की एक श्रृंखला बनाई कि क्या वे ब्राउज़र द्वारा समर्थित हैं। यदि वे नहीं हैं, तो एक संदेश प्रकट होता है जिसमें ब्राउज़र को अपडेट करने के लिए कहा जाता है। इसी तरह, यदि ब्राउज़र :has() का समर्थन नहीं करता है, जिसका उपयोग पूरे फ्रेमवर्क में किया जाता है।

ब्राउज़र असंगति के विशिष्ट मामले भी हैं, इसलिए कुछ गैर-महत्वपूर्ण मामलों में, मैं कुछ ऑर्बिट सुविधाओं को छिपाने के लिए @support या @container का उपयोग करता हूं जो इसके उपयोग को प्रभावित नहीं करते हैं। उदाहरण के लिए, सफ़ारी एसवीजी संदर्भ-स्ट्रोक स्वीकार नहीं करता है, इसलिए मैं उन्हें छुपाता हूं।

हालाँकि, उन महत्वपूर्ण जाँचों और अनुकूलता से परे, सीएसएस फ्रेमवर्क का उपयोग करते समय सबसे आम समस्या यह नहीं जानना है कि इसे ठीक से कैसे उपयोग किया जाए। इसीलिए मैंने अन्य सीएसएस नियम बनाए जो यह विश्लेषण करने की अनुमति देते हैं कि क्या मूल तत्व में आवश्यक बाल तत्व हैं और अन्य में नहीं। यहां, कोड में त्रुटि कहां है, इसके बारे में संकेत देने के लिए विकास करते समय दृश्य अलर्ट भी दिखाई देते हैं।

मैं आपको ऑर्बिट के विशिष्ट विवरणों से बोर नहीं करना चाहता, लेकिन मैं आपको समर्थन स्रोत और संबंधित दस्तावेज का लिंक छोड़ दूंगा।

रेपो: 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