دعم المتصفحات في إطار Bootstrap
اقرأ عن المتصفّحات والأجهزة، من الحديثة إلى القديمة، التي يدعمها Bootstrap وتعرّف على الحالات الفريدة والعلل الخاصّة بكل واحد منها.
المتصفّحات المدعومة
يدعم Bootstrap الإصدارات الأحدث والأكثر استقرارًا من جميع المتصفّحات والمنصّات الشهيرة. فعلى نظام ويندوز يدعم Bootstrap الإصدرايْن 10 و 11 من متصفح Internet Explorer وكذلك متصفح Microsoft Edge.
لا يدعم Bootstrap صراحةً المتصفّحات البديلة التي تستخدم الإصدارات الأخيرة من محركات Blink أو WebKit أو Gecko؛ سواء كان الاستخدام مباشرًا أو عن طريق واجهات WebView API التي توفّرها تلك المنصات. على الرغم من ذلك؛ يُفترَض أن يظهر Bootstrap ويعمل على نحو صحيح في المتصفّحات المُشار إليها. توجد أدناه معلومات أكثر تفصيلًا عن دعم المتصفّحات.
يمكنك العثور على المتصفحات المدعومة وإصداراتها في الملف .browserslistrc.
# https://github.com/browserslist/browserslist#readme
>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30
نستخدم Autoprefixer للتعامل مع دعم المتصفحات القائم على بادئات CSS، والتي تستخدم Browserslist لإدارة إصدارات المتصفح. اقرأ توثيقها إن أردت معرفة المزيد من التفاصيل.
الأجهزة الجوّالة
عمومًا؛ يدعم Bootstrap الإصدارات الحديثة من المتصفح الأساسي لكلّ منصة شهيرة. يُرجى ملاحظة أن المتصفّحات الوسيطة - مثل Opera Mini أو UC Browser Mini، أو وضع Turbo على Opera Mobile أو Amazon Silk - غير مدعومة.
| Chrome | Firefox | Safari | متصفّح أندرويد وWebView | Microsoft Edge | |
|---|---|---|---|---|---|
| أندرويد | مدعوم | مدعوم | غير موجود | يدعم الإصدار 5.0 فما فوق | مدعوم |
| iOS | مدعوم | مدعوم | مدعوم | غير موجود | مدعوم |
| Windows 10 Mobile | غير موجود | غير موجود | غير موجود | غير موجود | مدعوم |
المتصفّحات على الحواسيب
على نحو مشابه، يدعم Bootstrap الإصدارات الأحدث من متصفّحات الحواسيب.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| ماك | مدعوم | مدعوم | غير معروف | غير معروف | مدعوم | مدعوم |
| ويندوز | مدعوم | مدعوم | يدعم الإصدار 10 فما فوق | مدعوم | مدعوم | غير مدعوم |
بالنسبة لمتصفح Firefox؛ يدعم Bootstrap، علاوة على الإصدار العادي المستقر الأحدث، الإصدارَ ذا الدعم الممدَّد Extended Support Release (اختصارًا ESR) منه.
يجب أن يعمل إطار Bootstrap جيدا على متصفحات Chromium و Chrome و Firefox في نظام لينكس، ومتصفح Internet Explorer 9؛ بغض النظر أنَّها غير مدعومة رسميًا.
راجع قائمة بعلل Bootstrap على المتصفّحات للقراءة عن بعض العلل التي يعاني منها Bootstrap في التعامل مع بعض المتصفّحات.
Internet Explorer
يدعم Bootstrap الإصدارات 10 فما فوق من Internet Explorer. الإصدار 9 والإصدارات التي تسبقه غير مدعومة. يُرجى الانتباه إلى أن خاصيّاتٍ من CSS3 وعناصر من HTML5 غير مدعومة تمامًا في الإصدار 10، أو تحتاج لخاصيات ببادئة (Prefix) لتعمل بتوافق تام. انظر إلى قسم «دعم المتصفحات» في صفحات عناصر HTML وخاصيات CSS لتفاصيل عن دعم المتصفحات لها.
استخدم الإصدار 3 من Bootstrap إن كنت تحتاج لدعم الإصدار 8 أو 9 من Internet Explorer. الإصدار 3 من Bootstrap هو الأكثر ثباتًا ويدعمه فريق التطوير بترقيعات للعلل الخطرة والتوثيق؛ إلا أنه لا تُضاف إليه ميزات جديدة.
النوافذ الشرطية Modals والقوائم المنسدلة على الأجهزة الجوّالة
الطّفح Overflow والتمرير Scrolling
لا تدعم الأجهزة الجوّالة العاملة بأندرويد وiOS الخاصيّة overflow: hidden; في العنصُر <body> إلا بقدر محدود جدّا. لهذا السبّب يبدأ محتوى <body> بالتحرّك عندما تتجاوز حدود النافذة الشرطية العليا أو السفلى على متصفّحات هذه الأجهزة. راجع العلّة #175502 في Chrome (صدر لها ترقيع في الإصدار 40) والعلّة #153852 في Webkit.
الحقول النصيّة في iOS والتمرير
تؤدّي اللمسة الأولى من حركة تمرير إن كانت داخل حدود عنصُر <input> أو <textarea> نصّي إلى تحرّك محتوى <body> بدلا من النافذة الشرطية نفسها. راجع العلة #153856 على WebKit. تنطبق هذه الملاحظة - على الأقل - على الإصدار 10 من iOS والإصدارات التي تسبقه.
القوائم المنسدلة في شريط التصفّح
لا يُستخدَم العنصُر .dropdown-backdrop في شريط التصفّح على الأجهزة العاملة بنظام iOS نظرا لتعقّد وضع العناصر على المحور Z. لذا يجب عليك النقر مباشرة على عنصر القائمة المنسدلة (أو أي عنصُر آخر يتسبّب في حدَث نقر على iOS) لإغلاق القائمة في شريط التصفّح.
التقريب Zooming على المتصفّحات
لا بدّ أن توجد أخطاء في عرض بعض العناصر عند تقريب الصفحات، في Bootstrap وفي بقيّة الويب. يمكن إصلاح المشكلة أحيانًا (ابحث أولًا ثم أنشئ علةً على مستودع Bootstrap إن احتجت لذلك). على الرغم من ذلك، يميل فريق مطوّري Bootstrap إلى تجاهل هذه العلل نظرًا لعدم وجود حلّ مباشر في الغالب؛ بدلًا من الحلول الترقيعية.
تأثير :hover/:focus ثابت على iOS
على الرغم من أن الصنف الزائف hover: غير قابل للاستخدام على معظم الشاشات اللمسية إلا أن iOS يحاكي عمل هذه الخاصيّة ممّا ينتُج عنه تنسيق حومان "ثابت" يستمر بعد الضغط على العنصُر. لا تُحذَف تأثيرات الحومان هذه إلا بعد الضغط على عنصُر آخر. يعدّ هذا السلوك عمومًا غير مرغوب فيه ويبدو أنه لا يحدث مشكلة على الأجهزة العاملة بأندرويد ووندوز.
ضمَّن المطوّرون خلال المراحل التجريبية من الإصدار 4 من Bootstrap شفرةً تحتوي على استعلام وسائط (Media query) يعطّل تنسيق الحومان على المتصفّحات التي تعمل على أجهزة تحاكي هذا السلوك. لم تكتمل هذه الشفرة وتُركت في تعليقات ضمن الشفرة المصدرية لإطار العمل. اختار المطورون هجر الشفرة المذكورة للحيلولة دون انعدام التوافق بين مراحل إصدار إطار العمل.
الطباعة
قد ينتُج عن الطباعة نتائج غريبة، حتى في المتصفّحات الحديثة.
يتسبّب الصنف .container في متصفّح Safari - حتى الإصدار 8.0- بجعل المتصفّح يستخدم قياسًا صغيرًا للخطّ عند الطباعة، على نحو غير معتاد. راجع المشكلة رقم 14868 في Bootstrap والعلة #138192 في Webkit.
شفرة CSS التالية هي حلّ بديل مُحتمَل:
@media print {
.container {
width: auto;
}
}
متصفّح أندرويد الأساسي
يأتي أندرويد 4.1 (والإصدارات الأحدث) مبدئيًا بتطبيق متصفّح خاص (بدلًا من Chrome). توجد في هذا المتصفّح للأسف علل كثيرة وتناقضات عدّة مع تنسيقات CSS عمومًا.
قائمة الاختيار Select
لا يعرض متصفّح أندرويد من المصنع أزرار التحكّم الجانبية عند تطبيق border-radius أو border أو كلاهما معًا على عناصر <select>. (انظر هذا السؤال على موقع StackOverflow لتفاصيل أكثر). استخدم الشفرة أدناه لإزالة تنسيقات CSS المُشكِلة وعرض <select> دون تنسيق على متصفّح أندرويد المبدئي. استكشاف المتصفّح يحول دون التداخل مع متصفّحات Chrome و Safari و Firefox.
<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>
يمكنك الاطلاع على مثال توضيحي من هنا.
المصدِّقات
يستند Bootstrap في أماكن عدة على مجموعة سكربتات CSS و JavaScript تُعرَف باسم CSS browser hacks (تصليحات أنماط المتصفح) تعمل على إصدارات محدّدة من بعض المتصفّحات وتتجاوز العلل الموجودة في المتصفّحات ذاتها، بهدف توفير تجربة الاستخدام الأفضل - حسب الإمكان - على المتصفّحات القديمة والمعلولة. تتسبّب هذه التصليحات في جعل مصدِّقات صفحات الأنماط (CSS Validators) تعدّها غير صالحة. يستخدم Bootstrap كذلك في أماكن معدودة ميزات جديدة في CSS لم تُضَف بعد إلى المعيار؛ إلا أن هذه الميزات مستخدمة فقط للتحسين المتدرّج لإطار العمل.
لا تمثّل تنبيهات التصديق تلك أي أهمية عمليًّا، إذ أن أنماط التنسيق غير التصليحية متوافقة تمامًا مع المصدِّقات كما أن الأنماط التصليحية لا يتداخل عملها مع الأنماط الأخرى؛ لهذا السبب نتجاهل عمدًا تحذيرات التصديق المتعلّقة بها.
على نحو مشابه، تحوي مستندات HTML الخاصّة بإطار العمل تنبيهات بسيطة وغير مهمة أثناء تصديق HTML نظرًا لتضمين حل بديل للحيلولة دون علّة في متصفح Firefox.