MediaQueries mit JavaScript nicht auf Viewport sondern Element Ebene

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….

Marcus Woy

Related Posts
Leave a reply