Was ist Cross Browser? Crossbrawser-Layout in modernen Bedingungen - ein allgemeines Verständnis des erforderlichen Prinzips

Das Thema wurde als alles an sich gesammelt berühmte Methoden Crossbox Brown-Layout und etwas interessant, ziemlich selten angetroffen.

Vorwort. Warum es passiert ist

Nach dem Erscheinungsbild im Jahr 1994 wurde einer der ersten erfolgreichen Netscape-Navigator-Browser auf der Grundlage des ersten Browsers mit grafikhülle Mosaic, das Grabing von Microsoft beschloss, seinen Browser zu erstellen, und nannte es Internet Explorer. Die erste und zweite Version von IE wurden mit Microsoft PLUS!, Ergänzungen ergänzt windows-Funktionenaber nicht weit verbreitet. Dann entschied sich Microsoft, radikal anders aus dem IE 1.0- und 2.0-Browser zu entwickeln, welche Unternehmen Programmierer von Spyglas stammten, die sich entwickelte neuer Browser Basierend auf dem Mosaik. Daher erschien 1996 Internet Explorer 3.0. Die im Browser eingeführten Entwickler, die mit den Normen der HTML-Erweiterung nicht kompatibel sind, die anschließend von der Version an die Version gespeichert wurden. Die anschließende parallele Entwicklung von IE- und Netscape Navigator führte zu dem Anfall von dh 95% des Marktes. Die Stagnation in der Entwicklung von IE von der 4.0 bis 6.0-Version, mit schlechter Unterstützung für Standards, Niedriggeschwindigkeits- und Seitenanzeige, führte zu der Wiederbelebung von Netscape in Version 6.0, die auf einem neuen Gecko-Motor geschrieben wurde. Der aktualisierte Netscape Navigator konnte keine alten Scheitelpunkte erreichen, und mit der Zeit kündigte Netscape die Kündigung der Unterstützung seines Browsers an.
Gecko-Engine diente jedoch als Grundlage für das Erstellen von Modern 2004 browser Mozilla. Feuerfuchs. 1996 erschien Opera, was seine Erfolgsgeschwindigkeit und Benutzerfreundlichkeit erreichte. In 2003. apple Company Er hat seinen Safari-Browser auf der Webkit-Engine veröffentlicht, wodurch er auf IE abgelehnt wurde, der zuvor in Mac OS verwendet wurde. Im Jahr 2008 entschied sich Google auch, das Browser-Rennen zu registrieren, freigeben Google Chrome.basierend auf demselben Motor wie Safari.
Somit hat jeder der Browser ihre eigene Geschichte, hat seine eigenen Versionen, die wiederum mit JavaScript, HTML- und CSS-Support variieren.

Bis heute beträgt der Anteil des globalen Browsermarktes: 45% für dh 31% Firefox, 15% Chrom, 5% Safari und 2% Oper.
Separat möchte ich froh sein, den Anteil auf dem Markt des ältesten und problematischen Browsers IE6 zu reduzieren, was jetzt nur 6% ist.

Crossboxrity.

Unter Cross-Browser wird als dasselbe Anzeigen und Arbeiten der Website in verschiedenen Browsern verstanden. In diesem Thema werde ich die Probleme von JavaScript in verschiedenen Browsern nicht berücksichtigen, aber ich werde auf dem Layout aufhören.

Es gibt zwei Hauptmöglichkeiten, um dieselbe Anzeige der Site in Browsern zu erreichen:

Trennung von Stilen mit bedingten Kommentaren

Die Trennung von Styles für verschiedene Browsern ist eine der häufigsten Methoden des Cross-Browser-Layouts. Das Wesentliche der Methode besteht darin, den Typ des Benutzerbrowsers zu identifizieren und den entsprechenden Stil zusammen mit dem Hauptanschluss anzuwenden.

Bedingte Kommentare verstehen nur dh, so dass der Rest der Browser diesen Code als gewöhnliche Kommentare lesen wird.

Sie können Stile festlegen, die alle Browsern sehen, außer dh:

Es ist auch möglich, die IE-Version des Benutzers zu identifizieren:
Für IE6.
für IE6 und höher
Für dh weniger als 6 Versionen
Für dh weniger oder gleich der Version 6
Für dh mehr als 6 Version
und Anschließen des entsprechenden Stils für jede IE-Version (dh Versionsnummer kann auf dem gewünschten Wert geändert werden).

Sie können vermeiden, unterschiedliche CSS-Stile für verschiedene Versionen von IE anzuschließen, dh Versionen zu definieren, und zu definieren, dh Versionen und Zuweisen von Körperklassen:

Und benutzen sie in der Zukunft im Allgemeinen Stil für jede Version:
.Ie6 .elementstyle (
Hintergrund: # 123;
}

Plus diese Methode ist die Gültigkeit ihrer Verwendung.

CSS-KHAKI.

Ein weiterer, nicht weniger häufiges Verfahren zum Cross-Browser-Layout - CSS-Khaki, das die Eigenschaften spezifischer Elemente ermitteln kann.

Für IE6:
.Elementstyle (
_Background: # 123;
}
oder:
.Elementstyle (
-Background: # 123;
}
Oder gültig:
* HTML .Elementstyle (
Hintergrund: # 123;
}

Für IE7:
* + Html .style (
Hintergrund: # 123;
}
Oder gültig:
*: First-Child + HTML. Elementstyle (
Hintergrund: # 123;
}

Für IE8:
.Elementstyle (
Hintergrund: # F12 \\ 3 /;
}

Für Firefox:
@ -Moz-Dokument-URL-Präfix () () (
.Elementstyle (
Hintergrund: # 123;
}
}

Für Safari und Chrome (ein Motor, erinnern Sie sich?):
@Media-Bildschirm und (-Webkit-Min-Geräte-Pixel-Verhältnis: 0) (
. Elementstyle (
Hintergrund: # 123;
}
}
oder
Körper: Last-Child: nicht (: root: root) .elementstyle (
Hintergrund: # 123;
}

Für die Oper ist alles komplizierter. CSS Khaki für Opera verstehen Safari und Chrome, sodass Sie einen Hack für die Oper und für Safari \\ Chrome verwenden müssen, um den Style-Rücken zu überschreiben:
@Media alle und (min-width: 0px) (
Kopf ~ Körper .Elementstyle (
Hintergrund: # 123;
}
}
Körper: Last-Child: nicht (: root: root) .elementstyle (
Hintergrund: #FFF;
}
Eine Alternative zu diesen beiden Khanku kann als interessante Weise dienen, um Stile für die Oper mit dem eingebauten Opernobjekt in JavaScript zu definieren:

Der Weg ist unzuverlässig, da er nicht funktioniert, wenn der Benutzer JavaScript deaktiviert ist.

Fazit

Lassen Sie uns zusammenfassen: Farm Große Standorte mit einer Vielzahl von Artikeln, die auf die Weiterentwicklung und Erkundung der Website zählen, ist es immer noch bevorzugt, die Trennung von Stilen zu verwenden. Es ist gültig, bequem, dies ist eine gute Tonregel. Es gibt jedoch nichts Schreckliches, um CSS-Hacks für kleine Standorte zu verwenden, zumal viele der Hacks auch die Validierung übergeben.

Abschließend werde ich sagen, dass Sie im Idealfall das Versagen der Verwendung von Hacks und Trennung von Stilen streben müssen, um Ihre Fähigkeiten im Layout zu verbessern.

Tags: HTML-Layout, CSS-Khaki

Bisher gibt es mehrere am meisten beliebte Browserwelche Menschen mit der Arbeit im Internet arbeiten. Die ständigen Kopfschmerzen eines beliebigen Webdesigners ist, dass derselbe HTML-Code auf unterschiedliche Weise in verschiedenen Browsern aussieht. Darüber hinaus sieht der einen und derselbe Code anders aus verschiedene Versionen Derselbe Browser.

Natürlich muss jeder Webmaster darauf achten, dass der Standort gleich aussieht die größte Menge. Browser Es ist diese Fähigkeit (wenn der Code gleich aussieht verschiedene Browser) und genannt "Crossbruster hTML-Layout..
Warum sieht der Standort in verschiedenen Browsern unterschiedlich aus?

Es gibt mehrere Gründe für das Auftreten. von verschiedenen Arten Standort auf verschiedenen Browsern.

1. Verwendung von nicht standardmäßigen HTML-Funktionen.

Der Designer kann die Funktionen verwenden, die nicht im HTML-Standard enthalten sind. In der Tat können Browsern viele verschiedene Tag-Attribute unterstützen, die nicht im Standard beschrieben werden. Verwenden Sie diese Funktionen, wird nicht empfohlen. Wenn ein einfacher Grund, wenn in der Norm nichts beschrieben ist, dürfen keine der Browser nicht unterstützt werden. Und die Schöpfer eines solchen Browsers sind völlig richtig. Keine Notwendigkeit, nicht standardmäßige Funktionen zu verwenden.

Überprüfen Sie immer den Code, der geschrieben wurde, um dem Standard einzuhalten.

Ich werde ein klassisches Beispiel geben. Betrachten Sie den nächsten HTML-Code der einfachsten Tabelle.

Hallo Welt

Dieser Code zeigt eine Tabelle, die aus einer Zelle besteht. Webdesigner möchte, dass die Höhe der ersten Saite dieser Tabelle 100 Pixel beträgt. Im HTML-Standard des Tags Ungültiges Höhenattribut.

In diesem Fall ist der Fehler nicht groß, da das Höhenattribut beim Tag Verstehe die meisten modernen Browser. (NUR INTEREXPLORER 4 erkennt dieses Attribut nicht). In anderen Fällen kann jedoch die Vernachlässigung des Standards zu mehr bereitgestellten Ergebnissen führen. Sicherlich waren wir alle auf Websites, an denen jedes Element entweder auf ein Neben- oder Rand kam. Jeder von uns, höchstwahrscheinlich in der Seele, dass die Site keinen Fachmann tat. Obwohl der Standort höchstwahrscheinlich nicht auf den Haupttypen von Browsern getestet wird. Sites erstellen und testen in der Regel nur in InternetExplorer, da dies der beliebteste Browser unter Benutzern ist. Daher werden wir das nächste Mal herablassend sein, wissend, warum es einen Verlust an Aussehen gibt.

Richtige Lösung Für ein Beispiel mit einem tabellarischen - Dies ist der Einsatz von Stilen. So kann der "korrekte" Code aussehen:

Hallo Welt

Diese Option Es wird (oder zumindest sollte) in allen Arten von Browsern gleichermaßen angezeigt werden.

2. Die Standardattributwerte.

Jedes HTML-Element hat viele Attribute. Dies ist die Farbe und der Abstand zu benachbarten Elementen und Ausrichtung und vieles mehr. Wenn der HTML-Code aussied ist, setzt der Designer normalerweise die Werte nur derjenigen Attribute, die für die Präsentation von Elementen auf der Seite wichtig sind. Was macht einen Browser mit den Werten unbestimmter Attribute? In diesem Fall verwenden Browser Standardwerte. Und hier liegt es die Gefahr. Die Standardwerte für verschiedene Browser können variieren. Beispielsweise kann die Standardschriftgröße unterschiedlich sein. Daher dauert der Text in einigen Browsern mehr Platz als in anderen. Was wiederum zu Unterschieden in der Seitenanzeige führen kann.

Wie kann dieses Problem gelöst werden? Erstens der Universal Tipp: Überprüfen Sie die Anzeige der Site in so vielen Browser wie möglich. Zweitens können Sie Ihre Standardwerte in der CSS-Datei für alle Elemente angeben, die auf der Seite verwendet werden. Dadurch wird der Browser von der Notwendigkeit lindert, die Werte der Eigenschaften der HTML-Elemente zu "nachdenken". Dies kann beispielsweise so erfolgen, wie folgt:
Html, körper, div, span, applet, objekt, iframe,
H1, H2, H3, H4, H5, H6, P, Blockquote, Pre,
A, Abbr, Akronym, Adresse, groß, zitieren, Code,
Del, dfn, em, font, img, ins, kbd, q, s, samp,
Klein, streik, stark, sub, sup, tt, var,
Dl, dt, dd, ol, ul, li,
Feldset, Form, Etikett, Legende,
Tabelle, titel, tborne, tfoot, thead, tr, th, td (
Marge: 0;
Polsterung: 0;
Border: 0;
Umriss: 0;
Schriftart: erben;
Schriftart: Erben;
Schriftgröße: 14px;
Schriftfamilie: erben;
Vertikal ausrichten: oben;
Hintergrund: transparent;
Schrift: Verdana, Genf, Lucida, "Lucida Grande", Arial, Helvetica, Sans-Serif;
Hintergrundfarbe: weiß;
}

Somit haben alle Elemente auf der Seite Eigenschaften, die in angegeben sind diese Datei. Wenn dies erforderlich ist, dass jedes Element der Eigenschaft von den Standardeigenschaften abweicht, müssen sie überschrieben werden.

3. "Funktionen" von einigen Browsern.

Selbst wenn der Web-Assistent jedoch nur die Standard-HTML-Funktionen verwendet, installiert seine Standardattribute für alle Elemente, die Website kann immer noch in verschiedenen Browsern anders aussehen. Dies stammt aus der Tatsache, dass Browser selbst den HTML-Standard nicht entsprechen. Browser wie jeder softwarekann Fehler enthalten. Diese Fehler werden normalerweise schnell korrigiert, aber es gibt immer die Wahrscheinlichkeit, dass der Benutzer nicht installiert ist frische version. Browser.
Es ist auch möglich, dass die Hersteller von Browsern (insbesondere diese sündige Microsoft) glauben, dass sie besser wissen, da er angezeigt werden sollte, ein oder ein anderes Element.

Da der Haupttägator von Inkompatibilitätsproblemen mit dem Standard Internet Explorer ist, wurden viele mögliche Problemumgehungen erfunden, wie sie den Standort in IE-Look sowie in anderen Browsern aussehen lassen.

Die häufigste Weise ist die bedingte Kommentare zu IE. Microsoft, als ob er mit den Problemen seines Browsers wissend ist, gab Entwicklern einen Weg, den HTML-Code nur auf einer speziellen Version von IE auszuführen. Der folgende Code verbindet beispielsweise eine spezielle CSS-Datei für den IE-Browser-Version 7 und höher: http://msdn2.microsoft.com/en-us/library/ms537512.aspx

Bedingte Kommentare haben einen einzigen Nachteil. Eine Seite, die solche Kommentare enthält, ist nicht gültig HTML-Seite.. Wie Sie sehen, verstößt Microsoft und hier den Standard.

Haben Sie jemals bemerkt, dass die Site in verschiedenen Browsern anders angezeigt werden kann? Dies ist die Bedeutung von Crossbruster-Layout.

Was ist Crossbrawser-Layout?

Crossbrawser-Layout. - Annäherung an die Entwicklung des HTML-Codes (Layout), das in allen vorhandenen Browsern korrekt angezeigt wird

Darüber hinaus ist es genau genau der genaue Speicherort aller Teile des Layouts und der Funktionalität. Die Website sollte in allen gängigen Browsern gleichermaßen aussehen:

• Feuerfuchs.
• Chrom.
• Oper.
• Opera Mini.
• Safari.
• Internet Explorer.

Die Aufgabe ist ziemlich kompliziert, wenn "bestimmte" CSS-Funktionen verwendet werden, da alle Browser einige Webseiten auf ihre Weise anzeigt. Und jede eine neue Version Enthält neue Funktionen, die in Browsern von anderen Entwicklern weit vom selben Tag implementiert sind.

Crossbox-Browser-Layout ist denjenigen bekannt, die mit dem Internet Explorer 6-Browser zusammengearbeitet haben - er hat viele Nerven auf die Verse auf Kosten seiner Einzigartigkeit verwöhnt. Und diese Einzigartigkeit wurde ausgedrückt, als dieser Browser nicht viele Regeln und Standards unterstützt. Infolgedessen war es so, dass das bractueller Layout in Firefox und Oper, einfach groß ist, einfach großartig ist und in IE6 in einem absoluten Brei einsprudelt.

Verstoß gegen die richtige Seitenanzeige

Trotz der Tatsache, dass es bestimmte Maßstäbe für den Aufbau von Webseiten der Welt gibt, führen Entwicklern ständig Unterstützung für neue Technologien und neue CSS-Regeln in Browsern ein. Auf diese Weise können Sie dynamische und funktionale Sites erstellen, um zuvor unerreichbare Funktionen umzusetzen. Jeder Entwickler verpflichtet sich, sicherzustellen, dass sein Browser die neuesten Technologien, neue Skripts und neue Bibliotheken unterstützt. Infolgedessen freut sich einige Benutzer sich in einem neuen Browser, in dem die am stärksten fortschrittlichsten Websites gut angezeigt werden, während andere nicht verstehen können, warum die Eröffnungsseite falsch öffnet. Deshalb sollte der Trigger einen Code schreiben, der in verschiedenen Browsern so gleichermaßen angezeigt wird.

Vergessen Sie nicht, dass neue Versionen von Browsern ständig erscheinen, und es wäre nicht schlecht, dass der Standort auch auf neuen Versionen ordnungsgemäß funktioniert hat.

Was Sie für ein Cross-Browser-Layout benötigen - Werkzeuge

Das Crossbrawser-Layout sollte in den modernen und veralteten Browsern die richtigste Anzeige sorgen. Dafür muss der Verbikter einen Code erstellen, der für den meisten verwendeten Browser geeignet ist, einschließlich wenig bekannt. Er wird bestimmte Kenntnisse und Fähigkeiten benötigen, die er im Prozess des Studiums seines Falls erworben hat.

Konventionelle Tische, die Unterschiede in der Wahrnehmung einzelner Elemente verschiedener Browser zeigen. Das heißt, um ein Querbrowser-Layout durchzuführen, benötigen wir:

• Allgemeines Wissen über das Layout;
• Wissen im Bereich der Layout-Funktionen unter bestimmten Browsern;
• Mehrere Browser auf einem Computer;
• Überprüfen Sie den Service browsershots.org

Übrigens wäre es schön, auf Ihrem Computer zu erstellen virtuelle MaschineInstallieren Sie es betriebssystem Und um die alten Versionen von Browsern herunterzuladen, verwenden viele noch alte Software, die moderne Technologien nicht versteht.

Mit dem Kunden müssen eine separate Arbeitsplatzfront abgehalten werden. Er muss erklären, dass in der Welt des Webdesigns nichts perfekt ist, und dass einige Momente spenden müssen. Die Aufgabe der Designer und des Programmiers-Teams wird zur Erstellung einer Website, die den folgenden Absätzen entsprechen muss:

• Maximale Einhaltung der ursprünglichen Layout und Wünsche des Kunden;
• Maximales korrektes Display in allen gängigen Browsern;

Im Prozess des Erstellens eines Cross-Browser-Layouts im Code legt die Attribute von HTML-Elementen standardmäßig fest, die bereits in der Anfangsphase mit der falschen Anzeige auch die einfachsten Layouts zukünftiger Websites loswerden können. Als nächstes ist die Ausrichtung von Tags unter Berücksichtigung der Kompatibilität des Codes in verschiedenen Browsern. Zu diesem Zeitpunkt muss der Velocker die Richtigkeit der Site-Anzeige ständig überwachen, wobei die Browser aller Versionen und Generationen dazu verwendet (in jedem Fall mindestens ein grundlegender Satz von beliebten Browsern der letzten Jahre).

Um die Arbeit beim Erstellen eines Crossbreaker-Layouts zu erleichtern, müssen Sie zunächst das Layout für einen Browser legen, um die Korrespondenz der Originalvorlage in PSD zu steuern. Danach wird die Richtigkeit des Displays in anderen Browsern mit gleichzeitigen Upgrades des Quellcodes überprüft. Dieser Ansatz beschleunigt die Erstellung von Cross-Browser-Layout erheblich und ermöglicht eine kurze Zeit, um anständige Ergebnisse zu erhalten.

Fazit

Crossbox Brown-Layout ist der Eckpfeiler eines modernen Webdesigns. Unterschiede in der Arbeit von Browsern sind oft ein Hindernis für die Umsetzung bestimmter Möglichkeiten. Infolgedessen sind wir zufrieden mit gemittelt, sondern auf den Höhepunkt des Perfektionsergebnisses. Und heute wurde das Cross-Browser-Layout mit der Notwendigkeit, ein adaptives Design zu erstellen, das nicht nur in den Browsern, sondern auch auf mobilen Geräten erstellt wurde.

Wenn eine Site erstellt wird, ist ein Cross-Browser-Layout wichtig, um seine Wirksamkeit sicherzustellen. Was ist das? Wie kann ich es tun? Welche Unterwassersteine \u200b\u200bgibt es?

Wie lautet das Cross-Browser-Layout?

HTML / CSS ist die Basis für die Erstellung der Site. Viele Webmaster sind grundsätzlich dazu geeignet: Ich fühle mich gut - und genug. Und wie ist es unangenehm, wenn Sie aus Ihrem Browser kommen oder mobilgerätUnd die Site wird falsch angezeigt. In solchen Fällen kommt ein adaptives Design und ein Cross-Browser-Layout auf die Rettung.

CSS und HTML sind in diesem Fall das Rückgrat, mit dem alles implementiert ist. In einigen Fällen kann Javascript für diesen Zweck beteiligt sein. Aber das ultimative Ziel ist es, es zu schaffen, damit alles an verschiedenen Versionen funktionierte. Wenn daher der Wunsch besteht, einen Cross-Browser bereitzustellen, sodass der Standort in allen Browsern gut angezeigt wird, müssen Sie ständig von der ersten Sekunde der Site darüber nachdenken.

Schritt für Schritt Guide im Allgemeinen

Schauen wir uns also an, wie Sie das Layout des Querbrowsers erstellen können. Zunächst sollten Sie festlegen, mit welchen Programmen funktioniert der Standort. Bitte beachten Sie, dass sich die Anzahl der Browser an zwei Hunderte nähert, also versuchen Sie, alles zu erfreuen - die Angelegenheit der unglaublichen Komplexität. Wählen Sie daher eine Nummer im Bereich von 3 bis 8. Um zu entscheiden, was Sie navigieren, können Sie die Hilfsdienste wie Yandex-Metrika verwenden, und dann sollten Sie herausfinden, wie das Problem des Kreuzbrowsers gelöst wird.

Viele setzen ihre Wette auf Khaki. Dies sind spezielle Codes, Selektoren und Regeln, die nur ein bestimmter Browser versteht. Da jedoch notwendig ist, dass es notwendig ist, mindestens mehrere Dutzend-Einsätze für verschiedene Browsern und ihre Versionen zu schreiben, schreiben viele einen solchen Ansatz aufgrund seiner hohen Kosten, Dauer und Irrationalität. Einige setzen eine Wette auf die Verwendung dieser Elemente, die gleich angezeigt werden. Gleichzeitig sind jedoch oft eine Reihe wichtiger Vorteile verloren. Um Verluste zu minimieren, wird das adaptive Design auch parallel verwendet. Was vertritt er?

Adaptives Design.

Dieser Ansatz an das Layout von Standorten, während der der Standort Gummi gemacht wird, dh das ist, der an sich ankommt verschiedene Browser und Bildschirmgröße. Es sei darauf hingewiesen, dass das adaptive Design und der Querbrowser eng miteinander verflochten, und wenn sie über etwas sprechen, dann ist es in der Regel auch impliziert. Betrachten wir ein kleines Beispiel.

Es gibt Browsern wie Oper und Opera Mini. Der erste wird von verwendet von gewöhnliche ComputerUnd der zweite ist auf Mobiltelefonen. Im Allgemeinen sind sie ähnlich, haben aber eine Reihe von Funktionen. In solchen Fällen ist es wichtig, separate Dateien und / oder die Verwendung von Medienregistern zu verbinden. Was ist es? Im ersten Fall werden erstellt separate DateienWer ist darauf abzielen, einen konkreten Browser zu arbeiten und ihren Anruf vorzuschreiben. Im zweiten Fall werden Dateien mit dem Medienregister benötigt. Wenn das verwendete Programm spezifische Anforderungen erfüllt, wird die Datei in der gewünschten Konfiguration geladen.

Was müssen wir machen?

Es sollte anfangs daran erinnert werden, dass beim Arbeiten mit HTML Cross-Browser-Layout besondere Aufmerksamkeit erfordert. Daher für mehr Leistung ist die maximale Verwendung die Möglichkeiten kaskadentische Stile Es muss auch geändert werden und einige Ansätze zur Arbeit. So viele unerfahrene Menschen, wenn sie die Größe von etwas angeben, verwenden Sie Pixel - PX. Betrachten Sie ein Beispiel mit einer großen Titel-Inschrift, die die Oberseite der Site schmückt.

Sie hat eine Breite in Höhe von 800. Mit dem Bildschirm in 1600rx ist es ziemlich attraktiv. Aber bei 700rch wird sie lächerlich aussehen. Was soll ich in diesem Fall tun? Sie können die Größe nicht in Pixel einstellen, jedoch in Prozent! Und es ist keine feste Länge, die Inschrift besetzt, sondern die Hälfte der Bildschirmbreite. In Prozent können Sie den Abstand einstellen, auf dem ein bestimmtes Element an den Rändern des Bildschirms platziert wird. Aber was ist, wenn der Bildschirm zu klein ist?

Angenommen, es ist 300RH? In diesem Fall hilft uns das Medienregister, das mit der Breitenfixierung vorgeschrieben sein muss. Und wenn es 700 Rubel und weniger ist, können Sie feststellen, dass die Inschrift 75% des Ortes dauert. Und wenn die Breite 300RH und weniger ist, können Sie alle 100% einstellen. Im Allgemeinen ist das Thema sehr interessant und nützlich, sodass er ausführlich untersucht werden kann. Aber hier, hier Informationen zum Buch, und alles in den Artikel bringen wird nicht funktionieren.

Warum zieht das Cross-Browser-Adaptive-Layout Suchmaschinen an?

Und die Antwort ist sehr einfach: Weil es besagt, dass die Entwickler den Standort ansehen und es für ihre Benutzer am angenehmsten machen. So können solche Menschen gefördert werden, indem sie mit höheren Positionen in Suchmaschinen versorgt werden. Natürlich wird Ihre Website nicht sofort nach oben 1 entfernt, aber in Verbindung mit anderen Faktoren wird dies stark klettern. Es sei darauf hingewiesen, dass dies nicht eine einfache nutzlose Anforderung ist, aber etwas, das es verdient ist, dass Aufmerksamkeit geachtet wird.

Denken Sie doch darüber nach: Was ist dieser Benutzer, wenn er den Standort trifft, der extern nicht sehr angenehm ist? Aber er kann zum Gedanken kommen, dass suchmaschine Bietet schlechte Inhalte! Daher werden sie so sorgfältig ausgewählt, die angeboten werden sollten. Darüber hinaus gibt es auch den Vorteil von Webmastern, da sie eine hochwertige Hülle für Inhalte erstellen, in denen die Personen die Informationen erhalten können, die Sie an der Verwendung von Hardware, Computer, Laptop, Tablet, Smartphone oder mobiltelefon. Dementsprechend wächst die erfüllteren Besucher, desto schneller der Site und das Einkommensgrad.

Fazit

Es ist unmöglich, die bescheidene Tatsache nicht zu notieren, dass die Erstellung einer Querbrowser-Site mit adaptives Design. - Dies ist nicht einfach geschäftlich, sehr lang und zeitaufwändig. Daher müssen Sie geduldig sein und sich daran erinnern, dass Disziplin eine tolle Sache ist! Es ist möglich, dass etwas zunächst nicht erworben wird, aber Sie müssen versuchen, nach Informationen suchen, verschiedene Ansätze verwenden und nicht zurückziehen. Und dann muss es notwendig sein, eine Website zu erstellen, die teuer ist, um seinen Besuchern zu zeigen.

Wenn Sie moderne Browsern zusammenbringen, ist es möglich, es auf verschiedene Arten zu zersetzen: auf Geräten, auf Plattformen, nach Art der Arbeit und sogar in Farbsymbolen. Am nützlichsten für den Entwickler ist es, sie in Motoren zersetzen zu können. Es ist der Motor, dh der meiste Kern des Browsers, bestimmt, wie es mit Ihrem Layout funktioniert.

Einige Browsern funktionieren nur auf einer Plattform: Edge und dh nur unter Windows, Safari nur auf MacOS und iOS. Es gab einmal Versuche von Interventionen, aber nichts kam heraus. Es kompliziert sicherlich das Testen. Glücklicherweise gibt es Dienstleistungen wie browstack, auf denen Sie Zugriff auf alle vorhandenen Browser, und Microsoft legt Windows Compact-Bilder an, um die Kante und dh in virtuellen Maschinen zu testen.

Okay! Wir wissen jetzt über Browser. Und was ist, wenn derselbe Browser, derselbe Motor - und das Ergebnis auf verschiedenen Plattformen anders ist? Und nichts kann gemacht werden! Tatsächlich können die Browser je nach Plattform oder Gerät stark unterscheiden. Der größte Unterschied zwischen dem Desktop und mobile Browser. - In letzterer gibt es viele Optimierungen und nur Magie. Sie können jedoch ein anderes Verhalten auf Desktopfenstern und MacOS fangen.

Ich denke, du hast schon verstanden, was ich ein Klon bin. Crossboxrity ist ein solcher Regenbogen-Einhorn, gefolgt von allen Jagd, aber niemand kann fangen. Das Ziel der Jagd ist definitiv edel: so dass Sites auf allen Browsern und allen Plattformen gleiche Weise aussehen und gearbeitet haben. Und wenn die Größe der Einrückungen, Schriftart, Linie Höhe, Farbe, die wir noch mehr oder weniger garantieren, dann glätten Sie Text, Unschärfe von Schatten, Rendering-Grafiken und aussehen Systemsteuerelemente versuchen nicht einmal, nicht einmal zum gemeinsamen Geist zu führen.

Wenn also ein Pixel-Peeling für Sie in das Gitter einsteigen soll, und in den horizontalen Blockgrößen, haben Sie noch Chancen. Wenn Sie jedoch den Glätten von Text drehen, die Anzahl der Zeilen im Absatz oder vertikale größen. Blöcke mit Inhalten, strikt auf dem Layout, Sie verbringen die Zeit, die verschwendet wird. Eine ideale Cross-Browser-Site wird in allen Plattformen gleichermaßen ausländisch aussehen - schließlich hat jeder seine eigenen Funktionen, die den Benutzern bekannt sind.

Und mehr zum Testen. Egal wie gut ich das Gerät imitiert habe, und der Browser Emulator Chrome Devtools ist nur ein Hinweis darauf, wie sie in Wirklichkeit schauen werden. Es ist wichtig, das Ergebnis auf echten Plattformen und -geräten zu überprüfen, mindestens auf Windows, Android, MacOS und IOS. Echte Finger auf dem vorliegenden Gerät, echte Browser im natürlichen Lebensraum werden Ihnen viel darüber, wie Sie Ihre Schnittstellen verwenden können. Es ist viel wichtiger, wie viel sie aussehen.

Abonnieren Sie Browser News auf Twitter, installieren Sie Chrome Canary, Firefox Nightly, Safari Technology-Vorschau. Schalten Sie die Flags ein, versuchen Sie, sich dessen bewusst zu sein, und vor allem, um Pixel zu jagen, gute Schnittstellen zu tun. Die Websites sollten in allen Browsern nicht gleich aussehen.

Videokünstler