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




w3schools sql (4)

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

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

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

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

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


এখানে মিডিয়া প্রশ্নের একটি সংগ্রহ রয়েছে যা আপনাকে ইন্টারনেট এক্সপ্লোরার (আই 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; 
    }
}

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


SASS ব্যবহার করার সময় আমি আই 6 6-10 এবং @media queries লক্ষ্য করতে নিম্নলিখিত 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/

সম্পাদন করা

আমি @support queries ব্যবহার করে 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/


ইন্টারনেট এক্সপ্লোরার 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 টি বিকল্প রয়েছে তবে এটি কেবল 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 */

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





css3