ব্রাউজার এবং ডিভাইস
ব্রাউজার এবং ডিভাইসগুলি সম্পর্কে জানুন, আধুনিক থেকে পুরানো পর্যন্ত, যেগুলি বুটস্ট্র্যাপ দ্বারা সমর্থিত, প্রতিটির জন্য পরিচিত কুইর্ক এবং বাগগুলি সহ।
বুটস্ট্র্যাপ সমস্ত প্রধান ব্রাউজার এবং প্ল্যাটফর্মের সর্বশেষ, স্থিতিশীল রিলিজ সমর্থন করে। উইন্ডোজে, আমরা ইন্টারনেট এক্সপ্লোরার 10-11 / মাইক্রোসফ্ট এজ সমর্থন করি ।
যে বিকল্প ব্রাউজারগুলি ওয়েবকিট, ব্লিঙ্ক বা গেকোর সর্বশেষ সংস্করণ ব্যবহার করে, তা সরাসরি বা প্ল্যাটফর্মের ওয়েব ভিউ API-এর মাধ্যমে, স্পষ্টভাবে সমর্থিত নয়। যাইহোক, বুটস্ট্র্যাপ (বেশিরভাগ ক্ষেত্রে) এই ব্রাউজারগুলিতেও সঠিকভাবে প্রদর্শন এবং কাজ করা উচিত। আরো সুনির্দিষ্ট সমর্থন তথ্য নীচে প্রদান করা হয়েছে.
আপনি আমাদের সমর্থিত ব্রাউজারগুলির পরিসর এবং তাদের সংস্করণগুলি খুঁজে পেতে পারেন আমাদেরpackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
আমরা অটোপ্রেফিক্সার ব্যবহার করি সিএসএস উপসর্গের মাধ্যমে অভিপ্রেত ব্রাউজার সমর্থন পরিচালনা করতে, যা এই ব্রাউজার সংস্করণগুলি পরিচালনা করতে ব্রাউজারলিস্ট ব্যবহার করে। আপনার প্রকল্পগুলিতে এই সরঞ্জামগুলিকে কীভাবে সংহত করতে হয় তার জন্য তাদের ডকুমেন্টেশনের সাথে পরামর্শ করুন।
সাধারণভাবে বলতে গেলে, বুটস্ট্র্যাপ প্রতিটি প্রধান প্ল্যাটফর্মের ডিফল্ট ব্রাউজারগুলির সর্বশেষ সংস্করণ সমর্থন করে। মনে রাখবেন যে প্রক্সি ব্রাউজারগুলি (যেমন অপেরা মিনি, অপেরা মোবাইলের টার্বো মোড, ইউসি ব্রাউজার মিনি, অ্যামাজন সিল্ক) সমর্থিত নয়৷
| ক্রোম | ফায়ারফক্স | সাফারি | অ্যান্ড্রয়েড ব্রাউজার এবং ওয়েবভিউ | মাইক্রোসফট এজ | |
|---|---|---|---|---|---|
| অ্যান্ড্রয়েড | সমর্থিত | সমর্থিত | N/A | অ্যান্ড্রয়েড v5.0+ সমর্থিত | সমর্থিত |
| iOS | সমর্থিত | সমর্থিত | সমর্থিত | N/A | সমর্থিত |
| উইন্ডোজ 10 মোবাইল | N/A | N/A | N/A | N/A | সমর্থিত |
একইভাবে, বেশিরভাগ ডেস্কটপ ব্রাউজারগুলির সর্বশেষ সংস্করণগুলি সমর্থিত।
| ক্রোম | ফায়ারফক্স | ইন্টারনেট এক্সপ্লোরার | মাইক্রোসফট এজ | অপেরা | সাফারি | |
|---|---|---|---|---|---|---|
| ম্যাক | সমর্থিত | সমর্থিত | N/A | N/A | সমর্থিত | সমর্থিত |
| উইন্ডোজ | সমর্থিত | সমর্থিত | সমর্থিত, IE10+ | সমর্থিত | সমর্থিত | সমর্থিত নয় |
ফায়ারফক্সের জন্য, সর্বশেষ স্বাভাবিক স্থিতিশীল রিলিজ ছাড়াও, আমরা ফায়ারফক্সের সর্বশেষ এক্সটেন্ডেড সাপোর্ট রিলিজ (ESR) সংস্করণকেও সমর্থন করি।
অনানুষ্ঠানিকভাবে, বুটস্ট্র্যাপ ক্রোমিয়াম এবং লিনাক্সের জন্য ক্রোম, লিনাক্সের জন্য ফায়ারফক্স, এবং ইন্টারনেট এক্সপ্লোরার 9-এ দেখতে এবং আচরণ করা উচিত, যদিও তারা আনুষ্ঠানিকভাবে সমর্থিত নয়।
কিছু ব্রাউজার বাগগুলির একটি তালিকার জন্য যা বুটস্ট্র্যাপকে মোকাবেলা করতে হয়, আমাদের ব্রাউজার বাগগুলির ওয়াল দেখুন ৷
ইন্টারনেট এক্সপ্লোরার 10+ সমর্থিত; IE9 এবং ডাউন নয়। অনুগ্রহ করে সচেতন থাকুন যে কিছু CSS3 বৈশিষ্ট্য এবং HTML5 উপাদানগুলি IE10-এ সম্পূর্ণরূপে সমর্থিত নয়, বা সম্পূর্ণ কার্যকারিতার জন্য প্রিফিক্সড বৈশিষ্ট্যগুলির প্রয়োজন৷ CSS3 এবং HTML5 বৈশিষ্ট্যগুলির ব্রাউজার সমর্থন সম্পর্কে বিশদ বিবরণের জন্য আমি কি ব্যবহার করতে পারি... দেখুন ।
আপনার যদি IE8-9 সমর্থনের প্রয়োজন হয়, বুটস্ট্র্যাপ 3 ব্যবহার করুন। এটি আমাদের কোডের সবচেয়ে স্থিতিশীল সংস্করণ এবং এখনও আমাদের টিম সমালোচনামূলক বাগফিক্স এবং ডকুমেন্টেশন পরিবর্তনের জন্য সমর্থিত। তবে এতে নতুন কোনো ফিচার যোগ করা হবে না।
আইওএস এবং অ্যান্ড্রয়েডে উপাদানটির জন্য সমর্থন বেশ overflow: hidden;সীমিত । <body>সেই লক্ষ্যে, আপনি যখন এই ডিভাইসগুলির ব্রাউজারগুলির মধ্যে একটিতে একটি মডেলের উপরে বা নীচে স্ক্রোল করবেন, তখন <body>সামগ্রীটি স্ক্রোল করা শুরু করবে। দেখুন Chrome বাগ #175502 (Chrome v40 এ ঠিক করা হয়েছে) এবং WebKit বাগ #153852 ।
iOS 9.2 অনুযায়ী, যখন একটি মোডাল খোলা থাকে, যদি একটি স্ক্রোল অঙ্গভঙ্গির প্রাথমিক স্পর্শ পাঠ্য <input>বা a এর সীমানার মধ্যে থাকে <textarea>, <body>তাহলে মডেলের নীচের বিষয়বস্তুটি মডেলের পরিবর্তে স্ক্রোল করা হবে। ওয়েবকিট বাগ #153856 দেখুন ।
.dropdown-backdropz-ইনডেক্সিংয়ের জটিলতার কারণে উপাদানটি ন্যাভিতে iOS-এ ব্যবহার করা হয় না । এইভাবে, navbars-এ ড্রপডাউন বন্ধ করতে, আপনাকে অবশ্যই সরাসরি ড্রপডাউন উপাদানে ক্লিক করতে হবে (অথবা অন্য কোনো উপাদান যা iOS এ একটি ক্লিক ইভেন্ট চালু করবে )।
পৃষ্ঠা জুম করা অনিবার্যভাবে বুটস্ট্র্যাপ এবং ওয়েবের বাকি অংশে কিছু উপাদানে রেন্ডারিং আর্টিফ্যাক্ট উপস্থাপন করে। সমস্যাটির উপর নির্ভর করে, আমরা এটি ঠিক করতে সক্ষম হতে পারি (প্রথমে অনুসন্ধান করুন এবং তারপরে প্রয়োজন হলে একটি সমস্যা খুলুন)। যাইহোক, আমরা এগুলি উপেক্ষা করার প্রবণতা রাখি কারণ তাদের প্রায়শই হ্যাকি ওয়ার্কঅ্যারাউন্ড ছাড়া অন্য কোনও সরাসরি সমাধান থাকে না।
:hoverবেশিরভাগ টাচ ডিভাইসে সম্ভব না হলেও , iOS এই আচরণটি অনুকরণ করে, যার ফলে "স্টিকি" হোভার শৈলী হয় যা একটি উপাদান ট্যাপ করার পরেও থাকে। এই হোভার শৈলীগুলি শুধুমাত্র তখনই সরানো হয় যখন ব্যবহারকারীরা অন্য একটি উপাদানে ট্যাপ করে। এই আচরণটি অনেকাংশে অবাঞ্ছিত বলে মনে করা হয় এবং Android বা Windows ডিভাইসে এটি একটি সমস্যা বলে মনে হয় না।
আমাদের v4 আলফা এবং বিটা রিলিজ জুড়ে, আমরা অসম্পূর্ণ অন্তর্ভুক্ত করেছি এবং একটি মিডিয়া ক্যোয়ারী শিম বেছে নেওয়ার জন্য কোড মন্তব্য করেছি যা হভারিং অনুকরণ করে এমন টাচ ডিভাইস ব্রাউজারগুলিতে হোভার শৈলী অক্ষম করে। এই কাজটি কখনই সম্পূর্ণরূপে সম্পন্ন বা সক্ষম করা হয়নি, কিন্তু সম্পূর্ণ ভাঙ্গন এড়াতে, আমরা এই শিমটিকে অবমূল্যায়ন করতে এবং মিক্সিনগুলিকে ছদ্ম-শ্রেণীর জন্য শর্টকাট হিসাবে রাখতে বেছে নিয়েছি।
এমনকি কিছু আধুনিক ব্রাউজারেও, মুদ্রণ অদ্ভুত হতে পারে।
Safari v8.0 অনুযায়ী, ফিক্সড-প্রস্থ .containerক্লাসের ব্যবহার সাফারি মুদ্রণের সময় অস্বাভাবিকভাবে ছোট ফন্ট সাইজ ব্যবহার করতে পারে। আরো বিস্তারিত জানার জন্য সমস্যা #14868 এবং WebKit বাগ #138192 দেখুন। একটি সম্ভাব্য সমাধান হল নিম্নলিখিত CSS:
@media print {
.container {
width: auto;
}
}বাক্সের বাইরে, অ্যান্ড্রয়েড 4.1 (এবং এমনকি কিছু নতুন রিলিজ দৃশ্যত) ব্রাউজার অ্যাপের সাথে পছন্দের ডিফল্ট ওয়েব ব্রাউজার হিসেবে পাঠানো হয় (ক্রোমের বিপরীতে)। দুর্ভাগ্যবশত, ব্রাউজার অ্যাপে সাধারণভাবে CSS-এর সাথে প্রচুর বাগ এবং অসঙ্গতি রয়েছে।
উপাদানগুলিতে , <select>অ্যান্ড্রয়েড স্টক ব্রাউজার পার্শ্ব নিয়ন্ত্রণগুলি প্রদর্শন করবে না যদি একটি border-radiusএবং/অথবা borderপ্রয়োগ করা হয়। ( বিশদ বিবরণের জন্য এই স্ট্যাকওভারফ্লো প্রশ্নটি<select> দেখুন।) আপত্তিকর CSS সরাতে এবং অ্যান্ড্রয়েড স্টক ব্রাউজারে একটি আনস্টাইল করা উপাদান হিসাবে রেন্ডার করতে নীচের কোডের স্নিপেটটি ব্যবহার করুন । ব্যবহারকারী এজেন্ট স্নিফিং Chrome, Safari, এবং Mozilla ব্রাউজারগুলির সাথে হস্তক্ষেপ এড়ায়।
<script>
$(function () {
var nua = navigator.userAgent
var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
if (isAndroid) {
$('select.form-control').removeClass('form-control').css('width', '100%')
}
})
</script>একটি উদাহরণ দেখতে চান? এই JS বিন ডেমো দেখুন.
পুরানো এবং বগি ব্রাউজারগুলিকে সর্বোত্তম সম্ভাব্য অভিজ্ঞতা প্রদান করার জন্য, বুটস্ট্র্যাপ বিভিন্ন জায়গায় CSS ব্রাউজার হ্যাকগুলি ব্যবহার করে নির্দিষ্ট ব্রাউজার সংস্করণগুলিতে বিশেষ CSS টার্গেট করে যাতে ব্রাউজারে নিজেরাই বাগগুলির সাথে কাজ করা যায়। এই হ্যাকগুলি বোধগম্যভাবে CSS যাচাইকারীদের অভিযোগ করে যে সেগুলি অবৈধ। কয়েকটি জায়গায়, আমরা ব্লিডিং-এজ সিএসএস বৈশিষ্ট্যগুলিও ব্যবহার করি যেগুলি এখনও সম্পূর্ণ মানসম্মত নয়, তবে এগুলি সম্পূর্ণরূপে প্রগতিশীল উন্নতির জন্য ব্যবহার করা হয়।
এই বৈধকরণ সতর্কতাগুলি বাস্তবে কোন ব্যাপার না যেহেতু আমাদের CSS-এর নন-হ্যাকি অংশ সম্পূর্ণরূপে বৈধতা দেয় এবং হ্যাকি অংশগুলি নন-হ্যাকি অংশের সঠিক কার্যকারিতায় হস্তক্ষেপ করে না, তাই কেন আমরা ইচ্ছাকৃতভাবে এই বিশেষ সতর্কতাগুলিকে উপেক্ষা করি।
আমাদের এইচটিএমএল ডক্সে একইভাবে কিছু তুচ্ছ এবং অপ্রয়োজনীয় HTML বৈধতা সতর্কতা রয়েছে কারণ আমরা একটি নির্দিষ্ট ফায়ারফক্স বাগের জন্য একটি সমাধান অন্তর্ভুক্ত করেছি ।