nicht angemeldet
Hallo,
ich melde mich mal hier zu Wort, da ich grade nach langem Suchen eine Lösung gefunden habe.
Eine verbreitete Vorgehensweise bei Responsive-Designs ist idR. mit CSS ein Pseudo-Element zu setzen
body::after {
content: 'medium';
display: none;
}
Dies liest man dann mit window.getComputedStyle aus, hängt sich ans orientation- oder resize-Event und kann so mit JavaScript zu jeder Zeit verifizieren, welches Layout grade gewählt ist und dann entesprechend inhalte nachladen oder sonstwie drauf reagieren.
Alles gut soweit, solange man keinen Internet Explorer 8 oder abwärts unterstützen muss - der kann zwar keine MediaQueries, aber mit respond.js bekommt der das auch hin. Der Haken daran: er kennt window.getComputedStyle nicht und kann auch sonst keinen CSS von Pseudo-Elementen lesen (dasselbe gilt für den IE7 auch, der leider stellenweise auch noch oft anzutreffen ist.
Die Lösung dafür bereitet Kopfzerbrechen und reicht von "geht nicht" über extreme Codemonster[1] - eigentlich ist sie aber trivial und macht sich eine eigenart von CSS zu nutze:
CSS wird nur syntaktisch validiert und nicht auf formale Gültikeit überprüft - der Standard sieht vor, dass eine unbekannte CSS-Eigenschaft oder ein unbekannter Wert einfach ignoriert wird.
Daraus machen wir also folgendes:
body {
breakpoint: 'medium';
}
Und im JavaScript sieht das so aus:
if(window.getComputedStyle) {
breakpoint = window.getComputedStyle(document.body).breakpoint;
} else if (document.body.currentStyle) {
breakpoint = document.body.currentStyle.breakpoint;
}
breakpoint ist keine definierte CSS-Eigenschaft, jeder Browser wird sie ignorieren und nicht drüber stolpern - lesen kann man sie über getComputedStyle oder currentStyle aber trotzdem.
btw: für die alten Hasen hier im Forum: nein, ich bin nicht tot und ich habe auch meinen Nick nicht gewechselt - ich bin nur sehr, sehr beschäftigt :)
In diesem Sinne: möge diese Erkenntnis jemandem helfen.
[1] hier ein paar Beispiele:
https://github.com/JoshBarr/on-media-query
http://stackoverflow.com/questions/21797258/getcomputedstyle-like-javascript-function-for-ie8
http://stackoverflow.com/questions/15733365/cross-browser-ie8-getcomputedstyle-with-javascript