Schlagwort: html

Responsive Design: Media Query

Unter Responsive Design versteht man die dynamische Anpassung des Webseiten-Layouts an das Darstellungsmedium. Beispielsweise wird das GitHub-Ribbon in der oberen rechten Ecke erst ab einer Breite von 500 Pixeln angezeigt. Dafür ist dieser Code verantwortlich:

Style-Angabe

<style type="text/css"> @media all and (max-width: 500px) { #github_ribbon { display:none; } } </style>

HTML

<a href="https://github.com/sklueh"><img id="github_ribbon" style="z-index:2; position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>

50 hilfreiche Werkzeuge zum Thema Responsive Design:
50 fantastic tools for responsive web design

Entfernen von überflüssigen Whitespaces aus HTML-Code mit PHP

Reduziert den Umfang des HTML-Codes indem überflüssige Whitespaces am Zeilenanfang und am Zeilenende durch einen regulären Ausdruck entfernt werden.

Code:

function minify($sHTML)
{
   return preg_replace('/([\s\t\n]*)(<.*>)([\s\t\n]*)/', '$2', $sHTML);
}

 

Beispiel vorher:

<input type="submit" name="" id="doaction" class="button-secondary action" value="Übernehmen"  />
        </div>
        <div class="alignleft actions">
        <select name=\'m\'>
            <option selected=\'selected\' value=\'0\'>Jedes Datum</option>
<option  value=\'201206\'>Juni 2012</option>
<option  value=\'201201\'>Januar 2012</option>
        </select>
<select name=\'cat\' id=\'cat\' class=\'postform\' >
    <option value=\'0\'>Alle Kategorien</option>
    <option class="level-0" value="1">Allgemein</option>
    <option class="level-0" value="5">C#</option>
    <option class="level-0" value="10">JavaScript</option>
    <option class="level-0" value="3">PHP</option>
    <option class="level-0" value="9">reguläre Ausdrücke</option>
</select>

 

Beispiel nachher:

<input type="submit" name="" id="doaction" class="button-secondary action" value="Übernehmen"  /></div><div class="alignleft actions"><select name='m'><option selected='selected' value='0'>Jedes Datum</option><option  value='201206'>Juni 2012</option><option  value='201201'>Januar 2012</option></select><select name='cat' id='cat' class='postform' ><option value='0'>Alle Kategorien</option><option class="level-0" value="1">Allgemein</option><option class="level-0" value="5">C#</option><option class="level-0" value="10">JavaScript</option><option class="level-0" value="3">PHP</option><option class="level-0" value="9">reguläre Ausdrücke</option></select>