உலாவிகள் மற்றும் சாதனங்கள்
உலாவிகள் மற்றும் சாதனங்கள், நவீனம் முதல் பழையது வரை, பூட்ஸ்டார்ப்பால் ஆதரிக்கப்படும், ஒவ்வொன்றிற்கும் தெரிந்த வினோதங்கள் மற்றும் பிழைகள் உட்பட.
ஆதரிக்கப்படும் உலாவிகள்
அனைத்து முக்கிய உலாவிகள் மற்றும் இயங்குதளங்களின் சமீபத்திய, நிலையான வெளியீடுகளை பூட்ஸ்டார்ப் ஆதரிக்கிறது . Windows இல், Internet Explorer 10-11 / Microsoft Edge ஐ ஆதரிக்கிறோம் .
WebKit, Blink அல்லது Gecko இன் சமீபத்திய பதிப்பைப் பயன்படுத்தும் மாற்று உலாவிகள் நேரடியாகவோ அல்லது தளத்தின் வலைக் காட்சி API மூலமாகவோ வெளிப்படையாக ஆதரிக்கப்படாது. இருப்பினும், பூட்ஸ்டார்ப் (பெரும்பாலான சந்தர்ப்பங்களில்) இந்த உலாவிகளிலும் சரியாகக் காட்டப்பட்டு செயல்பட வேண்டும். மேலும் குறிப்பிட்ட ஆதரவு தகவல் கீழே கொடுக்கப்பட்டுள்ளது.
எங்களின்.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 ஐப் பயன்படுத்துகிறோம், இது இந்த உலாவி பதிப்புகளை நிர்வகிக்க உலாவிகளின் பட்டியலைப் பயன்படுத்துகிறது. உங்கள் திட்டங்களில் இந்தக் கருவிகளை எவ்வாறு ஒருங்கிணைப்பது என்பது குறித்த அவர்களின் ஆவணங்களைப் பார்க்கவும்.
மொபைல் சாதனங்கள்
பொதுவாக, பூட்ஸ்டார்ப் ஒவ்வொரு முக்கிய தளத்தின் இயல்புநிலை உலாவிகளின் சமீபத்திய பதிப்புகளை ஆதரிக்கிறது. ப்ராக்ஸி உலாவிகள் (Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk போன்றவை) ஆதரிக்கப்படவில்லை என்பதை நினைவில் கொள்ளவும்.
| குரோம் | பயர்பாக்ஸ் | சஃபாரி | Android உலாவி & WebView | மைக்ரோசாஃப்ட் எட்ஜ் | |
|---|---|---|---|---|---|
| ஆண்ட்ராய்டு | ஆதரிக்கப்பட்டது | ஆதரிக்கப்பட்டது | N/A | Android v5.0+ ஆதரிக்கப்படுகிறது | ஆதரிக்கப்பட்டது |
| iOS | ஆதரிக்கப்பட்டது | ஆதரிக்கப்பட்டது | ஆதரிக்கப்பட்டது | N/A | ஆதரிக்கப்பட்டது |
| விண்டோஸ் 10 மொபைல் | N/A | N/A | N/A | N/A | ஆதரிக்கப்பட்டது |
டெஸ்க்டாப் உலாவிகள்
இதேபோல், பெரும்பாலான டெஸ்க்டாப் உலாவிகளின் சமீபத்திய பதிப்புகள் ஆதரிக்கப்படுகின்றன.
| குரோம் | பயர்பாக்ஸ் | இன்டர்நெட் எக்ஸ்புளோரர் | மைக்ரோசாஃப்ட் எட்ஜ் | ஓபரா | சஃபாரி | |
|---|---|---|---|---|---|---|
| மேக் | ஆதரிக்கப்பட்டது | ஆதரிக்கப்பட்டது | N/A | ஆதரிக்கப்பட்டது | ஆதரிக்கப்பட்டது | ஆதரிக்கப்பட்டது |
| விண்டோஸ் | ஆதரிக்கப்பட்டது | ஆதரிக்கப்பட்டது | ஆதரிக்கப்படும், IE10+ | ஆதரிக்கப்பட்டது | ஆதரிக்கப்பட்டது | ஒத்துழைக்கவில்லை |
Firefox க்கு, சமீபத்திய இயல்பான நிலையான வெளியீட்டிற்கு கூடுதலாக, Firefox இன் சமீபத்திய விரிவாக்கப்பட்ட ஆதரவு வெளியீடு (ESR) பதிப்பையும் நாங்கள் ஆதரிக்கிறோம்.
அதிகாரப்பூர்வமற்ற முறையில், பூட்ஸ்டார்ப் லினக்ஸிற்கான Chromium மற்றும் Chrome, Linux க்கான Firefox மற்றும் Internet Explorer 9 ஆகியவற்றில் போதுமான அளவு தோற்றமளிக்க வேண்டும், ஆனால் அவை அதிகாரப்பூர்வமாக ஆதரிக்கப்படவில்லை.
பூட்ஸ்டார்ப் பிடிபட வேண்டிய சில உலாவி பிழைகளின் பட்டியலுக்கு, எங்கள் உலாவி பிழைகளின் சுவரைப் பார்க்கவும் .
இன்டர்நெட் எக்ஸ்புளோரர்
Internet Explorer 10+ ஆதரிக்கப்படுகிறது; IE9 மற்றும் கீழே இல்லை. சில CSS3 பண்புகள் மற்றும் HTML5 கூறுகள் IE10 இல் முழுமையாக ஆதரிக்கப்படவில்லை அல்லது முழு செயல்பாட்டிற்கு முன்னொட்டு பண்புகள் தேவை என்பதை நினைவில் கொள்ளவும். CSS3 மற்றும் HTML5 அம்சங்களின் உலாவி ஆதரவு பற்றிய விவரங்களுக்கு நான் பயன்படுத்தலாமா... என்பதைப் பார்வையிடவும் . உங்களுக்கு IE8-9 ஆதரவு தேவைப்பட்டால், பூட்ஸ்டார்ப் 3 ஐப் பயன்படுத்தவும்.
மொபைலில் மாதிரிகள் மற்றும் கீழிறங்கும்
வழிதல் மற்றும் ஸ்க்ரோலிங்
overflow: hidden;iOS மற்றும் Android இல் உறுப்புக்கான ஆதரவு <body>மிகவும் குறைவாகவே உள்ளது. அந்த வகையில், அந்த சாதனங்களின் உலாவிகளில் ஏதேனும் ஒரு மாதிரியின் மேல் அல்லது கீழ் பகுதியை நீங்கள் உருட்டும் போது, <body>உள்ளடக்கம் உருட்டத் தொடங்கும். Chrome பிழை #175502 (Chrome v40 இல் சரி செய்யப்பட்டது) மற்றும் WebKit பிழை #153852 ஐப் பார்க்கவும் .
iOS உரை புலங்கள் மற்றும் ஸ்க்ரோலிங்
<input>iOS 9.2 இன் படி, ஒரு மாதிரி திறந்திருக்கும் போது, ஒரு ஸ்க்ரோல் சைகையின் ஆரம்பத் தொடுதல் உரை அல்லது a வின் எல்லைக்குள் இருந்தால், மாதிரியின் கீழ் <textarea>உள்ள <body>உள்ளடக்கம் மாதிரிக்கு பதிலாக உருட்டப்படும். WebKit பிழை #153856 ஐப் பார்க்கவும் .
Navbar கீழிறங்கும்
.dropdown-backdropz-இண்டெக்சிங்கின் சிக்கலான தன்மையின் காரணமாக, இந்த உறுப்பு iOS இல் nav இல் பயன்படுத்தப்படவில்லை. எனவே, நேவ்பார்களில் உள்ள கீழ்தோன்றல்களை மூட, நீங்கள் நேரடியாக கீழ்தோன்றும் உறுப்பைக் கிளிக் செய்ய வேண்டும் (அல்லது iOS இல் கிளிக் நிகழ்வைத் தூண்டும் வேறு ஏதேனும் உறுப்பு ).
உலாவி பெரிதாக்குகிறது
பக்கத்தை பெரிதாக்குவது தவிர்க்க முடியாமல் சில கூறுகளில் ரெண்டரிங் கலைப்பொருட்களை வழங்குகிறது, பூட்ஸ்டார்ப் மற்றும் பிற இணையம். சிக்கலைப் பொறுத்து, எங்களால் அதைச் சரிசெய்ய முடியும் (முதலில் தேடவும், பின்னர் தேவைப்பட்டால் சிக்கலைத் திறக்கவும்). எவ்வாறாயினும், ஹேக்கியான தீர்வுகளைத் தவிர வேறு எந்த நேரடித் தீர்வும் இல்லாததால், இவற்றைப் புறக்கணிக்க முனைகிறோம்.
ஒட்டும் :hover/ :focusiOS இல்
பெரும்பாலான தொடு சாதனங்களில் சாத்தியமில்லை என்றாலும் :hover, iOS இந்த நடத்தையைப் பின்பற்றுகிறது, இதன் விளைவாக "ஸ்டிக்கி" ஹோவர் ஸ்டைல்கள் ஒரு உறுப்பைத் தட்டிய பிறகும் நீடிக்கும். பயனர்கள் மற்றொரு உறுப்பைத் தட்டும்போது மட்டுமே இந்த ஹோவர் ஸ்டைல்கள் அகற்றப்படும். இந்த நடத்தை பெரும்பாலும் விரும்பத்தகாததாகக் கருதப்படுகிறது மற்றும் ஆண்ட்ராய்டு அல்லது விண்டோஸ் சாதனங்களில் ஒரு சிக்கலாக இல்லை.
எங்களின் v4 ஆல்பா மற்றும் பீட்டா வெளியீடுகள் முழுவதும், மீடியா வினவல் ஷிம்மைத் தேர்ந்தெடுப்பதற்கான முழுமையடையாத மற்றும் கருத்துத் தெரிவித்த குறியீட்டைச் சேர்த்துள்ளோம், இது வட்டமிடுவதைப் பின்பற்றும் தொடு சாதன உலாவிகளில் ஹோவர் ஸ்டைலை முடக்கும். இந்த வேலை முழுமையாக முடிக்கப்படவில்லை அல்லது இயக்கப்படவில்லை, ஆனால் முழுமையான உடைப்பைத் தவிர்ப்பதற்காக, இந்த ஷிமைத் தடுக்கவும், போலி வகுப்புகளுக்கான குறுக்குவழிகளாக மிக்ஸின்களை வைத்திருக்கவும் நாங்கள் தேர்வு செய்துள்ளோம்.
அச்சிடுதல்
சில நவீன உலாவிகளில் கூட, அச்சிடுதல் நகைச்சுவையாக இருக்கும்.
Safari v8.0 இன் படி, நிலையான-அகல .containerவகுப்பின் பயன்பாடு, அச்சிடும்போது வழக்கத்திற்கு மாறாக சிறிய எழுத்துரு அளவை Safari பயன்படுத்தும். மேலும் விவரங்களுக்கு #14868 மற்றும் WebKit பிழை #138192 ஐப் பார்க்கவும். ஒரு சாத்தியமான தீர்வு பின்வரும் CSS ஆகும்:
@media print {
.container {
width: auto;
}
}
ஆண்ட்ராய்டு பங்கு உலாவி
பெட்டிக்கு வெளியே, ஆண்ட்ராய்டு 4.1 (மற்றும் சில புதிய வெளியீடுகள் கூட) உலாவி ஆப்ஸுடன் விருப்பத்தேர்வின் இயல்புநிலை இணைய உலாவியாக (Chromeக்கு மாறாக) அனுப்பப்படும். துரதிர்ஷ்டவசமாக, உலாவி பயன்பாட்டில் பொதுவாக CSS உடன் நிற��ய பிழைகள் மற்றும் முரண்பாடுகள் உள்ளன.
மெனுவைத் தேர்ந்தெடுக்கவும்
உறுப்புகளில் , மற்றும்/அல்லது பயன்படுத்தப்பட்டால் <select>, பக்கக் கட்டுப்பாடுகளை Android ஸ்டாக் உலாவி காட்டாது . (விவரங்களுக்கு இந்த StackOverflow கேள்வியைப் பார்க்கவும்.) கீழே உள்ள குறியீட்டின் துணுக்கைப் பயன்படுத்தி, குற்றமிழைக்கும் CSSஐ அகற்றி, Android ஸ்டாக் உலாவியில் மாற்றியமைக்கப்படாத உறுப்பாக வழங்கவும். பயனர் முகவர் ஸ்னிஃபிங் Chrome, Safari மற்றும் Mozilla உலாவிகளில் குறுக்கிடுவதைத் தவிர்க்கிறது.border-radiusborder<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 பின் டெமோவைப் பாருங்கள் .
சரிபார்ப்பவர்கள்
பழைய மற்றும் தரமற்ற உலாவிகளுக்கு சிறந்த அனுபவத்தை வழங்க, பூட்ஸ்டார்ப் பல இடங்களில் CSS உலாவி ஹேக்குகளைப் பயன்படுத்துகிறது, சில உலாவி பதிப்புகளுக்கு சிறப்பு CSS ஐ குறிவைத்து, உலாவிகளில் உள்ள பிழைகளைச் சரிசெய்வதற்காகப் பயன்படுத்துகிறது. இந்த ஹேக்குகள், CSS மதிப்பீட்டாளர்கள் தவறானவை என்று புகார் செய்ய காரணமாகிறது. ஓரிரு இடங்களில், நாங்கள் இன்னும் முழுமையாக தரநிலைப்படுத்தப்படாத இரத்தப்போக்கு-முனை CSS அம்சங்களையும் பயன்படுத்துகிறோம், ஆனால் இவை முற்போக்கான மேம்பாட்டிற்காக மட்டுமே பயன்படுத்தப்படுகின்றன.
இந்த சரிபார்ப்பு எச்சரிக்கைகள் நடைமுறையில் முக்கியமில்லை, ஏனெனில் எங்கள் CSS இன் ஹேக்கி அல்லாத பகுதி முழுவதுமாக சரிபார்க்கப்படுகிறது மற்றும் ஹேக்கி பகுதிகள் ஹேக்கி அல்லாத பகுதியின் சரியான செயல்பாட்டில் தலையிடாது, எனவே இந்த குறிப்பிட்ட எச்சரிக்கைகளை நாங்கள் ஏன் வேண்டுமென்றே புறக்கணிக்கிறோம்.
ஒரு குறிப்பிட்ட பயர்பாக்ஸ் பிழைக்கான தீர்வைச் சேர்ப்பதன் காரணமாக எங்கள் HTML ஆவணங்களும் சில அற்பமான மற்றும் பொருத்தமற்ற HTML சரிபார்ப்பு எச்சரிக்கைகளைக் கொண்டுள்ளன .