Wat is die beste tegniek vir die konsekwente vorm, funksie tussen al die web blaaiers (insluitend Google Chrome)?

Question

Kort weergawe:Wat is die skoonste en mees onderhou tegniek vir consistant aanbieding en AJAX funksie oor alle blaaiers gebruik word deur beide die web ontwikkelaars en web ontwikkelaars se einde-gebruikers?

• Dit wil sê 6, 7, 8
• Firefox 2, 3
• Safari
• Google Chrome
• Opera

Lang weergawe:Ek het'n web app wat daarop gemik op ander web-ontwikkelaars.Ek wil my app ondersteun die groot web blaaiers (plus Google Chrome) in beide aanbieding en AJAX gedrag.

Ek het begin op Firefox/Firebug, dan bygevoeg voorwaardelike kommentaar vir'n konsekwente stilering onder DWS 6 en 7.Volgende, tot my verbasing, het ek ontdek dat die jQuery nie identies optree in IE;so ek verander my Javascript te wees draagbare op FF en IE met behulp van conditionals en minder suiwer jQuery.

Vandag, het ek begin toets op Webkit en Google Chrome en ontdek dat, nie net is die style inconsistant met beide FF en IE, maar Javascript is nie uitvoering aan alles, waarskynlik as gevolg van'n sintaksis of fout.Ek verwag'n paar CSS werk, maar nou het ek meer Javascript ontfouting om te doen!Op hierdie punt, ek wil om terug te stap en dink voor die skryf van die gebied van die spesiale gevalle vir alle situasies.

Ek is nie op soek vir'n silwer bullet, net die beste praktyke om dinge te hou soos verstaanbaar en te onderhou as moontlik.Ek verkies as dit werk met geen bediener-kant intelligensie;maar as daar is'n voordeel om, byvoorbeeld, gaan die gebruiker-agent en dan terugkeer verskillende lêers op verskillende blaaiers, dit is goed as die totale verstaanbaarheid en instandhouding van die web app is laer.Baie dankie aan almal baie dankie!

Answer 1

Ek is in 'n soortgelyke situasie, besig met 'n web artikels wat gerig is op die IT-spesialiste, en wat nodig is om die dieselfde stel blaaier ondersteun, minus Opera.

Sommige algemene dinge wat ek tot dusver geleer het:

• Toets dikwels, in soveel van jou teiken blaaier as wat jy kan. Maak seker dat jy genoeg tyd het vir hierdie in jou ontwikkeling skedule.
• hulpmiddels kan jy deel van die pad te kruis-leser ondersteuning, maar sal uiteindelik iets op 'n leser mis. Beplan 'n geruime tyd vir ontfouting en navorsing fixes vir spesifieke blaaiers.
• As jy iets wat nie in 'n toolkit en kan 'n gratis kode uit nie vind nodig, belê n geruime tyd om nut funksies wat die leser-afhanklike gedrag omsluit skryf.
• Voed jouself oor bekende webblaaier foute, sodat jy jou implementering kan stuur om hulle.

'n Paar meer spesifieke dinge wat ek geleer het:

• Gebruik voorwaardelike wetboek saamgestel gegrond op die gebruiker-agent slegs as 'n laaste uitweg, omdat verskillende geslagte van die "dieselfde" browser verskillende funksies kan hê. In plaas daarvan, toets vir die standaarde voldoen gedrag eerste - bv, if(node.addEventListener)..., dan algemene nie-standaard funksies -. Bv if(window.attachEvent)..., en dan, as jy moet, kyk na die gebruiker-agent vir 'n spesifieke tipe leser en weergawe
• Om te weet wanneer die DOM is 'gereed' vir toegang script is anders in byna elke leser. 'N Goeie toolkit sal abstrakte dit vir jou.
• Event hanteerders verskil in byna elke leser. 'N Goeie toolkit sal abstrakte dit vir jou.
• Die skep van DOM elemente, veral vorm kontroles of elemente met eienskappe, kan lastig met document.createElement en element.setAttribute wees. Hoewel dit nie standaard (en kinda yucky), met behulp van node.innerHTML met stringe wat stukkies van HTML bevat blyk meer betroubaar regoor tipes leser te wees. Ek het nog 'n hulpmiddel wat jou sal laat jy gebruik element.setAttribute om 'n "naam" toe te voeg tot 'n vorm element in Internet Explorer vind.
• CSS verskille (en foute) is net so belangrik soos JS verskille.
• Die "kern" Javascript funksies (String, Datum, regexp, Array funksies) lyk redelik betroubare en konsekwente regoor implementeer, veral met betrekking tot die DOM / CSS / Venster funksies te wees. Daar is 'n paar klein vreugde in die feit dat die taal is nie heeltemal anders op elke platform. : -)

Ek het nie regtig loop in enige Chrome-spesifieke JS foute, maar dit is altyd een van die eerste blaaier Ek toets.

HTH

Answer 2

Chrome is eintlik 'n bietjie anders as Safari, dit maak gebruik van 'n heeltemal ander javascript implementering en probleme is aangemeld met beide prototipe en jQuery. Ek sou nie bekommerd wees oor dit te veel vir nou, dit is nog steeds 'n vroeë beta weergawe van die leser en so teenstrydighede sal waarskynlik beskou word as foute. Hier is die foutverslag .

Answer 3

Een "silwer bullet" jy kan oorweeg om te Google Web Toolkit (GWT) .

Ek glo dit word ondersteun deur al die blaaier waarin jy belangstel, en gee jou die vermoë om jou UI in 'n Java-versoenbaar IDE kodeer soos Eclipse. Die voordeel hiervan is jy kan IDE gereedskap gebruik vir kode voltooiing en stel-time foutopsporing, wat grootliks ontwikkeling op grootskaalse UI projekte.

As jy GWT UI komponente gebruik, sal dit 'n baie betrokke leser nastiness verberg hoef te hanteer, maar wanneer jy stel, sal 'n kompakte skep, sit vir elke leser platform. Hierdie manier waarop jy nooit enige IE-spesifieke kode te laai as jy die lees van die artikels in Firefox. Jy sal ook 'n kliënt-kant stomp gegenereer wat die toepaslike saamgestel bondel JS sal laai. Om die transaksie te versoet, hierdie lêers is cacheable, is so beskou prestasie oor die algemeen verbeter vir herhalende besoekers.

Answer 4

Die landskap het ontwikkel aansienlik te akkommodeer kruis-leser ontwikkeling. jQuery, Prototipe en ander raamwerke bestaan vir kruis-leser wat Javascript. CSS resets is goed vir die begin op'n gemeenskaplike leë doek vir alle blaaiers. Bloudruk en 960 beide CSS raamwerke te help met die uitleg met behulp van CSS rooster uitlegte tegnieke wat blyk te wees om baie gewild hierdie dae.

Soos vir die ander CSS eienaardighede oor die verskillende blaaiers, daar is geen heilige graal hier en die enigste opsie is om jou te toets webwerf oor verskillende blaaiers en die gebruik van hierdie awesome hulpbron en beslis sluit aan by'n poslys te spaar soem tyd.

As jy besig is op'n hoë-volume produksie webwerf, dan kan jy gebruik maak van'n diens soos browsercam.com in die einde van die spel om te verseker dat die site nie breek verskriklik in sommige leser.

Laastens, moenie probeer om te maak die site lyk dieselfde in elke leser.Jou primêre ontwerp moet teiken EXPLORER/FF en jy moet okay wees met redelike gevaar op die ander.Gebruik die gegradeer leser grafiek om nou in op die leser ondersteuning.

Soos vir beste praktyke, die begin van die gebruik wireframes op blanko papier of'n diens soos Balsamiq mockups.Ek is nog steeds verbaas hoe baie ontwikkelaars begin met'n redakteur in plaas van'n draad model, maar dan weer ek net oorgeskakel'n jaar terug voor te besef hoe'n groot tyd besparing dit is.Het skoon skeiding van die uitleg (HTML), aanbieding (CSS) en gedrag (Javascript).Daar moet geen stilering elemente in die HTML -, geen presenation in Javascript (gebruik .addClass('highlight') in plaas van .css({'background-color': 'red'});).

As jy nie vertroud is met enige van die vet terme in hierdie post, Googlen hulle moet vrugbaar wees vir jou web-ontwikkeling loopbaan en produktiwiteit.

Answer 5

As jy begin is van 'n basis herstel of raamwerk en het verantwoordelik vir Internet Explorer en dit is nog steeds al freaky, kan jy die volgende weer bewys:

• Alles bekragtig? CSS en HTML?
• Enige gebroke skakels na 'n opgeneem lêer (JS, css, ens?). In Chrome / Safari, as jou style skakel is Busted, al jou skakels kan uiteindelik rooi. (Iets te doen met die standaard 404 stilering ek dink)
• Enige vreemde vereistes van jou js plugins wat jy kan gebruik? (Nie die css lêer moet kom voor die JS lêer, soos met jquery.thickbox?)

Answer 6

Vir UI, check Ext .

Dit is wonderlik as 'n selfstandige biblioteek, al is dit ook gebruik kan word met jQuery, Yui, prototipe en GWT.

Monsters: http://extjs.com/deploy/dev/examples/samples Html

Answer 7

Ek het vier dinge nuttig gevind in die ontwikkeling van JavaScript aansoeke:

• Kenmerk opsporing
• Biblioteke
• Iteratiewe ontwikkeling met behulp van virtualiseermodus
• JavaScript: The Definitive Guide, Douglas Crockford & John Resig

Kenmerk Detection

Gebruik weerspieëling om te vra of die leser die verlangde funksie ondersteun. As jy wil weet wat geval hantering van 'n leser ondersteun, kan jy as (el.addEventHandler) vir W3C nakoming, indien (el.attachEvent) vir die IE-tipe, en uiteindelik terug te val op el. [ 'OnSomeEvent'].

'n groot MAAR!

Browsers soms lieg oor watter eienskappe hulle te ondersteun. Ek kan nie onthou nie, maar ek het in 'n sake waar Firefox geïmplementeer 'n DOM funksie, maar sal valse terugkeer as jy getoets vir daardie funksie!

Biblioteke

Aangesien jy reeds besig met jQuery, Ek sal die verduideliking te red. Maar as jy in die moeilikheid loop is dalk wil jy dalk oorweeg Yui vir dit is wonderlik kruis-leser verenigbaarheid. Hulle saamwerk selfs.

Iteratiewe ontwikkeling met virtualiseermodus

Miskien is my beste raad: Begin al jou toets omgewing se in 'n keer. Kry 'n Linux verspreiding, Compiz Fusion en 'n klomp van die RAM. Kry 'n afskrif van óf VMWare se VMWare Server of Sun se Virtual Box en installeer 'n paar bedryfstelsels. Kry beelde vir Windows XP, Windows Vista en Mac OS X.

Die basiese idee is dit: Compiz Fusion gee jou 4 Desktops gekarteer op 'n kubus. 1 van hierdie desktops is jou Linux rekenaar, die volgende jou Virtutual Windows XP boks, die een na die Vista, die laaste Mac OS X. Na die skryf van 'n paar kode, jy Alt-Tab in virtuele rekenaar en kyk na jou werk. Plus dit lyk awesome.

JavaScript: The Definitive Guide, Douglas Crockford & John Resig

Hierdie drie bronne verskaf die meeste van my inligting vir JavaScript ontwikkeling. Die Definitive Guide is dalk die beste verwysing boek JavaScript vir.

Douglas Crockford is 'n JavaScript guru (Ek haat die woord) by Yahoo. Lookup sy reeks "Douglas Crockford teorie van die DOM", "Douglas Crockford Advanced JavaScript", "Douglas Crockford teorie van die Dom", en "" Douglas Crockford Die goeie dele "op Yahoo! Video.

John Resig (as jy weet) geskryf jQuery. Sy webwerf by ejohn.org bevat 'n rykdom van JavaScript inligting, en as jy grawe rond op Google sal jy vind hy 'n aantal aanbiedings op verdedigende JavaScript tegnieke gegee.

... Sterkte!

Answer 8

Net sodat jy een minder leser te bekommer oor het, Chrome gebruik dieselfde lewering enjin as Safari. So as dit werk in Safari, moet dit presies werk dieselfde in Chrome.

hierdie post op Matt Cutts 'blog.

  

Google Chrome gebruik WebKit vir die lewering van, wat is die dieselfde lewering enjin as Apple se Safari leser, so as jou site is verenigbaar met Safari dit moet groot werk in Chrome.

Update: Dit lyk soos hierdie is nou verouderde inligting. Sien asseblief Vox se kommentaar op hierdie antwoord.

Answer 9

As u baie hoë prioriteit is presies in ooreenstemming aanbieding oor al die genoteerde met geen ongelykhede implementeer, moet jy waarskynlik kyk na AS3 en Flex.

Answer 10

Persoonlik gebruik ek Mootools as 'n eenvoudige liggewig JavaScript raamwerk. Dit is maklik om te gebruik en ondersteun al die blaaier bo (behalwe Chrome, maar dit lyk te so ver werk as wat ek kan sê).

Ook, om konsekwentheid regoor die blaaier verseker, kry ek 'n funksie / styl / gedrag / ens. om te werk in 'n leser eerste (gewoonlik Firefox 3 met Firebug), dan onmiddellik nagaan om seker te maak dit werk in al die ander blaaiers (verlaat IE6 vir laaste). As dit nie gebeur nie, ek inveset die tyd om dit dadelik te los, want ek anders weet ek sal nie tyd later het (in my ervaring, om dinge te kruis-leser werk neem ongeveer 50% van my dev tyd;. - ))

Answer 11

Valid jou JavaScript met 'n "goeie dele" + leser op JsLint.com maak dit minder waarskynlik van Java het gedra verskillend in VF, Safari, ens.

Anders - die gebruik van standaarde en bekragtiging van jou kode sowel as die bou van bestaande tegnieke soos jQuery moet maak jou site op te tree dieselfde in alle blaaiers behalwe IE - en daar is geen magic resep vir Internet Explorer - dit is net foute oral ...