I want to introduce you to a new, experimental form control called <selectmenu>. We’ll get deep into it, including how much easier it is to style than a traditional <select> element. Ask any web developer what they think is missing from the web platform today, chances are the ability to style form controls will be on their list. In fact, form styling was voted as one of the top-10 missing things in the State of CSS Survey in 2020.
Dual-screen devices have been on the market for nearly three years. In that time new web platform technologies have been built with developer feedback to enable layout on the web that adapts to these devices. These web platform capabilities integrate with existing concepts, such as the viewport and media queries, so that developers and designers can spend more time ideating about how to leverage two displays to create enhanced experiences rather than learning a new set of code to build them.
This morphing number CodePen from Fabio Ottaviani is a clever use of two great techniques. Both techniques make use of SVG’s powerful feature set. SVG paths feature helper functions we can tap into, and SVG filters can modify our graphics in seemingly limitless ways. We’ll first learn how Fabio is handling the animation, then we’ll look into the three filters he combined for the awesome gooey effect.
In this article, I explain how we went about optimizing full-screen images for the Rijksmuseum website, retaining the source image’s properties, and realizing savings in data transferred to the user while still delivering the biggest images for an impactful experience.
CSS is a highly specialized programming language focusing on style systems. Because of this unique use case and its declarative nature, it’s sometimes hard to understand. Some folks even deny it’s a programming language altogether. Let’s prove them wrong by programming a smart, flexible style system.