MediaQueries mit JavaScript nicht auf Viewport sondern Element Ebene

Video: Kurze Erklärung zum Plugin

 

Wieso EQCSS?

Mittels CSS Media Queries können abhängig der Größe des Browser Viewport Stylesheets geladen/überschrieben werden. CSS bietet aber keine Möglichkeit an, dass man auf Größenänderungen eines Dom-Elements reagieren kann.

Was mit CSS geht

@media (min-width:100px) {
  #beispiel {
   color:blue;
  }
}

Mit dieser Regel wird die Schriftfarbe Schwarz,
wenn die Mindestbreite des Browsers (Viewport) von 100px erreicht ist.

Was mit CSS nicht geht

Soll die Schrift ähnlich wie oben nicht auf Basis des Viewports, sondern auf Basis der Breite des HTML-Tag verändern, wird das mit CSS nicht funktionieren.

Abhilfe schafft hier das JavaScript-Plugin EQCSS , es bietet unter Anderem die Möglichkeit auf Größenveränderungen eines HTML-Tags zu reagieren.

Wie funktioniert das EQCSS-Plugin?

Das Plugin sucht nach Laden der Seite nach Stylesheet, diese können Inline (<style></style im Body) oder extern eingebunden werden.

Die Syntax ist sehr ähnlich zu Media Queries und ist wie folgt:

@element '#beispiel' {
  .test {
    color:red;
  }
}

Es muss zwingend @element und ein Dom Element angesprochen werden.
Auf Basis dieser Infos findet und manipuliert EQCSS die Eigenschaften

---

 

Bedingungen

Bedingungen werden immer mit einem and verkettet.

Beispiel: Nur eine Bedingung

@element '#beispiel' and (min-width: 100px) {
  .test {
    color:red;
  }
}

Beispiel: mMhr als eine Bedingung

@element '#beispiel' and (min-width:100px) and (max-width:10px) {
  .test {
    color:red;
  }
}

 

Welche Bedingungen können abgefragt werden?

Breite basierend	Höhe basierend	Zähler basierend	Scroll basierend
min-width	min-height	min-characters	min-scroll-y
max-width	max-height	max-characters	max-scroll-y
		min-lines	min-scroll-x
		max-lines	max-scroll-x
		min-children
		max-children

 

Zusätzliche Selektoren

$this

Beschreibung folgt….

$parent

Beschreibung folgt….

$prev

Beschreibung folgt….

$next

Beschreibung folgt….