Wichtige Anpassungen

Geschätzte Lesezeit: 4 Minuten

Mein Theme ist bereits für verschiedene Browsergrößen optimiert. Doch durch meine Veränderungen des Stylesheets haben sich einige Elemente verschoben. Und auch der Internet Explorer macht Mätzchen.

Das Stylesheet von Sampression hat bereits vorab eingebaute Scripte für unterschiedliche Browsergrößen. Unter „Media Queries“ finde ich individuelle Konfiguration für kleinere Desktop-Varianten und Mobilgeräte. Ich teste nun jede mögliche Größe, indem ich einfach mein Browserfenster verkleinere. Element für Element untersuche ich die Werte des Stylesheets und gleiche sie in der jeweiligen Query meinem Layout an. Im Endeffekt passen alle Größen gut zueinander, ich bin sehr zufrieden. Auch die Livetests auf dem Smartphone bringen tolle Ergebnisse.

Der Internet Explorer wird auf seine Granatonkompatibilität getestet. Wie nicht anders zu erwarten, will er eine Sonderbehandlung.
Der Explorer versteht bis zur Version 9 einige CSS3 Befehle nicht. Um ebendiese zu übersetzen, installiere ich normalerweise das Plugin IE CSS 3 Support, damit der Explorer auch Rundungen verstehen kann. Nicht so in diesem Fall. Denn die Übersetzung bringt auch andere obskure Einstellungen zutage, die ich nicht beheben kann. Ich akzeptiere also das etwas konstruktivistische Layout meiner Seite ohne Rundungen und Schatten.
Leider erkennt der Explorer meine Logoschrift nicht. Jeder Versuch, den Schmuckfont in das Stylesheet zu integrieren, endet damit, dass das gesamte Grundgerüst der Seite zerpflückt dargestellt wird. Ich definiere ein eigenes Stylesheet für den Explorer, das ich IE.css nenne, und baue eine Umleitung für alle Anfragen, die über den Explorer kommen, in meinen Header ein. Diese Umleitung sieht so aus:

<!--[if gt IE 8]>
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/IE.css" media="screen" type="text/css" />
<![endif]-->

Für jede noch relevante Explorerversion unterhalb des IE 9 definiere ich eine Umleitung. Das Script wird als letzte Codezeile in den <head> Bereich meiner Headerdatei gesetzt. Nun akzeptiert der IE das ihm eigene Stylesheet, und greift nicht mehr auf die allgemeine style.css zu.
Ich tüftle und suche und probiere und raufe mir die Haare, um meine Logoschrift in das Script einzubauen, nichts hilft. Am frühen Morgen des nächsten Tages, also heute nach dem Aufwachen, fällt der Groschen: Der Explorer kann nicht mehrere externe Ressourcen verarbeiten. Wenn ich eine Schrift als externe Ressource im Stylesheet angebe, dann kann er keine weiteren interpretieren. Und es gibt eine weitere externe Quelle, nämlich ein zusätzliches CSS-Script. Es heißt „Skeleton“ und ist ein vom MIT entwickeltes Grundgerüst für responsive Themes. Dieses Script gliedert die Seite in Spalten, wenn es nicht akzeptiert wird, zerfällt die Seite. Ich kopiere mir dieses Script in das IE.css Stylesheet, lösche die @-Integration der skeleton.css Datei und jetzt kann der Explorer auch die Logoschrift einlesen, ohne die Seite in ihre Bestandteile aufzulösen.
Dadurch, dass nun aufgrund mangelnder CSS3 Befehle Schatten und Kanten verändert sind, passe ich Rahmenfarben für Formularelemente und Kommentare an. Und leider wird immer noch mein Suchformular zerlegt. Alle Versuche, es als Balken und nicht als Treppe zu gestalten, scheitern. In meiner Not helfe ich mir dadurch, dass ich das Suchformular für Benutzer älterer Explorerversionen ausblende. Auch ein paar andere Layouteinstellungen passen nun nicht mehr. Aber durch kleine Tricks im Stylesheet lässt sich alles ganz gut beheben.
Weitere kleinere Ungereimtheiten mit dem Internet Explorer sind immer noch nicht gelöst. Die Seite macht klitzekleine eigenartige Dinge, wenn sie sich lädt. Bei einer schnellen Verbindung fällt das gar nicht auf. Wenn man jedoch über ein schlechtes W-Lan Netz die Seite aufruft, dann hüpfen die Social Buttons ein ganz klein wenig. Und irgendetwas lädt im Hintergrund, während die Seite schon voll sichtbar ist, ich habe keine Ahnung, was das sein könnte. Hier bin ich mit meinem Latein am Ende. An dieser Stelle brauche ich die Hilfe von einem versierten Webentwickler, der mir beim Debuggen von diesen Ticks hilft. HILFE! ^^

Zu guter Letzt ändere ich noch alle themeeigenen englischen Texte und trage deutsche Versionen über Design-Editor in die vorhandenen Skripte ein. Dies betrifft besonders die 404.php und die search.php.

Mein neues Layout scheint nun auf allen Plattformen (ganz) gut zu laufen. Weitere Anpassungen und Korrekturen vorbehalten.

Teilen Sie Ihre Meinung mit