Dajbych.net


Internet Explorer opět změní User-Agent řetězec

, 2 minuty čtení

Včera vyšlo nové se­sta­vení Win­dows 10 pre­view, které ob­sahuje Inter­net Ex­plo­rer mající cel­kem hodně z toho, co se při­pra­vuje pro IE 12. Pod­stat­nou no­vin­kou je další změna v ře­tězci, který slouží v pro­to­kolu HTTP pro iden­ti­fi­kaci pro­hlí­žeče. Při­po­meňme, že IE 11 ode­bral com­pa­ti­ble a MSIE. IE 12 pů­jde ještě dál a ode­bere Tri­dent. Nao­pak při­dává Edge. Výsle­dek je ta­kový, že ně­které systémy roz­po­znají IE 12 jako Chrome. Je to účel, pro­tože hodně vý­vo­jářů pro IE blo­ko­valo mo­derní tech­niky.

Jak tedy User-Agent string v In­ter­net Ex­plo­reru na Win­dows 10 pre­view nyní vy­padá?

Mozilla/5.0 (Windows NT 6.4; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.143 Safari/537.36 Edge/12.0

Je to v pod­statě stejný Uset-Agent ře­tě­zec, který po­u­žívá Chrome, jen má na konci ještě při­le­pe­nou po­známku Edge/12.0.

Používejte feature detection

Zá­kladní prin­cip fe­a­ture de­tection je ne­zjiš­ťo­vat verzi pro­hlí­žeče a na zá­kladě toho roz­hod­nout, zda da­nou techniku pod­po­ruje. Správné je zjis­tit pod­poru dané techniky přímo.

HTML

V pří­padě tech­nik, ke kterým se přistu­puje přes HTML, je to pří­mo­čaré. Jako v pří­padě HTML5 vi­dea:

<video src="video.mp4"> Aktualizuje si prohlížeč nebo si kupte novější zařízení. </video>

JavaScript

V tech­ni­kách přístup­ných přes Ja­vaScript se pak po­u­žívá de­tekce po­třeb­ných me­tod:

function isCanvasSupported() { var elem = document.createElement('canvas'); return !!(elem.getContext && elem.getContext('2d')); }

CSS

Když se jedná o CSS, není to tak snadné. Je po­třeba po­u­žít Ja­vaScript. Prin­cip je ale ob­dobný, ten­to­krát se de­te­kují vlast­nosti. Tento pří­klad zjiš­ťuje pod­poru CSS Tran­si­ti­ons:

function firstSupportedPropertyName(prefixedPropertyNames) { var tempDiv = document.createElement("div"); for (var i = 0; i < prefixedPropertyNames.length; ++i) { if (typeof tempDiv.style[prefixedPropertyNames[i]] != "undefined") return prefixedPropertyNames[i]; } return null; } transitionName = firstSupportedPropertyName(["transition", "msTransition", "MozTransition", "WebkitTransition", "OTransition"]); if (!transitionName) { // prohlížeč nepodporuje transitions }

Používejte responzivní design

Ne­vší­mejte si User-Agent ře­tězce. Po­u­ží­vejte re­spon­zivní de­sign, přes­něji me­dia que­ries, kon­krétně min-wi­dth. Po­kud si s tím ne­vy­sta­číte, máte k dis­po­zici ještě screen.ori­en­tation. Sku­tečně po­tře­bujete vě­dět, jestli má uži­va­tel te­le­fon, nebo stolní po­čítač? Ne­po­tře­bujete ná­ho­dou jen zjis­tit, jak je dis­plej ši­roký a jestli má víc na šířku, nebo na výšku?