• Skip to content
  • Skip to primary sidebar

Woytec

Digital

  • Für dich
    • Digital Analytics
    • Online Marketing
    • Web Entwicklung
    • Linux
    • FAQ
    • Linkliste
    • Downloads
  • Über mich
    • Schreib mir
  • Ehrenamt
  • Datenschutz
  • Impressum
MediaQueries mit JavaScript nicht auf Viewport sondern Element Ebene
MediaQueries mit JavaScript nicht auf Viewport sondern Element Ebene

MediaQueries mit JavaScript nicht auf Viewport sondern Element Ebene

posted on 26.08.2017

Inhaltsverzeichnis

  • Video: Kurze Erklärung zum Plugin
  • Wieso EQCSS?
    • Was mit CSS geht
    • Was mit CSS nicht geht
  • Wie funktioniert das EQCSS-Plugin?
  • Bedingungen
    • Welche Bedingungen können abgefragt werden?
    • Zusätzliche Selektoren
    • $this
    • $parent
    • $prev
    • $next

Video: Kurze Erklärung zum Plugin

https://woytec.de/wp-content/uploads/2016/11/eqcss-video-erklärung.mp4

 

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

Kategorie: Web Entwicklung Stichworte: Blog

Zum kostenlosen Newsletter anmelden

[wd_hustle id=“email“ type=“embedded“]

Über mich: Marcus Woyciechowski

Marcus Woy

Ich beschäftigte mich seit etwa 2005 mit dem Thema Digitale Marketing & Web Entwicklung. Es war mir schon immer ein Bedürfniss Online Marketing ganzheitlich als Online Marketer & Web Entwickler betrachten zu können. So kann das Beste aus beiden Welten benutzt werden. Das Schöne ist es, jeden Tag etwas Neues in dem Dschungel des WWW zu entdecken.

Lernen durch Lehren
ist der Eckpfeiler meiner Motivation.


Ich bin Freiburger und arbeite dort, wo andere Leute Urlaub machen. Nur betrachte ich es nicht als Arbeit. Es ist eher eine Leidenschaft, mit der ich zugleich auch Geld verdiene.

Mein Ziel ist es, Menschen/Ihnen/Euch dabei zu helfen, den Dschungel Online Marketing einfach(er) zu verstehen. Und ich freue mich über jeden, der meinen Newsletter abonniert.

Und wer von mir noch nicht genug hat, kann sich mein Profil ansehen.

Reader Interactions

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Haupt-Sidebar (Primary)

Suche

Neueste Beiträge

  • 🥰 100 Branchenbücher & Firmenverzeichnisse Liste zum Eintragen – ✓ geprüft, ✓ kostenlos, ✓ aktuell
  • Linux Grundkurs für Einsteiger
  • Mitarbeiterführung der Generation Y und Remote Leadership
  • Google Data Studio Changelog Neuerungen 2022
  • Hyper-V unter Windows 10 und 11 Home aktivieren

Kategorien

  • Administration (1)
  • Digital Analytics (2)
  • Downloads (4)
  • Linux (2)
  • Online Marketing (8)
  • Web Entwicklung (10)

Urheberrecht © 2025 · Academy Pro am Genesis Framework · WordPress · Anmelden