👨🏽‍🚀 🖕🏻 👦🏻 सीएसएस चयनकर्ता के साथ असामान्य WebKit बग 🐓 ◾️ 🌫️

कई वेबमास्टर्स स्टाइल लिंक के लिए [href ^ = "http: // somedomain"] जैसे सीएसएस चयनकर्ताओं का उपयोग करते हैं, इसलिए एक विशिष्ट पते के लिंक अलग-अलग वर्गों का उपयोग किए बिना प्रदान किए जाते हैं।
एक व्यवस्थापक पैनल में मैंने यूआरएल के आधार पर लिंक आइकन देने के लिए ऐसे चयनकर्ता का उपयोग किया। हालाँकि, मेरे Google Chrome 17 में मैं एक बग में भाग गया था कि सभी लिंक के आइकन समान हैं। अन्य सभी ब्राउज़रों में (IE8 और सफारी 5.1 सहित), सब कुछ ठीक है। नीचे एक साधारण उदाहरण के साथ एक स्क्रीनशॉट है।

उदाहरण की सादगी के लिए, मैंने कोड से सबकुछ हटा दिया।

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .page_edit a{display:inline-block;} .page_edit a:before{content:"";display:inline-block;width:20px;height:16px;} .page_edit a[href*="update"]:before{background:blue;} .page_edit a[href*="edit"]:before{background:green;} .page_edit a[href*="delete"]:before{background:red;} </style> </head> <body> <div class="page_edit"> <a href="/news/update/1014"></a><br> <a href="/news/delete/1014"></a><br> <a href="/news/edit/1014"></a> </div> </body> </html>

यहां अपने ब्राउज़र में देखें।

जैसा कि आप उदाहरण से देख सकते हैं, एक छद्म तत्व के लिए, हम href विशेषता (लिंक को संपादित करने, हटाने) की सामग्री के आधार पर एक अलग रंग प्रदान करते हैं। कोड के साथ छेड़छाड़ करने पर, मैंने देखा कि क्रोम में यह बग हर जगह क्रॉल नहीं करता है। परिणामस्वरूप, मुझे पता चला कि इसे ठीक करने के लिए कि लिंक पर "अलग" शैली लागू है। मैं विशेष रूप से उद्धरण चिह्नों में अलग-अलग लिखता हूं।

उदाहरण के लिए, बस इस पंक्ति को जोड़ें:

 a + a {font-weight:normal;}

इस शैली में क्या लिखना है सार नहीं बदलता है, उदाहरण के लिए, आप उस तरह लिख सकते हैं और यह भी काम करेगा।

 a + a {outline:none;}

परिणाम यहाँ है ।

बग को 16 और 17 के संस्करणों में जांचा गया था।

UPD 1: बस पता चला है कि एक गैर-मौजूद सीएसएस शैली भी एक तय करने के लिए पर्याप्त है।

 anytag+a{}

Anytag के बजाय, आप कुछ भी लिख सकते हैं, कोई भी मौजूदा या कोई भी अस्पष्ट टैग। एक उदाहरण है ।

UPD 2: पुराने संस्करणों में जाँच की गई। बग केवल संस्करण 16 से दिखाई दिया, अर्थात वेबकिट 535.7 । जैसा कि टिप्पणियां कहती हैं, सफारी 5.2 बीटा के लिए बग प्रासंगिक है।

UPD 3: https://bugs.webkit.org/show_bug.cgi?id=79774

UPD 4: Google Chrome 24 से शुरू होकर बग फिक्स है।

सीएसएस चयनकर्ता के साथ असामान्य WebKit बग

More articles: