Freitag, 27. März 2009
Seitdem Google Chrome im September des Vorjahres veröffentlicht wurde, haben wir eine Reihe an Fragen von Webmastern und Entwicklern erhalten, wie sie ihre Websites in Google Chrome glänzen lassen können. Diese Fragen haben dem Chrome-Team wirklich weitergeholfen und ich möchte mit einigen hilfreichen Tipps antworten, damit eure Website in Chrome noch besser aussehen kann.
Chrome erkennen
Die meisten Websites werden in Safari und Chrome gleich gerendert - basieren doch beide Browser auf WebKit . Falls eure Website in Safari gut aussieht, sollte sie das auch in Chrome tun.
Weil Chrome noch relativ neu ist, verwechseln viele Websites Google Chrome mit anderen Browsern. Falls eure Website in Chrome nicht richtig dargestellt wird, aber in Safari gut läuft, ist es möglich, dass einfach der User-Agent-String von Chrome nicht erkannt wird.
Eure Website kann Plattformen und Browser, die WebKit als Rendering-Engine benutzen, mit den richtigen JavaScript-Checks automatisch erkennnen und unterstützen. Normalerweise benutzen Websites JavaScript um die navigator.userAgent -Eigenschaft für "Chrome" oder "Safari" auszulesen, aber wenn möglich solltet ihr eine vernünftige Object-Detection verwenden. Tatsächlich war Gmail in der Lage WebKit in Chrome von Anfang an richtig zu erkennen!
Falls die Notwendigkeit besteht, den Typ des User-Agents festzustellen, könnt ihr folgendes simples JavaScript benutzen, um WebKit zu erkennen:
var isWebkit = navigator.userAgent.indexOf("AppleWebKit") > -1;
Oder - falls ihr sichergehen wollt, dass die verwendete Version von WebKit zumindest eine bestimmte Version erreicht hat:
var webkitVersion =
parseFloat(navigator.userAgent.split("AppleWebKit/")[1]) || undefined;
if (webkitVersion && webkitVersion > 500 ) {
// verwendet hier ein ausgefuchstes WebKit-Element!
}
Zur Übersicht führen wir hier einige Browser-Releases und die jeweils verwendete Version von WebKit an:
Wir raten davon ab, "Google" oder "Apple" zu euren navigator.vendor-Checks hinzuzufügen, um festzustellen, ob WebKit oder Google Chrome läuft, da so andere WebKit- oder Chromium-basierte Browser nicht erkannt werden!
Mehr Informationen zur Erkennung von WebKit bekommt ihr unter webkit.org .
Andere nützliche Tipps
Helft uns, Chrome zu verbessern!
Falls ihr uns darüber hinaus noch helfen wollt: wir sind auf der Suche nach Webmastern, die Google die Verwendung ihrer Website als Benchmark für unsere internen Kompatibilitäts- und Performancemessungen gestatten wollen. Falls ihr daran interessiert seid, dass die Google Chrome-Entwicklung auf eine gecachete Version eurer Website hin optimiert wird, schickt uns doch gerne eine Mail (auf Englisch) bezüglich der Details an chrome-webmasters@google.com .
Wir freuen uns über jedes Feedback und werden weiterhin daran arbeiten, Google Chrome zu verbessern!
Helping your site look great with Google Chrome (English version)
Post von Glenn Wilson, Product Manager, Google Chrome (Übersetzung von Jörg, Search Quality)
Chrome erkennen
Die meisten Websites werden in Safari und Chrome gleich gerendert - basieren doch beide Browser auf WebKit . Falls eure Website in Safari gut aussieht, sollte sie das auch in Chrome tun.
Weil Chrome noch relativ neu ist, verwechseln viele Websites Google Chrome mit anderen Browsern. Falls eure Website in Chrome nicht richtig dargestellt wird, aber in Safari gut läuft, ist es möglich, dass einfach der User-Agent-String von Chrome nicht erkannt wird.
Eure Website kann Plattformen und Browser, die WebKit als Rendering-Engine benutzen, mit den richtigen JavaScript-Checks automatisch erkennnen und unterstützen. Normalerweise benutzen Websites JavaScript um die navigator.userAgent -Eigenschaft für "Chrome" oder "Safari" auszulesen, aber wenn möglich solltet ihr eine vernünftige Object-Detection verwenden. Tatsächlich war Gmail in der Lage WebKit in Chrome von Anfang an richtig zu erkennen!
Falls die Notwendigkeit besteht, den Typ des User-Agents festzustellen, könnt ihr folgendes simples JavaScript benutzen, um WebKit zu erkennen:
var isWebkit = navigator.userAgent.indexOf("AppleWebKit") > -1;
Oder - falls ihr sichergehen wollt, dass die verwendete Version von WebKit zumindest eine bestimmte Version erreicht hat:
var webkitVersion =
parseFloat(navigator.userAgent.split("AppleWebKit/")[1]) || undefined;
if (webkitVersion && webkitVersion > 500 ) {
// verwendet hier ein ausgefuchstes WebKit-Element!
}
Zur Übersicht führen wir hier einige Browser-Releases und die jeweils verwendete Version von WebKit an:
| Browser | Version of WebKit |
| Chrome 1.0 | 525.19 |
| Chrome 2.0 beta | 530.1 |
| Safari 3.1 | 525.19 |
| Safari 3.2 | 525.26.2 |
| Safari 4.0 beta |
528.16
|
Wir raten davon ab, "Google" oder "Apple" zu euren navigator.vendor-Checks hinzuzufügen, um festzustellen, ob WebKit oder Google Chrome läuft, da so andere WebKit- oder Chromium-basierte Browser nicht erkannt werden!
Mehr Informationen zur Erkennung von WebKit bekommt ihr unter webkit.org .
Andere nützliche Tipps
- Google Chrome unterstützt keine ActiveX-Plug-Ins, aber dafür NPAPI-Plug-Ins. Das bedeutet, dass ihr Plug-In-Inhalte wie Flash oder Java in Google Chrome auf dieselbe Art und Weise benutzen könnt, wie in Firefox und Safari.
- Falls Text auf eurer Website teilweise falsch dargestellt wirkt, stellt sicher, dass ihr den richtigen Content-Type und die passende Information zur Zeichencodierung in den HTTP-Headern zur Verfügung stellt, oder zumindest am Anfang eurer Seiten, am besten gleich zu Beginn des -Bereichs.
-
Setzt Block-Elemente nicht innerhalb der Inline-Elemente.
Falsch: <a><div>Wird falsch dargestellt.</div></a>
Richtig: <div><a>Wird richtig dargestellt!</a></div>
- Falls euer JavaScript-Code nicht in Google Chrome läuft, könnt ihr den JavaScript-Debugger benutzen, den ihr in Chrome im "Seiten"-Menü unter 'Entwickler' in der 'JavaScript-Fehlersuche'-Option findet.
Helft uns, Chrome zu verbessern!
Falls ihr uns darüber hinaus noch helfen wollt: wir sind auf der Suche nach Webmastern, die Google die Verwendung ihrer Website als Benchmark für unsere internen Kompatibilitäts- und Performancemessungen gestatten wollen. Falls ihr daran interessiert seid, dass die Google Chrome-Entwicklung auf eine gecachete Version eurer Website hin optimiert wird, schickt uns doch gerne eine Mail (auf Englisch) bezüglich der Details an chrome-webmasters@google.com .
Wir freuen uns über jedes Feedback und werden weiterhin daran arbeiten, Google Chrome zu verbessern!
Helping your site look great with Google Chrome (English version)
Post von Glenn Wilson, Product Manager, Google Chrome (Übersetzung von Jörg, Search Quality)