Logos einbinden und mehr in CSS und Java
Wir zeigen an praktischen Code-Beispielen wie Sie schnell und einfach Logos via CSS einbinden und Sie eine natürliche Reihenfolge erstellen.
MySQL, PHP: Sortieren in natürlicher Reihenfolge MySQL fehlt nach wie vor die Fähigkeit, Datensätze in natürlicher Reihenfolge zu sortieren (also nicht "iPhone 1, iPhone 11, iPhone 2, ...", sondern "iPhone 1, iPhone 2, ..., iPhone 11"). In einigen Fällen lässt sich das Problem mittels eine...
MySQL, PHP: Sortieren in natürlicher Reihenfolge
MySQL fehlt nach wie vor die Fähigkeit, Datensätze in natürlicher Reihenfolge zu sortieren (also nicht "iPhone 1, iPhone 11, iPhone 2, ...", sondern "iPhone 1, iPhone 2, ..., iPhone 11"). In einigen Fällen lässt sich das Problem mittels einer Abfrage in der Form
SELECT names FROM die_Tabelle ORDER BY Alter + 0 ASCumgehen. Leider ist diese Lösung nicht generell anwendbar. Anwendern von Drupal steht ein Modul mit den benötigten Sortierfähigkeiten zur Verfügung (die aktuelle Version vom Februar 2011 unterstützt MySQL ab der Version 5 und PostgreSQL).Sollte keine dieser beiden Lösungen für Sie in Frage kommen, können Sie sich mit diesem PHP-Skript behelfen. Würde man die Datensätze einer MySQL-Tabelle in einem PHP-Array erfassen, würde das Feld etwa wie folgt aussehen:
$array1 = Array
(
[1] => Array
(
[Vorname] => Markus
[Altersgruppe] => 1
[Nachname] => Lange
)
[2] => Array
(
[Vorname] => Thomas
[Altersgruppe] => 5
[Nachname] => Becker
)
[3] => Array
(
[Vorname] => Petra
[Altersgruppe] => 2
[Nachname] => Meyer
)
);Jetzt kommt der natürliche Sortieralgorithmus in PHP zum Zuge:
natsort($array1);
echo "\nDas Resultat:\n";
print_r($array1);Allerdings solle man beachten, dass sich das Verhalten in PHP in der Version 5.2.10 geändert hat. Der Algorithmus in 5.2.6-1 sortiert ein Array alphanumerischer Datensätze etwa wie folgt:
Array
(
[3] => 0
[6] => 0
[2] => 0 Oppenheimer
[4] => 01
[5] => 01 Version
[8] => 1
[7] => 1
[0] => 1 Berlin
[1] => 10 TangoPHP ab Version 5.2.10 liefert stattdessen:
Array
(
[6] => 0
[3] => 0
[8] => 1
[4] => 01
[7] => 1
[5] => 01 Version
[0] => 1 Berlin
[1] => 10 Tango
[2] => 0 Oppenheimer
)Die führende Null wird ignoriert.
HTML, CSS: Logo einbinden
Wer einen hohen Wert auf semantisch korrekte Auszeichnung und optimale Barrierefreiheit seiner Websites legt, ist gut beraten, ein Logo als eigenständigen Seiteninhalt zu handhaben und nicht als Stilinformationen über das Aussehen eines anderen Elementes.
Letzteres ist der Fall, wenn man das Logo mittels CSS als ein Hintergrundbild in ein anderes Element der Dokumentenstruktur einfügt. Beim Ausdrucken der Website werden Hintergrundfarben und -bilder generell weggelassen; so würde auch das Logo auf dem Ausdruck wegfallen.Um das Logo der Seite semantisch sauber auszuzeichnen, nutzen Sie ganz einfach das <img>-Tag:
<img alt="Unser Logo" src="/Bilder/Logo.png">Damit das Logo beim hover-Ereignis den Zustand flüssig wechselt, schließen Sie es ganz einfach in einem <a>-Tag ein, der zurück auf die Startseite verweist, und weisen diesem Tag eine Sprite-Version des Logos als Hintergrundbild zu. Das Markup sieht nun wie folgt aus:
<a href="/" id="logo"><img alt="Unser Logo" src="/Bilder/Logo.png"></a>Die Sprite-Version des Logos definiert das Aussehen des Elementes und wird mittels CSS wie folgt eingebunden:
#logo{
display:block;
width:100px; /* Breite des ersten Zustands des Logos */
height:100px; /* Höhe des ersten Zustands des Logos */
background:url(/img/css/Sprite.png);
}Durch den Einsatz von Sprites entfallen redundante HTTP-Anfragen, wodurch sich der Seitenaufbau wesentlich beschleunigen lässt. Denn alle Zustände des betreffenden Elementes sind hier in einer einzigen, erweiterten Sprite-Grafik enthalten und rücken beim passenden Ereignis ins sichtbare Feld.Das Bild Sprite.png füllt so den Hintergrund des <a>-Elementes, in dem sich das nun überflüssig gewordene Bild Logo.png befindet. Letzteres der beiden Bilder wird daher ausgeblendet, zum Beispiel mittels der Eigenschaft display:none; oder noch besser durch das Verschieben außerhalb des Browserfensters:
#logo img{
position:absolute;
left:-9999px;
}Jetzt ist nur noch das auf Sprites basierende Hintergrundbild des <a>-Elementes sichtbar, doch das alt-Attribut aus dem <img>-Tag ist der Barrierefreiheit zuliebe bei Bedarf nach wie vor vorhanden. Damit beim Kontakt mit der Maus das sichtbare Logo seinen zweiten Hover-Zustand einnehmen kann, wird das Sprite wie folgt verschoben:
#logo:hover{
background-position:0 -100px;
}In dieser Ausführung kann der Besucher der Seite das Logo nicht direkt herunterladen, weil sich das benötigte Menü beim Anklicken der Grafik nicht öffnet (diese ist ja ein Hintergrundbild). Falls Sie das Herunterladen des Logos über das kontextsensitive Menü am Mauszeiger erlauben möchten, müssen Sie die Datei Logo.png an ihrer ursprünglichen Position auf der Seite belassen und lediglich die Opazität auf Null setzen, zum Beispiel so:
#logo img{
/* position:absolute; */
/* left:-9999px; */
opacity:0;
filter:alpha(opacity = 0); /* für den IE */
}
Chrome Canary: Versionen parallel nutzen
Wer mehrere verschiedene Versionen des Google Chrome Browsers unter Windows parallel zueinander nutzen möchte - zum Beispiel um Website-Projekte mit dem neuesten Chromium-Build zu testen - kann zusätzlich zu seiner Hauptinstallation von Chrome aus dem Zweig stable, beta oder dev eine Edition des Browsers unter dem Namen Google Chrome Canary einrichten. Bei Google Chrome Canary haben Sie es mit einem ungetesteten Nightly Build der neuesten Features zu tun, der kürzlich freigegeben wurde. Nach der Installation von Google Chrome Canary weigert sich der Google-Downloader allerdings, Chrome in der Entwicklerversion zu installieren, mit der Begründung, dass Sie bereits eine neuere Version des Browsers verwenden (gemeint ist hierbei der so genannte Nightly Build Ihrer Canary-Installation).In diesem Fall haben Sie zwei Möglichkeiten: Entweder Sie geben sich mit dem stabilen Zweig zufrieden, oder Sie laden einen vollständigen Installer - also nicht den Installer/Downloader, den Ihnen Google standardmäßig anbietet - für die aktuellste Chrome-Version aus dem Entwicklerzweig herunter. Diesen Installer bietet Ihnen Google erst gar nicht an. Zum Glück werden Sie unter anderem fündig unter downloadcrew.com oder afterdawn.com Falls Sie Flash-Websites testen müssen, sind Sie mit der Entwicklerversion von Chrome generell besser bedient als mit dem stabilen Zweig, da Chrome die installierte Flash-Version vorgibt (mit einem neueren Chrome kommt also ein neueres Flash-Plug-in). Allerdings sollten Sie beachten, dass sich Chrome-Builds aus dem stabilen und dem Entwicklerzweig nicht miteinander vertragen. Dennoch lässt sich jede dieser Versionen mit Google Chrome Canary auf ein und demselben System betreiben.
Javascript: Herstellerspezifische Präfixe
Wer sein HTML-Markup zur Maximierung der Browserkompatibilität mit herstellerspezifischen Präfixen versieht, bestraft sich leicht mit fehlerträchtigem Javascript-Code dieser Form:
var elm = document.getElementById("dasElement");
elm.style.msTransitionProperty = "all";
elm.style.msTransitionDuration = "3s";
elm.style.msTransitionDelay = "0s";
elm.style.webkitTransitionProperty = "all";
elm.style.webkitTransitionDuration = "3s";
elm.style.webkitTransitionDelay = "0s";
elm.style.MozTransitionProperty = "all";
elm.style.MozTransitionDuration = "3s";
elm.style.MozTransitionDelay = "0s";
elm.style.OTransitionProperty = "all";
elm.style.OTransitionDuration = "3s";
elm.style.OTransitionDelay = "0s";Diesen Code können Sie aufräumen, indem Sie Eigenschaften, die ein herstellerabhängiges Präfix aufweisen, zusammenfassen:
function FirstSupportedPropertyName(prefixedProperty
Names) {
var tempDiv = document.createElement("div");
for (var i = 0; i < prefixedPropertyNames.length; ++i) {
if (typeof tempDiv.style[prefixedPropertyNames[i]] !=
'undefined')
return prefixedPropertyNames[i];
}
return null;
}Diese Funktion definiert eine Methode zum Durchsuchen einer Liste von Eigenschaften. Diese Funktion gibt entweder die erste unterstützte Eigenschaft oder den Wert null zurück (sofern der Browser keine der angegebenen Eigenschaften unterstützen sollte). Letzteres läuft praktisch auf eine ganz einfache Feature-Erkennung (Erkennung der unterstützten Stylesheet-Eigenschaften durch den betreffenden Browser) hinaus.Als Nächstes gilt es, für jede herstellerabhängige Eigenschaft eine Variable zu initialisieren, und ihr ein Array von Eigenschaftennamen in der bevorzugten Reihenfolge zu übergeben:
var transformName = FirstSupportedPropertyName(["trans
form", "msTransform", "MozTransform", "WebkitTransform", "OTransform"]);
var backfaceVisibilityName = FirstSupportedPropertyName
(["backfaceVisibility", "msBackfaceVisibility", "MozBackfaceVisibility", "WebkitBackfaceVisibility", "OBackfaceVisibility"]);
var transitionName = FirstSupportedPropertyName
(["transition", "msTransition", "MozTransition", "WebkitTransition", "OTransition"]);
var animationName = FirstSupportedPropertyName
(["animation", "msAnimation", "MozAnimation",
"WebkitAnimation", "OAnimation"]);
var gridName = FirstSupportedPropertyName(["gridRow",
"msGridRow", "MozGridRow", "WebkitGridRow", "OGridRow"]);
var regionsName = FirstSupportedPropertyName(["flowFrom",
"msFlowFrom", "MozFlowFrom", "WebkitFlowFrom", "OFlowFrom"]);
var hyphensName = FirstSupportedPropertyName(["hyphens",
"msHyphens", "MozHyphens", "WebkitHyphens", "OHyphens"]);
var columnName = FirstSupportedPropertyName
(["columnCount", "msColumnCount", "MozColumnCount", "WebkitColumnCount", "OColumnCount"]);Den Code Ihrer Website, welcher diese Eigenschaften nutzt, müssen Sie nun auf die folgende Art und Weise umschreiben:
var elm = document.getElementById("dasElement");
if (transitionName) {
elm.style[transitionName + "Property"] = "al";
elm.style[transitionName + "Duration"] = "3s";
elm.style[transitionName + "Delay"] = "0s";
}
else {
// Fallback fuer Browser ohne Unterstuetzung fuer CSS3-Uebergaenge
}Einige Stylesheet-Eigenschaften mit einem herstellerspezifischen Präfix akzeptieren nur Werte, die ebenfalls einen Präfix aufweisen. Für diese Fälle können Sie eine leicht abgewandelte Version des Codes nutzen, zum Beispiel:
function FirstSupportedFunctionName(property, prefixed
FunctionNames, argString) {
var tempDiv = document.createElement("div");
for (var i = 0; i < prefixedFunctionNames.length; ++i) {
tempDiv.style[property] = prefixedFunctionNames[i] +
argString;
if (tempDiv.style[property] != "")
return prefixedFunctionNames[i];
}
return null;
}
var linearGradientName = FirstSupportedFunctionName
("backgroundImage", ["-ms-linear-gradient", "-moz-linear-gradient", "-webkit-linear-gradient", "-o-linear-gradient"], "(top, black, white)");
var radialGradientName = FirstSupportedFunctionName
("backgroundImage", ["-ms-radial-gradient", "-moz-radial-gradient", "-webkit-radial-gradient", "-o-radial-gradient"], "(50% 50%, circle cover, black, white)");
