If you like math and CSS, you’ll love this one. We don’t need to use media queries to change the values of some CSS properties — font-size, padding, margin etc. — depending on the viewport width, with the CSS clamp function. But: we still need to use media queries for changing colors, borders, shadows and other CSS styles.
Read more…
In this article, we’ll see how to make our sites friendly for Windows High Contrast Mode by using a good set of practices, including the media query forced-colors and its toolset.
Read more…
CSS color-mix is an experimental function that blends two colors and can be used to simplify color palettes. You can define a color palette and theme without too much effort using CSS color-mix().
Read more…
From working with design handoffs to supporting custom themes in a design system, the CSS color-contrast() function can become a cornerstone for developers by enforcing accessible UIs.
Read more…
CSS is constantly evolving, and some cool and useful properties either go completely unnoticed or are not talked about as much as others for some reason or another. In this article, we’ll cover a fraction of those CSS properties and selectors.
Read more…
Developers often reach for UI frameworks like Bootstrap or Material UI, hoping that they’ll save a bunch of time and quickly build a professional-looking app. Unfortunately, things rarely work out this way. Let’s talk about it.
Read more…
In this article, we’ll talk about how to adapt our sites to the different scenarios of a device pointer: whether it has a pointer or not, or how accurate it is. To adapt our site to those devices’ needs we’ll talk about how to properly use media queries hover, pointer, any-hover and any-pointer.
Read more…
CSS Custom Properties can be used for far more than just color, and their values update in realtime, both via display mode updates and JavaScript logic. This is powerful stuff. Eric explains how modern CSS is a powerful piece of assistive technology that can thread into it to create flexible, maintainable and adaptive digital experiences.
Read more…
This fresh new design trend has been picking up steam with the rising popularity of colorful inflated 3D graphics in web illustrations and with the latest Virtual Reality projects like “Horizon Worlds”. Let’s see if there is room for Claymorphism on the UI, and how we can create this effect with CSS.
Read more…
Dual-screen devices are just the next evolution in responsive design. If you have a PWA or website, the APIs available make integrating into your existing code base seamless. This article explains why it’s an exciting time for layout on the web, and how dual screens provide an opportunity to get even more creative.
Read more…