CSS3-Rezepte für Webkit. Hergestellt für mobile Geräte. Was ist für jeden Webkit-Port üblich?

Android und iPhone - Browserkriege

Teil 1. WebKit eilt eilig zur Hilfe

Entwicklung einer Anwendung für einen Browser, der für die Überwachung des Netzwerkstatus verantwortlich ist

Content-Serie:

Total, iPhone- und Android-Plattformen verfügen über mehr als 100.000 Anwendungen zum Herunterladen aus einer Vielzahl von Quellen. Gleichzeitig bedeutet "native" Anwendungen, d. H. Anwendungen, die mit dem entsprechenden SDK entwickelt und gesammelt werden und dann auf einem mobilen Gerät installiert sind. Ähnliche "native" Anwendungen ermöglichen es Ihnen, effektiv umzusetzen technische Fähigkeiten Mobiles Gerät, einschließlich Unterstützung drahtlose Netzwerke, Bluetooth- und Data Warehouses, Beschleunigungsmesser oder Kompassmerkmale und andere technologische Wunder und neue Artikel, die mobile Geräte für Benutzer so attraktiv machen. Die Beliebtheit von "nativen" Anwendungen für iPhone- und Android-Plattformen ist extrem hoch, aber zusätzlich bieten mobile Geräte reichlich Möglichkeiten zur Entwicklung von Webanwendungen. Mobile Technologien sind längst aus dem Alter der Kinder entfernt, und mit ihnen erreichte eine bestimmte Laufzeit mobiles Internet.

Dieser Artikel ist der erste in einer Reihe von zwei Teilen, die den Entwickeln von Browseranwendungen auf iPhone- und Android-Plattformen gewidmet sind. Der Zweck dieser Serie besteht darin, den Leser den Grundprinzipien einzuführen, um ihre eigenen mobilen Webanwendungen zu erstellen. Mobile Anwendungen sind nicht auf den Start der Website auf dem mobilen Gerät beschränkt. Wir werden uns die grundlegenden Technologien und Ansätze ansehen, die bei der Entwicklung mobiler Anwendungen verwendet werden, mit denen Sie diesen Abschnitt der Entwicklung von Software in separater unabhängiger Disziplin zuordnen können.

Die Beliebtheit der Web-Plattform wird durch die Tatsache erklärt, dass die Verwendung vieler Probleme ermöglicht, viele Probleme zu lösen, die traditionell die Geißel von Entwicklern und Systemadministratoren sind. Unter ihnen:

• Installationsprobleme: Installieren von Webanwendungen verursachen keine Probleme - Installieren oder kopieren Sie sie einfach auf den Server und informieren Sie Ihren Clients, welche URL im Browser angegeben werden sollte.
• Zoom-Problemen: Webanwendungen werden problemlos auf den Pool des Servers eines Hochleistungs-Datenträgerservern skaliert, und die Anwendungsdienstwerkzeuge werden zur Aufrechterhaltung von Anwendungen verwendet.
• Probleme der Archivierung und Datenwiederherstellung: Webanwendungen verwenden ein zentralisiertes Data Warehouse, wodurch die Wiederherstellung der Erholung im Falle von Fehlern vereinfacht wird.
• Fragen der Benutzeroberfläche: Kombination von HTML-, Cascading-Stylesheets (CSS), Javascript- und Grafikbildern Erstellen können Sie eine multifunktionale Benutzeroberfläche erstellen, die seine Funktionen und Erscheinungsschnittstellen erstellt, die mithilfe von "nativen" SDK entwickelt wurden. Letzteres ist in der Regel nicht in der Lage, eine vollständige Wirkung der Präsenz für Spielanwendungen bereitzustellen, und garantiert nicht die notwendige Funktionen für interaktive Informationsklemmen.
• Einfach zu bedienen: Die meisten Anwendungen erfordern einfache und Benutzeroberflächenelemente, die den Alltag problemlos ausführen können.

Der attraktivste Aspekt des Vertriebsmodells von Anwendungen über das Internet besteht darin, dass Sie die Software in einer Art von Abonnementservice einschalten können, was eine gegenseitig vorteilhafte Liefermethode ist software. "Auf welche Weise?" - du fragst. Betrachten wir diese Frage mehr.

Das Verteilungsmodell für die Verwendung einer Weboberfläche ermöglicht es den Käufern, das Produkt vor dem Kauf mit minimalem Risiko und zum niedrigsten Preis auszuprobieren. Wenn ein probeversion Ich mochte den Kunden, dann ist alles, was für die weitere Verwendung des Softwareprodukts erforderlich ist, um den Kauf zu bezahlen. kreditkarte (oder mit dem PayPal-System). Darüber hinaus stellt das Softwaremodell als Dienst (SAAS) den Benutzern einen bequemen und rentablen Weg, um Software ohne wesentliche Vorauszahlungskosten zu kaufen, und garantiert Investitionen im ersten Monat der Nutzung und nicht in der fernen Zukunft.

Die Tatsache ist, dass Webbrowser unterstützt wird mobile Geräteah war praktisch nicht vorhanden. Die Situation hat sich mit dem Aufkommen der Technologie dramatisch verändert, die Webkit namens Webkit nannte, was seinen Platz auf dem Gebiet der mobilen Geräte genau dank des iPhone aufgenommen hat.

In wenigen Jahren ist die iPhone-Plattform der Web-Client-Nummer eins der Welt geworden. Warum? Da Webkit mit einem zuverlässigen Betrieb der Internetverbindung gekoppelt ist, ermöglichte es, Webdienste auf mobilen Geräten viel effizienter zu verwenden als alle anderen modernen Browser. Andere mobile Marktteilnehmer lenken auch auf neue Technologien aufmerksam, und jetzt kann der gesamte Markt in Unternehmen unterteilt werden, die Webkit verwenden, Unternehmen, die Webkit verwenden, und Unternehmen, die Ausreden erfinden, um Webkit nicht zu verwenden.

Also, was ist Webkit?

Webkit und HTML5.

WebKit ist eine Browser-Engine, die sowohl zur Unterstützung des mobilen Safari-Browsers auf der iPhone-Plattform verwendet wird, und unterstützt den Browser auf der Android-Plattform. Natürlich wird Webkit auch in anderen mobilen Geräten verwendet, aber im Rahmen dieses Artikels werden wir uns auf die Berücksichtigung der iPhone- und Android-Plattformen einschränken.

Webkit ist ein Open-Source-Projekt, das aus der Entwicklung der KD-Desktop-Umgebung (KDE) stammt. Es ist das Webkit-Projekt, das moderne Webanwendungen für mobile Geräte von ihrem Erscheinungsbild benötigt. Die technologischen und Gestaltungseigenschaften des mobilen Geräts spielen natürlich eine wichtige Rolle, aber mobile Benutzer interessieren sich jedoch hauptsächlich an Inhalten. Wenn das mobile Gerät nur auf den kleinen Teil des Internetinhalts Zugriff bietet, ist es unwahrscheinlich, dass sie in die obere Liste der beliebtesten Geräte gelangen kann.

Die meisten von uns ziehen es vor, ein volles Leben zu leben: Wenn wir eine Website auf einem Laptop-Computer öffnen, erwarten wir, dass dieselbe Inhalte, wenn wir diese Seite öffnen, auf dem Zug eröffnen. Inhalt ist das Hauptproblem mobilen Anwendungen. Unabhängig davon, wo wir sind, und was wir tun, benötigen wir Zugriff auf die von Ihnen interessierten Daten. Die Webkit-Technologie bietet vollwertige Inhalte auf iPhone- und Android-Plattformen.

Es ist erwähnenswert, dass sich Webkit auch in Desktop-Computern verwendet wird, beispielsweise im Safari-Browser, der der Hauptbrowser der Mac OS X-Plattform ist. Unabhängig davon, ob die Version für Desktop-Computer oder ein Browser-Motor für iPhone oder Android, Webkit Bleibt die fortschrittlichste Technologie, die HTML- und CSS unterstützt. In der Tat unterstützt Webkit CSS-Stile, die noch nicht von Browsern auf anderen Motoren angezeigt werden. Als Beispiel können Sie als Beispiel eine Anzahl von Eigenschaften angeben, die durch die HTML5-Spezifikation definiert sind.

HTML5 ist ein Satz vorläufiger technischer Spezifikationen, die Technologien definieren, die auf der Verwendung von Browsern basieren, wie z. B. Datenlager auf der Clientseite mit SQL-Unterstützung, Bewegen, Umwandlung usw. Die Entwicklung der HTML5-Spezifikation ist jedoch immer noch vorbei, sobald die Grundprinzipien in den meisten Plattformen in Browsern eindeutig formuliert und implementiert werden, wird eine sehr bescheidene Anfängliche der Entwicklung von Webanwendungen zu einer vergessenen Vergangenheit. Die Entwicklung von Webanwendungen wird in der Entwicklung von Software ein erhebliches Segment einnehmen, dies geht nicht nur um Anwendungen für Desktop-Browsern, sondern auch für mobile Browser. Mobile Anwendungen werden vom Seitenprodukt aus dem Hauptprodukt auf dem Webanwendungsmarkt in das Hauptprodukt.

Konstruktive Funktionen der mobilen Webanwendungenentwicklung

Wenn Sie sich für den Master der Webentwicklungstechnologien entschieden haben, ist zu Ihrer Verfügung eine sehr begrenzte Wahl der Fonds. Zunächst kann die Anwendung direkt auf dem Server als Datei erstellt werden, die den HTML-Code, CSS und JavaScript enthält. Gleichzeitig kann HTML-Inhalte in Form von statischen HTML-Dateien geliefert werden und kann aufgrund der Verwendung verschiedener Technologien dynamisch erstellt werden, beispielsweise auf der Serverseite, beispielsweise wie PHP, ASP.NET, Java Servlets, Trotzdem kommt alles aus der Punktvision der in diesem Artikel berücksichtigten Themen auf den HTML-Code, und hier ist das Wichtigste für uns, dass Webkit-Technologie den Browsern, um HTML auf mobilen Geräten zu spielen.

Um eine Webanwendung auf einem mobilen Gerät (iPhone oder Android) auszuführen, muss der Benutzer den Browser starten und die URL des relevanten Dienstes eingeben, z. B. http://yourcompanyname.com/applicationurl.

In diesem Fall ist der Bereich der vorgeschlagenen mobilen Webanwendungen ziemlich breit: von der Standard-Website bis zu einer mobilen Webanwendung, die speziell für eine bestimmte mobile Plattform entwickelt wurde.

Standard-Standardseiten anzeigen.

Mit der Webkit-Engine in Kombination mit einer intuitiven und benutzerfreundlichen Benutzeroberfläche der iPhone- und Android-Plattformen können Sie fast alle Websites auf Ihrem mobilen Gerät anzeigen. Webseiten werden im Gegensatz zur vorherigen Generation von Mobilfunkbrowsern ziemlich korrekt angezeigt, die zufällig übertragene Fragmente des Inhalts oder überhaupt nicht anzeigt. Beim Herunterladen von Seiten in einen Webkit-Support-Browser werden der Inhalt der Seite normalerweise skaliert. Gleichzeitig wird die Waage so gewählt, dass die gesamte Seite vollständig auf dem Bildschirm montiert ist, obwohl in einer stark reduzierten, oft unentstrittenen Form, wie in Abbildung 1 gezeigt, jedoch gezeigt wird, dass die Seite jedoch gescrollt werden kann, ansteigen, Bewegen Sie sich, um einen bequemen Zugriff auf alle Inhaltselemente zu gewährleisten. Standardmäßig verwendet der Browser ein Fenster mit 980 Pixel breit.

Trotz der Tatsache, dass das vollständige Display der Webseite im Browserfenster an sich eine erhebliche Errungenschaft im Vergleich zur Verwendung der Browser der vorherigen Generation ist, ist die Möglichkeiten von Modern mobile Technologie Dies ist nicht begrenzt.

Webseiten unter Berücksichtigung von mobilen Funktionen erstellt

Wenn Sie möchten, dass Ihre Webseite nicht nur verfügbar ist gewöhnliche Benutzer Netzwerke, aber auch für mobile Benutzer lohnt es sich, ein paar weitere Möglichkeiten zur Optimierung von mobilen Webanwendungen zu erwägen.

Trotz der Tatsache, dass Webkit Sie dazu ermöglicht, die Webseite auf dem Bildschirm für mobile Geräte korrekt anzuzeigen, gibt es einen bestimmten Unterschied zwischen Geräten mit einer Maus, z. B. tragbaren oder Desktop-Computern, und Berührungsgeräten, wie zum Beispiel iPhone oder Android-Smartphones. Sensorische Geräte unterscheiden sich durch die physikalischen Abmessungen des Gebiets "Klick", das Fehlen der Cursorführungsfunktion auf ein beliebiges Element und eine andere Reihenfolge von Ereignissen. Wenn Sie also eine Website erstellen möchten, die für reguläre und mobile Benutzer geeignet wäre, müssen Sie die folgenden Funktionen mobiler Geräte berücksichtigen:

• Browser-iPhone und Android können die gesamte "lesbare" Webseite anzeigen - die Qualität der Anzeige dieser Browser ist deutlich höher als die der standardmäßigen mobilen Browser - eilen Sie nicht, um das Design Ihrer Website zu vereinfachen.
• Die Größe der Kissen der Finger übersteigt deutlich die Größe des Mauszeigers. Betrachten Sie diesen Faktor bei der Entwicklung von Site-Navigationselementen. Legen Sie die Links nicht zu nahe aneinander, da sonst der Benutzer nicht auf dieselbe Verbindung klicken kann, nicht gleichzeitig benachbart.
• Elemente, die angezeigt werden, wenn der Cursor schwebt, funktioniert nicht auf mobilen Geräten. Der Benutzer kann einfach keinen Finger an einem Finger auf einem beliebigen Element wie ein Mauszeiger bewegen.
• Ereignisse, die durch Drücken und Halten der Maustaste definiert werden, ziehen Sie die Maus usw., auf Touch-Bildschirme, werden auf andere Weise implementiert. Einige dieser Ereignisse können an mobilen Geräten arbeiten, aber im Allgemeinen sollten nicht zählen, dass der Mobilfunkbrowser und der Desktop-Browser die gleichen Aktionsabläufe ausführen.

Eine ausführliche Diskussion dieser Aspekte finden Sie im Artikel " iPhone in Aktion."(Siehe Sektion). In unserem Artikel werden wir uns auf die Berücksichtigung von Webkitvorteilen einschränken, und nicht seine Fehler.

Betrachten Sie das offensichtlichste Problem, mit dem iPhone oder Android-Benutzer beim Zugriff auf Websites auftreten, nämlich die begrenzte Bildschirmgröße. Tatsächlich hat der Bildschirm eines modernen mobilen Geräts eine Größe von 320x480 oder 480x320, sofern der Benutzer den Webinhalt in der Landschaftskonfiguration anzusehen. Wie aus Abbildung 1 ersichtlich ist, kann Webkit eine für Standard-Desktops entwickelte Webseite korrekt anzeigt. Bei der Skalierung einer Webseite kann der Text jedoch zu klein sein, um zu lesen, sodass der Benutzer die Funktionen zum Scrollen, Verschieben und Erhöhen verwenden muss, bevor er den Text lesen kann. Wie kann ich mit dieser Einschränkung umgehen?

Der einfachste Weg, um eine Seite zu erstellen, ist ebenso gut im Fenster Mobile Browser und im Desktop-Browserfenster angezeigt. Dies ist die Verwendung eines speziellen Meta-Tags ansichtsfenster..

Das Meta-Tag ist ein HTML-Tag im HTML-Dokumentkopf. Das einfachste Beispiel für die Verwendung des Ansichtsfenster-Tags sieht so aus: . Beim Hinzufügen dieses Meta-Tags auf der HTML-Seite wird das Mapping im Mobile Browserfenster auf optimalste Weise skaliert (siehe Abbildung 2). Browser, die den Ansichtsfenster nicht unterstützen, ignorieren dieses Tag einfach.

In einigen Fällen ist es nützlich, die Fensterskalierungsparameter, wie in Abbildung 3 gezeigt, vorzubestimmen.

Um bestimmte Skalierungsparameter zu ermitteln, geben Sie den genauen Wert des Inhalts des Inhalts Meta-Tag-Ansichtsfenster an: . Durch Ändern des Wertes des Initial-Scale-Parameters kann das Bild reduziert oder erhöht werden. Für iPhone-Plattformen und Android besser. Verwenden Sie Werte von 1,0 bis 1.3. Das ViewPort-Meta-Tag unterstützt auch die minimale und maximale Skala, mit der Sie die Fähigkeit des Benutzers einschränken können, die Seitenskala während des Downloads zu ändern.

Während die Designeigenschaften des iPhone, insbesondere der Größe des Bildschirms 320x480, sich seit seinem Erscheinungsbild praktisch nicht geändert haben, haben die Geräteparameter auf der Android-Plattform eine ziemlich große Auswahl, da mobile Geräte auf dieser Plattform von verschiedenen Herstellern hergestellt werden und sind für verschiedene Benutzergruppen bestimmt. Wenn Sie möchten, dass Ihre Webanwendung bei mobilen Benutzern beliebt ist, sollten Sie einen möglichen Unterschied in der Größe und der Auflösung des Bildschirms sowie die Konstruktionsfunktionen der Android-Geräte berücksichtigen.

Die Erfahrung zeigt, dass zusätzlich zu den konstruktiven Unterschieden, die zwischen verschiedenen mobilen Geräten, die auf Android basieren, die Android-Software selbst versucht, die Einstellungen der herunterladbaren Webseite abhängig von den Eigenschaften des Browsers des mobilen Geräts festzulegen. Neben der Stabilität ist die Android-Plattform durch einen ständig ändernden Funktionen und Funktionen gekennzeichnet. Die Konfiguration eines bestimmten Geräts basierend auf Android unterscheidet sich am ehesten von den Einstellungen Ihrer Entwicklungsumgebung, abhängig von der SDK-Version und dem Gerätehersteller. Abbildung 4 zeigt den Browser-Setup-Bildschirm in Version V1.6 Android Emulator.. Bildschirmeinstellungen geben dem Benutzer die Möglichkeit, den Bildskalierungspegel auf dem Bildschirm (weit, in der Nähe von Medium) zu bestimmen oder den automatischen Seitenskalierungsmodus auszuwählen.

In der Welt der mobilen Geräte ändert sich der ständigste Wert, so dass die Entwicklung und das Update des mobilen Softwaremarkts berücksichtigt werden sollten. Beispielsweise umfassen die SPRINT-Helden-Browsereinstellungen eine Reihe von Optionen, die sich grundsätzlich von den Standardparametern unterscheiden, die beim Laden der Webseite verwendet werden. Der Hero Browser ist auf der Android V1.5-Plattform mit einer von HTC erstellten Änderungen der Android V1.5 erstellt. Glücklicherweise werden bei Verwendung von Meta-Tag-Ansichtsfenster die spezifischen Heldeneinstellungen ignoriert.

Bisher haben wir gesehen, dass Webkit mit dem Download der Webseite vollständig fertig wird, obwohl in einer stark reduzierten und schwierigen Form. Dann haben wir die Steuerung darüber erweitert, wie die Seite auf dem Bildschirm des mobilen Geräts durch die Verwendung des ViewPort-Meta-Tags angezeigt wird. Nun ist die angezeigte Seite viel bequemer zum Lesen und Navigieren. Dies ist jedoch immer noch nicht genug, um unsere Seite als Webanwendung zu suchen und zu funktionieren.

Gemacht für mobile Geräte

Lassen Sie uns zur Berücksichtigung der Konstruktionsmerkmale eines Web-Wals wenden, der für mobile Publikum bestimmt ist. Als spezifisches Beispiel Sehen Sie sich die Google-E-Mail-Gmail-Services-Registrierungsseite an.

Diese Seite sieht aus wie im Desktop-Browserfenster:

Im Desktop-Browserfenster werden Informationen auf der linken Seite angezeigt, und das Registrierungsfenster selbst befindet sich im rechten Bereich. Im Fenster Mobile Browser hat dieselbe Seite einen völlig anderen Look.

Die in Abbildung 6 dargestellte Seite ist sicherlich für mobile Benutzer konzipiert. Nur die von dem Benutzer benötigten Seitenelemente werden auf dem Bildschirm für weitere Arbeit angezeigt - Es ist kein zusätzlicher Bildlauf, Offset oder Skalierung erforderlich.

Erwägen Sie nun das Anzeigen von Fenster email Mobile Version von Google Mail. Da der in der Anwendung verfügbare Bildschirmplatz sehr begrenzt ist, verfügt das Message Viewing-Fenster über ein optionales Schaltflächen und Navigationselemente. In diesem Fall überlappen die angezeigten Navigationselemente das Fenster, um Nachrichten anzuzeigen. Außerdem sollten Sie nicht zu viele Frames oder Div-Scroll-Elemente verwenden, wenn er vermieden werden kann. mobile Version Google Mail löst dieses Problem, indem Sie das Popup-Menü verwenden, das angezeigt wird, sobald der Benutzer das Scrollen der Seite vollendet. Das Popup-Menü enthält 3 Schaltflächen: Archiv., Löschen. und Mehr. Drücken der Taste Mehr Zusätzliche Menüelemente werden angezeigt (siehe Abbildung 7).

Dies ist wirklich eine Anwendung, die für mobile Geräte entwickelt wurde.

Es sollte berücksichtigt werden, dass wir das Design nicht absichtlich löschen und die Möglichkeiten der Arbeit von Mobilfunkbenutzern reduzieren, die Multifunktionsbrowser für iPhone- und Android-Plattformen entwickelt haben. Aus dieser Sicht ist es nützlich, auf das Element auf dem unteren Rand der Gmail-Seite aufmerksam zu achten (siehe Abbildung 8):

Wenn der Benutzer die erweiterte Versionalität der Desktop-Version bevorzugt, bietet ihm die Möglichkeit, die entsprechende Seite herunterzuladen.

Betrachten Sie nun den Fall, wenn Sie eine Anwendung mithilfe von Web-Technologien erstellen möchten, sondern sieht aus wie eine mobile Anwendung "Native".

Inhaltsspezifische Plattform

Der nächste Schritt besteht darin, Inhalte zu entwickeln, die für eine bestimmte mobile Plattform spezifisch sind. In diesem Fall werden das Format und die Schnittstelle der Seite so festgelegt, dass die Seite wie eine "native" Anwendung für eine bestimmte Plattform aussieht, und nicht als Standard-Website allgemeiner Zugang.. Was meinen wir mit der "nativen" Anwendung?

Bevor Sie in die Diskussion eintauchen, wie Sie eine Webanwendung so weit wie möglich an einem "nativen" Antrag auf eine bestimmte Plattform erstellen, lassen Sie uns die allgemeinen Eigenschaften von iPhone- und Android-Browsern beiseite lassen, und konzentrieren Sie sich kurz auf die visuellen Unterschiede, die zwischen Diese Plattformen.

IPhone-Anwendungen haben ihre eigene spezifische und Schnittstelle. Jemandem Snapshot zeigen bildschirm iPhone Und es sei denn, diese Person fiel dem anderen Tag des Mondes buchstäblich buchstäblich, wird er fast sicher sagen, dass dies ein iPhone ist. Zeigen Sie dieselbe Person ein Bild des Bildschirms des mobilen Geräts, das auf Android basiert, und die Antwort ist nicht so eindeutig. Was ist der Grund? Es gibt mehrere mögliche Erklärungen. Erstens erschien das iPhone wesentlich frühere Geräte, die auf Android basieren und eine große Anzahl von Fans erwerben konnte. Erinnern Sie sich an die Personen, die in der Warteschlange standen, um erhebliches Geld für die begrenzten Funktionen des V1-iPhone zu zahlen. Wie du iphone oder nicht das apple-Produkt. ist derzeit der Marktführer. Was ist der Fall bei Android?

Die Android-Plattform ist ein relativ neues Produkt, und in vielen Aspekten fungiert in vielen Aspekten als iPhone-Antipode, da er in erster Linie für die offene Gemeinschaft konzipiert ist. Android-Plattform wird in den meisten genutzt verschiedene Geräte (Telefone und andere Haushaltsgeräte). Zur Vereinfachung der Diskussion in diesem Artikel werden wir uns auf die Verwendung von Android in Mobiltelefonen einschränken.

Im Laufe der Zeit übertreffen die Anzahl der Geräte in der auf Android basierenden Welt die Menge des iPhone. Dies wird dadurch erläutert, dass die Android-Plattformgeräte von einer Reihe von Unternehmen hergestellt werden und von der THEDIUM unterstützt werden. verschiedene Netzwerke Datenübertragung. Mit einer so signifikanten Anzahl von Spielern auf dem Android-Mobile-Markt ist es zweifellos, eine bestimmte Fragmentierung des Marktes auf der Grundlage des Erscheinungsbildes und der Parameter von Geräten zu erwarten. Dieser Trend wird im Beispiel der Sensenui-Schnittstelle von der Firma HTC nachverfolgt. Das attraktiv. aussehen und die Schnittstelle wird nicht von Grundversionen unterstützt Android SDK. Und nicht mit der anderen Android-Datenbank kompatibel. Motorola, Google und Verizon haben ihre Bemühungen zusammengefasst, um ein neues Droid-Gerät auf Android zu entwickeln. Dies ist das erste kommerzielle Produkt auf der Plattform. Android-Version. 2.0.

Vergleichen Sie eine Vielzahl von Android-basierten Systemen mit Uniform extern iPhone anzeigen. Das iPhone ist ein besonders wertvolles Eigentum von Apple. Aussehen anwendungen iPhone. kann sich im Laufe der Zeit etwas ändern, aber diese kleineren Änderungen sind unwahrscheinlich, um zu vergleichen verschiedene Versionen android-Systeme.Die Anzahl davon ist auch jetzt groß genug, wenn die Plattform zu Beginn seiner Entwicklung ist.

Was sollte also getan werden, um das Erscheinungsbild und eine Anwendungsschnittstelle zu "nativen" Programmen zu maximieren?

Wenn eine solche Aufgabe vor dem Erscheinungsbild von Web 2.0 gegenüberstehen würde, wäre dies ein wirklich ernstes Problem. Frühere Versuche, mehrere Client-Browser (mobil und stationär) zu unterstützen, basierten auf der Verwendung mehrerer Ansätze, zum Beispiel:

• Entwicklung von vollständig parallelen Standorten
• Dynamische Inhaltsgenerierung abhängig vom benutzergreifenden Parameter
• Verwenden Sie Proxy-Server, die Inhalte in Abhängigkeit von jedem bestimmten Gerät umwandeln könnten. Eine ähnliche Technologie wurde von RIM erfolgreich genutzt, um den Zugriff auf E-Mail vom mobilen Gerät eines Kunden zu organisieren.

Solche Ansätze können in Fällen ziemlich akzeptabel sein, in denen die Entwicklung von großfinanzierten Teams durchgeführt wird. Und was soll ich den Rest der Welt tun? Nicht jeder verfügt über erhebliche finanzielle Ressourcen, hochqualifizierte Fachkräfte und eine unbegrenzte Zeit, um solche Strategien umzusetzen. Da wir bereits erwähnt haben, kann das mobile Internet der vorherigen Generation von Browsern nicht bequem oder beliebt sein, so dass Sie auf jeden Fall keine veralteten Methoden und Ansätze aufhalten sollten.

Glücklicherweise müssen wir es nicht tun. In der Ära von Webkit und CSS kann der Unterschied im Erscheinungsbild und der Schnittstelle verschiedener mobilen Geräte mithilfe des Stilstils und der Medienabfragen (Medienabfrage) überwunden werden, sodass verschiedene Stile je nach spezifischer Geräteart verwendet werden können. Mit der Medienanforderungstechnologie können Sie Informationen über den Client erhalten. Traditionell sendet der Browser ein Benutzer an den Server, mit dem der Server einen bestimmten Browser identifiziert und Inhalte definiert, die an den Client übertragen werden müssen. Mit der Medienabfrage wählt der Browser den Stil der Seite basierend auf seinen Funktionen aus. Das folgende Beispiel zeigt die Auswahl der Stiltabelle für Smartphones: . Und diese Anfrage ermittelt die Tabelle der Stile für Desktop-Computer: .

Internet Explorer V6.

Zum Zeitpunkt dieses Schreibens hat der Internet Explorer V6 etwa 20 bis 30% des gemeinsamen Browsermarktes besetzt, aber die Berücksichtigung der IE-V6-Funktionen ist jedoch nicht in den Aufgaben dieses Artikels enthalten.

Detaillierte Informationen zu Media-Anfragen finden Sie in der vorläufigen Version der Spezifikation (siehe Abschnitt).

Betrachten Sie ein Beispiel für die Verwendung von Medienabfragen, um eine Anwendung zu entwickeln, die den Status der Netzwerkserver anzeigt.

Netzwerküberwachungsprogramm.

Die Aufgabe dieser Anwendung besteht darin, den Betrieb mehrerer Server zu überwachen. Unabhängige Software-Entwickler müssen häufig auf mehreren Servern mehrfacher Anwendungen unterstützen. Wenn Sie sich jederzeit entwickeln, sind Sie bereits auf verschiedene Arten von Servern und verschiedenen Arten von Anwendungen gestoßen. Dies bedeutet, dass diese Situation durchaus möglich ist, wenn Sie ein einzelnes Werkzeug nicht verwenden können, um die Arbeit aller erforderlichen Anwendungen zu verfolgen. In diesem Fall ist es sinnvoll, den Vorteil zu nutzen mobile Applikation Für die Netzwerküberwachung (Netmon). Die Anwendung bietet alle erforderlichen Funktionen, während er ausreichend flexibel und bequem bleibt, um auf das mobile Gerät zuzugreifen.

Die Netmon-Anwendung enthält eine Liste von Servern, deren Arbeit verfolgt werden muss. Für jeden Server werden die wichtigsten Leistungsindikatoren (KPI) gesammelt. Key Performance-Indikatoren - das Hauptwerkzeug, das seit vielen Jahren MBA-Studenten verwendet, um den aktuellen Geschäftszustand zu bewerten. Aus Sicht der Hosting-Webanwendungen können folgende Indikatoren als KPI verwendet werden:

• Anzahl der Transaktionen im vergangenen Zeitraum
  • Aufträge
  • Kataloganfragen
  • E-Mail-Nachrichten
  • Anzahl der Seitenansichten
• Die Zeit, die seit der letzten Transaktion übergab
  • Auftrag
  • Elektronische Daten austauschen.
  • Nachrichten vom Geschäftspartner
  • Laden Sie die Datei vom Anbieter über FTP herunter
• Ist die Datenbank verfügbar?
• Letztes Backup-Datum
• Durchschnittlicher Bestellbetrag (in Dollar)
• Volumen freiraum Auf der Scheibe
• Bandbreite für die letzte Stunde, Tag, Monat

Mit den obigen Anzeigen und anderen ähnlichen Betriebsparametern können Sie den Status eines bestimmten Systems oder Antrags abschätzen. So sehen wir beispielsweise während der Weihnachtszeit die Anzahl der Aufträge an einigen unserer Websites. Wenn die Daten nicht einen stabilen Anstieg der Bestellungen mit jeder Stunde zeigen, führen wir eine detailliertere Analyse der Situation durch.

Da die Arbeit einer bestimmten Anwendung ihre Bedingungen und Ressourcen erfordert, muss Netmon über eine ausreichende Flexibilität verfügen, um die Funktionen jeder Anwendung zu berücksichtigen. Um eine solche Flexibilität sicherzustellen, beginnen wir mit der Definition der allgemeinsten Struktur der Daten, mit denen Sie die Statusparameter für jedes System berücksichtigen können. In Teil 2 diskutieren wir detaillierter, wo diese Daten stammen und wie sie aktualisiert werden. Beschränken Sie uns bisher auf folgende Informationen:

• Site-Name
• Site-URL (Homepage)
• URL für Updates
• Status: OK oder nicht
• Kurzübersicht: Eine Beschreibung des Serverstatus, der entweder den Wert von OK hat oder eine Textzeichenfolge enthält, die das ernsthaftste Problem für diesen Server angibt
• Elemente: Dies ist ein Satz von Paarennamen / Wert, den wir aktuellen KPI-Werten für die entsprechende Site übertragen müssen.

Unsere Anwendung zeigt die resultierenden Effizienzindikatoren in einem praktischen Formular, um die maximale Verwendung von CSS-, JQuery- und Webkit-Funktionen zu navigieren, um die Aufmerksamkeit des Benutzers auf die Problembereiche zu gewinnen. Wie bereits erwähnt, ist das Hauptziel bei der Entwicklung dieser Anwendung die Fähigkeit, es auf der iPhone-, Android-Plattform und aufzuführen desktop-Computer Im Safari-Browser.

Entwicklung eines Antrags auf Netzwerküberwachung

Moderne Webseiten sollten in einem deklarativen Formular erstellt werden, das die Organisationsstruktur und den Inhalt der Seite definiert. Positionierung und Formatierung einer Seite wird mit Kaskadiertabellen ausgeführt. stile CSS. Und in den meisten Fällen mit JavaScript. Tatsächlich wurden die JavaScript-Bibliotheken so beliebt, dass ihre Verwendung heute eher eine Regel als eine Ausnahme ist. Im Anhang in diesem Artikel verwenden wir die beliebte JavaScript-JQuery-Bibliothek. Unsere Anwendung erfolgt auf der iPhone-, Android-Plattform und auf dem Desktop. Dadurch wird derselbe HTML-Code verwendet, und alle erforderlichen Unterschiede werden in Stilen implementiert. Es ist hierbei zu beachten, dass wir bewusst keine erheblichen Anstrengungen bei der Entwicklung eines attraktiven Erscheinungsbildes der Anwendung beigefügt haben. Darüber hinaus wurden Rollen bewusst als Hintergrund ausgewählt, nicht miteinander harmonieren, mit einer anderen Farbe, um die zusätzliche Aufmerksamkeit des Lesers auf die Organisation von Stilblättern zu gewinnen. In Teil 2 verbessern wir das Erscheinungsbild der Anmeldung, während der HTML-Code wie in der Listing 1 angezeigt wird.

Listing 1. HTMLD-Anwendung

Meine Server

Mein Benutzeragent.

Mit einem schnellen Betrachten des vorgeschlagenen HTML-Codes können Sie die folgenden Hauptfunktionen zuweisen:

• Der Code verwendet zwei externe JavaScript-Dateien: eine JQuery-Bibliotheksdatei und eine Hilfsdatei für unsere Anwendung.
• So skalieren Sie den anzeigbaren Inhalt im Code mit dem ViewPort-Meta-Tag.
• Das Hauptstilblatt wird von der Datei netmon.css bestimmt.
• Verwenden Sie zum Bestimmen des Hilfsstilblatts den benutzerspezifischen Parameter. Je nach Wert wird das Stilblatt für iPhone, Android oder für einen Desktop-Browser geladen.
• Im Ladung einer Seite, die in der Datei netmon.js definierte Seite, JQuery- und Hilfsfunktion, die in der Datei netmon.js definiert sind, verwendet, um die Daten anzuzeigen.
• Im Hauptseitencode werden mehrere DIV-Tags verwendet.
• Schließlich gibt es im Code einen Link zur Seite, in dem die benutzerentliche Zeichenfolge angezeigt wird. Dieser Link hat nichts mit der Anwendung des Antrags zu tun und wird ausschließlich zur Demonstration verwendet.

Bevor Sie fortfahren detaillierte Katastrophe Styles- und netmon.js-Dateien, die in der Tat den Hauptbetrieb der Anwendung bestimmen, werfen wir einen Blick auf unsere Anwendung in seinem aktuellen Zustand. Beachten Sie erneut, dass wir drei verschiedene Stilblätter verwenden: eine für jede der drei unterstützten Plattformen. Damit der Anwendungsentwicklungsprozess mehr visuell war, bestimmt jede Tabelle seine Hintergrundfarbe. In Abbildung 9 ist unsere Seite im Desktop-Safari-Desktop-Browser geöffnet und hat einen blauen Hintergrund.

Abbildung 11 zeigt das Erscheinungsbild der Anwendung im Fenster des iPhone-Browserfensters (Hintergrundfarbe - grün).

Die Haupttabelle der in der Datei netmon.js gespeicherten Styles wird in der Listing 2 angezeigt.

Auflistung 2. Grundlextblatt

Körper (Farbe: # 888888; font-family: helvetica; Schriftgröße: 14px; Rand: 0px; Polsterung: 0;) .details (Rand: 0px; Polsterung: 0px; Hintergrundfarbe: Weiß; Rand: Fest; Grenze; -WEITTH: 1PX; -WEIBKIT-BORING-TOP-LINKS-RADIUS: 8PX; -WEIBKIT-BORING-TOP-RECHTS-RADIUS: 8PX; -WEIBKIT-BORN-BOGEN-LINKS-RADIUS: 8PX; -WEIBKIT-Rand-Bottom -Right-RADIUS: 8PX;) .OK (Farbe: # 000000;) .bad (Farbe: # FF0000;) .odd (Hintergrund-Bild: -Webkit-Gradient (linear, links oben, rechts, von (#ccc ), Zu (# 999));) .hebe (Hintergrundbild: -Webkit-Gradient (linear, linke Oberseite, rechts unten, von (# 999), bis (#ccc);) .serverentry a (Float: Recht; Farbe: #FFFFFFFFF;) .Serveritems (Farbe: # 000;) #ehegerät H1 (Rand: 0; Polsterung: 0; Textausrichtung: Mitte; Farbe: # 000;)

Mit Ihrer Stile-Tabelle für jede Plattform können Sie die folgenden Aufgaben implementieren:

1. Ändern Sie die Farbentscheidung der Seite. Dies ermöglicht zunächst, die Rolle des Stilblatts klar zu demonstrieren, und zweitens, um zu zeigen, wie einfach es ist, das gewünschte Stilblatt abhängig vom Wert des benutzergreifenden Parameters auszuwählen.
2. Stellen Sie eine andere Schriftgröße für Mobile- und Desktop-Plattform ein.
3. Überprüfen Sie die entsprechenden Webkit-Funktionen. Es wäre wichtig, wenn der Browser verwendet wurde, um ohne Webkit-Unterstützung zu arbeiten, beispielsweise Firefox.

Das Listing 3 zeigt die Datei Code iPhone.css.

Listing 3. iphone.css-Datei

Körper (Hintergrundfarbe: # 00FF00;) .Serverentry (-Webkit-Border-Top-Links-Radius: 8px; -Webkit-Border-Top-Right-Righ-Radius: 8px; -webkit-Bord-Bottom-Bottom-Links-Radius: 8px; -webkit-Border-Bottom-Rechtsradius: 8px;) .name (Schriftgröße: 2em;) .Summary (Schriftgröße: 1.5em;) .Serverentry A (Schriftgröße: 1.5 Uhr;)

Wie wir sehen, wird eine grüne Farbe als Hintergrundfarbe des Body-Tags (# 00FF00) verwendet, und die Schriftgröße ist für ein komfortableres Lesen vom Bildschirm Mobile Geräte konfiguriert. Schließlich werfen wir einen Blick auf die Netmon.js-Datei, die die Liste der Server und eine Funktion definiert, die jeden Server ausgibt (verwendet in der Listing 4). Ein Teil des Dateicodes für Kürze ist verpasst, der vollständige Text ist im Abschnitt verfügbar).

Listing 4. netmon.js Datei

Var netmon \u003d (Initialisieren: Funktion () (), Ressourcen: [Name: "msiservices.com", HomeURL: "http://msiServices.com", Pingurl: "http://msiServices.com/netmon.php" , Status: "OK", Zusammenfassung: "OK", Elemente: [Name: "Diskspace", Wert: "22.13 GB"), (Name: "Datenbank oben?", Wert: "Ja")] (Name: "Server 2", homeurl: "http: // orurl", pingurl: "http: //someurl/netmon.jsp", Status: "OK", Summary: "OK", Artikel: [Name: "Diskspace", Wert: "100.8 GB"), (Name: "Datenbank oben?", Wert: "Ja")], // Zusätzliche Einträge für die Kürze abgeschnitten], Render: Funktion (Index, ITM) (Versuchen Sie VAR Ret \u003d "; Ret + \u003d "

"; Ret + \u003d" "+ Itm.name +" Show.
"; wenn (itm.status! \u003d" OK ") (RET + \u003d" - "+ itm.summary +"
";) Ret + \u003d"

"; jquery.ach (itm.items, Funktion (j, itemdetail) (ret + \u003d"\u003e "+ itemdetail.name +" \u003d "+ itemdetail.Value +"
";)); Ret + \u003d"

"; Ret + \u003d"

"; Rückkehr Ret;) Fang (e) (Return

Fehler beim Rendernement ["+ itm.name +"] "+ E +"

"; } } };

Wenn die Statusleiste eines Servers nicht in OK gleich ist, wird der entsprechende Serverdatensatz rot angezeigt, wie aus der Klassendefinition in der CSS-Datei ersichtlich ist. Wenn die Statusprüfung des Servers einigen Problemen ergeben hat (Status ist nicht gleich OK), zusätzlich ausgegeben kurzbeschreibung Probleme. Die 9-11 zeigt, dass der Server 4 freie Speicherplatz fehlt. Wenn Sie auf die Zeichenfolge dieses Servers klicken, wird auf dem Bildschirm eine detaillierte Nachricht angezeigt (siehe Abbildung 12).

Wenn Sie auf den Link klicken show. Auf der rechten Seite des Servernamens öffnet sich die Homepage dieses Servers. Das Vorhandensein eines solchen Links ist aus zwei Gründen sehr praktisch: Erstens wird er von der unangenehmen Notwendigkeit lindert, die URL jedes Servers auswendig zu lernen, und zweitens spart er Sie von einem noch unangenehmeren Bedürfnis, diese URL von der Tastatur eines mobilen Geräts (gelassen selbst am bequemsten).

Wenn wir also das erfolgreiche Start von NETMON auf Ihrem mobilen Gerät erfolgreich starten, sollte die Aufgabe der Serverunterstützung keine Probleme verursachen.

Fazit

Dieser Artikel stellt die Prinzipien der Entwicklung von Webanwendungen für iPhone und Android mit der Webkit-Technologie ein. In Teil 2 erweitern wir die Funktionen unserer Anwendung, indem wir die Datenaktualisierungsfunktion mithilfe von AJAX-Anrufen hinzufügen.

Für viele von uns Entwickler, Webkit - Black Box. Wir werfen es in HTML, CSS, JS und ein Bündel von Bildern, und Webkit, irgendwie ... Magisch gibt uns eine Webseite, die aussieht und gut funktioniert.
Aber eigentlich mag es sagt mein Kollege Ilya Grigoric :

Web-Kit. ist nicht Flugschreiber. Dies ist eine weiße Box. Und nicht nur weiß, aber auch öffnen Box.

Lass uns also versuchen, in einigen Dingen herauszufinden:

• Was ist Webkit?
• Was ist das Webkit?
• Wie verwendet Webkit Webkit-Browsern?
• Warum sind Webkit-S nicht gleich?

Nun, vor allem nach der Nachricht, dass die Oper nach Webkit nachgewogen wurde, sind wir umgeben von vielen Webkit-Browsern, und es ist ziemlich schwierig zu sagen, dass sie vereint sind, und wo sie ihren eigenen Weg gehen. Ich hoffe, wir hoffen, dass wir versuchen, diese Frage ein wenig Licht zu verlieren. Infolgedessen können Sie die Unterscheidung zwischen dem Browser besser bestimmen, Fehler an den rechten Tracer senden und die Cross-Browser-Entwicklung effizienter leiten.

Standard-Webbrowserkomponenten

Lassen Sie uns mehrere Komponenten moderner Browser auflisten:

• Parsing (HTML, XML, CSS, JavaScript-Analyse)
• Layout)
• Text und Grafiken rendern
• Bilder dekodieren.
• Interaktion mit GPU.
• Zugang zum Netzwerk
• Hardware-Beschleunigung

Welcher von ihnen ist allen Webkit-Browsern üblich? Weitgehend nur die ersten beiden.

Die verbleibenden Komponenten, die jeder Webkit "Port" auf seine Weise umsetzt. Lass uns mit dem, was es bedeutet, umgehen.

Webkit-Ports.

Es gibt viele Webkit-Häfen, und ich sorge Arie Hidatyat, Webkit Hacker und diese. Regisseur in Sencha Recht, davon zu erzählen:

Die beliebteste Vereinigung von WebKit ist in der Regel der Ansicht von Webkit-A von Apple's, der auf Mac OS X (erste und originelle Webkit-Bibliothek) ausgeführt wird. Wie Sie erraten können, werden verschiedene Schnittstellen unter Verwendung verschiedener native Mac-OS-X-Bibliotheken implementiert, die sich hauptsächlich auf die COREFUNDATION-Komponente fokussieren. Wenn Sie beispielsweise einen Farbflachknopf definieren, mit einem speziellen Kreislaufradius, weiß WebKit, wo und wie diese Taste zeichnet. Gleichzeitig ist die endgültige Zeichnung der Taste (in Form von Pixeln auf dem Benutzermonitor) auf den Schultern der CoreGraphics zu Bett.

Wie bereits erwähnt, ist die verwendete CoreGraphics für jeden Port-Webkit eindeutig. Chrome für Mac-A verwendet beispielsweise Skia.

Irgendwann wurde Webkit für verschiedene Plattformen, sowohl Desktop als auch Mobile, "portiert". Diese Variation wird allgemein als "Webkit-Port" bezeichnet. Für Safari-Windows können Apple auch unabhängig voneinander einwandfreie Webkit, um unter Windows mit seiner (mit begrenzten Implementierung) COREFOUNTATION-Bibliothek auszuführen.

... Trotz der Tatsache, dass Safari unter Windows jetzt tot ist.

Darüber hinaus gab es auch viele andere "Ports" (siehe Liste der Liste). Google erstellt und schneidet, um seinen Chrom-Port zu unterstützen. Es gibt auch ein Webkitgtk basierend auf GTK +. Nokia (und jetzt TrolTech, der es verdreht hat), unterstützt den Webkit-QT-Port, der als QTWebkit-Modul beliebt ist.

Einige Ports Webkit.

• Safari.
  - Safari unter OS X und Safari unter Windows Zwei verschiedene Ports
  - Die Webkit-Nachtbaugruppe ist eine Montage des Quellcodes des Mac "Ports", der für Safari verwendet wird, nur neuer
• Mobile Safari.
  - Entwickelt in einer privaten Niederlassung, wurde jedoch später eröffnet.
  - Chrome unter iOS (verwendet Apples WebView; ein wenig später über den Unterschied)
• Chrom (Chrom)
  - Chrome unter Android (verwendet direkt "Port" Chrom)
  - Chrom ist auch die Basis für Browsern: Yandex,, Sogou und bald, Oper.
• Android-Browser
  - verwendet den neuesten Webkit-Quellcode zum Zeitpunkt der Freigabe.
• Noch mehr Häfen: Amazon Seide, Delphin, Blackberry, Qtwebkit, Webkitgtk +, der EFL-Port (TIZEN), WXWebkit, Webkitwince usw

Unterschiedliche Ports können sich auf verschiedene Aufgaben konzentrieren. MAC-Anschlussfokus - Trennung zwischen dem Browser und dem Betriebssystem sowie der Bereitstellung von Bindigs Obj-C und C ++ zum Einbetten der Rendering des Motors in native Anwendungen. Fokus-Chrom-Port ist vollständig auf dem Browser. Qtwebkit bietet seinen Hafen zusammen mit seiner plattformübergreifenden Anwendungsarchitektur als Rendering-Motor an.

Was ist in allen Webkit-Browsern üblich?

Sehen wir uns zunächst die allgemeinen Funktionen an, die in allen Webkit-Browsern verwendet werden:

Sie wissen, dass es lustig ist, ich habe ein paar Versuche gemacht, diesen Absatz zu schreiben. Und jedes Mal, wenn die Mitglieder des Chrome-Teams mich korrigierten, wie Sie sehen ...

1. Und zuerst zerlegen Webkit HTML-HTML gleichermaßen. Nun, es sei denn, das Chrom ist der einzige Port im Moment, wo der Support für das HTML-Analyse aktiviert ist.
2. ... gut, aber nach dem Analysieren von HTML ist der DOM-Baum gleichermaßen entworfen. Nun, in der Tat ist der Schatten-Dom nur für den Chrom-Port enthalten, dh der Bau von Dom-A variiert. Auch für benutzerdefinierte Elemente.
3. ... Nun, Webkit erstellt Fenster und Dokumentobjekte für alle gleichermaßen. TRUE, obwohl die Eigenschaften und die Umwandlung, die sie bereitstellen, von der Verwendung von Merkmalsschaltern (Feature-Flags) abhängen können.
4. ... Parsing CSS gleich. Das Essen Ihrer CSS und der Umwandlung in CSSOM ist ziemlich standardmäßig. Ja, obwohl Chrome nur -Webkit-Präfixe unterstützt, wenn Apple- und andere Browsern veraltete - khtml- und -apple -App-Präfixe unterstützen.
5. ... Layout ... Positionierung? Es ist wie Brot mit Butter. Überall gleich, richtig? Nun, schon! Subpixel-Layout und gesättigte Dumping-Arithmetik sind Teil des Webkits, unterscheidet sich jedoch vom Port zum Anschluss.
6. Super.

Es ist also schwierig.

Versuchen wir nun, zusammenzufassen, was in der Welt der WEBKIT üblich ist ...

Was ist für jeden Webkit-Port üblich?

• Dom, Fenster, Dokument
  mehr oder weniger
• CSSOM.
• Collaboration CSS, Eigenschaft / Wert
  unterschiede in den Herstellern Präfixen
• HTML-Analyse und Gebäude-Dom
  Gleichermaßen, wenn wir Webkomponenten vergessen.
• Layout und Positionierung.
  FLEXBOX, FLOATS, BLOCK BILDATION CONTEXT ... Alle Gesamtsumme
• Benutzeroberflächen-Tools und Entwickler-Tools, Typ Chrome Devtools, IT IST WEBKIT Inspector.
  Obwohl Safari von Anfang Aprils seinen eigenen Safari-Inspektor, Nicht-Webkit mit geschlossenen Quellen, verwendet.
• Funktionen wie ContentEnditable, PushState, Datei-API, den meisten SVG, Mathematik-CSS-Transformationen, Web-Audio-API, LocalStorage
  Obwohl die Implementierung abweichen kann. Jeder Port kann ein eigenes Speichersystem für LocalStorage verwenden und kann eine andere Audio-API für die Web-Audio-API verwenden.

Es wird nicht völlig klar, also versuche es, einige Unterschiede anzusehen.

Das ist jetzt nicht üblich, dass Webkit-Ports nicht üblich sind:

• Alle mit GPU verbunden
  - 3D-Transformation
  - webgl.
  - Video dekodieren.
• Rekrutierung von 2D auf dem Bildschirm
  - Glättungstechnik.
  - Rendering SVG- und CSS-Gradienten
• Rendering Text und Transfers
• Netzwerktechnologien (SPDY, PRE-Rendering, WebSockertransport)
• Javascript-Engine.
  - JavaScriptCore-Engine liegt im Webkit-Repository. Es gibt jedoch Bindungen in Webkit und für ihn und für V8.
• Rendering der Elemente des Formulars
• Das Verhalten von Tags Video- und Audio- und Support-Codecs
• Bilder dekodieren.
• Navigation zurück / vorwärts
  - Teil Pushstate ()
• SSL-Funktionen wie strikte Transportsicherheit und öffentliche Schlüsselpins

Schauen wir uns einen von ihnen an: 2D-Grafiken. Hängt vom Port ab, wir verwenden völlig andere Bibliotheken zur Rendering auf dem Bildschirm:

Oder wenn Sie Details eingehen, wurde die neu hinzugefügte Funktion: CSS.Supports () wurde für alle Ports aktiviert, mit Ausnahme von Win und WinCairo, für die CSS3 CSS3-bedingte Funktionen) enthalten sind.

Nun sind wir in technischen Details ... Zeit, um pedantisch zu werden. Sogar das Obige ist nicht ganz richtig. In der Tat ist es eine Webcore, ist eine gemeinsame Komponente. Webcore ist ein Layout, Rendering und eine Dom-Bibliothek für HTML und SVG und hauptsächlich, was die Leute denken, wenn sie Webkit sagen. Tatsächlich ist "webkit" technisch eine Schicht der Bindung zwischen Webcore und "Ports", obwohl dieser Unterschied in der üblichen Gespräche hauptsächlich nicht wichtig ist.

Das Diagramm sollte helfen:

Viele der Webkit-Komponenten sind umschaltbar (von grau gezeigt).

Beispielsweise ist JavaScript der Webkit-A-Engine, JavaScriptCore, ist der Standard-Motor in Webkit. (Zunächst basiert er sich auf KJs (von KDE) von Tagen: Wenn der Webkit als KHTML-Zweig begann. Gleichzeitig wechselt der Chrom-Port in den V8-Motor und verwendet einzigartige DOM-Bindungen.

Schriftarten und Rendern von Text sind ein sehr großer Teil der Plattform. In Webkit gibt es 2 separate Pfade für Text: schnell und komplex. Beide erfordern Support, der für die Plattform spezifisch ist (auf der Portseite implementiert), aber schnell sollte es nur wissen, wie man mit der Reduzierung von Glyphen (welche Webkit-Caches für die Plattform für die Plattform) ernen , Bitte."

"Webkit ist wie ein Sandwich. In anderen Angelegenheiten, im Fall von Chromium, ist es eher so. Leckere Tacos von Web-Technologien.
Dmitri Glazkov, Chrome Webkit Hacker. Champion von Webkomponenten und Shadow dom.

Nun, lasst uns die Überprüfung erweitern und sich auf mehrere Ports und mehrere Subsysteme ansehen. Nachfolgend finden Sie fünf Webkit-Ports, achten Sie darauf, wie sich das Toolkit trotz der allgemeinen Komponenten für jeden von ihnen unterscheidet:

	Chrome (OS X)	Safari (OS X)	Qtwebkit.	Android-Browser.	Chrom für ios.
Rendering.	Skia.	CoreGraphics.	Qtgui.	Android-Stapel / Skia	CoreGraphics.
Vernetzung.	Chrom-Netzwerkstapel.	CFNetwork.	Qtnetwork.	Gabel des Network Stack von Chromium	Chromstapel
Schriftarten	Coretext über Skia.	Coretext	Qt internals.	Android-Stapel	Coretext
Javascript	V8.	JavaScriptCore.	JSC (V8 wird an anderer Stelle in qt verwendet)	V8.	JavaScriptCore (ohne Jissing) *

* Fußnote über Chrome für ios. Er verwendet UiWebView, wie Sie es wahrscheinlich wissen. In Übereinstimmung mit den Möglichkeiten von UiwebView bedeutet dies, dass es nur das gleiche Rendern des Motors sowie der mobilen Safari, JavaScriptCore (und nicht V8) und ein-Gewindemodell verwenden kann. Jetzt wird ein Code aus Chrom geliehen, z. B. ein Subsystem für das Arbeiten mit einem Netzwerk, Synchronisationsinfrastruktur-Lesezeichen, Omnibox, Metriken und Misserfolgsberichten (Crash-Reporting). (Auch JavaScript ist so selten ein Engpass auf mobilen Geräten, das das Fehlen eines rasenden Compilers minimal beeinflusst.)

Ich sehe oft die Eigenschaften auf Websites für einen bestimmten Browser. Zum Beispiel die Eigenschaft " -Oz-Foz-Border-Linksfarben", Angabe der Farbe des linken Rahmens am Element für Feuerfuchs.. Wundern wir uns, warum Sie dies nicht tun sollten, und ich werde nur den einzigen Fall angeben, wenn -Moz, -ms, -webkit und Analoga Sie können verwenden.

Ich werde nicht besonders sagen, dass alle diese Eigenschaften nicht in der Norm enthalten sind CSS.Und sind daher nicht gültig. Infolgedessen kann ihre Implementierung jederzeit geändert werden (wenn Sie die Entwickler von Browsern in Betracht ziehen, weil die Beschreibungen dieser Eigenschaften im Standard CSS. Nein), dadurch kann Ihre Website sehr verwöhnt sein. Ich werde nicht besonders erklären, warum sie die allgemeine Art des Codes verderben. All dies ist so verständlich.

Es ist besser, die Gründe herauszufinden, warum diese Eigenschaften verwenden. Und die Gründe hier sind zwei:

1. Keine Cross-Crossschaft.. Ich kann sicher sagen, dass das Problem des Kreuzbrowsers bereits in der Vergangenheit ist. Nur das Problem des schlechten Qualitätslayouts blieb. Alle modernen Browser werden ausreichend alles behandelt. Minimale Missverständnisse (zum Beispiel, grenzradius in der Eingabe in Opera) können leicht durch einen alternativen Ansatz für die Aufgabe gelöst werden, wenn alle Browser gut angezeigt werden sollen, ohne " hakov". Und dieses Problem ist kein Grund, die" linken "Eigenschaften zu verwenden.
2. Unterstützung für ältere Browser. Und vorgedacht mehr", nicht nur alt. In alten Browsern gab es keine diese Eigenschaften, und es gab keinen Messenger. Um die Sinnlosigkeit zu verstehen, lohnt es sich, die Statistiken von Browsern zu sehen. Irgendwo 95% Das Publikum ist auf modernen Browsern. Der Rest 5% Genießen, es ist nicht klar als. Säulencode, den Sie bekommen gute Aussicht immer noch von der Kraft an 1% Browser Daher ist es jetzt besser oder zieht eine Nachricht zurück, dass es sich lohnt, den Browser zu ändern ( jquery. Es gibt Plugin. jrejekt.was macht es) oder ignorieren einfach. Darüber hinaus bezweifle ich das dringend daran, darunter 5% Viele Menschen sind höchstwahrscheinlich die Mehrheit, die es Bots gibt, die beliebige Schlagzeilen über den Kunden geben. Und alte Bots können dasselbe geben IE6.. Gleiches hier umfasst diejenigen, die ihre Websites in alten Browsern weiterhin testen.

Daher verwenden Sie CSS3., gibt es schon alle Möglichkeiten da, und es ist nur zu sehen 95% Publikum.

Ich habe jedoch versprochen, zu sagen, wann Eigenschaften -moz, -ms, -webkit und andere, kann verwendet werden. Es ist notwendig, wenn Sie möchten, ein wenig anderes Design für verschiedene Browser. Und vorgedacht wenig", und wenn Sie alles vollständig ändern müssen, ist es einfacher durch Javascript Bestimmen Sie den Browser und verbinden Sie sich separate Datei. Stile Ehrlich gesagt kam ich nicht auf eine solche Aufgabe, aber das ist das einzige, was mir passiert ist, um irgendwie zu rechtfertigen lyland"Eigenschaften CSS..

In Safari in iOS 11 fügte Apple mehrere neue Funktionen hinzu, die es dem Browser ermöglichen, verschiedene Inhalte auf dem Gelände besser anzuzeigen und ihre Arbeit zu beschleunigen. Aktivieren Sie sie einfach - Sie müssen zu den Einstellungen\u003e Safari\u003e Add-Ons\u003e experimentelle Funktionen gehen:

Natürlich ist es unmittelbar incomprogensible, für die jeder Artikel verantwortlich ist. Wir werden sie näher analysieren:

• Konstante Eigenschaften. - Erlaubt es Ihnen nicht, die Einstellungen auf Webseiten mit unterschiedlichen Einstellungen zu ändern. Mit anderen Worten, es wird verhindert, dass sie die Website ändern oder seine Eigenschaften nach dem Download ändern kann.
• CSS-Anzeige: Inhalt - Ermöglicht das Verwalten der Generierung des Elementfelds. Zum Beispiel können Sie damit einheitliche Einrücken zwischen verschiedenen Elementen auf dem Gelände ohne "Krücken" machen.
• CSS-Frühlingsanimation. - Natürlich hat nichts mit dem Frühling zu tun, hat jedoch nur mit der Animation von Elementen auf Websites aus der Sicht der Physik.
• Link Vorspannung. - Nein, es hat keine Beziehung zu Vorlade-Links, diese Funktion ist hauptsächlich so ausgelegt, dass er nach der syntaktischen Analyse vorgeladene Ressourcen verhindert wird.
• Entfernen Sie ältere Webrtc-API- Im Allgemeinen ist es auch klar, löscht das alte WEBRTC (Funktion zum Übertragen von Daten zwischen dem Browser und der Punkt-zu-Punkt-Befestigungsanwendung. Beispiel - Sie öffnen den Link in der VK-Anwendung - er öffnet in Safaris Kopien mit der WEBRTC-Technologie in Safari ).
• Sichere Kontexte-API. - Die Funktion, deren Wesen - sicherstellen, dass die Daten auf dem Gerät an ein sicheres Protokoll (HTTPS) geliefert wurden und nicht von Eindringlingen abgefangen wurden.
• Subresourcetegrity. - Ein weiteres Merkmal für die Sicherheit. Seine Essenz - der Eigentümer der Ressource kann ihren kryptographischen Hash angeben, der dann mit Hash überprüft wird, berechnet, um nach dem Laden der Ressource auf dem Gerät selbst zu berechnen.
• Ansichtsfenster fit. - Ermöglicht das Ändern von Websites, um die Größe der Grafikelemente für die physikalische Größe des Gerätebildschirms zu ändern (dh theoretisch, wenn die Site dies unterstützt, wird er nicht nach den Kanten seiner Elemente gesucht).
• Webanimationen. - Hier ist alles offensichtlich, die Einbeziehung der Animation auf Websites. Bei der Verbindung kann es eine kleine Produktivität dauern.
• WebGPU. - Ermöglicht das Benutzern grafikprozessor Zur Informationsverarbeitung an Websites. Kann die Arbeit des Browsers mit gesättigten Zeitplankorten beschleunigen, verursachen jedoch eine erhöhte Geräteheizung und reduzieren die Lebensdauer der Batterie.
• Async-Rahmen-Scrollen. - Scrollen, nicht von der Anzeigenaktualisierungsfrequenz betroffen. Anscheinend ist es für neue Geräte aus dem Bildschirm von 120 Hz erforderlich, um Verzögerungen an Websites zu vermeiden, an denen sie nicht 120 fps geben können. An den alten 60 Hz-Bildschirmen ist der Unterschied nicht wahrnehmbar.

Reservieren Sie sofort eine Reservierung - die genaue Beschreibung von einigen apple-Funktionen Ich habe nicht zur Verfügung gestellt, und ich habe eine Beschreibung von anderen Browsern genommen, daher kann es sich nicht ganz auf Safari ansprechen.

Zum Zeitpunkt des Schreibens dieses Artikels war Safari auf iOS der schwierigste Browser. Wie bereits in Kapitel 7 nicht angegeben, unterstützt EOS mit Version 2.0 eine große (und seltsame) CSS-Erweiterungsgruppe, mit der es uns erlaubt, Hardware-beschleunigte Animationen, Übergänge und sogar 3D-Effekte zu verwenden. Einige dieser Erweiterungen, abhängig von der Version des Betriebssystems, funktionieren auch mit Android- und WebOS-Browsern.

Webkit-Funktionen

Viele CSS-Eigenschaften als Parameter wahrnehmen Funktionen. Diese Funktionen sind hardwarterbeschleunigte Webkit-Erweiterung.

Die mit der Gradientenfunktion in iOS verbundenen Funktionen werden nicht offiziell unterstützt (gemäß der Safari-Referenzbibliothek). Trotzdem arbeiten sie mit OS 3.0- und älteren Geräten, in denen sie einen einfachen Hintergrund verwenden.

Tabelle 9.7 listet die für das iPhone verfügbaren Funktionen auf (es gibt andere, aber sie arbeiten nur in der Desktop-Safari). Einige dieser Funktionen - zum Beispiel, skalieren und drehen - können auch in Android- und WebOS-Browsern verwendet werden.

Tabelle. 9.7. Tabelle CSS. Funktionen in Safari auf iOS erhältlich

Funktion	Beschreibung
kubik-Beiber (P1X, P1Y, P2X, P2Y)	Definiert die Bezier-Kurve für die Timing-Funktion.
matrix (M11, M12, M21, M22, TX, TY)	Bestimmt die Transformationsmatrix von sechs Werten mit zwei Verschiebungen.
matrix3D (M00, M01, M02, M03, M10, M11, M11, M13, M20, M21, M22, M23, M21, M22, M23, M30, M31, M31, M33)	Bestimmen Sie die Transformations-3D-Matrix 4 × 4.
perspektive (Tiefe)	Kuba-Betrachtungskarten auf der Pyramide, der Grundlage, deren Fundament weit vom Betrachter entfernt ist.
drehen (Winkel)	Bestimmt 2D-Rotation um den Ursprung der Elementkoordinaten.
rotate3d (x, y, z, Winkel)	Bestimmt die 3D-Rotation mit der Drehrichtrichtung.
rotatex (Winkel)	Zeigt die Drehung im Uhrzeigersinn um die Achse X an.
dreißen (Winkel)	Zeigt die Drehung im Uhrzeigersinn um die y-Achse an.
rotatez (Winkel)	Zeigt die Drehung im Uhrzeigersinn um die Z-Achse an.
maßstab (Scalex,)	Führt den 2D-Skalierungsvorgang durch.
scale3d (skalex, scaley, scalez)	Führt 3D-Skalierungsvorgang durch.
scalex (Wert)	Skalierung entlang der x-Achse
skala (Wert)	Skalierung entlang der y-Achse.
skalenz (Wert)	Skalierung entlang der Z-Achse.
skewx (Winkel)	Durchführen einer abgeschrägten Transformation entlang der X-Achse
skewy (Winkel)	Durchführen einer abgeschrägten Transformation entlang der Y-Achse.
Übersetzen (Delgtax,)	Gibt den Vektor-2D-Offset an.
translate3d (delgtax, deltay, deltaz)	Gibt den 3D-Offset-Vektor an.
translatex (Wert)	Eigener Versatz um die Achse x.
translaty (Wert)	Es zeigt um die y-Achse.
translatez (Wert)	Es zeigt um die Z-Achse.
von (Farbe)	Bestimmt die Anfangsfarbe in der Reihenfolge.
färben)	Bestimmt die endgültige Farbe in der Reihenfolge.
farbstopp (STOP_PERCENTAGE, Farbe)	Gibt die Zwischenfarbe an, die in der Reihenfolge im STOP_PERCENTAGE-Wert verwendet werden soll.
-Webkit-Gradient (linear, start_function, end_function,)	Gibt einen linearen Gradienten mit dem Ausgangspunkt, dem Endpunkt und zusätzlichen Zwischenpunkten an. Kann anstelle von jedem Bild in CSS verwendet werden. Erhältlich von iOS 3.0.
-Webkit-Gradient (radial, inner_center, inner_radius, äußerst_center, äußerer_radius,)	Bestimmt einen radialen Gradienten mit einem zentralen (internen) Punkt und einem anderen Punkt (externen) mit Blüten, die von der Reihe der Farbstoppfunktion bestimmt werden. Erhältlich von iOS 3.0.

CSS-Funktionen sind keine neue CSS-Funktion, sie sind in jedem Browser verfügbar. In den Fall sind Sie wahrscheinlich bereits mit einigen Standardfunktionen vertraut - dieselbe URL (URL_String) oder RGBA (rot, grün, blau, alpha) - um die Farbe zu bestimmen.

Steigungen

Beginnend mit iOS 3.0 unterstützt Safari die Erweiterungen des CSS-Gradienten als Funktion für diese Situationen, in denen wir ein Bild verwendet haben (zum Beispiel für den Hintergrund). Für den Hintergrund, anstelle der URL-Funktion können Sie die Funktion -Webkit-Gradientenfunktion verwenden, um die Verwendung von linearem oder radialer Farbverlauf Als Hintergrund. Mit dieser Methode können wir den Mindestcode verwenden, wirklich gute Hintergründe für Schlagzeilen, Container und Zellen tun. Zum android-Browser Genau den gleichen Code anwenden.

Einige Beispiele für die Definition des Gradienten:

/ * Die Wirkung der Sonne aus dem rechten oberen Winkel * / Körper (Hintergrund: -Webkit-Gradient (radial, 50% -50, 0, 50% 0, 300, von (# 676767), bis (schwarz)) schwarz ;) Körper (Hintergrund: -Webkit-Gradient (radial, 100% -10, 50, 70% 0, 200, aus (gelb), bis (weiß)) #ffc;) / * Einfache lineare Gradient * / Li (Hintergrund : -Webkit-Gradient (linear, 0% 0%, 0% 100%, aus (# 369), bis (# 3ff)) # 369;) / * Einfacher 3D-Effekt * / h1 (Hintergrund: -Webkit-Gradient ( Linear, 0% 0%, 0% 100%, aus (# 369), bis (# 369), Farbstopp (0,5, # 58b)););)

Für Positionswerte können wir Zinsen, absolute Werte (ohne Pixel) oder obere, untere, rechte und linke Konstanten verwenden. Als der zweite Parameter der CSS-Funktion können wir beispielsweise oben rechts und nicht 0% 0% verwenden. Abbildung 9.1 zeigt, wie diese Optionen in den Browser aussehen können.

Feige. 9.1. Verwenden von nur CSS können Sie verschiedene Gradienteneffekte für iPhone, iPod Touch, iPad und Android-Datenbank erstellen.

Der mobile Internet-Explorer mit Version 6.0 unterstützt Filter und Übergänge mit der CSS-Erweiterung mit dem Filterstil. Sie können andere Effekte anwenden.

Reflexionseffekte

Reflexionseffekte oder Spiegeleffekte sind eine der am häufigsten verwendeten Effekte in Web 2.0-Projekten. Diese Effekte können für jeden Inhalt verwendet werden, einschließlich für Bilder. Vergessen Sie jedoch nicht, dass wir uns für mobile Geräte mit ihren kleinen Bildschirmen entwickeln, und hier sollten Sie nicht zu viel Platz ausgeben.

Die Reflexion des ursprünglichen Elements ändert das Layout oder die Größe des Quellblocks des Gehalts des Elements nicht. Dies ist Teil des Containerüberlaufs.

Um den Effekt der Reflexion in Safari auf iOS vorzunehmen, verwenden Sie die Eigenschaft mit der folgenden Syntax:

Webkit-Box-reflektieren: Richtungsversatz ;

richtung kann sich oben, unten links oder rechts befinden; Offset - Abstand (in PX oder%) aus dem Quellelement, deren Reflexion erscheinen sollte; zusätzlich - Es ist normalerweise eine Gradientenfunktion, die als Maske funktioniert, um das Bild wiederzugeben. Wenn das Bild der Maske nicht angegeben ist, wird der übliche Spiegel verwendet.

Die Art des Reflexionseffekts, der normalerweise auf Web 2.0-Sites verwendet wird, die folgenden Attribute:

Webkit-Box-reflektieren: unter 3px -webkit-Gradient (linear, linke Oberseite, links unten, aus (transparent), Farbstopp (0,5, transparent), zu (weiß));

Masken von Bildern.

Beginnend mit iOS 3.0 haben wir Zugriff auf eine typische Designerfunktion, die in der Webentwicklung seit vielen Jahren abwesend war: Bildmasken. Bildmasken Wir können verwenden, um ein korrektes oder falsches Trimmen anzuwenden, oder wenn eine Alpha-Maske (oder eine Gradientenfunktion) für jedes Bild verwendet wird, um einen kühlen visuellen Effekt (z. B. Fuzzy-Rand) zu erstellen. Die Eigenschaften der Maske ähneln den Hintergrundeigenschaften. Um die Maske zu verwenden, haben wir eine abgekürzte Eigenschaft einer Verknüpfung und spezifische Eigenschaften, um jeden Parameter zu ermitteln.

Syntax der Shortcut-Version mit optionalen Parametern:

Webkit-Maske: Anhang, Clip, Ursprung, Bild, Wiederholen, Verbund, Kastenbild;

Natürlich haben wir einen separaten Zugang zu allen Eigenschaften (usw.). Es gibt viele Möglichkeiten, aber normalerweise wird das Bild (Alpha oder nicht, PNG oder SVG) oder die Funktion des Gradienten als Bildwert verwendet. Beispiel:

Überleitung

Übergang ist eine automatische Animation, die sich manifestiert, wenn der CSS-Wert die Eigenschaften ändert. Die Immobilie muss vom Browser als Animation ermittelt werden (bezieht sich normalerweise auf die Eigenschaften von Position und Größe). Offizielle Liste. Eigenschaften, die möglicherweise nicht mit Animation arbeiten, aber im Allgemeinen ist die Position so: Jede Eigenschaft mit zahlenwerte oder Farbwerte können mit dem Übergang animiert werden. Es gibt mehrere Ausnahmen, beispielsweise eine diskrete Eigenschaft.

Denken Sie daran, dass diese Offsets nur von CSS implementiert werden: Um eine Animation zu erstellen, verwenden wir kein JavaScript oder eine andere ähnliche Methode. Vielleicht scheint es Ihnen seltsam, aber es ist einfach und gleichzeitig eine leistungsstarke Methode.

Das Transog-Framework ist für Safari-Browser (beginnend mit iOS 2.0) und Android und außerdem auf diesen Geräten, auf diesen Geräten, beim Arbeiten mit dem Übergang darüber verfügbar.

Um den Übergang zu implementieren, müssen wir:

1. Bestimmen Sie die Übergangseigenschaften (Dauer, Verzögerung, wobei die Synchronisationsfunktion verwendet wird) für ein Element (-Th), das wir animieren möchten.
2. Ändern Sie die Werte der Eigenschaften der Elemente (en) für Animation mit JavaScript oder wenden Sie die Klassen aus oder entfernen Sie sie vollständig vom Element.
3. Stellen Sie sicher, dass die Animation funktioniert.

Richtig, es klingt nur? Jetzt lass uns tun.

Animationseigenschaften

Animation kann mit der Eigenschaft mit der folgenden Syntax definiert werden:

Webkit-Übergang: Eigenschaftsdauer Timing_Function-Verzögerung [, ...];

Wir können auch die in Tabelle 9.8 angegebenen spezifischen Eigenschaften verwenden.

Tabelle. 9.8. Tabelleneigenschaften Übergang für WebKit

Eigentum	Beschreibung
	Bestimmt, welche Eigenschaft oder Eigenschaften für die Animation verwendet werden. Sie können eine Liste von Werten verwenden, die durch Kommas oder konstante Werte getrennt sind.
	Bestimmt die Dauer des Übergangs. Der Wert kann 0 (keine Animation) oder ein positiver Wert in Sekundenschnelle sein (S wird als Einheit verwendet). Wenn für jede Eigenschaft verschiedene Zeiten festlegen möchten, können Sie in derselben Reihenfolge eine Liste der Split-Werte in derselben Reihenfolge wie die Werte für die Eigenschaft -Webkit-Übergangs-Eigenschaft verwenden.
	Bestimmt die Funktion, die zur Berechnung verwendet wird zwischenwerte Zwischen den Anfangs- und Endwerten der Eigenschaft. Sie können die CSS Cubic-Bezier-Funktion oder eine der folgenden Konstanten verwenden: Leichtigkeit, linear, einfach, leichter, leichter und einfacher (meistens verwendet).

Mit dem folgenden Code wird die Animation des Erscheinungs- und Verschwindens implementiert

Fading.

Wir können die gleichen Übergänge verwenden, um die Größe, den Umzug, die Farbänderung und auch für 3D-Verschiebungen zu ändern.

Fertigstellung des Übergangs.

Abschluss des Übergangs, auf dieselbe Weise, wie jedes andere DOM-Ereignis mit JavaScript-AddVentlistener implementiert werden kann. Wenn Sie sicherstellen, dass die Animation wirklich vorbei ist, können Sie den Anfang des nächsten Übergangs oder einer anderen Aktion initiieren. Dazu müssen wir das WebkitTransporterereignis fangen. Machen Sie es uns mit dem folgenden Code:

Box.addeventListener ("webkitTranitionend", Funktion (Ereignis) (Benachrichtigung ("Fertigübergang");););

Animation

Der Übergang ist eine tolle Sache und der einfachste Weg, die Animation weiterzuleiten iPhone-Geräte Und Android. Wenn Sie eine genaue Kontrolle über die Animation auf der Keyframe-Ebene benötigen, können Sie das CSS-Framework für Animation verwenden. Um ehrlich zu sein, denke ich, dass es bereits nur für die Bearbeitung nur über CSS, eine nicht mehr als "nicht kennzeichnende" Sprache ist. Aber es funktioniert gut.

In Webkit erfolgt die Animation mit der Eigenschaft und der Syntax wie folgt:

Webkit-Animation: Name Dauer Timing_Function Verzögerung Iteration_Count-Richtung

Wie bereits, wahrscheinlich erraten, für jeden möglichen Wert, der in Tabelle 9.9 aufgeführt ist, gibt es spezielle Eigenschaften.

Tabelle. 9.9. Animationstabelle für Webkit

Eigentum	Beschreibung
	Definiert den Namen der Animation, die von Keyframes verwendet wird.
	Bestimmt die Dauer der Animation (in Sekunden- oder Millisekunden).
	Bestimmt die Funktion, mit der die Zwischenwerte zwischen den Anfangs- und Endwerten einer bestimmten Eigenschaft berechnet werden. Sie können die CSS Cubic-Bezier () -Funktion oder eine der folgenden Konstanten verwenden: Leichtigkeit, linear, Leichtigkeit, Easy-Out und Easy-In-Out (am häufigsten verwendet).
	Bestimmt die Animationsverzögerung, die aus dem Moment an beginnt, in dem die Eigenschaft geändert wird. Kann in Sekunden- oder Milisekunden bestimmt werden; Der Standardwert ist 0. Wenn ein negativer Wert verwendet wird - die Animation beginnt sofort, aber ein Animationsfragment wird bereits verloren und dementsprechend übersprungen.
	Bestimmt, wie oft die Animation wiederholt wird. Der Standardwert hier ist 1, als Wert kann eine beliebige Ganzzahl, eine spezielle unendliche Konstante oder eine gültige Zahl sein.
	Bestimmt, in welcher Richtung die Animation abgespielt wird.

Nachdem Sie mit dieser Liste verstanden haben, müssen Sie sich genau fragen, wo die Animation ermittelt wird? Was fungiert als Animationsobjekt? Um diese Fragen zu beantworten, helfen Sie den Webkit-Erweiterungen für das Schlüsselpersonal.

Wenn Sie das Objekt bewegen oder verkleiden und möchten, ist es außerdem besser, es anstelle der Standard-CSS-Eigenschaften zu verwenden - eine Eigenschaft mit verbesserter Leistung.

Keyframe-Richtlinie.

Um zu bestimmen, wie die Animation funktioniert und was genau passiert, müssen Sie ein spezielles CSS definieren, in dem diese Regel aufgerufen wird. Diese Regel wird vom Animationsnamen begleitet, der in -webkit-Animation-Name definiert ist.

In der Keyframe-Richtlinie können Sie angeben, wie viel Sie Selektoren oder Animationsgruppen als Schlüsselrahmen benötigen. Der Selektor wird durch den prozentualen Wert und die von den Konstanten (entspricht 0%) bestimmt und (äquivalent bis 100%). In jedem Selektor definieren wir alle Eigenschaften und Werte für einen bestimmten Animationspunkt. Mit -Webkit-Transagition-Timing-Funktion können wir die Synchronisierung für jede Animationsgruppe definieren.

Nach Abschluss der Animation werden Anfangswerte wiederhergestellt. Nach dem Stoppen der Animation speichern die Elemente die Werte des letzten Keyframe nicht.

Mit Hilfe des nächsten Codes bewegen wir beispielsweise die Quadrat-Flugbahn:

Quadratische Flugbahnbewegung.

Wenn wir die Attribute -Webkit-Animation zu Beginn des Elements angeben, beginnt die Animation, wenn die Seite geladen wird. Es ist besser, die Animation als Klassiker zu ermitteln und diese Klasse an den Artikel anzuwenden, wenn Sie die Animation starten müssen.

Für den Beginn der Animation verwenden wir also die Klasse, und wenn wir die Animation früher anhalten möchten, als der letzte Frame gespielt wird, müssen wir der Eigenschaft -Webkit-Animation-Namenseigenschaft einen leeren Wert zuweisen.

Sie können mehrere Optionen verwenden: Eine Animation, die mehrere Eigenschaften gleichzeitig ändert oder gleichzeitig verschiedene Animationen (mit unterschiedlichen Namen) anwenden, von denen jeder nur eine Eigenschaft ändert.

Animationsereignisse

Wie bei den Versatzübergängen können wir die Webkitanimationstart, WebKitanimationItemation, WebKitanimationend Events verfolgen können. Wenn Sie starten, werden diese Ereignisse als WebkitanimationEvent-Objekt als Parameter gesendet. Für jede Änderung des Schlüsselrahmens des Ereignisses gibt es jedoch kein Ereignis.

Das Ereignisobjekt verfügt über spezielle Eigenschaften von AnimationName und ELACSEDTIME, deren Werte in Sekunden angegeben sind.

Transformation

Die letzte Gruppe von Webkit-CSS-Erweiterungen, die wir berücksichtigen - die Konvertierungsfunktionen (Transformation). Um visuelle Effekte zu erzeugen, ohne Bilder, Leinwand oder SVG zu verwenden, können wir diese Funktionen an jedes Element anwenden. Konvertierungsfunktionen funktionieren in Safari-, Android- und WebOS-Browsern.

Die Arbeit mit diesen Funktionen ist sehr einfach: Wir verwenden CSS-Eigenschaft Verwenden der CSS-Funktion als Wert, mit dem wir bereits früher in diesem Abschnitt getroffen haben, z. B. drehen, skalieren oder translate3d (letzte nur Safari).

Eine vereinfachte Version der Kard-Flip-Vorlage sieht so aus:

Wenn Sie den Code analysieren, sehen wir zwei DIV-Elemente, die unsere Karte ausmachen - element.card. Eine div ist "vordere" Oberfläche, der andere ist "hinten". Beide Oberflächen befinden sich an derselben Position (als absolute Elemente) und die Rückseite beginnt, wenn die Y-Achse 180 Grad beträgt.

Wenn der Benutzer auf den Kartencontainer klickt (mit dem angezeigten Front- oder Heckbildschirm) javascript-Hilfe Anwenden (oder nicht auftragen) CSS-Klasse, die ein Element 180 Grad um die Y-Achse dreht. Und Voila! Vorne (vorne) wird immer nur eine Oberfläche angezeigt, und der andere wird automatisch ausgeblendet. Und ich werde es mit einer schönen geglätteten Animation erfahren, die Sie leider in Abbildung 9.3 nicht vollständig bewerten können.

Feige. 9.3. Mit 3D-Turn können Sie hervorragende 3D-Effekte verwenden, um die hintere Linie des Elements anzuzeigen.