Code Cheatsheet [Gedankenstütze]

Ein Code lässt sich beliebig oft recyceln.
Copy and paste frequently used codes and snippets from the cheat sheet below.

HTML / XML

Favicon & Lesezeichen (bookmark) Icon compatible with Android & Apple Devices
Anwendung / Beschreibung Code
Insert between:
<head></head>
Browsertab Favicon:
<link rel="shortcut icon" type="image/x-icon" href="http://www.thanh.ch/it/images/favicon.ico" />
Android Bookmark Icon (e.g. Samsung):
<link rel="image_src" type="image/png" href="http://www.thanh.ch/it/images/icon_114x114.png" />
iPhone Icon:
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="http://www.thanh.ch/it/images/icon_57x57.png" />
iPad Icon:
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.thanh.ch/it/images/icon_72x72.png" />
Mac Icon:
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.thanh.ch/it/images/icon_114x114.png" />

CSS

Bezeichnung Beispiel / Anwendung
Deklaration (declaration)
display: none;
Element Typ (element type)
div {}
p {}
span {}
ul {}
img {}
a {}
Klasse (class)
.menu {}
.button {}
ID (unique)
#header {}
#footer {}
#copyright {}
Attribut (attribute)
src=""
alt=""
title=""
href=""
width=""
height=""
rel=""
itemprop=""
name=""
Syntax (Aufbau) Beispiel mit zusätzlichem Filter durch eine definierte Attribut Auswahl (selector)
img[src^="http://www.millionairefair.tk/images/"] {
  width: 100%;
  height: auto;
}
img[src$=".png"] {
  width: 100%;
  height: auto;
}
Beschreibung Operator
Beginnt mit Attribut Wert (value)
^=
Enthält Attribut Wert
*=
Endet mit Attribut Wert
$=
Platzhalter für eine Zeichenfolge (string) vor oder nach dem durch einen Leerschlag getrenntem Attribut Wert
~=
Platzhalter für eine Zeichenfolge vor oder nach dem durch einen Bindestrich (minus) getrenntem Attribut Wert
|=
Keyboard Style

Q A S D Leerschlag
(Datenreduzierte und dadurch Performance optimierte Alternative zur konventionellen Bilddatei)

Inline:

<span style="border: 0.2em solid; border-color: #DDDDDD #BBBBBB #BBBBBB #DDDDDD; padding: 0 0.4em; background: #EEEEEE; white-space: nowrap">Key</span>

CSS:

.kbd {
  border: 0.2em solid;
  border-color: #DDDDDD #BBBBBB #BBBBBB #DDDDDD;
  padding: 0 0.4em;
  background: #EEEEEE;
  white-space: nowrap;
}

Alternative CSS Variante: @

.kbd {
margin: 0 0.1em;
padding: 0.1em 0.6em;
border-radius: 3px;
border: 0.1em solid #cccccc;
color: #333333;
line-height: 1.5;
font-size: .83em;
font-family: inherit;
display: inline-block;
background-color: #f7f7f7;
box-shadow: 0 0.1em 0 rgba(0, 0, 0, 0.2), 0 0 0 0.2em white inset;
-webkit-box-shadow: 0 0.1em 0 rgba(0, 0, 0, 0.2), 0 0 0 0.2em white inset;
-moz-box-shadow: 0 0.1em 0 rgba(0, 0, 0, 0.2), 0 0 0 0.2em white inset;
-ms-box-shadow: 0 0.1em 0 rgba(0, 0, 0, 0.2), 0 0 0 0.2em white inset;
-o-box-shadow: 0 0.1em 0 rgba(0, 0, 0, 0.2), 0 0 0 0.2em white inset;
}
Make a black and white / color on hover effect for pictures
img {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
-webkit-backface-visibility: hidden; /* Fix for transition flickering */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

img:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);
}
Sonderzeichen (Entity) HTML / XML Umschreibung
Leerschlag (space)
&nbsp;
Ä
&Auml;
Ö
&Ouml;
Ü
&Uuml;
ä
&auml;
ö
&ouml;
ü
&uuml;
&
&amp;
©
&copy;
&euro;
<
&lt;
>
&gt;

PHP

Befehl Code
PHP Info abrufen
<?php phpinfo(); ?>
Aktuelles Jahr ausgeben
<?php echo date(Y); ?>
PHP Version abrufen
<?php echo phpversion(); ?>
Aktuelle URL auf Seite anzeigen
<?php echo $_SERVER["REQUEST_URI"]; ?>

.htaccess-Datei (-file) Konfiguration (configuration) unter Apache

Code: Webseite komprimieren mit dem “Deflate” Algorithmus (schneller als “Gzip”)
# compress text, html, javascript, css, xml:
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
# Or, compress certain file types by extension:
  <files *.html>
  SetOutputFilter DEFLATE
  </files>
Code: Permanente Weiterleitung (vgl. 301-Redirect) auf die Subdomain “www.”
RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\.meetthestaff\.tk$ [NC]
RewriteRule ^(.*)$ http://www.meetthestaff.tk/$1 [R=301,L]
Code: Permanente Weiterleitung von der Subdomain “www.” auf die Hauptdomain
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.wetterkamera.tk$ [NC]
RewriteRule ^(.*) http://wetterkamera.tk/$1 [L,R=301]

JavaScript (JS)

Snippet: Copyright Jahr automatisch aktualisieren
<script type="text/javascript"> <!– function y2k(number) { return (number < 1000) ? number + 1900 : number; } var today = new Date(); var year = y2k(today.getYear()); document.write('Copyright © 2011 – '+year+' by <a href="http://www.most-wanted-freelance-webmaster.tk/" target="_parent" rel="nofollow">Thánh Chiến Nguyễn</a> – All Rights Reserved'); //–> </script>
Snippet: Aktuelle URL auf Seite anzeigen
<script type="text/javascript">document.writeln(document.URL);</script>
Snippet: Dynamische I-Frame Höhenanpassung an Inhalt
Anwendung / Platzierung Code
JS im head-Bereich
<script type="text/javascript">
function hoehe() {
document.getElementById("myframe").height = document.getElementById("myframe").contentWindow.document.body.offsetHeight;
}
</script>
I-Frame im body-Bereich
<iframe src="http://www.thanh.ch/domains/" id="myframe" width="100%" marginheight="0px" marginwidth="0px" frameborder="0" scrolling="no" onload="hoehe()"></iframe>

Videos, Slideshows and Podcasts by Cincopa Wordpress Plugin