وێبگەڕ و ئامێرەکان
فێربە دەربارەی ئەو وێبگەڕ و ئامێرانە، لە مۆدێرنەوە تا کۆن، کە لەلایەن Bootstrap پشتگیری دەکرێن، لەوانەش شتە نامۆ و هەڵە ناسراوەکان بۆ هەریەکەیان.
وێبگەڕە پشتگیریکراوەکان
بووتستراپ پشتگیری لە نوێترین و جێگیر و بڵاوکراوەکانی هەموو وێبگەڕ و پلاتفۆرمە سەرەکییەکان دەکات. لە ویندۆزدا پشتگیری لە ئینتەرنێت ئێکسپلۆرەر ١٠-١١ / مایکرۆسۆفت ئێدج دەکەین .
ئەو وێبگەڕە جێگرەوەیانەی کە نوێترین وەشانی WebKit، Blink، یان Gecko بەکاردەهێنن، جا ڕاستەوخۆ بێت یان لە ڕێگەی API ی بینینی وێبی پلاتفۆرمەکەوە، بە ڕوونی پشتگیری ناکرێت. بەڵام پێویستە Bootstrap (لە زۆربەی حاڵەتەکاندا) لەم وێبگەڕانەشدا بە دروستی پیشان بدات و کار بکات. زانیاری پشتگیری تایبەتتر لە خوارەوە هاتووە.
دەتوانن مەودای وێبگەڕە پشتگیریکراوەکانمان و وەشانی ئەوان لە.browserslistrc file :
# 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، دۆخی Turbo ی Opera Mobile، UC Browser Mini، Amazon Silk) پشتگیری ناکرێت.
| کرۆم | فایەرفۆکس | سەفاری | وێبگەڕی ئەندرۆید و وێبڤیۆ | مایکرۆسۆفت ئێدج | |
|---|---|---|---|---|---|
| ئەندرۆید | پشتگیری دەکرێت | پشتگیری دەکرێت | N/A | پشتگیری ئەندرۆید v5.0+ دەکرێت | پشتگیری دەکرێت |
| ئای ئۆ ئێس | پشتگیری دەکرێت | پشتگیری دەکرێت | پشتگیری دەکرێت | N/A | پشتگیری دەکرێت |
| ویندۆز ١٠ مۆبایل | N/A | N/A | N/A | N/A | پشتگیری دەکرێت |
وێبگەڕی سەر مێز
بە هەمان شێوە نوێترین وەشانی زۆربەی وێبگەڕەکانی سەر مێز پشتگیری دەکرێن.
| کرۆم | فایەرفۆکس | ئینتەرنێت ئێکسپلۆرەر | مایکرۆسۆفت ئێدج | ئۆپێرا | سەفاری | |
|---|---|---|---|---|---|---|
| ماک | پشتگیری دەکرێت | پشتگیری دەکرێت | N/A | پشتگیری دەکرێت | پشتگیری دەکرێت | پشتگیری دەکرێت |
| ویندۆز | پشتگیری دەکرێت | پشتگیری دەکرێت | پشتگیری دەکرێت، IE10+ | پشتگیری دەکرێت | پشتگیری دەکرێت | پاڵپشتیی نەکراوە |
بۆ فایەرفۆکس، جگە لە نوێترین وەشانی ئاسایی جێگیر، ئێمە پشتگیری لە نوێترین وەشانی وەشانی پشتگیری درێژکراوە (ESR) ی فایەرفۆکس دەکەین.
بە شێوەیەکی نافەرمی، Bootstrap دەبێت بە باشی دەربکەوێت و ڕەفتار بکات لە کرۆم و کرۆم بۆ لینوکس، فایەرفۆکس بۆ لینوکس و ئینتەرنێت ئێکسپلۆرەر ٩، هەرچەندە بە فەرمی پشتگیری ناکرێت.
بۆ لیستی هەندێک لەو هەڵانەی وێبگەڕ کە Bootstrap دەبێت لەگەڵیاندا ڕووبەڕووی ببێتەوە، سەیری دیواری هەڵەکانی وێبگەڕەکەمان بکە .
ئینتەرنێت ئێکسپلۆرەر
پشتگیری لە ئینتەرنێت ئێکسپلۆرەر ١٠+ دەکرێت؛ IE9 و خوارەوە نییە. تکایە ئاگاداربە کە هەندێک لە تایبەتمەندییەکانی CSS3 و توخمەکانی HTML5 بە تەواوی پشتگیری ناکرێت لە IE10، یان پێویستیان بە تایبەتمەندی پێشگر هەیە بۆ کارایی تەواو. سەردانی Can I use... بکە بۆ زانیاری زیاتر لەسەر پشتگیری وێبگەڕی تایبەتمەندییەکانی CSS3 و HTML5. ئەگەر پێویستت بە پشتگیری IE8-9 هەیە، Bootstrap 3 بەکاربهێنە.
مۆداڵ و درۆپ داون لەسەر مۆبایل
ڕژان و سکڕۆڵکردن
پشتگیری بۆ overflow: hidden;لەسەر <body>توخمەکە لە ئای ئۆ ئێس و ئەندرۆیددا تەواو سنووردارە. بۆ ئەو مەبەستە کاتێک بە سەرەوە یان خوارەوەی مۆداڵێک لە هەریەکێک لە وێبگەڕەکانی ئەو ئامێرانەدا تێدەپەڕیت، <body>ناوەڕۆکەکە دەست دەکات بە ڕۆشتن. سەیری هەڵەی Chrome #175502 بکە (لە Chrome v40 چارەسەر کراوە) و هەڵەی WebKit #153852 بکە .
بواری دەقی iOS و سکڕۆڵکردن
لە iOS 9.2 ەوە، لە کاتێکدا مۆداڵێک کراوە دەبێت، ئەگەر دەست لێدانی سەرەتایی ئاماژەی سکڕۆڵ لە سنووری دەقی <input>یان a بێت <textarea>، <body>ناوەڕۆکی ژێر مۆداڵەکە لەبری خودی مۆداڵەکە سکڕۆڵ دەکرێت. سەیری هەڵەی وێبکیت #153856 بکە .
ناوبار درۆپداونەکان
توخمەکە لە .dropdown-backdropiOS لە nav بەکارناهێنرێت بەهۆی ئاڵۆزی z-indexing. بەم شێوەیە، بۆ داخستنی درۆپداونەکان لە navbars، پێویستە ڕاستەوخۆ کلیک لەسەر توخمە درۆپداونەکە بکەیت (یان هەر توخمێکی تر کە ڕووداوێکی کلیککردن لە iOSدا تەقێنێت ).
زوومکردنی وێبگەڕ
زوومکردنی لاپەڕە بە ناچاری شوێنەوارەکانی ڕەندەرکردن لە هەندێک پێکهاتەدا دەخاتە ڕوو، چ لە Bootstrap و چ لە باقی وێبەکەدا. بەپێی کێشەکە، ڕەنگە بتوانین چارەسەری بکەین (سەرەتا بگەڕێین و دواتر ئەگەر پێویست بوو کێشەیەک بکەینەوە). بەڵام ئێمە مەیلی ئەوەمان هەیە ئەمانە پشتگوێ بخەین چونکە زۆرجار هیچ چارەسەرێکی ڕاستەوخۆیان نییە جگە لە چارەسەرە هاکیەکان.
چەسپاو :hover/ :focusلەسەر ئای ئۆ ئێس
لە کاتێکدا :hoverکە لە زۆربەی ئامێرەکانی تاچدا ناتوانرێت، iOS ئەم هەڵسوکەوتە وەرئەگرێت، لە ئەنجامدا شێوازی هۆڤەری "چەسپاو" دروست دەبێت کە دوای لێدانی یەک توخم بەردەوام دەبێت. ئەم ستایلانەی هۆڤەر تەنها کاتێک لا دەبرێن کە بەکارهێنەران دەست لە توخمێکی تر دەدەن. ئەم هەڵسوکەوتە تا ڕادەیەکی زۆر بە نەخوازراو دادەنرێت و پێدەچێت کێشەیەک نەبێت لەسەر ئامێرەکانی ئەندرۆید یان ویندۆز.
بە درێژایی بڵاوکراوەکانی v4 ئەلفا و بێتامان، ئێمە کۆدی ناتەواو و کۆمێنتمان خستە ناوەوە بۆ هەڵبژاردنی شیمێکی پرسیاری میدیا کە ستایلەکانی هۆڤەر لە وێبگەڕەکانی ئامێری تاچدا لەکاردەخات کە هۆڤەری ئیمۆلی دەکەن. ئەم کارە هەرگیز بە تەواوی تەواو نەبووە یان چالاک نەکرابوو، بەڵام بۆ ئەوەی بە تەواوی نەشکێت، ئێمە هەڵمانبژاردووە ئەم شیمە ڕەت بکەینەوە و میکسینەکان وەک کورتە ڕێگا بۆ پۆلە ساختەکان بهێڵینەوە.
چاپکردن
تەنانەت لە هەندێک لە وێبگەڕی مۆدێرنیشدا، چاپکردن دەتوانێت شتێکی نامۆ بێت.
لە سەفاری v8.0ەوە، بەکارهێنانی پۆلی پانایی جێگیر .containerدەتوانێت ببێتە هۆی ئەوەی سەفاری قەبارەیەکی فۆنتێکی بچووکی نائاسایی بەکاربهێنێت لە کاتی چاپکردندا. بۆ زانیاری زیاتر سەیری ژمارە #14868 و هەڵەی WebKit #138192 بکە. یەکێک لە چارەسەرە ئەگەرییەکان ئەم CSS یەی خوارەوەیە:
@media print {
.container {
width: auto;
}
}
وێبگەڕی ستۆکی ئەندرۆید
لە دەرەوەی سندوقەکە، ئەندرۆید ٤.١ (و تەنانەت هەندێک وەشانی نوێتر بە ڕواڵەت) لەگەڵ ئەپی Browser وەک وێبگەڕی پێشوەختەی هەڵبژاردن دەنێردرێت (بە پێچەوانەی Chrome). بەداخەوە ئەپی Browser هەڵەیەکی زۆری هەیە و ناتەبایی لەگەڵ CSS بەگشتی هەیە.
مێنۆ هەڵبژێرە
لەسەر <select>توخمەکان، وێبگەڕی ستۆکی ئەندرۆید کۆنتڕۆڵە لایەنەکان پیشان نادات ئەگەر هەبێت border-radiusو/یان borderجێبەجێ بکرێت. (بۆ زانیاری زیاتر سەیری ئەم پرسیارەی StackOverflow بکە.) پارچە کۆدی خوارەوە بەکاربهێنە بۆ لابردنی CSS ی توڕەکەر و ڕەندەری <select>وەک توخمێکی بێ ستایل لەسەر وێبگەڕی ستۆکی ئەندرۆید. بۆنکردنی بریکاری بەکارهێنەر ڕێگری دەکات لە دەستێوەردان لە وێبگەڕەکانی کرۆم و سەفاری و مۆزیلا.
<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 Bin بکەن .
ڕەچاوکەرەکان
بۆ ئەوەی باشترین ئەزموون بۆ وێبگەڕە کۆن و هەڵەکان دابین بکات، Bootstrap هاکەکانی وێبگەڕی CSS لە چەند شوێنێک بەکاردەهێنێت بۆ ئامانجکردنی CSS تایبەت بۆ هەندێک وەشانی وێبگەڕ بە مەبەستی کارکردن لە دەوری هەڵە لە خودی وێبگەڕەکاندا. ئەم هاکانە بە شێوەیەکی تێگەیشتوو دەبنە هۆی ئەوەی کە چەسپێنەرانی CSS گلەیی بکەن کە نادروستن. لە یەک دوو شوێن، ئێمە تایبەتمەندی CSSی لێواری خوێناویش بەکاردەهێنین کە هێشتا بە تەواوی ستاندارد نەکراون، بەڵام ئەمانە تەنها بۆ بەرزکردنەوەی پێشکەوتوو بەکاردەهێنرێن.
ئەم هۆشدارانە ڕەچاوکردنانە لە پراکتیکدا گرنگ نین لەبەرئەوەی بەشی ناهاکی CSS ی ئێمە بە تەواوی ڕەچاو دەکات و بەشە هاکییەکان دەستوەردان لە کارکردنی دروستی بەشی ناهاکی ناکەن، هەربۆیە بۆچی ئێمە بە ئەنقەست ئەم هۆشدارییە تایبەتانە پشتگوێ دەخەین.
بە هەمان شێوە دۆکیومێنتەکانی HTML ی ئێمە هەندێک ئاگادارکردنەوەی چەسپاندنی HTML ی بێ بایەخ و بێ ئەنجامیان هەیە بەهۆی خستنەڕووی چارەسەرێکمان بۆ هەڵەیەکی دیاریکراوی فایەرفۆکس .