स्टाइलशीट के भीतर केवल IE (किसी भी संस्करण) को कैसे लक्षित करें?

Question

मेरे पास विरासत में मिली परियोजना है और ऐसे स्थान हैं जहां यह पूरी तरह से गड़बड़ है। यह उनमें से एक है। मुझे केवल IE (किसी भी संस्करण) को लक्षित करने की आवश्यकता है।

#nav li {
    float: left;
    height: 54px;
    background: #4f5151;
    display: table;
    border-left: 1px solid grey;
}

स्पष्ट होने के लिए: एम्बेडेड स्टाइलशीट के अंदर और html में टैग में आईडी या कक्षाओं को जोड़े बिना , मुझे केवल बॉर्डर शैली लागू करने की आवश्यकता है यदि उपयोगकर्ता IE का उपयोग कर रहा है। मैं यह कैसे कर सकता हूँ?

संपादित करें: फ़ायरफ़ॉक्स के लिए एक समाधान मिला, इसे प्रतिबिंबित करने के लिए संपादन प्रश्न।

Comments

आप सवाल कर रहे हैं थोड़ा भ्रमित है। क्या आप CSS संपत्तियों के लिए विक्रेता उपसर्गों का उल्लेख कर रहे हैं या क्या आप UA सूँघने के माध्यम से किसी उपयोगकर्ता के ब्राउज़र की पहचान करने की बात कर रहे हैं और फिर स्टाइलशीट तभी लागू कर रहे हैं जब यह मेल खाता हो? ...

— War10ck

फ़ायर्फ़ॉक्स के लिए: stackoverflow.com/questions/952861/…

— nikoskip

IE को लक्षित करने के लिए आपको अपनी HTML फ़ाइल को संशोधित करना होगा और सशर्त टिप्पणियों को जोड़ना होगा, IE10 के लिए आपको कुछ जावास्क्रिप्ट की भी आवश्यकता होगी क्योंकि यह सशर्त टिप्पणियों के लिए 0 समर्थन के साथ आता है। EDIT आईई के कुछ संस्करणों को लक्षित करने के लिए कुछ सीएसएस हैक हैं, लेकिन यह भी समस्या है - वे हैक हैं।

— 18iz में Ramiz Wachtler

केवल IE पर लागू शैली

— मैथ्यू

यदि आपको अपने सीएसएस के अंदर समाधान की आवश्यकता है, तो मैं केवल जावास्क्रिप्ट में सोच सकता हूं। मुझे यह rafael.adm.br/css_browser_selector मिला लेकिन यह थोड़ा पुराना है।

— निकोसिप 19

Answer 1

Internet Explorer 9 और निम्न: आप किसी भी संस्करण (या संस्करणों के संयोजन) के लिए IE-विशिष्ट स्टाइलशीट को लोड करने के लिए सशर्त टिप्पणियों का उपयोग कर सकते हैं जो आप बाहरी स्टाइलशीट का उपयोग करके विशेष रूप से लक्ष्य करना चाहते थे।

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

हालाँकि, संस्करण 10 में शुरू, सशर्त टिप्पणियाँ अब IE में समर्थित नहीं हैं।

इंटरनेट एक्सप्लोरर 10 और 11: -ms-high-विरोधाभास का उपयोग करके एक मीडिया क्वेरी बनाएं, जिसमें आप अपनी IE 10 और 11-विशिष्ट CSS शैलियाँ रखते हैं। क्योंकि -ms- उच्च-कंट्रास्ट Microsoft-विशिष्ट है (और केवल IE 10+ में उपलब्ध है), यह केवल Internet Explorer 10 और इससे अधिक में पार्स किया जाएगा।

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
}

Microsoft Edge 12: @supports नियम का उपयोग कर सकते हैं। इस नियम के बारे में सभी जानकारी के साथ एक लिंक है

@supports (-ms-accelerator:true) {
  /* IE Edge 12+ CSS styles go here */ 
}

---

इनलाइन नियम IE8 का पता लगाना

मेरे पास 1 और विकल्प है लेकिन यह केवल IE8 और नीचे के संस्करण का पता लगाता है।

  /* For IE css hack */
  margin-top: 10px\9 /* apply to all ie from 8 and below */
  *margin-top:10px;  /* apply to ie 7 and below */
  _margin-top:10px; /* apply to ie 6 and below */

जैसा कि आप एम्बेडेड स्टाइलशीट के लिए specefied। मुझे लगता है कि आपको नीचे दिए गए संस्करण के लिए मीडिया क्वेरी और शर्त टिप्पणी का उपयोग करने की आवश्यकता है।

Comments

काफी अच्छा, मैंने परीक्षण किया कि यह फिक्स एज ब्राउज़र को प्रभावित नहीं करता है, जेआईसी किसी ने सोचा।

— j4v1

नीचे भी देखने के लिए @supports (-ms-त्वरक: ऑटो) की जरूरत है

— Phyllis सदरलैंड

एज के लिए, @supports (-ms-ime-align: auto) का उपयोग करने के बजाय -ms-त्वरक मेरे लिए काम करता है

— SeventhSteel

-ms-high-contrast:activeयदि सिस्टम उच्च-विपरीत मोड का उपयोग करने में है तो एज को प्रभावित करता है।

— शॉर्टफ्यूज

@supportsसमाधान वास्तव में महान है: सुविधा का पता लगाने जाने के लिए रास्ता है। मैं एज को इसके समर्थन की कमी के कारण लक्षित करने के लिए तैयार था width: max-content: @supports not (width: max-content)यह बड़े करीने से करता है, और जब एज इसका समर्थन करता है, तब इसे अच्छी तरह से नजरअंदाज कर दिया जाएगा। (यह 2019 फॉल में होना चाहिए, क्योंकि इसके बाद इसे रेंडरिंग के लिए क्रोमियम में जाना चाहिए।)

— Frédéric

Answer 2

यहां मीडिया क्वेरीज़ का एक संग्रह है जो आपको इंटरनेट एक्सप्लोरर के किसी भी संस्करण (IE6 से IE11 +), फ़ायरफ़ॉक्स, क्रोम और सफारी (EDIT: ओपेरा भी जोड़े) के लिए ऐसा करने की अनुमति देगा।

IE 6

* html .ie6 { property: value; }

या

.ie6 { _property: value; }

IE 7

*+html .ie7 { property: value; }

या

*:first-child+html .ie7 { property: value; }

IE 6 और 7

@media screen\9 { 
    .ie67 {
        property: value; 
    }
}

या

.ie67 { *property: value; }

या

.ie67 { #property: value; }

IE 6, 7 और 8

@media \0screen\,screen\9 {
    .ie678 {
        property: value;
    }
}

IE 8

html>/**/body .ie8 { property: value; }

या

@media \0screen {
    .ie8 {
        property: value;
    }
}

IE 8 मानक मोड

.ie8 { property /*\**/: value\9 }

IE 8,9 और 10

@media screen\0 {
    .ie8910 {
        property: value;
    }
}

आईई 9 केवल

@media screen and (min-width:0\0) and (min-resolution: .001dpcm) { 
    // IE9 CSS
    .ie9{
        property: value;
    }
}

IE 9 और ऊपर

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
    // IE9+ CSS
    .ie9up { 
        property: value; 
    }
}

IE 9 और 10

@media screen and (min-width:0\0) {
    .ie910 {
        property: value\9;
    } /* backslash-9 removes ie11+ & old Safari 4 */
}

आईई 10 केवल

_:-ms-lang(x), .ie10 { property: value\9; }

IE 10 और इसके बाद के संस्करण

_:-ms-lang(x), .ie10up { property: value; }

या

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ie10up {
        property:value;
    }
}

IE 11 (और ऊपर ..)

_:-ms-fullscreen, :root .ie11up { property: value; }

फ़ायरफ़ॉक्स (कोई भी संस्करण)

@-moz-document url-prefix() {
    .ff {
        color: red;
    }
}

फ़ायरफ़ॉक्स (केवल क्वांटम / स्टाइलो)

@-moz-document url-prefix() {
    @supports (animation: calc(0s)) {
        /* Stylo */
        .ffStylo {
            property: value;
        }
    }
}

फ़ायरफ़ॉक्स लिगेसी (प्री-स्टाइलो)

@-moz-document url-prefix() {
    @supports not (animation: calc(0s)) {
        /* Gecko */
        .ffGecko {
            property: value;
        }
    }
}

वेबकिट (क्रोम और सफारी, कोई भी संस्करण)

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    property: value;
}

Google Chrome (29+)

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    .chrome {
        property: value;
    }
}

सफारी (7.1+)

_::-webkit-full-page-media, _:future, :root .safari_only {
    property: value;
}

सफारी (6.1 से 10.0 तक)

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { 
    @media {
        .safari6 { 
            color:#0000FF; 
            background-color:#CCCCCC; 
        }
    }
}

सफारी (10.1+)

@media not all and (min-resolution:.001dpcm) { 
    @media {
        .safari10 { 
            color:#0000FF; 
            background-color:#CCCCCC; 
        }
    }
}

ओपेरा (12+)

@media (min-resolution: .001dpcm) {
    _:-o-prefocus, .selector {
        .opera12 {
            color:#0000FF; 
            background-color:#CCCCCC; 
        }
    } 
}

ओपेरा (11 और निम्न)

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
    .opera11 {
        color:#0000FF; 
        background-color:#CCCCCC; 
    }
}

अधिक जानकारी या अतिरिक्त मीडिया प्रश्नों के लिए, browserhacks.com वेब साइट पर जाएँ और / या इस ब्लॉग पोस्ट को देखें जो मैंने इस विषय पर लिखा था।

Comments

सितंबर 2018 और आप अभी भी जीवन बचाओ! बहुत धन्यवाद। लेकिन ओपेरा (पुराने संस्करणों) के बारे में क्या? बस वेबकिट?

— लाल बालों वाली लड़की

@ Thegirlwithredhair ओपेरा>> 9, ओपेरा <= 9 और ओपेरा <= 11 को लक्षित करने के लिए एक जोड़ी चयनकर्ता हैक्स हैं: browserhacks.com/#op

— Darkseal

@ Thegirlwithredhair मैंने दो मीडिया क्वैश्चंस जोड़े हैं जिनका उपयोग ओपेरा> = 12 और ओपेरा <= 11 को ऊपर दिए गए मेरे उत्तर पर लक्षित करने के लिए किया जा सकता है।

— डार्कसेल

Answer 3

उपयोग करते समय SASSमैं @media queriesIE 6-10 और EDGE को लक्षित करने के लिए निम्नलिखित 2 का उपयोग करता हूं ।

@media screen\9
    @import ie_styles
@media screen\0
    @import ie_styles

http://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/

संपादित करें

मैं EDGE के बाद के संस्करणों को भी लक्षित करता हूं @support queries(जितने की जरूरत है उतने जोड़)

@supports (-ms-ime-align:auto)
    @import ie_styles
@supports (-ms-accelerator:auto)
    @import ie_styles

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

Answer 4

IE को केवल मेरी स्टाइलशीट में लक्षित करने के लिए, मैं इस Sass मिक्सिन का उपयोग करता हूं:

@mixin ie-only {
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    @content;
  }
}

Answer 5

IE विशिष्ट स्टाइल के लिए एक और काम कर समाधान है

<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">

और फिर आपका चयनकर्ता

html[data-useragent*='MSIE 10.0'] body .my-class{
        margin-left: -0.4em;
    }

Comments

दुर्भाग्य से, मूल पोस्ट के अनुसार, html संपादित नहीं किया जा सका। मैंने आपके प्रस्तावित समाधान में थोड़ा ध्यान दिया है और इसमें योग्यता है यदि आप समय से पहले इसकी योजना बना सकते हैं।

— मेटलफेनिक्स

आप पोस्ट के अनुसार सही हो सकते हैं, लेकिन समाधान के गैर नवीनतम IE संस्करणों के लिए काम करते हैं। सशर्त स्टाइलिंग अधिक समर्थित नहीं है।

— साहिब खान

और हां @supports एक और उपाय है यदि आप html टैग आदि को संपादित नहीं कर सकते हैं

— साहिब खान

@supports (-ms-ime-align: auto) {.myclass {/ * स्टाइल * /}}

— साहिब खान

Answer 6

उच्च कंट्रास्ट मोड का उपयोग करते समय एज पर टूटने वाली साइटों के साथ समस्याओं का अनुभव करने के बाद, मैं जेफ क्लेटन द्वारा निम्नलिखित काम में आया:

https://browserstrangeness.github.io/css_hacks.html

यह एक पागल, अजीब मीडिया क्वेरी है, लेकिन उन लोगों को सास में उपयोग करना आसान है:

@media screen and (min-width:0\0) and (min-resolution:+72dpi), \0screen\,screen\9 {
   .selector { rule: value };
}

यह लक्ष्य IE संस्करण IE8 के लिए अपेक्षित है।

या आप उपयोग कर सकते हैं:

@media screen\0 {
  .selector { rule: value };
}

जो IE8-11 को लक्षित करता है, लेकिन FireFox 1.x को ट्रिगर करता है (जो मेरे उपयोग के मामले के लिए, कोई फर्क नहीं पड़ता)।

अभी मैं प्रिंट समर्थन के साथ परीक्षण कर रहा हूं, और यह ठीक काम कर रहा है:

@media all\0 {
  .selector { rule: value };
}