Jeder Frontend Entwickler weiß, dass in Zeiten der mobilen Internetnutzung responsive Seitengestaltung nicht mehr weg zu denken ist. Dies geschieht in den Regel in Abhängigkeit des viewports, sprich ändert sich die Größe des sichtbaren Browserfensters, ändert man die CSS Eigenschaften der einzelnen Elemente oder blendet diese ggf. sogar aus.
Möchte man jetzt aber mal ein gezieltes Element responsive von einem anderen speziellen Element abhängig machen, ist dies durch rein CSS schlicht nicht möglich. Hier haben sich aber glücklicherweise ambitionierte Entwickler Gedanken gemacht und eine Lösung per JavaScript gefunden.
Ein Plugin mit dem dies zu realisieren wäre, ist das EQCSS, welches ich gerne kurz vorstellen möchte.
Wie bei jedem anderen Plugin muss dies natürlich auf übliche Art und Weise in das Webprojekt eingebunden werden, wobei es nichts weiter brauch, da es in purem JavaScript geschrieben wurde, also kein JQuery oder etwaiges nötig .
Hat man dies gemacht, ist das handling ziemlich vergleichbar mit den „@media“ queries, nur das es hier halt „@element“ heißt. Dieses kann man direkt im CSS machen oder auch in einer externen Datei auslagern.
Die Syntax wäre dann folgende:
@element {selector} and {condition} [ and {condition} ]* { {css} }Der selector ist der übliche CSS-Selektor einzeln als #id oder mehrere über die .class. Die condition gibt an unter welcher Bedingung etwas geschehen soll (Element-x hat die Größe-x, mache {css}), wo eben in dem CSS dann das steht, was geändert werden soll.
Auf der Webseite von EQCSS sind auch einige Beispiele mit Syntaxbeispielen aufgeführt, welche man auch gleich ausprobieren kann. Was hier auch sehr spannend ist, man kann nicht nur auf Abhängigkeit von Elementgrößen prüfen, sondern auch auf z.B. wie viel child-Elemente ein Element hat oder wie viele characters in einem input vorhanden sind und dann darauf eine bestimmte Änderung herbei führen. Zudem sind auch mehrere Bedingungen kombinierbar.
Fazit: Eine super Sache um responsivität in Relation zu einem ganz speziellen Element zu bewirken.