CSS के माध्यम से Microsoft Edge ब्राउज़र की पहचान कैसे करें?

Question

मैं वेब एप्लिकेशन विकसित कर रहा हूं और अद्वितीय स्टाइल लागू करने के लिए मुझे दूसरों से अलग Microsoft एज के ब्राउज़र की पहचान करने की आवश्यकता है। क्या सीएसएस का उपयोग करके एज की पहचान करने का एक तरीका है? बिलकुल इसके जैसा,

<!--[if IE 11]>
Special instructions for IE 11 here
<![endif]-->

Comments

तुम ऐसा क्यों करना चाहते हो।

आपको लगभग निश्चित रूप से ऐसा करने की आवश्यकता नहीं है। आप इसे करने की कोशिश क्यों कर रहे हैं?

— पैट्रिक

यह सबसे निश्चित रूप से कुछ है जिसकी आपको आवश्यकता हो सकती है। लेखन के समय, एज अभी भी विचित्रताओं से भरा है, जो कि वैध सीएसएस को गंभीर रूप से गड़बड़ कर देगा, जो IE सहित हर दूसरे ब्राउज़र में काम करता है।

— लॉयरसन

नोट: उदाहरण में प्रयुक्त सशर्त टिप्पणियां केवल IE9 और उससे नीचे के लिए काम करती हैं, इसलिए [यदि IE 11] वास्तव में काम नहीं करेगा।

— शॉन मैकमिलन

Answer 1

/ * Microsoft एज ब्राउज़र 12-18 (क्रोमियम से पहले सभी संस्करण) * /

यह काम करना चाहिए:

@supports (-ms-ime-align:auto) {
    .selector {
        property: value;
    }
}

अधिक देखने के लिए: ब्राउज़र स्ट्रेंजनेस

Comments

Microsoft MS Edge में जितने अधिक प्री-उपसर्ग गुण है उसे हटाने के लिए बढ़ रहा है, अन्य ब्राउज़रों के साथ इंटरऑपरेबल होने के लिए। जैसे, यह भविष्य में काम करने की गारंटी से दूर है। जैसा कि अन्य उत्तरों में बताया गया है, फीचर का पता लगाना ज्यादा बेहतर है।

— चार्ल्स मॉरिस -

बस इसे फिर से परीक्षण किया और यह निश्चित रूप से काम करता है। डेमो: jsfiddle.net/pd142446

— किट्टामेडिया

@ चार्ल्समोरिस-एमएसएफटी मैं आपसे सहमत हूं, लेकिन ऐसे मामले भी हैं जब हमें ऐसा करने की जरूरत है। उदाहरण के लिए, सूचक-घटनाएँ: कोई नहीं; IE 11 और अन्य सभी ब्राउज़र पर ठीक काम करता है, लेकिन एज पर काम करना बंद कर देता है। मुझे उम्मीद है कि जब तक वे-सेमी उपसर्ग को खत्म नहीं कर लेते हैं, तब तक वे उन समस्याओं को भी ठीक कर देंगे, जिन्होंने हमें पहले स्थान पर विभिन्न सीएसएस का उपयोग करने के लिए मजबूर किया था। इस स्थिति में फीचर का पता लगाने से वास्तव में मदद नहीं मिलेगी, क्योंकि सभी सुविधाएं हैं, फिर भी एज ने आईई 11 को कुछ चीजों को तोड़ दिया है जो आखिरकार तय हो गई हैं। KittMedia अच्छा जवाब, धन्यवाद।

— एमिल बोरकोनी

यह हैक अब काम नहीं करता है, हालांकि यह @supports (-ms-ime-align: auto) {.selector {संपत्ति: मूल्य; }}

— रफर्स

@KittMedia को एज 14

— LJ Wadowski

Answer 2

/* Microsoft Edge Browser 12-18 (All versions before Chromium) - one-liner method */

_:-ms-lang(x), _:-webkit-full-screen, .selector { property:value; }

यह महान काम करता है!

// for instance:
_:-ms-lang(x), _:-webkit-full-screen, .headerClass 
{ 
  border: 1px solid brown;
}

https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/

Comments

@ r3wt _:-ms-lang(x), _:-webkit-full-screen,- केवल MS Edge उस नियम को "समझता" है, अन्य ब्राउज़र इसे अनदेखा करते हैं। नियम एक html तत्व के वर्ग या आईडी नाम के बाद होता है और इसलिए इसे लागू किया जाता है। दूसरे शब्दों में, यदि एक सीएसएस कोड को एज ब्राउज़र में केवल एक html तत्व पर लागू करने की आवश्यकता है, तो अपने तत्व के वर्ग / आईडी से ठीक पहले उस विशेष नियम को नीचे रखें।

— कोडगस्ट

इसलिए ब्राउज़र उन लोगों को अनदेखा नहीं करेगा और चयनकर्ता को लक्षित करेगा, क्योंकि वे सभी अल्पविराम द्वारा अलग हो गए हैं? आम तौर पर ,सीएसएस में चयनकर्ताओं को अलग करता है। इसलिए यह भ्रामक है। मुझे अभी भी समझ में नहीं आया कि अन्य ब्राउज़र इस पर ध्यान क्यों देंगे और केवल एमएस-एज कॉमा के बाद चयनकर्ता को सीएसएस लागू करेंगे

— r3wt

@ r3wt यदि एक चयनकर्ता अमान्य है, तो पूरे नियम समूह को अनदेखा कर दिया जाता है। यहाँ इलस्ट्रेटेड css-tricks.com/...

— CodeGust

@ r3wt धन्यवाद! :) आपने मुझे उन विवरणों को लिखने के लिए प्रोत्साहित किया जो शुरू में उत्तर का हिस्सा होना चाहिए था

— कोडगस्ट

@AlexandrKazakov संभवतः, ऐसा इसलिए है क्योंकि नवीनतम एज क्रोमियम इंजन (?) पर आधारित है जो आपको मिला है?

— कोडगस्ट

Answer 3

एज के लिए अधिक सटीक (नवीनतम IE 15 को शामिल न करें) है:

@supports (display:-ms-grid) { ... }

@supports (-ms-ime-align:auto) { ... } सभी एज संस्करणों के लिए काम करता है (वर्तमान में IE15 तक)।

Answer 4

For Internet Explorer 

@media all and (-ms-high-contrast: none) {
        .banner-wrapper{
            background: rgba(0, 0, 0, 0.16)
         }
}

For Edge
@supports (-ms-ime-align:auto) {
    .banner-wrapper{
            background: rgba(0, 0, 0, 0.16);
         }
}