Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 44

Element Queries: Webdesign mit Layouts noch besser gestalten

Seite 2 / 3

Syntax-Vorschlag für Element Queries

.profile { 
    overflow: hidden; /* clearfix */ 
} 
/* Einspaltig */ 
.profile-picture, 
.profile-data {
    display: block; 
    text-align: center; 
} 
/* Zweispaltig */ 
.profile:media(min-width: 20em) .profile-picture, 
.profile:media(min-width: 20em) .profile-data { 
    width: 50%; 
    float: left; 
    text-align: left; 
} 
.profile:media(min-width: 20em) .profile-picture { 
    text-align: right; 
}

Listing 1

Nicht nur eine gute Idee, sondern auch einfach anzuwenden! Allerdings stieß der Vorschlag nicht auf die uneingeschränkte Liebe der Browserhersteller, was daran lag, dass es mit den Element Queries auf einmal möglich würde, Endlosschleifen zu erzeugen. Denn folgendes CSS würde den Browser für immer zwischen zwei Zuständen oszillieren lassen:

Endlosschleifen erzeugen

.profile { 
    width: 20em; 
} 
.profile:media(min-width: 20em) { 
    width: 10em; 
}

Listing 2

Auch problematisch sind Anweisungen, die Kind-Elemente betreffen, die aber auf die Breite des Mutterelements durchschlagen. Während das W3C weiter an einer Lösung arbeitet, haben zahlreiche Unerschrockene das Konzept der Element Queries dennoch schon aufgegriffen und es in JavaScript-Bibliotheken gegossen. Eine davon ist der CSS-Element-Queries Polyfill.

Bitte beachte unsere Community-Richtlinien

10 Reaktionen
Dominik

Geiler Shit! Wann wird sowas von allen Browsern ohne Plugins unterstützt? :D

Mafrie

Wie funktioniert die Anwendung denn genau im optimalen Fall?
Weist man der Seite global für die einzelnen Mediatypes per Mediaquery jeweils eine Basis Schriftgröße (px) zu und definiert das gesamte übrige Verhalten der Seite und der einzelnen Elemente und deren Inhalte abhängig relativ zur geltenden Schriftgröße bzw der daraus resultierenden relativen zur Verfügung stehenden Breiten (em)?

Christian Schaefer

Hallo Marie,

Nein, da bist du, wahrscheinlich aufgrund der verwendeten em-Maßeinheit auf dem falschen Dampfer. Die em sollte man grundsätzlich immer für Media oder Element Queries verwenden, weil so deren Breakpoints proportional zur eingestellten Schriftgröße mitwachsen. Und das ist aus Gründen der Barrierefreiheit wichtig, weil Anwender die Schrift ja von sich aus größer einstellen könnten. Und dann soll sich das Layout ja nicht zerschießen.

Die Breakpoints werden also individuell im Element definiert und interessieren sich nicht für das, was drumherum los ist.

Christian Schaefer

Das Marie war übrigens die autokorrektur, sorry...

Mafrie

Danke!
Gibt es eigentlich ein paar live Beispiele:
Ganze Webseiten?
Codepen o.ä. von einer Teilseite?

Christian Schaefer

Hallo Mafrie,

meine bisher damit gebauten Projekte sind nicht öffentlich zugänglich, daher kann ich Dich nur auf die Demo-Seite der CSS Element Queries Bibliothek verweisen: http://marcj.github.io/css-element-queries/

Thomas

Ganz genau. Element Queries sind lange überfällig, dass vereinfacht das ganze responsive webdesign Thema so erheblich.

Das sollte der feuchte Traum eines jeden Frontend Developers sein.

audi

Super, vielen Dank für diesen Artikel. Ich würde mir wieder mehr solcher Artikel im T3N Magazin wünschen, die praxisnah und hilfreich in der Webentwicklung sind!
Die Element Queries sind eigentlich das, worauf man wartet - mediaqueries sind viel zu unflexibel.
@Christian Schaefer: setzt Du diese tatsächlich schon zahlreich in Deinen (Live-)Projekten ein? Falls ja: kombinierst Du sie mit den klassischem Mediaqueries oder nutzt Du evtl. nur noch die ElementQueries?
Danke und Gruß, Andreas

Christian Schaefer

Hallo Andreas, hab deinen Kommentar von vor über einem Jahr hier gar nicht registriert. Falls dich die Antwort noch interessiert: Ja, ich nutze diese Technik auch in Alltagsprojekten, und es lohnt sich. Außerdem skaliert es auch mit der Anzahl Elemente Recht gut.

Viele Grüße!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden