[P0lip]

#javascript #css #js #html

Witajcie, Mam pytanie. Otóż robię sobie dość krótką funkcję, która wykrywałaby wersję Firefoxa. Będzie to coś podobnego do hacków ze strony http://browserhacks.com/. Jako że planuję się nią z Wami w niedalekiej przyszłości podzielić, chciałbym wiedzieć co o tym myślicie - czy byłoby to przydatne czy też nie.

Dobrze wiemy, że powinno się używać feature detection, lecz nieraz zdarzyło się, że dany quirk występował tylko na jednej (ewentualnie kilku) wersjach poszczególnej przeglądarki. Ci, którzy nie korzystają (bo nie mogą lub nie chcą) z frameworków (mogą też właściwie przestać czytać ten wpis :P) wiedzą o co chodzi. Moja funkcja nie ma na celu wykrywania przeglądarki po UA. Na jakiej zasadzie będzie to działać? Coś a'la feature detection.

1. Na znanych bugach JS, które łatwo odtworzyć (nie potrzeba dużej ilości kodu).

2. Wykrywanie poszczególnych reguł CSS.

3. Obsługa atrybutu w elemenecie HTML.

4. Obsługa elementu HTML.

Dla każdej wersji znajduję coś z powyższych punktów (może będę łączył kilka na raz). W żadnym wypadku nie staram się wykrywać funkcji JS, bo niektórzy mogą używać polyfillów i wtedy wynik mógłby być niedokładny. Również omijam funkcje (zarówno JS i CSS), które można włączyć w about:config.

Przykłady:

35 String(Symbol("P0lip")) === "(\"Symbol(P0lip)\")" jest true, w niższej (34) wyrzuca TypeError.

var _1 = { 1 : 1, 1 : 1 } - taki obiekt (ze zduplikowanymi nazwami) w strict mode wyrzuca SyntaxError. Jest to jak najbardziej prawidłowe, jeśli brać pod uwagę dokumentację ECMAScript5. W ECMAScript6 wyrzucono to ograniczenie. Tak wykrywam FF 34, w którym jest to zmienione.

Na przykład FF 31 wykrywam poprzez zmienne CSS, które od tej wersji są definiowane z przedrostkiem "--".

26 poprzez obsługę -moz-text-decoration-line:blink

16 na przykład poprzez wykrycie elementu HTML Object.prototype.toString.call(document.createElement("meter")) === "[object HTMLMeterElement]";

Obecnie mam wszystkie wersje od 35 do 16. Jak dojdę do 2-3 to opublikuję Wam te wszystkie rzeczy, dzięki którym będziecie mogli wykryć poszczególną wersję FF. Niemniej nie zalecam ich używania. Używajcie jeśli naprawdę jest jakiś quirk, który będzie występował w danej wersji FF i nie będzie go łatwo ominąć feature detection czy innymi sposobami.

Co myślicie o tym? Byłoby to dla Was przydatne?

[G.....n]

@P0lip: Czemu nie ma jeszcze kodu na GitHubie?

[lucku]

@P0lip: Fajne, tylko jaki jest usecase do tego?

[epi]

@P0lip: Czy to będzie robić coś więcej od prostego zwracania wersji FF?

Ja do tego celu polecałbym to: https://github.com/WhichBrowser/WhichBrowser

W czym Twoje rozwiązanie będzie lepsze? :)

[Marmite]

bo niektórzy mogą używać polyfillów i wtedy wynik mógłby być niedokładny

@P0lip: Zawsze możesz, z pewnym prawdopodobieństwem*, sprawdzić czy funkcja jest natywna.

* bo nie wszystkie przeglądarki implementują zachowanie o którym mówię, ale jeśli ograniczasz się tylko do FF to chyba powinno działać zawsze

[P0lip]

@Ginden: Zbyt spaghetti, na razie szukam bugów dopiero i piszę funkcje. Niedługo będzie.

@lucku: Najpiew sprawdza regexem wersję FF z UA. Potem bierze test do danej wersji i jeśli się zgadza to bierze test przeznaczony dla wyższej wersji, który musi zwrócić undefined lub false. Jeśli oba warunki są spełnione to wersja z UA będzie wersją, którą funkcja zwróci. Jeśli pierwszy lub drugi warunek nie jest spełniony (jeśli UA

[Marmite]

@P0lip: To jest bardzo łatwe, natywne funkcje konwertowane na string zwracają ciąg

function() { \n [native code; \n }

. Wystarczy potraktować je

Function.prototype.toString

, żeby zabezpieczyć się przed własną implementacją tej metody, i voila.

[G.....n]

@Marmite: Wszystkie znane edge case pokrywa

require('reflect-r').isBoundOrNativeFunction(func)

[Marmite]

@Ginden: Sprytny pomysł z tym try-catchem, +1.

[P0lip]

@Marmite: Tak właśnie sprawdzam window.CSS.supports

Z tym, że właśnie myślę na czym bardziej bazować czy JS czy CSS. Oba tak naprawdę równie łatwo

[lucku]

@P0lip: pytalem po co Ci to potrzebne :D

[P0lip]

@lucku: Napisałem przecież :D. Nieraz masz jakiś bug, który występuje w jednej wersji. Głównie tyczy się to CSS. Nieraz choćbyś mocno próbował to i tak coś się wyświetli inaczej niż w innych przeglądarkach

[lucku]

@P0lip: no dobra, ale to jest takie troche latanie gowna, wydaje mi sie ze zle skonczysz implementujac w ten sposob poprawki dla cssa przy kazdym malym bugu.

[G.....n]

@P0lip: Każdy kod, który chcesz docelowo upublicznić, powinieneś rozwijać na GitHubie czy podobnym serwisie.

[P0lip]

@lucku: Ja tak nie robię. Przeczytaj opis :P. Napisałem, że nie powinno się tego używać. Osobiście 1-2 mi się zdarzyło, że musiałem użyć tego. Tak to bez problemu wystarczył feature detection i przestrzeganie standardów.

[epi]

@P0lip: Sęk w tym, że własnie nie bazuje na samym UA :)

The main part of this library runs on the server and looks at the headers send by the browser, but it also collects various data from the browser itself. The first thing it looks at is the user-agent header, but there are many more headers that contain clues about the identity of the browser. Once the server finds

[P0lip]

@epi: No tak, ale to nadal tylko po stronie serwera jest :P

[epi]

@P0lip: Skrypt zawierający wszelkie dane o przeglądarce zwracany jest przez serwer, ale co i jak sprawdzasz sobie już w js do woli. Do większości zastosowań imho nadaje się to znakomicie :)