স্টাইলশীটের মধ্যে কীভাবে কেবল আইই (কোনও সংস্করণ) লক্ষ্য করবেন?

Question

আমার একটি উত্তরাধিকারসূত্রে প্রাপ্ত প্রকল্প রয়েছে এবং এমন জায়গাগুলি রয়েছে যেখানে এটি একেবারে গোলযোগ। এই হল তাদের একজন। আমার কেবলমাত্র আইই (যে কোনও সংস্করণ) লক্ষ্য করা দরকার।

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

স্পষ্ট হবে: ইনসাইড এমবেডেড স্টাইলশীট এবং ছাড়া HTML এ ট্যাগ আইডি বা শ্রেণীর যোগ, আমি সীমানা শৈলী আবেদন করতে হবে শুধুমাত্র তাহলে ব্যবহারকারী আই ই ব্যবহার করছে। কিভাবে আমি এটি করতে পারব?

সম্পাদনা: এটি প্রতিফলিত করার জন্য ফায়ারফক্সের জন্য একটি সমাধান খুঁজে পেয়েছে, প্রশ্ন সম্পাদনা করে।

Comments

আপনার প্রশ্নটি কিছুটা বিভ্রান্তিকর। আপনি কি সিএসএস বৈশিষ্ট্যগুলির জন্য বিক্রেতার উপসর্গগুলি উল্লেখ করছেন বা আপনি ইউএ স্নিফিংয়ের মাধ্যমে কোনও ব্যবহারকারীর ব্রাউজার সনাক্ত করতে এবং তারপর যদি এটি মেলে তবে স্টাইলশিটটি প্রয়োগ করার কথা উল্লেখ করছেন? ...

— ওয়ার 10ck

Fireofox জন্য: stackoverflow.com/questions/952861/...

— nikoskip

আইই টার্গেট করতে আপনাকে আপনার এইচটিএমএল ফাইলটি সংশোধন করতে হবে এবং শর্তসাপেক্ষ মন্তব্যগুলি যুক্ত করতে হবে, আইই 10 এর জন্য আপনার কিছু জাভাস্ক্রিপ্টের প্রয়োজনও হবে কারণ এটি শর্তাধীন মন্তব্যগুলির জন্য 0 সমর্থন সহ আসে। আইডি এর কয়েকটি সংস্করণ লক্ষ্যবস্তু করার জন্য কয়েকটি সিএসএস হ্যাক সম্পাদনা করুন , তবে এটিও সমস্যা - সেগুলি হ্যাক।

— রমিজ ওয়াচলার 18

IE এ কেবল স্টাইল

— প্রয়োগের

আপনার সিএসএসের ভিতরে যদি কোনও সমাধানের প্রয়োজন হয় তবে আমি কেবল জাভাস্ক্রিপ্টে ভাবতে পারি। আমি এই rafael.adm.br/css_browser_selector পেয়েছি তবে এটি কিছুটা পুরানো।

— নিকোস্কিপ

Answer 1

ইন্টারনেট এক্সপ্লোরার 9 এবং নিম্ন: আপনি বহিরাগত স্টাইলশিট ব্যবহার করে নীচে নির্দিষ্টভাবে লক্ষ্য করতে চাইলে যে কোনও সংস্করণ (বা সংস্করণগুলির সংমিশ্রণ) এর জন্য একটি আইআই-নির্দিষ্ট স্টাইলশিট লোড করতে শর্তাধীন মন্তব্যগুলি ব্যবহার করতে পারেন।

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

যাইহোক, সংস্করণ 10 এর শুরুতে, শর্তসাপেক্ষ মন্তব্যগুলি এখন আইই-তে সমর্থিত নয়।

ইন্টারনেট এক্সপ্লোরার 10 এবং 11: - উচ্চ-বৈসাদৃশ্য ব্যবহার করে একটি মিডিয়া ক্যোয়ারী তৈরি করুন, যাতে আপনি আপনার আইই 10 এবং 11-নির্দিষ্ট সিএসএস শৈলী স্থাপন করেন। কারণ -ms-উচ্চ-বৈসাদৃশ্যটি মাইক্রোসফ্ট-নির্দিষ্ট (এবং কেবলমাত্র আইই 10+ এ উপলব্ধ), এটি কেবলমাত্র ইন্টারনেট এক্সপ্লোরার 10 এবং এর চেয়ে বড় অংশে পার্স করা হবে।

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

মাইক্রোসফ্ট এজ 12: @ সমর্থন রুলটি ব্যবহার করতে পারেন এখানে এই বিধি সম্পর্কে সমস্ত তথ্যের সাথে একটি লিঙ্ক

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

---

ইনলাইন বিধি আই 8 সনাক্তকরণ

আমার কাছে আরও 1 টি বিকল্প রয়েছে তবে এটি কেবল আই 8 এবং নীচের সংস্করণটি সনাক্ত করতে পারে।

  /* 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 */

আপনি এমবেড করা স্টাইলশীটের জন্য স্পিরিফাইড হিসাবে। আমি মনে করি আপনার নীচের সংস্করণে মিডিয়া ক্যোয়ারী এবং শর্ত মন্তব্য ব্যবহার করা দরকার।

Comments

যথেষ্ট ভাল, আমি পরীক্ষা করেছিলাম যে এই ফিক্সটি এজ ব্রাউজারকে প্রভাবিত করে না, জাইসি কেউ আশ্চর্য হয়েছিলেন।

— j4v1

এছাড়াও @supports (-ms-বেগবর্ধক: স্বয়ং) দরকার প্রান্ত জন্য নীচে দেখুন

— ফিলিস সুদারল্যান্ড

এজের জন্য, @smsports (-ms-ime-align: Auto) ব্যবহার করে -ms-acceleration এর পরিবর্তে আমার পক্ষে কাজ করে

— সপ্তম স্টিল

-ms-high-contrast:activeসিস্টেমটি উচ্চ-বিপরীতে মোড ব্যবহার করার ক্ষেত্রে এজকে প্রভাবিত করে।

— শর্টফিউজ

@supportsসমাধান সত্যিই মহান হল: বৈশিষ্ট্য সনাক্তকরণ যেতে উপায়। আমি সমর্থনটির অভাবের কারণে এজকে লক্ষ্য করতে ইচ্ছুক ছিলাম width: max-content: @supports not (width: max-content)এটি খুব সুন্দরভাবে করে, এবং এজ যখন সমর্থন করা শেষ করে তখন ভালভাবে উপেক্ষা করা হবে। (এটি 2019 এর পতনে হওয়া উচিত, যেহেতু এরপরে রেন্ডারিংয়ের জন্য এটি ক্রোমিয়ামে স্যুইচ করা উচিত))

— ফ্রেডেরিক

Answer 2

এখানে মিডিয়া প্রশ্নের একটি সংগ্রহ রয়েছে যা আপনাকে ইন্টারনেট এক্সপ্লোরার (আই 6 থেকে আই 1111), ফায়ারফক্স, ক্রোম এবং সাফারি (ইডিআইটি: এছাড়াও অপেরা যুক্ত করেছে) এর যে কোনও সংস্করণে এটি করার অনুমতি দেবে।

আইই 6

* html .ie6 { property: value; }

অথবা

.ie6 { _property: value; }

আইই 7

*+html .ie7 { property: value; }

অথবা

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

আইই 6 এবং 7

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

অথবা

.ie67 { *property: value; }

অথবা

.ie67 { #property: value; }

আইই 6, 7 এবং 8

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

আইই 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;
    }
}

আইই 9 এবং উপরে

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

আইই 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; }

আইই 10 এবং উপরে

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

অথবা

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

আইই ১১ (এবং উপরে ..)

_:-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;
}

গুগল ক্রোম (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; 
        }
    } 
}

অপেরা (১১ এবং নিম্ন)

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

আরও তথ্য বা অতিরিক্ত মিডিয়া প্রশ্নের জন্য, ব্রাউজারহ্যাকস.কম ওয়েবসাইটটি দেখুন এবং / অথবা এই ব্লগ পোস্টটি যা এই বিষয়ে লিখেছিলাম তা পরীক্ষা করে দেখুন ।

Comments

সেপ্টেম্বর 2018 এবং আপনি এখনও জীবন বাঁচান! অনেক ধন্যবাদ. তবে অপেরা (পুরানো সংস্করণ) সম্পর্কে কী? শুধু ওয়েবকিট?

— লাল চুলের মেয়ে

@Thegirlwithredhair অপেরা> = 9, অপেরা <= 9 এবং অপেরা <= 11 এখানে টার্গেট করার জন্য কয়েকটি দম্পতির নির্বাচক হ্যাক রয়েছে: ব্রাউজারহ্যাকস

— //#

@Thegirlwithredhair আমি উপরের আমার উত্তরে অপেরা> = 12 এবং অপেরা <= 11 লক্ষ্য হিসাবে ব্যবহার করতে পারেন এমন দুটি মিডিয়া ক্যোয়ারী যুক্ত করেছি।

— ডার্কসিল

Answer 3

IE 6-10 এবং EDGE লক্ষ্য করতে SASSআমি নিম্নলিখিত 2 ব্যবহার করি @media queries।

@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

কেবলমাত্র আমার স্টাইলশিটে আইই লক্ষ্যবস্তু করার জন্য, আমি এই সাস মিক্সিন ব্যবহার করি:

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

Answer 5

IE নির্দিষ্ট স্টাইলিংয়ের জন্য আরেকটি কার্যক্ষম সমাধান solution

<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

দুর্ভাগ্যক্রমে, মূল পোস্ট অনুযায়ী, এইচটিএমএল সম্পাদনা করা যায়নি। আমি আপনার প্রস্তাবিত সমাধানটির দিকে একটু নজর রেখেছি এবং যদি আপনি সময়ের আগে এটির জন্য পরিকল্পনা করতে পারেন তবে এটির যোগ্যতা রয়েছে।

— ধাতবফিনিক্স

আপনি পোস্ট অনুযায়ী সঠিক হতে পারে, কিন্তু সমাধানের সর্বশেষতম আই সংস্করণে কাজ করে না work শর্তসাপেক্ষ স্টাইলিং আর সমর্থিত নয়।

— সাহেব খান

এবং হ্যাঁ @ সাপোর্টস হ'ল অন্য সমাধানটি যদি আপনি এইচটিএমএল ট্যাগ ইত্যাদি সম্পাদনা করতে না পারেন

— সাহেব খান

@ সাপোর্টস (-ms-ime-align: Auto) my .মাই ক্লাস {/ * শৈলী * /}}

— সাহেব খান

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 };
}

এই IE8 এর জন্য IE সংস্করণগুলি প্রত্যাশা করে।

অথবা আপনি ব্যবহার করতে পারেন:

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

যা IE8-11 লক্ষ্যবস্তু করে, তবে ফায়ারফক্স ১.x কে ট্রিগার করে (এটি আমার ব্যবহারের ক্ষেত্রে গুরুত্বপূর্ণ নয়)।

এই মুহুর্তে আমি মুদ্রণ সমর্থন দিয়ে পরীক্ষা করছি, এবং এটি ঠিকঠাক কাজ করছে বলে মনে হচ্ছে:

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