Ist Google Chrome der neue IE 6 für Webdesigner?

Gerade als Sie dachten, Sie wären mit IE 6 und seinen Hacks und Ausnahmen fertig, müssen Sie jetzt über einen neuen Browser nachdenken: Googles Chrome.

Die gute Nachricht ist das Chrome ist viel besser mit Webstandards kompatibel als IE 5 und 6. Allerdings hat Chrome seine eigenen Besonderheiten und Fehler.

Niemand weiß, ob Chrome von Dauer sein wird, aber es hat in kurzer Zeit bereits einen überraschend guten Anteil am Webbrowser-Markt erobert.

Hier sind einige Tipps, damit Ihre Webseiten in Chrome funktionieren und hoffentlich so aussehen, wie sie aussehen sollten.

Mac-Benutzer

Seit Februar 2009 ist Chrome immer noch ein Browser für Microsoft Windows-PCs. Wenn Sie einen Mac verwenden, müssen Sie Microsoft Windows ausführen Boot Campoder eines der Virtualisierungsprodukte für den Mac (Suns VirtualBox, Parallelen, VMWare Fusion). Wenn Sie wirklich mutig sind, können Sie versuchen, Chrome zum Laufen zu bringen Darwin. Google verspricht, in den kommenden Monaten eine native Mac-Version von Chrome verfügbar zu machen.

Verschwindende Pop-ups

Das Blockieren von Pop-ups ist großartig, es sei denn, Ihre Website benötigt wirklich Pop-up-Funktionen. Wenn Sie eine Webseite haben, die Pop-ups verwenden muss, werden diese in Chrome nicht angezeigt. Chrome zeigt standardmäßig nur den Titel eines Pop-ups an und minimiert ihn in der unteren rechten Ecke des Browserfensters. Benutzer müssen auf den Titel des Pop-ups klicken und ihn ziehen, um seinen Inhalt anzuzeigen.

SSL ist kaputt?

Chrome zertifiziert eine gültige SSL-Seite (Secure Sockets Layer) standardmäßig nur dann mit dem Vorhängeschlosssymbol, wenn alle Elemente auf der Seite über SSL bereitgestellt werden. Mit anderen Worten: Wenn Ihre Seite über SSL bereitgestellt wird, Elemente jedoch über nicht gesichertes HTTP aufruft, zeigt Chrome auf Ihrer Seite ein Ausrufezeichen an, das darauf hinweist, dass es sich bei Ihrer Seite um eine inkonsistente SSL-Übertragung handelt. Um dies zu umgehen, stellen Sie sicher, dass alle von Ihrer Webseite geladenen Ressourcen, inklusive aller Bilderwerden vorangestellt HTTPS.

Lesen:  Ist das Arch Linux-System erforderlich?

Deklarieren Sie zuerst die Codierung

Wenn der Text Ihrer Webseite in Chrome verstümmelt oder aus anderen Gründen einfach falsch ist, müssen Sie möglicherweise etwas einfügen Codierung Informationen in den -Abschnitt jeder Webseite ein. Wenn Sie bereits über Kodierungsinformationen verfügen, müssen diese bereitgestellt werden Erste, vor jedem CSS oder Javascript. Andernfalls ignoriert Chrome es einfach. Ein funktionierendes Beispiel:





… Ihr CSS-Code …

Außerdem ignoriert Chrome die von Javascript angegebene Codierung. Zeitraum. Beispielsweise würde Folgendes ignoriert:

document.write(““);
Anstatt JavaScript zu verwenden, müssen Sie Ihre Codierung am Anfang des -Abschnitts jeder Webseite einfügen, wie oben gezeigt.

Lesezeichen-Favoriten

Wenn Benutzer Ihre Website mit einem Lesezeichen versehen möchten, können Sie den standardmäßigen Lesezeichennamen, die Beschreibung, den Link und das Lesezeichensymbol steuern. Stellen Sie einfach sicher, dass Sie Ihren Code im Abschnitt Ihrer Webseiten platzieren. Hier ist ein funktionierendes Beispiel:




JavaScript reparieren

Wenn Ihr JavaScript in Chrome nicht ordnungsgemäß funktioniert, überprüfen Sie die JavaScript-Konsole von Chrome, auf die Sie über zugreifen können Seitenmenüsymbol -> Entwickler -> JavaScript-Konsole. Das sollte Ihnen eine Orientierung geben, was Sie ändern können.

Für fortgeschrittenere JavaScript-Entwickler können Sie auch den JavaScript-Debugger verwenden, auf den Sie über zugreifen können Seitenmenüsymbol -> Entwickler -> JavaScript debuggen. Dadurch können Sie Variablen überwachen und Haltepunkte festlegen.

Probleme mit CSS-Bildern

Wenn Sie über CSS implementierte Bilder oder Hintergründe verwenden und diese in Chrome nicht richtig gerendert werden, sollten Sie dies möglicherweise tun Konvertieren Sie Bilder zwischen GIF, JPG und PNG um zu sehen, ob ein anderes Bildformat Ihre Probleme löst. Obwohl dies keinen Sinn ergibt, funktioniert es manchmal, insbesondere bei zufälligen Abständen und Problemen mit der Bildformatierung.

Lesen:  Das beste System für UI/UX-Designer

CSS „Erster“ Selektor-Hack

Chrome kann in Bezug auf CSS wählerisch und unnachgiebig sein und ignoriert möglicherweise Stile, die auf bestimmte Seitenelemente angewendet werden. Versuchen Sie es mit „Erster Typ”-Schlüsselwort, das von allen anderen Browsern ignoriert wird (außer Apples Safari). Wenn Sie beispielsweise einen bestimmten Stil nicht auf den -Abschnitt Ihrer Webseite anwenden können, damit er in Chrome funktioniert, fügen Sie etwas wie Folgendes hinzu:

body:first-of-type p {color:#ff0000;}

„First-of-Type“ wird von den Browsern, die Ihre Seite bereits so anzeigen, wie Sie es beabsichtigt haben, einfach ignoriert.

GiantIsland CSS-Hack

Chrome interpretiert Cascading Style Sheets (CSS) anders als andere Browser. Andererseits interpretieren IE 5, 6 und 7 CSS nicht einmal gleich! Der GiantIsland-CSS-Hack ist ein relativ einfacher CSS-Markup-Hack, der eckige Klammern verwendet [ ] um CSS auf bestimmte Browser wie Chrome auszurichten. Als Bonus kann es Ihnen auch dabei helfen, Ihr CSS gleichzeitig an IE 5, 6, 7, Safari und Firefox anzupassen. Weitere Informationen finden Sie unter http://www.giantisland.com/Resources/LitePacificHackforSafariAndIE7.aspx.

Halten Sie sich von HTML5 fern

Chrome versucht noch nicht, den HTML5-API-Standards zu entsprechen, obwohl Webkit, seine Rendering-Engine, HTML5 unterstützt. Wenn Sie HTML5-Funktionen oder -Syntax verwenden, werden Sie wahrscheinlich auf Probleme stoßen. Bleiben Sie bei den HTML4-Standards und Sie werden es leichter haben. Chrome wird wahrscheinlich in naher Zukunft HTML5 unterstützen.

Validieren Sie Ihre Seiten

Bevor Sie Chrome beschimpfen und das Handtuch werfen, validieren Sie Ihre Seiten, um sicherzustellen, dass Sie nicht versehentlich einen nicht standardmäßigen HTML-Aufruf verwendet haben. Sie können jede Webseite unter validieren http://validator.w3.org/. Bei einigen Webbrowsern können Sie einige Abkürzungen mit Webstandards verwenden, Chrome ist jedoch nicht sehr nachsichtig.

Versuchen Sie es mit Safari

Wenn Ihre Webseiten unter Chrome immer noch nicht richtig aussehen, egal, was Sie versuchen, probieren Sie Ihre Webseiten in Safari aus, bevor Sie aufgeben. Safari ist der Webbrowser von Apple und ist sowohl für Mac- als auch für Windows-PCs verfügbar. Wenn Sie Windows verwenden, können Sie Safari kostenlos von Apple herunterladen unter http://www.apple.com/safari/download/. Sowohl Chrome als auch Safari basieren auf Open Source.Webkit“Browser-Rendering-Engine. Wenn Sie sowohl in Chrome als auch in Safari einen Rendering-Fehler sehen, besteht eine gute Chance, dass Webkit der Schuldige ist. Sie können einen Fehler für die Webkit-Entwickler unter posten http://webkit.org/quality/reporting.html.

Lesen:  Warum ist mein Telefon so langsam?

Oh Snap!

Die Chrome-Entwickler haben einige lustige Fehlermeldungen bereitgestellt (sofern ein Fehler als lustig angesehen werden kann). Wenn Chrome Ihnen das Dunkelgrau anzeigt „Oh Snap!” Seite, auf der auch steht: „Beim Anzeigen dieser Webseite ist ein Fehler aufgetreten„Möglicherweise handelt es sich überhaupt nicht um Ihre Webseite. Abhängig von den Systemeinstellungen und anderen installierten Anwendungen neigt Chrome auf manchen PCs zum Absturz. Probieren Sie ein paar andere bekannte Webseiten aus und prüfen Sie, ob sie abstürzen. Versuchen Sie außerdem, Chrome zu schließen, neu zu starten und dann Ihre Webseiten erneut zu testen. Einige Leute haben festgestellt, dass Chrome auf einigen PCs instabil ist. Google möchte Chrome mit jeder neuen Version leistungsfähiger machen.

Fehlerberichterstattung

Wenn Sie einen Fehler beim Rendern von Chrome finden, melden Sie ihn! Sie werden die Welt zu einem besseren Ort machen. Google führt eine öffentliche Fehlerliste für Chrome unter http://code.google.com/p/chromium/issues/list.

Exklusiv für WDD geschrieben von Derek Underwood, einem professionellen Webdesigner und Softwareentwickler. Sie können mehr über Derek lesen und ihn auf seiner Website kontaktieren:
http://www.derekunderwood.com

Haben Sie Ihre Webseiten in Chrome getestet? Glauben Sie, dass Chrome von Dauer sein wird? Teilen Sie Ihre Meinungen und Erfahrungen.

Aktuelle Artikel:

Empfohlen