6
मैं :before या :after छद्म सामग्री के माध्यम से माउस को जोड़ने के लिए इस तरह एक पैटर्न का उपयोग कर रहा नहीं:दिखने सामग्री छिपा लेकिन छद्म सामग्री
<span class="icon icon__example is-content-visually-hidden">assistive text</span>
मैं कैसे नेत्रहीन .icon छद्म सामग्री छुपा के बिना सहायक पाठ छिपा कर सकते हैं? न तो सहायक टेक्स्ट या जिस स्थान पर यह कब्जा है, उसे देखा जाना चाहिए, जैसे कि इन आइकनों को इनलाइन का उपयोग किया जा सकता है। जब .is-content-visually-hidden को टॉगल किया जाता है तो पाठ दिखाई देना चाहिए। मैंने text-indent: -9999px जैसी विभिन्न तकनीकों का कोई फायदा नहीं लिया।
This codepen demonstrates the problem।
ठीक है। मैं [इसके साथ खेला] (http://codepen.io/ryanve/pen/EaEzEz) और ऐसा लगता है कि 'px' और 'rem' जैसी हार्ड इकाइयों के साथ काम करना प्रतीत होता है लेकिन गतिशील वाले' em 'या' calc (1em) 'या 'उत्तराधिकारी' के साथ। ईएमएस का उपयोग करना या अभिभावक 'फ़ॉन्ट-आकार' को विरासत में रखना आदर्श होगा लेकिन फिर भी यह समाधान चट्टानों का होगा। – ryanve
हां, दुर्भाग्यवश आप em या% का उपयोग नहीं कर सकते हैं या स्पष्ट कारण के लिए उत्तराधिकारी नहीं हैं: पैरेंट फ़ॉन्ट-आकार 0 है। तो यह निश्चित रूप से गड़बड़ी है। मैं वास्तव में समाधान का उपयोग करता हूं क्योंकि यह अधिक व्यापक है। – dfsq
मैं सहमत हूं कि अतिरिक्त 'span' एक अच्छा पैटर्न है। हम जितना संभव हो उतने तत्वों का उपयोग करने की कोशिश कर रहे हैं। – ryanve