31.05.2017 Webinale Berlin


Element Queries


Jonas Hellwig
kulturbanause.de
@_kulturbanause

Jonas Hellwig


Front-End-Designer @ kulturbanause

Autor, Dozent

Was erwartet euch?

Einführung in modulares Design

Beschreibung des Problems mit MQs

Lösungsansätze

Begriffserklärungen

Live-Beispiele zur Umsetzung

Modulares Design

25.05.2010

Responsive Web Design erscheint auf alistapart.com

Responsive Web Design

Flexible Grid

Flexible Media

Media Queries

Adaptive Layout

Entstanden aus altem Workflow

foodsense.is

Fixed Grid

Globale Breakpoints

Orientierung an Gerätegrößen

»Set breakpoints based on content, never on specific devices,
products or brands«
Google Web Fundamentals

Responsive Layout

Entstanden aus modernem Workflow

microsoft.com

Fluid Grid

Komponentenbasierte Breakpoints

»We’re not designing pages, we’re designing systems of components«
Stephen Hay

Modulares Design

Responsive Pattern 1, 2

Foundation Building Blocks

Atomic Design

Das Problem mit
Media Queries

Beispielprojekt mit Media Queries

Media Queries und Stile müssen wiederholt werden!

Die Komponente ist nicht robust, da sie über den Viewport gesteuert wird.

Card Modul mit Media Queries

Wir brauchen Komponenten, die eigene Breakpoints besitzen!

Card Modul mit Element Query

Element Queries

Komponenten können auf den Raum im Elternelement reagieren

Echtes modulares Design ist möglich

Der Code ist übersichtlich und schlank

Beispielprojekt mit Element Queries

Es gibt keinen Standard

Denkbare Syntax


 .card {
   /* blau */
 }

 /* Schreibweise nach github.com/marcj/css-element-queries */
 .card[min-width~="500px"] {
   /* grün */
 }

Denkbare Syntax


 .card {
   /* blau */
 } 

 /* Schreibweise nach github.com/tomhodgins/element-queries-spec */
 @element .card and (min-width:500px) {
   $this {
     /* grün */
   }
 }

Denkbare Syntax


 .card {
   /* blau */
 }

 /* Schreibweise nach github.com/ausi/cq-prolyfill */
 .card:media(min-width:500px) {
     /* grün */
 }

Wording

Scoped Styles


 /* Wenn .sidebar existiert … */ 
 @element .sidebar { 

    /* … reduziere die Breite des .content */
    .content {
      width: 60%;
    }
 }

Responsive Conditions


 /* Wenn .card existiert und breiter als 500px ist … */ 
 @element .card and (min-width:500px) {
   
   /* … ordne .card-header und .card-content nebeneinander an */
   .card-header, .card-content {
     flex:1; 
   }

 }
	

Element Queries &
Container Queries


 /* Wenn .card existiert und breiter als 500px ist … */ 
 @element .card and (min-width:500px) {
   
   /* … ordne .card-header und .card-content nebeneinander an */
   .card-header, .card-content {
     flex:1; 
   }

 }
	

Element Queries können auch Container Queries sein, aber nicht umgekehrt.


 /* Wenn input mindestens 20 Zeichen enthält … */
 @element input and (min-characters:20) {

   /* … ändere die Farbe auf grün */
   $this {
     color:lime;
   }

 }				
	

Technische Umsetzung

EQCSS

elementqueries.com

containerqueries.com

Funktionsweise

Script einbinden

Element Queries im CSS-Code schreiben

 
 <head>
   <style>/* EQCSS */</style>
   <link href="eqcss.css">
 </head>

 <body>
   <script src="eqcss.js"></script>
 </body>
	

Syntax


 @element SELEKTOR and (RESPONSIVE CONDITION) { 
   SELEKTOR {
     EIGENSCHAFT: WERT;
   }
 }			
	

Syntax


 @element body and (min-height:800px) { 
   header {
     background: blue;
   }
 }			
	

Responsive Conditions

min-width & max-width

min-height & max-height

min-children & max-children

min-characters & max-characters

min-lines & max-lines

min-scroll-x, max-scroll-x, min-scroll-y & max-scroll-y

orientation

min-aspect-ratio & max-aspect-ratio

Meta Selectors

$this

$prev

$next

$parent

$root

CSS Einheiten

eh

ew

emin

emax

Beispiele

Beispiel 1 – Mehrspaltige Komponenten

Beispiel 2 – Formulareingabe

Beispiel 3 – Sticky Navigation

Beispiel 4 – Viewport- und Elementgröße auslesen

Kritikpunkte

Endlosschleifen


 @element div and (min-width: 1000px) {
   $this {
     width: 999px;
   }
 }
 	

CSS Loop

CSS contain:strict;

Überflüssig

Auf Styling begrenzt

Element Queries sind eine tolle Ergänzung zu bisherigen CSS-Techniken.

Wir brauchen sie.

Benutzt sie. Testet sie. Schreibt und diskutiert darüber.

Vielen Dank!


Jonas Hellwig

kulturbanause.de

blog.kulturbanause.de

@_kulturbanause