সিএসএস মিডিয়া ক্যোয়ারির জন্য আইই 8 সমর্থন


178

আইই 8 নিম্নলিখিত সিএসএস মিডিয়া ক্যোয়ারিকে সমর্থন করে না:

@import url("desktop.css") screen and (min-width: 768px);

তা না হলে লেখার বিকল্প উপায় কী? ফায়ারফক্সে একই কাজ করে।

নীচের কোড সহ কোনও সমস্যা?

@import url("desktop.css") screen; 
@import url("ipad.css") only screen and (device-width:768px);

যারা মিডিয়াতে ইনলাইন সিএসএস চেষ্টা করতে চান এবং প্রতিক্রিয়া (.min) ব্যবহার করতে চান। জেএসরা এই পরিস্থিতিতে কাজ করে না - মনে হয় এটি সিএসএস ফাইলগুলির জন্য কাজ করে
NoWomenNoCry

উত্তর:


77

ইন্টারনেট এক্সপ্লোরার সংস্করণগুলি আই 9 এর আগে মিডিয়া ক্যোয়ারিকে সমর্থন করে না

যদি আপনি খুঁজছেন একটি উপায় জন্য অধ: পতিত IE8 ব্যবহারকারীদের জন্য নকশা, আপনি ইন্টারনেট এর শর্তাধীন সহায়ক মন্তব্য খুঁজে পেতে পারেন। এটি ব্যবহার করে, আপনি একটি IE 8/7/6 নির্দিষ্ট স্টাইল শীট নির্দিষ্ট করতে পারেন যা পূর্ববর্তী বিধিগুলি লিখে দেয়।

উদাহরণ স্বরূপ:

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

এটি আইই 8 তে কোনও প্রতিক্রিয়াশীল ডিজাইনের অনুমতি দেবে না, তবে জেএস প্লাগইন ব্যবহারের চেয়ে সহজ এবং আরও অ্যাক্সেসযোগ্য সমাধান হতে পারে।


94
শর্তসাপেক্ষ শৈলীগুলি কীভাবে কোনও প্রতিক্রিয়াশীল ডিজাইন সমস্যার সমাধান করবে তা আমি দেখতে পাচ্ছি না।
জেমস ওয়েস্টগেট

8
আমি বুঝতে পারি না এই সমাধানটি কীভাবে IE এর প্রতিক্রিয়াশীল ডিজাইনের সমাধান করবে? ব্রাউজারের উপর নির্ভর করে বিভিন্ন স্টাইলশিট লোড করা উদাহরণস্বরূপ ব্রাউজারের আকারের উপর নির্ভর করে বিভিন্ন স্টাইলের বৈশিষ্ট্যগুলি ব্যবহারের সাথে কোনও সম্পর্ক ছিল না।
ক্লিকেরকো

13
আমি মনে করি সঠিক উত্তরটি হ'ল আইই 8 মিডিয়া প্রশ্নগুলিকে সমর্থন করে না । এই উত্তর সাজানোর কথা বলে তবে এটি প্রথম নজরে সম্পূর্ণ পরিষ্কার নয়। নির্বিশেষে, আমি ভেবেছিলাম এটির সমর্থন আছে এবং এই উত্তর আমাকে অন্যথায় উপলব্ধি করতে সহায়তা করেছিল।
জেসন

54
এটি সত্য যে এই উত্তরটি কোনও প্রতিক্রিয়াশীল সমাধান নয় তবে আমার কাছে এটি একটি বিশাল "বিউটি", সত্য যে আইই 8 আইপ্যাড, বা অ্যান্ড্রয়েড ট্যাবলেটগুলিতে ব্যবহৃত হয় না। আইই 8 এক্সপি / ভিস্তা পিসিতে বেশিরভাগ 2003 থেকে 2009 পর্যন্ত ব্যবহার করা যেতে পারে, মূলত 1024px প্রশস্ত পর্দা। উইন্ডোজ মোবাইল আইআই under এর অধীনে, এবং উইন্ডোজ পোন আইই ++ এর অধীনে। এখানে আসল প্রশ্নটি নিজেকে জিজ্ঞাসা করা উচিত যে আইই 8 এর জন্য প্রতিক্রিয়াশীল করা কি সত্যিই দরকারী?
গ্রেগোয়ার ডি।

16
@GregoireD। হ্যাঁ তাই হয়। কারণ এমন কিছু লোক আছেন যারা জুম সহ ওয়েব পৃষ্ঠা দেখেন। আমার সংস্থায় অ্যাক্সেসযোগ্যতার জন্য আমরা 800x600 এ 4x জুম থেকে পৃষ্ঠাগুলি ফর্ম্যাট করি। এটি 400px প্রস্থের মতো একটি স্ক্রিন তৈরি করে। আপনার পছন্দসই ব্রাউজার থাকা সত্ত্বেও (এবং আই 8 অন্তর্ভুক্ত) মিডিয়া-কোয়েরিগুলি এর জন্য সত্যিই দরকারী।
আরকানা

341

css3-mediaqueries-js সম্ভবত আপনি যা খুঁজছেন তা হ'ল: এই স্ক্রিপ্টটি মিডিয়া প্রশ্নের উদ্রেক করে । তবে (স্ক্রিপ্টের সাইট থেকে) এটি " @importএড স্টাইলশিটগুলিতে কাজ করে না (যা আপনাকে পারফরম্যান্সের কারণে কোনওভাবেই ব্যবহার করা উচিত নয়) the এছাড়াও উপাদান <link>এবং <style>উপাদানগুলির মিডিয়া বৈশিষ্ট্যও শুনবে না "।

একই শিরাতে আপনার কাছে সরল রেসপন্ড.জেএস রয়েছে , যা কেবল min-widthএবং max-widthমিডিয়া অনুসন্ধানগুলিকে সক্ষম করে ।


7
কেন এটি উত্তর হিসাবে লেবেল করা হয় না? ধন্যবাদ আমার জন্য পারফেক্ট। উপায় দ্বারা আপনার ওভারহেডের কারণে সিএসএস কোয়েরিগুলি আমদানি করা উচিত নয়।
সমৃদ্ধ

নিখুঁত, ঠিক আমি যা খুঁজছিলাম!
সোমবার

ধন্যবাদ!! এই উত্তরটি, এবং রেসপন্স.জেএস, আমাকে IE8-তে মিডিয়া প্রশ্নগুলির জন্য একটি কর্মশালা করার চেষ্টা করে অনেক সময় সাশ্রয় করেছে।
ইংগسم্যাট

3
কিছু নয় -> .js .css ফাইলগুলির পরে অন্তর্ভুক্ত করা উচিত ... xD
কালজাক

4
প্রতিক্রিয়া কাজ করেছে, কিন্তু css3- মিডিয়া প্রশ্নগুলি তা করেনি। আমি মনে করি কারণ এটি প্রতিক্রিয়া স্ব-অন্তর্নিহিত, তবে CSS3- মিডিয়া প্রশ্নাবলী ব্যবহারকারী-এজেন্ট সনাক্তকরণের মতো কিছু jQuery ফাংশনগুলির উপর নির্ভর করে এবং এই ফাংশনগুলি অবচিত ও সরানো হয়েছিল (jQuery ডক্স দেখুন)।
আন্তন বরিটস্কি

50

আমি যে সর্বোত্তম সমাধানটি পেয়েছি তা হ'ল রেসপন্ড.জেস বিশেষত যদি আপনার প্রধান উদ্বেগটি নিশ্চিত করে যে আপনার প্রতিক্রিয়াশীল নকশা IE8 এ কাজ করে। মিনিট / জিজেপ করা হলে এটি 1kb এ বেশ হালকা ওজনের এবং আপনি কেবলমাত্র আইই 8 ক্লায়েন্টই এটি লোড করতে পারবেন তা নিশ্চিত করতে পারেন:

<!--[if lt IE 9]>
<script src="respond.min.js"></script>
<![endif]-->

আপনি যদি বুটস্ট্র্যাপ ব্যবহার করেন তবে এটিও প্রস্তাবিত পদ্ধতি: http://getbootstrap.com/getting-started/#support-ie8-ie9


14

আইই 8 (এবং নিম্ন সংস্করণ) এবং 3.5 এর আগে ফায়ারফক্স মিডিয়া ক্যোয়ারিকে সমর্থন করে না। সাফারি ৩.২ এটি আংশিকভাবে সমর্থন করে।

এই ব্রাউজারগুলিতে মিডিয়া ক্যোয়ারী সমর্থন যুক্ত করতে জাভাস্ক্রিপ্ট ব্যবহার করে এমন কিছু কর্মক্ষেত্র রয়েছে। এগুলি চেষ্টা করুন:

মিডিয়া ক্যোয়ারী jQuery প্লাগইন (কেবলমাত্র সর্বোচ্চ / মিনিটের প্রস্থের সাথে ডিল করে)

css3-mediaqueries-js - একটি লাইব্রেরি যা অসমর্থিত ব্রাউজারগুলিতে মিডিয়া ক্যোয়ারী সমর্থন যুক্ত করে


ঠিক আছে .. আমি স্রেফ আমার পৃষ্ঠায় css3-mediaqueries.js অন্তর্ভুক্ত করেছি .. তবুও এটি IE তে কাজ করে না..মিডিয়ার ক্যোয়ারিতে "@ ইম্পোর্ট ইউআরএল (" ডেস্কটপ। 768px); " পাশাপাশি "@ ইম্পোর্ট ইউআরএল (" ডেস্কটপ। সিএসএস ") স্ক্রিন নয় এবং (ডিভাইস-প্রস্থ: 768px);"
testndtv

স্ক্রিপ্ট সহ আমার পাশাপাশি কিছু অতিরিক্ত করার দরকার আছে কিনা তা নিশ্চিত নন ..
টেস্টেন্ডটিভি

দয়া করে নোট করুন যে এটি আমদানিকৃত CSS এ কাজ করে না। এটি চেষ্টা করুন: <লিঙ্ক rel = "স্টাইলশিট" টাইপ = "পাঠ্য / সিএসএস" মিডিয়া = "স্ক্রিন নয় এবং (ডিভাইস-প্রস্থ: 768px)" href = "ডেস্কটপ।
CSS

ওহ ঠিক আছে .. আমি দেখছি। আসলে সেক্ষেত্রে, এটি আমাকে সাহায্য করতে পারে না, কারণ আমি পৃষ্ঠায় কিছু না করে কিছু সন্ধান করছি ieআমি কেবলমাত্র সিএসএসে বাহ্যিকভাবে ..
testndtv

এই গুগল ট্রাঙ্ক সিএসএস 3 জেএস স্ক্রিপ্টটি উল্লেখ করে যে এটি কেবলমাত্র কেবলমাত্র পর্দা এবং .... 'র বাহ্যিক পরিবর্তে সিএসএস স্টাইলশীটের অভ্যন্তরে মিডিয়াকোয়ারির সাথে কাজ করে। এর অর্থ আপনাকে আপনার স্টাইলশিটগুলি একের মধ্যে একীভূত করতে হবে এবং তার অভ্যন্তরে আপনি বাহ্যিকভাবে যা করতে চেয়েছিলেন তা করতে হবে: @ মিডিয়া স্ক্রিন এবং (সর্বাধিক প্রস্থ: 980px) {
ক্যাপগ্রিস

11

Css3mediaqueries.js প্রকল্প পৃষ্ঠা থেকে নেওয়া।

দ্রষ্টব্য: @ আমদানি করা স্টাইলশিটগুলিতে কাজ করে না (যা পারফরম্যান্সের কারণে আপনার ব্যবহার করা উচিত নয়)। এছাড়াও উপাদান <link>এবং <style>উপাদানগুলির মিডিয়া বৈশিষ্ট্য শুনবে না ।


আমাকে @ আমদানি করা স্টাইলশিটগুলিতে কাজ করে না বলে বলার জন্য +1! আমার ডাব্লুপি চাইল্ড থিমটিতে আমাকে অনেক সময় বাঁচান।
ভিনিসিয়াস গার্সিয়া

8

সিএসএস 3-মিডিয়াক্যুরি-জেএস ব্যবহার করার একটি সহজ উপায় হ'ল ক্লোজিং বডি ট্যাগের আগে নিম্নলিখিতগুলি অন্তর্ভুক্ত করা:

<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script 
   src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script>
<![endif]-->

6

সম্পাদিত উত্তর: আইই কেবল পর্দা এবং আমদানি মিডিয়া হিসাবে মুদ্রণ বোঝে। আমদানি বিবৃতি সহ সরবরাহ করা সমস্ত অন্যান্য সিএসএসের ফলে আইই 8 আমদানির বিবৃতি উপেক্ষা করে। সাফারি বা মজিলার মতো গেকো ব্রাউজারে এই সমস্যা নেই।


আমার আইও সামঞ্জস্যতা মোডে নেই ... আই আই-র জন্য অন্য কোনও বিকল্প আছে..আসলে আমি কেবল একটি 686868 পিক্স স্ক্রিন ডিভাইস বাদে সবকিছুই নির্বাচন করতে চাই ..
testndtv

এছাড়াও আপনি যে লিঙ্কটি দিয়েছেন তার উপরে আলোচিত হিসাবে, আমি ডক্টিপিকে <! DOCTYPE html পাবলিক "- // ডাব্লু 3 সি // ডিটিডি এক্সএইচটিএমএল 1.0 ট্রানজিশনাল // EN" " w3.org/TR/xhtml1/DTD/xhtml1- ট্রান্সশানাল হিসাবে সেট করার চেষ্টা করেছি। dtd "> ... এখনও কাজ করে না ..
testndtv

1
আমি আপনাকে সঠিক পেয়েছি যদি আমি shure না। আপনি জাভাস্ক্রিপ্ট স্ক্রিন রেজোলিউশন সনাক্ত করতে ব্যবহার করতে পারেন? সিএসএসের সাথে অন্য কোনও উপায় নেই। আপনি কি শ্যুর করেন যে এর সাথে আপনার কোনও সম্পর্কিত ত্রুটি নেই কারণ এটি কমপক্ষে ওভারড্রেন বা উপেক্ষা করার কারণ হবে। বিকাশকারী সরঞ্জামদণ্ডটি হ'ল একটি টিপ। এটির সাথে আপনি পেজরলোডগুলি ছাড়াই সরাসরি পরীক্ষা করতে পারবেন
শ্রীরা

খুব দ্রুত কুইর্ক মোডে স্যুইচ হচ্ছে, আপনি কি এটি পরীক্ষা করেছেন? এটি অবাঞ্ছিত ফলাফল হতে পারে। Quirkmode আপনার ডক্টাইপটিকে ওভাররাইট করবে। কোনও অতি ক্ষুদ্র প্রকল্পে আপনি যা চান তা পরীক্ষা করে দেখার জন্য এটিও practiceশ্বরের অনুশীলন যে এটি কোনও ত্রুটি / ফলাফল নয়
শ্রীরা

ঠিক আছে .. এখানে আমি এখন আপডেট করেছি ... আমার কমন সিএসএস রয়েছে এবং এর ভিতরে আমি বলি; ... @ ইমপোর্ট ইউআরএল ("ডেস্কটপ। সিএসএস") স্ক্রিন; @ আইম্পোর্ট ইউআরএল ("আইপ্যাড সিএসএস") কেবলমাত্র স্ক্রিন এবং (ডিভাইস-প্রস্থ: 768px); এই পদ্ধতির সঠিক কিনা তা নিশ্চিত নন, তবে ডেস্কটপ (আইই / এফএফ) পাশাপাশি আইপ্যাডের জন্য কাজ করে। এই পদ্ধতির সাথে কিছু সমস্যা থাকতে পারে?
testndtv

6

মিডিয়া প্রশ্নগুলি IE8 এবং এর নীচে মোটেই সমর্থিত নয়।


একটি জাভাস্ক্রিপ্ট ভিত্তিক কর্মক্ষেত্র

আইই 8 এর জন্য সমর্থন যুক্ত করতে আপনি বেশ কয়েকটি জেএস সমাধান ব্যবহার করতে পারেন। উদাহরণস্বরূপ, কেবলমাত্র নিম্নলিখিত কোড সহ আইই 8-র জন্য মিডিয়া ক্যোয়ারী সমর্থন যোগ করতে প্রতিক্রিয়া যুক্ত করা যেতে পারে:

<!--[if lt IE 9]>
<script 
   src="respond.min.js">
</script>
<![endif]-->

সিএসএস মিডিয়াকিউয়ার্স হ'ল একই লাইব্রেরি। আপনার HTML এ লাইব্রেরি যুক্ত করার কোডটি অভিন্ন হবে:

<!--[if lt IE 9]>
<script 
   src="css3-mediaqueries.js">
</script>
<![endif]-->

বিকল্প

আপনি যদি জেএস ভিত্তিক সমাধান পছন্দ না করেন তবে আপনি কেবল আই <9 9 স্টাইলশীট যুক্ত করার কথা বিবেচনা করতে হবে যেখানে আপনি আপনার স্টাইলিং আইই <9 এর সাথে নির্দিষ্ট করতে পারেন। তার জন্য আপনার কোডটিতে নিম্নলিখিত HTML টি যুক্ত করা উচিত:

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ielt9.css"/>
<![endif]-->

বিঃদ্রঃ :

প্রযুক্তিগতভাবে এটি আরও একটি বিকল্প: আই এস <9 লক্ষ্য করতে সিএসএস হ্যাক ব্যবহার করে । এটি কেবলমাত্র আইই <9 স্টাইলশিটের মতোই প্রভাব ফেলতে পারে তবে এর জন্য আপনার কোনও পৃথক স্টাইলশিট লাগবে না। আমি এই বিকল্পটির প্রস্তাব দিচ্ছি না, যদিও তারা অবৈধ সিএসএস কোড তৈরি করে (যা সিএসএস হ্যাকের ব্যবহারকে সাধারণত আজ বোঝা যায় বলে বেশ কয়েকটি কারণ রয়েছে)।


5

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


4

http://blog.keithclark.co.uk/wp-content/uploads/2012/11/ie-media-block-tests.php

আমি ব্যবহার করেছি @media \0screen {}এবং এটি বাস্তব আইই 8 এ আমার জন্য দুর্দান্ত কাজ করে।


সেই ব্লকে সংজ্ঞায়িত স্টাইলের বিধিগুলি কেবল আইই 8 এ প্রয়োগ করা হবে , অন্যান্য ব্রাউজারগুলি এটিকে উপেক্ষা করবে
লুকা

@ লুকা অতিরিক্তভাবে, এটি কোনও ন্যূনতম প্রস্থ, সর্বাধিক প্রস্থ ইত্যাদি উল্লেখ করার অনুমতি দেয় না
জন স্লেজার

3

আইই আই 9 পর্যন্ত মিডিয়া ক্যোয়ারী সমর্থন যোগ করেনি। আইই 8 নিয়ে আপনার ভাগ্যের বাইরে।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.