iOS 5 voor webdevents Safari Mobile-updates

Inheemse iOS-ontwikkelaars zijn niet de enigen met iets om enthousiast over te zijn als het gaat om de ontwikkeling voor iOS 5. Naast het nieuwste besturingssysteem is een nieuwe versie van Safari Mobile uitgebracht en ontwikkelaars van mobiele websites hebben nu veel nieuwe functies om mee te experimenteren. . Ga op de hoogte van de wijzigingen in dit artikel!


Een toename van 86 punten

Met elke nieuwe iOS-release heeft Apple een fenomenale taak geleverd door de native ontwikkelingsgemeenschap bij te werken over wijzigingen in de SDK. Ze hebben een uitgebreid overzicht van wijzigingen, officiële release-opmerkingen en zelfs complete API-diff's uitgebracht.

Als alleen webontwikkelaars zoveel geluk hadden! Informatie over wijzigingen in Mobile Safari is veel moeilijker te vinden. Om eerlijk te zijn, is sommige informatie officieel vrijgegeven. U kunt de Safari 5-update op consumentniveau, een update voor ontwikkelaars op hoog niveau en een onduidelijke technische ondersteuningsnotitie, HT4922, bekijken. In geen van deze documenten wordt echter specifiek ingegaan op wijzigingen die relevant zijn voor iOS, en geen enkele gaat naar het technische niveau dat nuttig zou zijn voor ontwikkelaars (als u een extra document kent dat hier niet wordt vermeld, laat dan een link achter in de opmerkingen). Dit gebrek aan informatie is verrassend, maar alleen om één reden: er is veel veranderd in Safari 5.1 op iOS 5.

Het doel van dit artikel is om een ​​zo compleet mogelijk wijzigingslogboek voor Mobile Safari 5.0 tot 5.1 te bieden. Ik heb dit geprobeerd door simpelweg te rapporteren over mijn eigen experimenten tussen iOS-apparaten waarop elke versie wordt uitgevoerd. Mijn testen tot dusverre waren eenvoudig: ik laadde HTML5Test.com op elke Safari-versie en noteerde de wijzigingen.

Volgens de HTML 5 Test heeft Mobile Safari 5.1 een stijging van 86 punten gezien ten opzichte van Mobile Safari 5.0.

Natuurlijk, zoals de naam al aangeeft, test de testsite eigenlijk alleen maar op wijzigingen in HTML 5 en gerelateerde specificaties. Er wordt ook duidelijk een disclaimer weergegeven waarin staat dat niet alle nieuwe HTML 5-wijzigingen zijn getest (de HTML 5-specificatie wordt immers nog steeds geschreven!) En dat de resultaten mogelijk niet helemaal correct zijn. Desalniettemin lijkt dit een efficiënte methode om snel een overzicht te krijgen van wat er is veranderd tussen browserversies, en ik ben blij dat ik mijn resultaten van deze test met de community kan delen..


Testplatform

De resultaten die in dit artikel zijn besproken, zijn verkregen door testen met een iPhone 3GS met iOS 4.3.5 met Safari 5.0 en een iPhone 4 met iOS 5.0 met Safari 5.1. Deze resultaten werden verder bevestigd op een iPad met iOS 4.3.5 met Safari 5.0 en een iPad 2 met iOS 5.0 met Safari 5.1. Ik was blij om te ontdekken dat zowel de iPhone- als de iPad-versie van Safari hetzelfde testte.

De volledige user-agent die wordt weergegeven op de iPhone 3GS:

Mozilla / 5.0 (iPhone; U; CPU iPhone OS 4_3_5 zoals Mac OS X; en-us) AppleWebKit / 533.17.9 (KHTML, like Gecko) Versie / 5.0.2 Mobile / 8L1 Safari / 6533.18.5

De volledige user-agent die wordt weergegeven op de eerste generatie iPad:

Mozilla / 5.0 (iPad; U; CPU iPhone OS 4_3_5 zoals Mac OS X; en-us) AppleWebKit / 533.17.9 (KHTML, like Gecko) Versie / 5.0.2 Mobile / 8L1 Safari / 6533.18.5

De volledige user-agent weergegeven op de iPhone 4:

Mozilla / 5.0 (iPhone; CPU iPhone OS 5_0 zoals Mac OS X) AppleWebKit / 534.46 (KHTML, like Gecko) Versie / 5.1 Mobile / 9A334 Safari / 7534.48.3

De volledige user-agent weergegeven op de iPad 2:

Mozilla / 5.0 (iPad, CPU OS 5_0 zoals Mac OS X) AppleWebKit / 534.46 (KHTML, like Gecko) Versie / 5.1 Mobile / 9A334 Safari / 7534.48.3


Safari 5.1 HTML 5 testresultaten

Parsing Rules: 11/11, +10 punten

Een extra 10 punten werden toegekend voor de opname van zowel HTML 5 tokenizer en HTML 5 tree building. De technische details van deze test vallen buiten het bestek van dit artikel, maar ik kan wel zeggen dat de HTML 5-specificatie een tokenization-fase definieert, gevolgd door een boomconstructiefase in het parseren van HTML 5-documenten. Deze puntentoename houdt in dat Safari 5.1 zich hieraan houdt, terwijl 5.0 dit niet doet.

Naast de 10 behaalde punten in deze categorie en toegevoegd aan de algemene score, scoorde Safari 5.1 ook een extra 2 bonuspunten voor de toevoeging van inline SVG en MathML. Houd beide technologieën in de gaten!

Canvas: 20/20, +0 punten

Geen verandering. Dit is nu al een tijdje volledig ondersteund.

Video: 21/31, +0 punten

Er zijn geen wijzigingen gemeld in de videocategorie, maar Mobile Safari haalt nog steeds geen perfecte score. Wat mist er? Ondersteuning Ogg Theora- en WebM-indeling en ondersteuning voor ondertiteling.

Audio: 20/20, +0 punten

Geen veranderingen. Mobile Safari heeft de ondersteuning van audio element voor enige tijd, maar mist nog steeds ondersteuning van WebM en Ogg Vorbis (dit komt waarschijnlijk niet snel).

Elementen: 22/28, +8 punten

Voor deze sectie werd een significante toename van 8 punten behaald.

Nieuwe elementen zijn onder meer:

  • figuurelement
  • figcaption element
  • markeer element

Andere verbeteringen in deze categorie zijn onder meer:

  • aangepaste niet-zichtbare gegevens
  • verborgen kenmerk

Formulieren: 75/98, +39 punten

Deze toename van 39 punten in de categorie formulieren is een van de meest opwindende updates!

Veel van de geïmplementeerde wijzigingen zijn van toepassing op de type kenmerk van het invoerelement. Nieuwe attribuutwaarden van het type die nu van invloed zijn op de formulierbesturingselementen die door de gebruikersinterface van de browser worden weergegeven, zijn:

  • maand
  • datum
  • tijd
  • datum Tijd
  • datetime-local
  • reeks

Dit is een grote overwinning voor webontwikkelaars die op iOS zijn gericht. Mobile Safari toont nu een UIPicker met de verschillende tijdcomponenten wanneer u het typekenmerk instelt op een van de datum / tijd-gerelateerde waarden, en a UISlider wordt nu weergegeven voor de bereikwaarde. Web-apps worden steeds native.

Ondersteuning voor deze extra updates wordt ook gerapporteerd:

  • het vereiste attribuut voor kiezen elementen
  • uitdaging- en sleuteltypekenmerken van het keygen-element
  • uitvoerelement

Andere wijzigingen in deze sectie zijn de toevoeging van de :ongeldig selector, de het formulier, formAction, formEnctype, formMethod, en formTarget eigenschappen op velden en de controle eigendom op etiketten.

Gebruikersinteractie: 17/36, +17 punten

Punten in deze categorie zijn toegekend voor verbeteringen in kenmerken, eigenschappen en methoden voor het bewerken van HTML. Met name de attributen contentEditable en designMode, de eigenschap isContentEditable en de opdrachten execCommand, queryCommandEnabled, queryCommandIndeterm, queryCommandState, queryCommandSupported en queryCommandValue.

Geschiedenis en navigatie: 5/5, +0 punten

Geen verandering. Sessiegeschiedenis was al beschikbaar.

Microdata: 0/15, +0 punten

Geen verandering en nog geen ondersteuning. Lees deze referentie voor meer informatie over wat we missen.

Webapplicaties: 15/20, -4 punten

Vreemd genoeg meldt de testsite eigenlijk een verlies van 4 punten in deze sectie, waarbij handlers voor aangepaste schema's en handlers voor aangepaste content worden vermeld als niet langer ondersteund.

Beveiliging: 5/10, +0 punten

Geen verandering. We wachten nog steeds op naadloze iFrame-ondersteuning.

Geolocatie: 15/15, +0 punten

Geen verandering hier omdat Geolocation-ondersteuning al enige tijd beschikbaar is.

Opmerking: geolocatie maakt geen deel uit van de officiële HTML 5-specificatie, maar wordt vaak gekoppeld aan HTML 5-websites. Lees de officiële Geolocation-specificatie.

WebGL: 9/25, +1 punt

Deze release brengt ons een punt dichter bij WebGL-ondersteuning met de toevoeging van DataView-ondersteuning.

Opmerking: WebGL maakt geen deel uit van de officiële HTML 5-specificatie, maar wordt vaak geassocieerd met HTML 5-websites. Lees hier meer over WebGL.

Communicatie: 25/25, +0 punten

Geen wijzigingen hier. Zowel 5.0 als 5.1 bieden ondersteuning voor cross-document messaging en Server-Sent Events.

Bestanden: 0/20, +0 punten

Geen veranderingen op dit front, en dat is een groot frustratiepunt voor veel webontwikkelaars die verlangen naar toegang tot de FileReader-API en de FileSystem-API.

Opmerking: dit is geen officieel onderdeel van de HTML 5-specificatie.

Opslag: 15/20, +0 punten

Geen veranderingen. Ondersteuning voor IndexedDB is nog steeds in behandeling, maar op zijn minst bestaat Lokale Opslag al een tijdje.

Opmerking: dit is geen officieel onderdeel van de HTML 5-specificatie, maar het is een nauw verwante technologie die vaak wordt besproken naast HTML 5-websites. Lees de volledige werkvoorraad voor webopslag.

Werknemers: 15/15, +15 punten

De HTML-test rapporteert een toename van 15 punten met ondersteuning voor zowel webmedewerkers als gedeelde werknemers.

Opmerking: dit is geen officieel onderdeel van de HTML 5-specificatie, maar het is een nauw verwante technologie die vaak wordt besproken naast HTML 5-websites. Lees de volledige werkvoorraad van de webwerker.

Lokale multimedia: 0/20, +0 punten

Geen wijzigingen hier, helaas. De grote functie waar veel webontwikkelaars naar verlangen in deze categorie is toegang tot de camera van het apparaat.

Opmerking: dit is geen onderdeel van de officiële HTML 5-specificatie.

Meldingen: 0/10, +0 punten

Geen enkele hint van webmeldingen bij deze release.

Opmerking: dit is geen onderdeel van de officiële HTML 5-specificatie. Lees de full-web-meldingen werkconcept.

Overig: 6/6, +0 punten

Punten voor zowel de tekstselectie als de scroll-in-view waren eerder bekroond met Safari 5.0.


Voorbij HTML 5 Test

De HTML 5 Test-website controleert op een breed scala van browserondersteuningsproblemen, maar er zijn een heleboel dingen waaraan het ook niet aandacht besteedt. Voorbeelden zijn bugfixes, prestatieverbeteringen en CSS- of JavaScript-aanpassingen. Er waren ook een flink aantal van dergelijke updates in deze versie.

Als je meer wilt weten over nog meer Safari 5.1-verbeteringen, raad ik je ten zeerste aan om deze blogpost van David Calhoun te lezen.

Een paar extra veranderingen die anderen op het web al hebben aangegeven, zijn onder meer:

position: fixed

Deze CSS-eigenschap werkt nu zoals de meeste webontwikkelaars zouden verwachten. Om het in actie te zien, bekijk deze YouTube-video van Davids post waarnaar hierboven wordt verwezen:

overflow: scroll

Hetzelfde als hierboven. Deze instelling is aangepast om te voldoen aan de verwachtingen van ontwikkelaars. Lees de post van David voor alle details en bekijk deze YouTube-video die hij oorspronkelijk heeft gepost om het nieuwe gedrag weer te geven:


Fouten? omissies?

Het bovenstaande zijn de resultaten die ik tot nu toe heb kunnen vinden in HTML 5 Test en verschillende andere bronnen op internet. Als u nog andere belangrijke of interessante wijzigingen weet die ik hier niet heb behandeld, kunt u me dit laten weten in de opmerkingen. Als je fouten vindt, aarzel dan niet om dit bericht te corrigeren.


Laat je stem horen. Stem in de commentaren!

Zoals je kunt zien aan het bovenstaande, heeft iOS 5 absoluut een groot aantal wijzigingen en verbeteringen aangebracht in Mobile Safari. Mobiletuts + behandelt een aantal van deze nieuwe functies, evenals vele andere onderwerpen op het gebied van mobiele-webontwikkeling in aankomende berichten. Laat ons weten welk type inhoud je graag zou willen zien als je een reactie achterlaat op dit bericht. Als er een specifieke Safari 5.1-verbetering is waarvan u wilt dat wij deze gedetailleerder behandelen, laat het ons hieronder weten!