Source

ብራውዘራትን መሳርሕታትን

ብዛዕባ እቶም ብቡትስትራፕ ዝድገፉ ካብ ዘመናዊ ክሳብ ኣረጊት ዝርከቡ ዳህሰስቲን መሳርሕታትን ፍለጡ፣ ንነፍሲ ​​ወከፎም ዝፍለጡ ቅልውላዋትን ስሕተታትን ሓዊስካ።

ዝድገፉ ዳህሰስቲ

ቡትስትራፕ ናይ ኩሎም ዓበይቲ መርበባት ሓበሬታን መድረኻትን ዝሓለፉን ርጉኣትን ምውጻእ ይድግፍ ። ኣብ ዊንዶውስ ንኢንተርነት ኤክስፕሎረር 10-11 / ማይክሮሶፍት ኤጅ ንደግፍ ።

ብቐጥታ ይኹን ብመንገዲ ናይቲ መድረኽ ዌብ ቪው ኤፒኣይ፡ ናይ መወዳእታ ስሪት ዌብኪት፡ ብሊንክ፡ ወይ ጌኮ ዝጥቀሙ ኣማራጺ መርበባት ሓበሬታ፡ ብግልጺ ኣይድገፉን እዮም። ይኹን እምበር፡ 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

ንሕና ብመንገዲ CSS ቅድመ-ጥብቆታት ንዝተሓሰበ ናይ መርበብ ሓበሬታ ደገፍ ንምሕላው Autoprefixer ንጥቀም፣ እዚ ድማ ነዞም ስሪት መርበብ ሓበሬታ ንምምሕዳር Browserslist ይጥቀም። ነዞም መሳርሒታት ኣብ ፕሮጀክትታትካ ብኸመይ ከም እተዋሃህዶም ኣብ ሰነዳቶም ተወከስ።

ሞባይል መሳርሒታት

ብሓፈሻ ቡትስትራፕ ናይ ነፍሲ ወከፍ ዓቢ መድረኽ ነባሪ ዳህሰስቲ እዋናዊ ስሪት ይድግፍ። ፕሮክሲ ዳህሰስቲ (ከም ኦፔራ ሚኒ፡ ኦፔራ ሞባይል ተርቦ ሞድ፡ ዩሲ ብራውዘር ሚኒ፡ ኣማዞን ሲልክ) ከምዘይድገፉ ኣስተውዕል።

ክሮም ዝበሃል ምዃኑ’ዩ። ፋየርፎክስ ሳፋሪ ኣንድሮይድ ብራውዘር & ዌብቪው ማይክሮሶፍት ኤጅ
ኣንድሮይድ ዝድገፍ እዩ። ዝድገፍ እዩ። 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ን ባህርያት ንምርካብ Can I use... ተወከሱ ። IE8-9 ደገፍ እንተደሊኻ Bootstrap 3 ተጠቐም።

ሞዳላትን ድሮፕዳውንድን ኣብ ሞባይል

ምፍሳስን ምዝዋርን

overflow: hidden;ን on the element ዝኸውን ደገፍ <body>ኣብ iOSን Androidን ኣዝዩ ድሩት እዩ። ነዚ ንምትግባር ድማ፡ ኣብ ክልቲኡ ናይቶም መሳርሒታት ዳህሰስቲ ላዕለዋይ ወይ ታሕተዋይ ክፋል ናይ ሓደ ሞዳል ሓሊፍካ ምስ እትስክሮል፡ እቲ <body>ትሕዝቶ ምዝዋር ክጅምር እዩ። Chrome bug #175502 ( ኣብ Chrome v40 ተኣሪሙ) ከምኡ’ውን WebKit bug #153852 ርአ ።

ናይ iOS ናይ ጽሑፍ ዓውድታትን ምዝዋርን

ካብ iOS 9.2 ጀሚሩ፡ ሓደ ሞዳል ክፉት እንከሎ፡ ናይ መጀመርታ ምትንኻፍ ናይ ሓደ ስክሮል ምልክት ኣብ ውሽጢ ዶብ ናይ ሓደ ጽሑፋዊ <input>ወይ a <textarea>እንተኾይኑ፡ እቲ ኣብ <body>ትሕቲ እቲ ሞዳል ዘሎ ትሕዝቶ ኣብ ክንዲ እቲ ሞዳል ባዕሉ ክሽክርከር እዩ። ዌብኪት ስሕተት #153856 ርአ ።

እቲ .dropdown-backdropባእታ ኣብ iOS ኣብ nav ኣይጥቀምን እዩ ብሰንኪ ዝተሓላለኸ z-indexing። በዚ ኸምዚ፡ ኣብ navbars ንዝርከቡ ንቑልቁል ዝወርድ ባእታታት ንምዕጻው፡ ብቐጥታ ነቲ ንቑልቁል ዝወርድ ባእታ (ወይ ዝኾነ ካልእ ኣብ iOS ናይ ምጥዋቕ ፍጻመ ዝትኩስ ባእታ) ክትጥውቕ ኣለካ ።

ምጉላሕ መርበብ ሓበሬታ

ገጽ ምዕባይ ኣብ ገለ ኣካላት፡ ኣብ ቡትስትራፕን ዝተረፈ መርበብ ሓበሬታን፡ ናይ ምቕራጽ ቅርስታት ምቕራብ ዘይተርፍ እዩ። ከከምቲ ጉዳይ ክንእርሞ ንኽእል ንኸውን (መጀመርታ ድለዩ ድሕሪኡ ኣድላዪ እንተኾይኑ ጉዳይ ከፊትና)። ይኹን እምበር፡ መብዛሕትኡ ግዜ ብዘይካ ሃኪ መፍትሒታት ካልእ ቀጥታዊ ፍታሕ ስለዘይብሎም፡ ነዚኦም ሸለል ክንብሎም ንፍትን።

ተጣባቒ :hover/ :focusኣብ iOS

ኣብ መብዛሕትኦም ተንከስካሲ መሳርሒታት ዘይከኣል እኳ እንተኾነ :hover፡ iOS ነዚ ባህሪ እዚ ይመስል፡ ውጽኢቱ ድማ ሓደ ባእታ ድሕሪ ምጥዋቕካ ዝቕጽል “ተጣባቒ” ቅዲታት ሆቨር ይኸውን። እዞም ቅዲታት ሆቨር ���እለዩ ተጠቀምቲ ካልእ ባእታ ምስ ዝጥውቑ ጥራይ እዮም። እዚ ባህሪ ብዓቢኡ ከም ዘይተደልየ ዝቑጸርን ኣብ መሳርሒታት ኣንድሮይድ ወይ ዊንዶውስ ጸገም ዘይብሉ ይመስል።

ኣብ ምሉእ v4 ኣልፋን ቤታን ምውጻእና፡ ኣብ ምትንኻፍ መሳርሒታት ዝመስሉ ዳህሰስቲ ቅዲታት ሆቨር ዘሰናኽል ናብ ሚድያ ሕቶ ሺም ንምምራጽ ዘይተማልአን ርእይቶ ዝሃብናን ኮድ ኣካቲትና። እዚ ስራሕ ምሉእ ብምሉእ ተዛዚሙ ወይ ተኸፊቱ ኣይፈልጥን፡ ምሉእ ብምሉእ ንኸይስበር ግን ፡ ነዚ ሺም ምእላይን ነቶም ሚክሲናት ከም ኣቋራጭ ናይቶም ናይ ሓሶት ክፍልታት ክንሕዝን መሪጽና ኣለና።

ሕትመት

ኣብ ገለ ዘመናውያን ዳህሰስቲ እውን ከይተረፈ፡ ሕትመት ቅልል ዝበለ ክኸውን ይኽእል እዩ።

ካብ ሳፋሪ v8.0 ጀሚሩ፡ ምጥቃም ናይቲ ጽኑዕ ስፍሓት ዘለዎ .containerክፍሊ፡ ሳፋሪ ኣብ ዝሕትመሉ እዋን ዘይተለምደ ንእሽቶ ዓቐን ቅርጺ ፊደል ክጥቀም ክገብሮ ይኽእል። ንዝያዳ ዝርዝር ሓበሬታ ኣብ ሕታም #14868 ን WebKit bug #138192 ን ርአ ። ሓደ ክኸውን ዝኽእል መፍትሒ እዚ ዝስዕብ CSS እዩ፤

@media print {
  .container {
    width: auto;
  }
}

ኣንድሮይድ ስቶክ መርበብ ሓበሬታ

ካብቲ ሳንዱቕ ወጻኢ፡ ኣንድሮይድ 4.1 (ዋላ ገለ ሓደስቲ ዝወጹ ይመስሉ) ምስ Browser app ከም ነባሪ ምርጫ መርበብ ሓበሬታ (ኣንጻር Chrome) ይለኣኽ። እቲ ዘሕዝን ግን Browser app ብዙሕ ስሕተታትን ብሓፈሻ ምስ CSS ዘይምስምማዕን ኣለዎ።

ዝርዝር ምረጽ

ኣብ <select>ባእታታት፡ እቲ ናይ ኣንድሮይድ ስቶክ ዳህሳሲ እንተሃልዩን border-radius/ወይ borderተግባራዊ እንተኾይኑን፡ ነቲ ናይ ጎኒ መቆጻጸሪታት ኣየርእን እዩ። (ንዝርዝር ሓበሬታ ነዚ StackOverflow ሕቶ ርአ ።) ኣብ ታሕቲ ዘሎ ቁንጣሮ ኮድ ተጠቐም ነቲ ዘበሳጭፍ CSS ንምእላይን ነቲ <select>ከም unstyled element ኣብ Android stock browser ንምቕራብን። እቲ ናይ ተጠቃሚ ወኪል ምሽታት ኣብ ክሮም፡ ሳፋሪን ሞዚላን ዳህሰስቲ ምትእትታው የወግድ።

<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 ዲሞ ርኣይዎ ።

ኣረጋጊጾም

ንኣረጊትን ስሕተት ዘለዎምን ዳህሰስቲ ዝበለጸ ተመክሮ ንምሃብ፡ ቡትስትራፕ ኣብ ሓያሎ ቦታታት ዝርከቡ ናይ CSS መርበብ ሓበሬታ ምጥፍፋእ ብምጥቃም ፡ ኣብቶም ዳህሰስቲ ባዕሎም ንዘጋጥሙ ስሕተታት ንምፍታሕ፡ ፍሉይ CSS ናብ ዝተወሰኑ ስሪት መርበብ ሓበሬታ ዒላማ ይገብር። እዞም ሃክስ እዚኦም ንCSS validators ትኽክል ከምዘይኮኑ ከማርሩ ከምዝገብሩ ርዱእ እዩ። ኣብ ሓደ ክልተ ቦታታት፡ ገና ምሉእ ብምሉእ ደረጃ ዘይተሓዙ ደም ዝፈስስ CSS ባህርያት እውን ንጥቀም፡ እዚኦም ግን ንገስጋሲ ምዕባይ ጥራይ እዮም ዝጥቀሙ።

እዞም ናይ ምጽዳቕ መጠንቀቕታታት ብተግባር ቁምነገር የብሎምን ምኽንያቱ እቲ ዘይሃኪ ዝኾነ ክፋል ናይ CSSና ምሉእ ብምሉእ ይረጋገጽን እቶም ሃኪ ዝኾኑ ክፋላት ኣብ ግቡእ ኣሰራርሓ ናይቲ ዘይሃኪ ክፋል ስለዘይዕንቅፉን፡ ካብዚ እዩ ድማ ነዞም ፍሉያት መጠንቀቕታታት ኮነ ኢልና ሸለል እንብሎም።

ናትና ኤችቲኤምኤል ዶክስ ብተመሳሳሊ ንዝተወሰነ ፋየርፎክስ ስሕተት መፍትሒ ብምእታውና ገለ ንእሽቶን ሳዕቤን ዘይብሉን ኤችቲኤምኤል ምጽዳቕ መጠንቀቕታታት ኣለዎም ።