WP Plugin: Polyfill für Tabellen und DIV-Bereiche

---

Reponsives Webdesign: Media Querys mit Polyfills unterstützen

Vorbei sind die Zeiten, in denen es noch normal war, Webseiten nur für Monitore mit einer bevorzugten Anzeigebreite zu optimieren und für Endgeräte mit kleineren Screens maximal, falls überhaupt, eine mobile Spar-Version auszuliefern. Wer sich heute im Web mit seinen Webseiten behaupten möchte, kommt nicht umhin, sich mit dem Thema reponsives Webdesign (wird auch als Responsive Webdesign bezeichnet) auseinander zu setzen.

Der Begriff Responsive beruht darauf, dass eine Webseite ansprechbar auf die Eigenschaften des jeweiligen Endgerätes reagiert und sich die Maße der Elemente und deren Platzierungen an die Fenstergröße des Browsers und an dem Viewport (Anzeigebereich) anpassen.
Ermöglicht wird dieses Ansprechbarkeit der Elemente durch den Einsatz unterschiedlicher CSS Styles, die möglichst flexibel reagieren, wobei jedoch den Media Querys eine besondere Bedeutung zukommt. Erst durch die Verwendung von Media Querys ist es möglich, unterschiedliche Stylesheets entsprechend dem zur Verfügung stehen Anzeigebereich bzw. Viewport auszuliefern.
Media Querys ermöglichen jedoch nicht nur unterschiedliche Stylesheets auszuliefern, sondern auch unterschiedliche HTML-Elemente. Nachfolgend ein Beispiel.

Beispiel für Reponsives Webdesign mit Media Querys

Im Beispiel wird eine zweispaltige Tabelle in den Quelltext einer HTML-Seite geschrieben, die aber nur dann angezeigt werden soll, wenn der Anzeigebereich zur Darstellung einer mehrspaltigen Tabelle ausreichend groß genug ist. Unterschreitet der Viewport hingegen ein vorgegebenes Maß, so soll der Content nicht mehr nebeneinander in einer Tabelle, sondern untereinander ausgegeben werden. Um dieses zu ermöglichen, wird der Content unterhalb der Tabelle ein zweites Mal in einem DIV-Bereich notiert.

Quelltext – Tabelle und DIV-Bereich:

<div id="poly">
    <!-- Content für Darstellung als Tabelle -->
    <table id="polygross">
      <tbody class="tabgrund">
        <tr>
          <td class="tabzellen">
          Ich bin die erste linke Zelle einer Tabelle.</td>
          <td class="tabzellen">
          Und ich bin die erste rechte Zelle einer Tabelle.</td>
        </tr>
        <tr>
          <td class="tabzellen">
          Ich bin die zweite linke Zelle einer Tabelle.</td>
          <td class="tabzellen">
          Und ich bin die zweite rechte Zelle einer Tabelle.</td>
        </tr>
      </tbody>
    </table>

    <!-- Content für Darstellung in einem DIV-Bereich -->
    <div id="polyklein" class="dbereich">
      <p>Nun sind wir keine Tabelle mehr!<br />
      <br />
      Ich <u>war</u> die erste linke Zelle einer Tabelle.
      Und ich <u>war</u> die erste rechte Zelle einer Tabelle.<br />
      <br />
      Ich <u>war</u> die zweite linke Zelle einer Tabelle.
      Und ich <u>war</u> die zweite rechte Zelle einer Tabelle.</p>
    </div>
</div>

Die in einer CSS-Datei notierten Styles und Media Querys für dieses Beispiel sind relativ übersichtlich, wobei praktisch nur ein Wechsel zwischen display:none und display:block bzw. display:table erfolgt. Bis zu einer maximalen Weite oder Breite vom Anzeigebereich (im Beispiel 820 Pixel) wird nur der DIV-Bereich und der darin enthaltene Content angezeigt und die Tabelle auf display:none gesetzt, ab 821 Pixel hingegen die Tabelle und dafür dem DIV-Bereich display:none zugewiesen.

CSS mit Media Queries:

tbody.tabgrund {background-color:#dad2b6}
td.tabzellen   {vertical-align:top; padding:10px; border:1px solid #c49d74}
div.dbereich   {padding:10px; background-color:#bbd5d9; border:1px solid #c49d74}

@media (min-width:821px) {
    #polygross {display:table;}
    #polyklein {display:none;}
}
@media (max-width:820px) {
    #polygross {display:none;}
    #polyklein {display:block;}
}

Nachfolgend ein Beispiel für die Ausgabe. Eine Veränderung sollte sich zu erkennen geben, wenn Sie die Seite vor einem größeren Monitor sitzend aufrufen und das Fenster des Browsers schrittweise verkleinern.

Beispiel für die Ausgabe:

Media Querys mit JavaScript Polyfills unterstützen

So zukunftsweisend sich Webseiten mit HTML5, CSS3 und Media Querys auch gestalten lassen, so wenig sind diese jedoch in einigen Bereichen abwärtskompatibel. Zumindest bei der Darstellung in älteren Versionen des Internet Explorers (vor IE 9) könnte es zu Problemen kommen. Doch auch ältere Versionen andere Browser könnten sich mit den im Beispiel benutzten Media Querys schwer tun.
Dennoch braucht ein Entwickler von WP Themes nicht auf reponsives Webdesign zu verzichten. Um abwärtskompatible zu bleiben bieten sich so benannte Polyfills an. Mit Hilfe von auf JavaScript beruhenden Polyfills ist es möglich, die Styles einer Webseite wie mit Media Querys zu beeinflussen und zu steuern. Wobei JavaScript noch mehr leisten kann und auch von älteren Browsern richtig interpretiert wird, insofern bei der Entwicklung unterschiedliche Browser berücksichtigt wurden.

Nachfolgend ein einfaches Polyfill als Plugin für WordPress-Installationen, welches ebenfalls den Wechsel zwischen Ausgabe der Tabelle und Ausgabe des DIV-Bereiches steuert. Im Gegensatz zur Verwendung von Media Querys wird jedoch nicht die Breite des gesamten zur Verfügung stehenden Anzeigebereichs bzw. Viewports ausgewertet, sondern nur die tatsächlich im Dokument für das jeweilige Element zur Verfügung stehende Breite. Ermöglicht wird dies durch die JavaScript Eigenschaft offsetWidth.

Einbinden lässt sich die Funktionalität des Plugins (nach dessen Aktivierung) einfach mit Hilfe eines kleinen Shortcodes in alle Seiten, bei denen ein Wechsel zwischen einer Tabelle und einem DIV-Bereich erfolgen soll. Eine Mindestweite sollte bei der Einbindung vorgewählt werden.

Shortcode:

[polyfill_fuer_tabellen minweite="480"]

Wie viel Zeilen oder Spalten eine Tabelle hat, ist für die Einbindung nicht relevant, Wichtig ist hingegen, dass im Quelltext einem übergeordneten DIV-Bereich die ID poly, der Tabelle die ID polygross und dem DIV-Bereich die ID polyklein zugewiesen wurden. Siehe hierzu das erste Beispiel auf dieser Seite (Quelltext – Tabelle und DIV-Bereich).

Das Plugin HM-TabellenPolyfill:

<?php
/*-----------------------------------------------------------------------------------
 Plugin Name: HM-TabellenPolyfill
 Plugin URI:  http://www.coder-welten.com/polyfill-fuer-tabellen-und-div-bereiche/
 Description: Polyfill für Tabellen und DIV-Bereiche mit Short-Tag [polyfill_fuer_tabellen minweite="480"]
 Author:      Horst Müller
 Version:     1.00
 Author URI:  http://www.coder-welten.com
 Datum:       03. Oktober 2013
 License:     GPL v2 und Lizenz für Software

 *  PHP- und HTML-Code stehen unter der GNU General Public License (GPL) Version 2
 *  http://www.gnu.org/licenses/gpl-2.0.txt
 *  JavaScript- und CSS-Code stehen unter der Lizenz für Software vom Verlag
 *  http://www.coder-welten.de/projekte/lizenz-fuer-software.htm

 Copyright:   © 2006/2013 - Verlag Horst Müller - Stendal

 ------------------------------------------------------------------------------------
 Die Seiten in einem Array aufnehmen, in denen der Shortcode eingebunden werden soll.
 Im Beispiel wurde für Permalinks die Einstellung Beitragsname verwendet.
 ------------------------------------------------------------------------------------
*/
$beitragsname = array(
    "polyfill-fuer-tabellen-und-div-bereiche"
    );
/*-----------------------------------------------------------------------------------
 Nur dann add_action("wp_head", "...") ausführen und die CSS Datei tabstyle.css zum
 Head hinzufügen, wenn der Basename der aufgerufenen Seite als Wert im Array notiert
 wurde.
 ------------------------------------------------------------------------------------
*/
if (isset($_SERVER["REQUEST_URI"]) and
    in_array(basename($_SERVER["REQUEST_URI"]), $beitragsname)) {

    function einbinden_von_tabstyle() {
        echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"".
             esc_url(plugins_url("/tabstyle.css", __FILE__))."\" />\n";
    }
    add_action("wp_head", "einbinden_von_tabstyle");
}
/*-----------------------------------------------------------------------------------
 Die eigentliche Funktion zum Einbinden des Polyfills mittels Shortcode.
 ------------------------------------------------------------------------------------
*/
function steuere_weite_von_tabellen_und_bereiche($atts) {

    $minweite = $atts["minweite"];
    $minweite = preg_replace("/[^0-9]/", "", $minweite);
    ob_start();
?>
<script type="text/javascript">
"use strict";
if (window.addEventListener) {
    window.addEventListener("load", pruefeWeite, false);
}
else if (window.attachEvent) {
    window.attachEvent("onload", pruefeWeite);
}
function pruefeWeite() {

    var die_weite = document.getElementById("poly").offsetWidth;
    var grosstab  = document.getElementById("polygross");
    var kleindiv  = document.getElementById("polyklein");

    /*-- Regelung der Weite --*/

    if (die_weite >= <?php echo $minweite; ?>) {
        grosstab.style.display = "table";
        kleindiv.style.display = "none";
    }
    else if (die_weite < <?php echo $minweite; ?>) {
        grosstab.style.display = "none";
        kleindiv.style.display = "block";
    }
    window.setTimeout("pruefeWeite()", 500);
}
</script>
<?php
    $ausgabe = ob_get_contents();
    ob_end_clean();
    return $ausgabe;
}
add_shortcode("polyfill_fuer_tabellen", "steuere_weite_von_tabellen_und_bereiche");
?>

Anmerkung: Um die CSS Datei nur auf der Seite in den Head mit aufzunehmen, in denen die Media Querys und Styles benötigt werden aus der CSS-Datei benötigt werden, müssen die einbindenden Dateien in dem Array ($beitragsname) vom Plugin mit aufgenommen werden. Gegebenenfalls, je nach gewählter Einstellung für Permalinks, kann es hier zu einer Abweichung bei der Schreibweise kommen.
Das Polyfill reagiert innerhalb von 0,5 Sekunden (500 Millisekunden) auf eine Veränderung des zur Verfügung stehenden Bereiches.