nicht angemeldet
Derzeitigen Breakpoint mit CSS und JavaScript ermitteln
suit
0 0 suit
Derzeitigen Breakpoint mit CSS und JavaScript ermitteln
suit
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
-
Hi,
Eine verbreitete Vorgehensweise bei Responsive-Designs ist idR. mit CSS ein Pseudo-Element zu setzen […]
Dies liest man dann mit window.getComputedStyle aus, […]Die Lösung dafür bereitet Kopfzerbrechen und reicht von "geht nicht" über extreme Codemonster
Man könnte auch einfach darauf verzichten, ein Eierkopf zu sein der hier auf der Benutzung eines CSS-Pesudoelementes besteht – und stattdessen einfach per JavaScript (was man ja sowieso für das ganze nutzen will) ein Element ans Ende von Body einfügen, und dann dessen Maße auslesen (wozu vermutlich in allen Browsern offsetWidth reichen dürfte).
Aber hey – warum einfach, wenn … :-)
MfG ChrisB
--
Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/-
Man könnte auch einfach darauf verzichten, ein Eierkopf zu sein der hier auf der Benutzung eines CSS-Pesudoelementes besteht – und stattdessen einfach per JavaScript (was man ja sowieso für das ganze nutzen will) ein Element ans Ende von Body einfügen, und dann dessen Maße auslesen (wozu vermutlich in allen Browsern offsetWidth reichen dürfte).
Aber hey – warum einfach, wenn … :-)
Mir ging es prinzipiell darum, nicht eine Breite auslesen zu müssen, sondern einen definieren Wert in Form eines Texts - wenn man die Breite ausliest (dafür braucht man eigentlich gar kein Element) habe ich keine direkte Assoziation zum entsprechenden Abschnitt im CSS und muss erst wieder abgleichen, welcher nun der war, der 780 Pixel breit ist.
Das lässt sich umgehen, indem man die Breite dieses Elements dann mit CSS setzt (in eben diesen Breakpoints), aber das führt dazu dass man dann trotzdem eine Zuordnung braucht.
Wenn der Code wiederverwendbar ist und die Abmessungen der Breakpoints nicht immer dieselben sind, wird das lästig und unnötig viel Code.
Wenn man z.B. Bootstrap verwendet, kann man hier einfach ein xs, md, lg oder wie auch immer setzen und weiß im JavaScript sofort, welches dieser Layouts grade aktiv ist - ohne erst herumrechnen zu müssen und eine Tabelle zu führen, welche Abmessungen jetzt wofür gut sind.
-