Mithilfe von CSS läst sich auch ändern wie markierter Text (oder auch Bilder) aussehen soll. Dazu verwendet man das Pseudo-Element ::selection. Dieser Selector sollte eigentlich dem CSS Level 3 hinzugefügt werden wurde dann aber wohl doch weggelassen. Näheres dazu hier. Doch in manchen Browsern wird es schon unterstützt.
Wie man sieht braucht Firefox (wie bei vielen Dingen rund um CSS3) mal wieder einen anderen Befehl. Da es sich hier aber um einen Selector handelt wird der Code um einiges länger. Man sollte die Selctoren auch nicht via .blau::selection, .blau::moz-selection verknüpfen da es bei Browsern die den moz- Präfix nicht kennen zu Problemen führen könnte. Der oben gezeigte Code würde so dargestellt werden:
Bitte diesen Text markieren um das Ergebnis zu sehen
Bitte diesen Text markieren um das Ergebnis zu sehen
Da dies ein Eingriff in das User-Interface ist solle man Techniken wie diese nur verwenden wenn man sich sicher ist was man tut, ansonsten gefährdet man eine Benutzterunfreundlichkeit.
Footer, also die Fußzeilen von Webpages, werden in dank Web 2.0 immer großzügiger gestaltet und sind mittlerweile bei vielen Websites schon zu einem gleich wichtigen Teil wie Header geworden. Sticky Footer sind eine Mischung aus static (normal, am Text- bzw. Elementfluss angepasst) und fixed (am viewport angepasst, bleibt immer am Rand des Browserfensters stehen) Footer. Bei viel Content bleiben sie unter diesem stehen aber wenn weniger Content vorhanden ist bleiben Sie am unteren Rand des Browserfensters hängen. Hier gibts auch eine Demo dazu: file.chris-blank.de/stick_footer/
Der HTML-Code:
Grafiken in Auswahlliste sind nicht nur nett anzuschaun sondern erhöhen die Benutzterfreundlichkeit.
Mit Hilfe von CSS ist dies kein Problem. Allerdings ensteht bei längeren Listen sehr viel Code.
Der HTML-Code zeigt noch keine Besonderheiten:
Da ich öfters gefragt werde wie man einen StyleSwitcher programmiert hab ich hier mal einen fertigen für euch ausgegraben.
In der styleswitcher.js steht das gesammt JavaScript:
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
