Effizientes Cross-Browser-Development
Sowohl privat als auch beruflich werde ich – wie auch viele andere – ständig mit dem Thema Cross-Browser-Optimierung von webbasierten Anwendungen konfrontiert. Oder wie ich es nenne: Die IE-Suboptimierung *fg*
Leider fallen die Tests zu oft viel zu knapp aus. Das sieht man immer schön daran, dass die Seiten im IE entweder in der Darstellung oder in Sachen Funktion von anderen Browsern abweicht. Und spätestens wenn das dem Kunden auffällt, ist das wirklich kritisch.
In diesem Artikel möchte ich euch kurz erklären, wo die Probleme beim Testen liegen und wie man die Cross-Browser-Optimierung von Websites oder webbasierten Anwendungen effizienter gestalten kann. Weiterlesen
[CSS] Firefox: Darstellungsprobleme bei contenteditable
Das HTML-Attribut "contenteditable" ist eine tolle Sache. Einmal aktiv, kann der User den Inhalt des Elements bearbeiten. WYSIWYG-Editoren wie der CKEditor oder TinyMCE setzen diese Technik ein um das WYSIWYG zu ermöglichen.
Im Firefox gibt es hier allerdings einen kleinen Bug. Links innerhalb eines Elements mit aktiven contenteditable, werden blau/lila und unterstrichen dargestellt, unabhängig davon, was der User per CSS definiert hat.
HTML-/CSS-Performance Optimierung – Teil 1
Ja, ihr habt richtig gelesen: es geht um HTML und CSS Performance! Ein Thema über das sich die Wenigsten Gedanken machen. Leider.
Über Serverseitige Optimierung von PHP-Scripts, MySQL-Queries, Webserver etc. liest man ja mehr als genug. Leider aber kaum über die Client-Seitige Optimierung. Aber was bringt es dem User, wenn das PHP-Script in 0,09 statt in 0,25 Sekunden ausgeführt wird, wenn das Übertragen der Daten un das clientseitige Rendern der Seite 15 Sekunden dauert? Klar, hauptsache das PHP-Skript ist flott. Glückwunsch. Super. Gut gemacht!
Die Performance-Optimierung von Websiten betrifft längst nicht nur die serverseitige Abarbeitung des Requests, sondern auch das was mit den Daten passiert nachdem sie den Webserver verlassen haben. Aus diesem Grunde möchte ich euch heute (und im Teil 2, Teil 3, …) ein paar Tricks und Praktiken zeigen, die euch dabei helfen können, euere Websites effizient und sinnvoll auf Performance zu optimieren.
Der ganze Spaß hat natürlich auch einen Usability- und Marketing-Faktor. Seiten, die lange laden, wirken unsymphatisch und qualikativ minderwertig. Und kein User bleibt gern länger als nötig auf einer solchen Präsenz.
[CSS] CSS-Hacks: Der zoom-Hack
Und weiter geht es in der Reihe der Artikel über CSS Praxis!
Heute gibt es wieder einen CSS-Hack: den zoom-Hack, welchen ich euch gleich genauer erklären werde.
Jeder kennt die Unzulänglichkeiten des Internet Explorers. Zum Glück kann man Vieles mithilfe der Internet Explorer CSS-Weichen beheben, aber manchmal kommt es in der Engine des "Browsers" zu Render-Bugs: Elemente werden an einer falschen Position dargestellt, nur zur Hälfte dargestellt, gar nicht dargestellt oder Ähnliches.
Diese Render-Bugs kann man umgehen, indem man die Browser-Engine dazu zwingt, das betroffene Element "anders" zu rendern. Am Besten eignet sich hierfür die zoom-Definition. Die Zoom-Definition dient (überraschungsarm) zum Zoomen von Elementen im Internet Explorer und ab CSS3.
Ein Nebeneffekt der Definition ist, dass das Element im Internet Explorer die hasLayout Eigenschaft erhält, welche dem "Browser" auf mysteriöse Art und Weise mitteilt, dass dieses eine Element ein wichtiger Bestandteil des Layouts ist und er aufgrund dessen keine Render-Bugs mehr produziert. Wie das intern geregelt ist weiß niemand, aber es klappt und allein diese Tatsache reicht uns vollkommen aus.
Bei meiner Arbeit mit CSS hilft mir die zoom-Definition 90% aller Probleme im IE zu beheben! IE8 ausgeschlossen.
Hier ein Beispiel der zoom-Definition auf alle Elemente der Klasse "fixMe".
.fixMe {
zoom: 1;
}
[CSS] Horizontale Navigationen
Heute mal etwas für diejenigen, die weniger Erfahrung mit dem Webdesign haben =)
Horizontale Navigationsleisten sind total in und sind leichter umzusetzen, als man denkt. Ich möchte euch hier kurz die saubere Variante vorstellen, wie man ein horizontales Menü mithilfe von CSS gestaltet.
Früher hat man für sowas Tabellen verwendet, das ist aber mittlerweile ziemlich unprofessionel. Schöner ist die Umsetzung mit Listen (UL-Tags) und wie das funktioniert, zeige ich euch jetzt.
Das Ergebnis des How-Tos wird wie folgt aussehen:
Los gehts!
Folgende HTML-Sturktur benötigen wir für unsere Navigation
<ul id="navi"> <li><a href="index.html">Home</a></li> <li><a href="about.html">Über mich</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="contact.html">Kontakt</a></li> <li><a href="impress.html">Impressum</a></li> </ul>
Dieser HTML-Code definiert eine ungeordnete Liste mit 5 Punkten, jeder dieser Punkte beinhaltet einen Link, welcher einem Menüpunkt entspricht. Um das UL-Element besser über CSS selektieren zu können, haben wir ihn die ID "navi" zugewiesen.
Das Ergebnis sieht wie folgt aus:
Nun geht es an das Layouten der Liste.
[CSS] Internet Explorer Hacks
Jeder der schonmal mit CSS in Berührung kam, durfte sich bereits mit den Darstellungs-Unterschieden zwischen den verschiedenen Browsern herumschlagen. Firefox und Opera geben sich nicht viel, aber der Internet Explorer macht eigentlich generell nie das, was man von ihm verlangt.
Zum Glück gibt es CSS-Hacks mit deren Hilfen man dafür sorgen kann, dass Selektoren oder Definitionen nur in bestimmen Browsern ausgeführt werden.
Hier eine Übersicht meiner CSS-Hacks für den IE6, IE7 und IE8.
Ich demonstriere die Hacks immer anhand folgenden Beispiels:
Wir möchten das Padding des Elements div#content auf 5px setzen. Außer für den IE natürlich 
div#main {
padding: 5px;
}
Internet Explorer 6
* html div#main {
padding: 4px;
}
Durch das Voraussetzen von “* html” wird dieser Selektor und damit alle Definitionen in diesem Block nur vom IE6 interpretiert.
Internet Explorer 7
*+html div#main {
padding: 4px;
}
Ähnlich wie der IE6-Hack funktioniert auch der IE7-Hack. Einziger unterschied: Das “+“.
Internet Explorer 8
div#main {
padding: 5px;
padding /*\**/: 4px\9
}
Der IE8-Hack unterscheidet sich stark von den beiden Anderen. Hier wird nicht der Selektor gehacked, sondern die Definition innerhalb des Blocks. “padding: 5px;” wird wie gewohnt von allen Browsern interpretiert. Die darauffolgende Zeile jedoch versteht nur der IE8 (womit er auch der einzige bleibt *g*).