Jeder der schon mal irgend eine etwas kompliziertere Webseite erstellt hat, ob jetzt mit einem CMS wie Typo3 oder nur mit statischen HTML Seiten, kennt das Problem. Die Webseite sieht in dem Lieblingsbrowser des Entwicklers genauso aus wie sie soll. Auf dem Rechner von jemand anderem, oder mit einem anderen Browser paßt dann einiges nicht mehr. Font Größen stimmen nicht, und Bereiche, die in einem Browser brav links nebeneinander ‚floaten‘ sind jetzt unter einander.
Eines der Probleme ist natürlich die Vielfalt der inzwischen vorhandenen Browser – und die Tatsache, dass Entwickler sich oft weigern den Intern Explorer von Microsoft für Entwicklung herzunehmen und dann meistens mit Firefox arbeiten. Verstehe ich sogar, ich persönlich benutze hauptsächlich Opera. Ein anderer Grund ist, dass kleine Fehler im HTML Code, oder in der CSS Beschreibung von manchen Browsern verziehen werden und von anderen nicht. Auch berechnet der IE sturerweise immer noch die Größe von Objekten anders als andere Browser. Richtig spaßig kann es werden, wenn man besondere Effekte integrieren möchte, wie runde Ecken.
Die einfachste Lösung für solche Probleme, abgesehen davon seine Fehler zu beseitigen, ist in Typo3 sog. Browser Weichen herzunehmen. Dafür werden im jeweiligen Template Bereiche definiert, die nur ausgeführt werden, wenn bestimmte Bedingungen erfüllt sind. So z.B. dass die Seite mit einem bestimmten Browser angesehen wird.
Ich mache das immer so, dass ich erstmal meine standard CSS Dateien einbinde über:
page.includeCSS {
file1 = fileadmin/css/stylesheet.css
file1.media = screen,print
file2 = fileadmin/css/jquery.css
file2.media = screen
}
Danach setze ich im TypoScript des Templates weiter unten meine Browserweichen:
## Browser specific [browser = opera] page.includeCSS.file42 = fileadmin/css/style−opera.css [global] [browser = *firefox*] || [useragent = *Firefox*] || [useragent = *firefox*] page.includeCSS.file42 = fileadmin/css/style−ff .css [global] [browser = msie] page.includeCSS.file42 = fileadmin/css/style−ie .css [global] [useragent = *Safari*] page.includeCSS.file42 = fileadmin/css/style−safari .css [global] [useragent = *iPad*] || [useragent = *iPhone*] page.includeCSS.file43 = fileadmin/css/style−iphone .css [global]
Man beachte, dass beim Safari nach dem ‚useragent‘ gefragt wird. Man kann dann sogar noch spezifischer werden und iPhone oder iPad abfragen. Dabei setzen wir dann den Index für file um eins höher – in diesem Fall auf 43 -, da bei diesen beiden Geräten meistens der Safari zum Einsatz kommt.
In die jeweilige CSS Datei packt man dann den Code, der spezifisch ist für den jeweiligen Browser. Da bei CSS gilt, wer zuletzt kommt überschreibt alle anderen, brauchen in den Browser spezifischen CSS Dateien nur die Unterschiede eingetragen werden.
Keine Kommentare