Cross-browser v roce 2013

`if (document.all) killItWithFire();`

Ondřej Žára, Seznam.cz

Proč?

Chuck Norris' copy of IE6 can render transparent PNGs correctly.

To za mne řeší moje oblíbená knihovna.

Možná
Možná toho dělá mnohem víc
Možná toho spoustu dělá zbytečně
Nešlo by to bez ní?
Nespokojenost je motivací pokroku!

Kudy ne?

this.is_ie4up = this.is_ie && this.is_major >= 4;
this.is_ie5 = this.is_ie && this.is_major == 4
&& this.agent.indexOf("msie 5.0") != -1;
this.is_ie5_5 = this.is_ie && this.is_major == 4
&& this.agent.indexOf("msie 5.5") != -1;
this.is_ie5up = this.is_ie && !this.is_ie3 && !this.is_ie4;
this.is_ie5_5up = this.is_ie && !this.is_ie3 && !this.is_ie4
&& !this.is_ie5;
this.is_ie6 = this.is_ie && this.is_major == 4
&& this.agent.indexOf("msie 6.") != -1;
this.is_ie6up = this.is_ie && !this.is_ie3 && !this.is_ie4
&& !this.is_ie5 && !this.is_ie5_5;

Kudy ne?

UA sniffing je zlo

Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1468.0 Safari/537.36
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; en) Opera 9.50
Mozilla/5.0 (IE 11.0; Windows NT 6.3; Trident/7.0; .NET4.0E; .NET4.0C; rv:11.9) like Gecko
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; .NET CLR 2.0.50727; InfoPath.2)
Nintendo64/1.0 (SuperMarioOS with Cray-II Y-MP Emulation)

Kudy ne?

Detekce prohlížečů je zlo

Webkit není Webkit
Chrome 28 není Webkit
Opera 14 je ... ?
IE 6-10 + Firefox 3-22 + Chrome 1-28 + Opera 9-12 + Safari 4-6 = 60 prohlížečů

Kudy ano?

Mít přehled o aktuálně používaných a vyvíjených technologiích
caniuse.com
Vědět, které techniky lze používat nativně
- querySelector / querySelectorAll
- JSON
- localStorage
- display: inline-block
- CSS generated content

Kudy ano?

Feature detection

if ("draggable" in document.body) { ... }

Polyfilly

window.requestAnimationFrame = 
	window.requestAnimationFrame ||
	window.mozRquestAnimationFrame ||
	... ||
	function() { setTimeout(...) }

Opáčko

Cross-browser žije, ale mění svoji tvář
Nedetekujeme prohlížeče, ale featury
Namísto if (a) a else b lépe if (!a) a = ...
Aktivně prořezávat legacy code
Exotické situace mají nárok na výjimku (kupříkladu FF 3.5 + File API + XHR2)

Domácí úkol

Vzít existující používaný kód
Najít místa, která spoléhají na detekci prohlížečů
Alespoň polovinu z nich přepsat na feature detection
Kdo to zvládne, uvidí jednorožce, kterému z nozder šlehají duhové plameny
Kdo to nezvládne...