# Smart Layouts und das neue Select-Element Jens Grochtdreis | Unkonf 2025 - Mannheim <!--s--> ## Neue Möglichkeiten, select-Elemente zu gestalten <!--v--> Der Belgier Brecht de Ruyte engagiert sich in der Community [OpenUI](https://open-ui.org/). Er stellte auf dem CSSDay 2025 die neuen Möglichkeiten des Select-Elements vor. In seinem Blog hat er [eine mittlerweile fünfteilige Serie](https://utilitybend.com/blog/the-customizable-select-part-one-history-trickery-and-styling-the-select-with-css) darüber verfasst. <!--v--> Aktuell können nur alle Chromium-basierten Browser diese neuen Techniken umsetzen. Für alle anderen beitet sich Progressive Enhancement mit Hilfe von support-Queries an: ````css select { appearance: none; } @supports (appearance: base-select) { select, select::picker { appearance: base-select; } } ```` <!--v--> ## Wir brauchen neues HTML ````html <select> <!-- MUSS als erstes Kindelement kommen! --> <button> <selectedcontent></selectedcontent> </button> <option value="first"> <img src="https://assets.codepen.io/159218/pokeball.svg" alt="" /> <span>Pokeball</span> </option> </select> ```` <!--v--> ## Ganz einfaches Styling <div class="splitted"> <div> <img src="base-select-einfach.png" alt="Die Optionen sind interessanter gestaltet."> </div> <div> <img src="base-select-einfach-firefox.png" alt="Der Firefox kann mit dem Styling nichts anfangen."> </div> </div> [Codepen](https://codepen.io/utilitybend/full/GgRrLWb) <!--v--> ## Icons zu den Optionen Endlich können wir Icons zu den Optionen geben. Der Firefox macht da leider noch nicht mit. Aber dank Progressive Enhancement kann man das Select-Element bedienen. <div class="splitted"> <div> <img src="select-with-images.png" alt="Chromium-Browser zeigen Bilder neben den Optionstexten."> </div> <div> <img src="select-with-images-firefox.png" alt="Der Firefox kann leider keine Bilder anzeigen."> </div> </div> [Codepen](https://codepen.io/utilitybend/full/ByawgNN) <!--v--> ## Optionen im Kreis anordnen Dieses ist ein sehr [beeindruckendes Beispiel](https://codepen.io/utilitybend/full/ZEPBGGR). Es zeigt die unglaubliche Flexibilität, die hinter der neuen Technik steht. Und die Flexibilität von Progressive Enhancement. <div class="splitted"> <div> <img src="potion-selector.png" alt="Optionen sind in einem Kreis angeordnet und haben Icons zum Text"> </div> <div> <img src="potion-selector-firefox.png" alt="Der Firefox kann keine der neuen Techniken, zeigt aber einen guten Fallback."> </div> </div> <!--v--> ## Jetzt wird es total wild Man kann ein Select auch seitenbreit öffnen. Es macht dann mehr den [Eindruck eines Modalfensters](https://codepen.io/utilitybend/full/ByoBMBm). Im Firefox gibt es dank Progressive Enhancement den ungestylten Standard. <img src="select-with-optgroups-firefox.png" alt="Firefox zeigt wirklich nur das Select" width="320" style="display: block; margin-inline: auto;"> <!--v--> Das Select verbreitet sich im Chromium-Browser über den gesamten Viewport. ![Seitenbreites Select, das man als solches nicht mehr erkennt.](select-with-optgroups.png) <!--v--> ### Weitere Links - Seine [Slides](https://slides.utilitybend.com/styling-select#slide=1) - [Sammlung](https://codepen.io/collection/qOGape) von Beispielen auf Codepen - [Customizable Select Element (Explainer)](https://open-ui.org/components/customizableselect/) - von OpenUI <!--s--> ## Smart layouts <!--v--> ### Bisheriges Responsive Webdesign ist auf den Viewport fokussiert <!--v--> ### Unterschiedliche Bezugspunkte für Responsivität - Viewport (Media Query) - Inhalt - Container (Container Query) - User Präferenzen (prefers-color-scheme) <!--v--> ![Es geht um das Verhalten zwischen Breakpoints](ahmad-1.png) <!--v--> ![Ein Smart Layout ist sich des Inhalts bewusst](ahmad-6a.png) ````css .teaser-header:not(:has(.teaser-mark)) :is(h2, h3) { text-align: center; } ```` <!--v--> ### Den `:has()`-Selektor nutzen! Beispielsweise mit CSS abfragen, ob ein Element existiert und dann darauf reagieren: ```css .teaser { display: flex; flex-direction: column; } .teaser:has(img) { max-width: min-content; } .teaser:not(:has(img)) { border-top: 5px solid #a20000; } ``` [Codepen](https://codepen.io/jensgro/pen/ByjQgbm?editors=0100) <!--v--> ![Ein Smart Layout passt sich an die Umgebung an](ahmad-7.png) <!--v--> ![Ein Smart Layout geht nicht kaputt](ahmad-8.png) <!--v--> ![Ein Smart Layout ist konditional, passt sich also an.](ahmad-9.png) <!--v--> ### CSS ist immernoch komplexer als die Design-Tools ![Figma vs. CSS](ahmad-10.png) <!--v--> ## Basis seiner Idee: Layout-Zonen ![Layout-Zonen](ahmad-11.png) <!--v--> ## Jede Zone kann Bedingungen besitzen ![Designbedingungen in einer Layoutzone](ahmad-12.png) <!--v--> ![Designbedingungen in einer Layoutzone](ahmad-15.png) <!--v--> ![Beispielseite mit Zitatblock an einer Seite](ahmad-20.png) <!--v--> ![Beispielseite ohne Zitatblock](ahmad-21.png) <!--v--> ![Beispielseite mit mehreren Zitaten, die den Platz wechseln](ahmad-22.png) <!--v--> ### Links - [Ahmads Slidedeck](https://www.figma.com/deck/NewdIWNVLbsX8ipYOFZ4p8/Smart-Layouts---CSS-Day-2025?node-id=9-70&p=f&viewport=44%2C-78%2C0.03&t=RB3Tz4rgswyOw04s-1&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1) mit 224 Slides ist sehr sehenswert. - [Smart design patterns with container queries](https://www.youtube.com/watch?v=DHj7JhH8ins) von Kevin Powell <!--s--> ## Das war's ![Donald Duck verbeugt sich vor klatschenden Pinguinen](klatsch-klatsch-klatsch.jpg) - [Grochtdreis.de](https://grochtdreis.de) - [CSS-Weblog.de](https://css-weblog.de) - [Meine Kochrezepte](https://jens.cooking) - [@jensgro@mastodon.social](https://mastodon.social/@jensgro)