AW: CSS - Webseite für IE anpassen
hi.
ich hab' mir die seite gerade im ie7 standart modus angezeigt und keine probleme mit :visited gefunden. auch ansonsten sah das alles soweit ganz ok aus. allerdings wirft die console folgendes aus:
SEC7115: :visited and :link styles can only differ by color. Some styles were not applied to :visited.
ABER:
---------
1)
scheinbar ist noch niemandem aufgefallen, dass dein doctype eigentlich falsch ist, da er konzipiert ist für xhtml 1.0 transitional, nicht für html5. du solltest entweder die korrekte html5-schreibweise nutzen oder xml (was für html5 das pendant ist zu xhtml) wenn du html5-elemente nutzen willst.
2)
attribute wie align="center" sind in html5 deprecated. in html4 auch. in xhtml erst recht.
3)
der sinn von diesem konstrukt ist mir völlig unverständlich (abgesehen davon, dass ich ein <br> definitiv nicht zum clearen nutzen würde da inline-element. nimm besser ein div o. ä. oder setz' die clear-klasse auf das <p>-tag.):
HTML:
<p><br class="clear" /></p>
egal für was du dich entscheidest, momentan ist das semantischer blödsinn im quadrat.
4)
sehr nervig finde ich, dass du auf beinahe jede verlinkung ein target="_blank" gesetzt hast. wäre ich ein normaler user, würde ich die seite nicht lange anschauen, weil ich nämlich keinen bock darauf hätte, dass sich (fast) jede seite in einem neuen fenster bzw. (je nach usereinstellung) tab öffnet und ich am ende alle wieder schließen müsste, sofern ich nicht mit zig fenstern/tabs surfen will.
5)
nur weil es native html5 elemente sind, würde ich persönlich sie nicht einsetzen, wenn explizit der ie7 mit unterstützt werden soll. was haben nur alle gegen die good ol' divs? der sinn von elementen wie <nav> oder <footer> wird doch ad absurdum geführt, wenn ich für den einsatz doch wieder ein <div>-tag darum setzen muss, damit die browser es verstehen. dann kann ich auch gleich darauf verzichten (ok, ausnahme wären hier screenreader. der wird aber mit deiner page so oder so nicht viel anfangen können, da die enthaltenen informationen hauptsächlich aus bildern bestehen. und es gibt keine spezifikation* beim w3c, dass screenreader das <nav>-tag identifizieren und als mehr oder weniger irrelevanten inhalt nur auf nachfrage zur verfügung stellen müssen – dass sie sich so verhalten ist ein vorschlag).
*: genau genommen gibt es für html5-elemente noch gar keine richtige spezifikation. die ist nämlich noch "working draft". demnach ist die aktuellste offizielle version von html: v4!
6)
der sinn des "preloads" der bilder innerhalb des sliders entzieht sich mir vollständig. das ist keine technik um bilder vorzuladen, sondern einfach verdoppelter content. sowas mag der google-bot eigentlich nicht sonderlich gerne.
um bilder vorzuladen könntest du einen javascript-code einsetzen, der vor dem DOMContentLoaded (und damit auch vor einem window.onload, $(document).ready() oder document.onreadystatechange) ausgeführt wird. dazu kannst du (in kurzform, hier bei psd-tutorials gibt's dazu auch ein tut) z. b. solchen code nutzen:
JAVASCRIPT
PHP:
// images vorladen mit dieser function
function createImagesList (images_names_as_string_separated_by_pipe) {
var imgs_array = document.createDocumentFragment(), // interner temporärer zwischenspeicher
imgs_names = images_names_as_string_separated_by_pipe.split('|'), // namen als array
current_image = null, // enthält beim erzeugen das aktuelle bild
current_li = null, // enhält beim erzeugen das jeweilige <li>-tag
i = 0, len = imgs_names.length; // schleifenvariablen
while (i < len) {
// <li>-tag erzeugen
current_li = document.createElement('li');
// bilder via schleife erzeugen
current_image = document.createElement('img');
// src-attribut zuweisen
current_image.src = ['images/auge/', imgs_names[i], '.jpg'].join('');
current_image.alt = '';
// bild in <li> integrieren
current_li.appendChild(current_image);
// in temporären zwischenspeicher schieben
imgs_array.push(current_li);
// schleifenvariable erhöhen
i = i+1;
}
// zwischenspeicher zurückgeben
return imgs_array;
};
// images einfügen mit dieser function
function insertImagesList (target_node, images_fragment) {
// alle bilder einfügen
target_node.appendChild(images_fragment);
// fadeSlideShow registrieren
$(target_node).fadeSlideShow();
};
// vorladen
var all_images = createImagesList('auge+dom|auge+dom-1|auge+dom-2|auge+dom-orange|auge+dom-ende');
$(document).ready(function () {
// vorgeladene bilder einfügen
insertImagesList(document.getElementById('slideshow'), all_images);
// weiterer code...
});
der code ist so geschrieben, dass du ihn eigentlich schon direkt so einsetzen kannst. denk aber daran, dass du sowohl das "preload"-div nicht benötigst, als auch die "slideshow"-ul leer sein muss.
---------
ok, im großen und ganzen: kann man so machen. punkt 5) ist subjektiv, daher fällt er einfach relativ wenig ins gewicht. punkt 6) ist ein opt-in. die restlichen punkte würde ich ändern bzw. überdenken.
gruß
EDIT: hatte vergessen die slideshow nach dem einfügen der bilder in das dom zu registrieren. hab es nachgezogen.
) (nur optisch)
