You Want border-color: transparent, Not border: none

Dave Rupert explains why, instead of removing the border from elements entirely, you should set the border-color to transparent instead. - https://frontendmasters.com/blog/you-want-border-color-transparent-not-border-none

#css

A highly configurable switch component using modern CSS techniques

Andy Bell shows how to build a highly configurable switch component using modern CSS, such as :has(), container queries, Logical Properties, and Custom Properties. - https://piccalil.li/blog/a-highly-configurable-switch-component-using-modern-css

#css

Learn These Viewport-Relative CSS Units (100vh, 100dvh, 100lvh, 100svh)

George Martsoukos covers the challenges of working with the classic 100vh unit to make full-screen sections and discusses some alternative CSS units. - https://webdesign.tutsplus.com/learn-these-viewport-relative-css-units-100vh-100dvh-100lvh-100svh--cms-108537t

#css

Creating Wavy Circles with Fancy Animations in CSS

Temani Afif shows how to create flower-like animated shapes using modern CSS.  - https://frontendmasters.com/blog/creating-wavy-circles-with-fancy-animations

#css

CSS Button Styles You Might Not Know

David Bushell shares a few lesser-known CSS styles that can enhance your buttons. - https://dbushell.com/2024/03/10/css-button-styles-you-might-not-know

#css

Desert Racer: World's First CSS-Only Swipe-Aware Game!

Philip Warkentien II created a CSS-only, no JS, no checkbox, swipe-aware (scroll-aware) game. In this article, you’ll learn exactly how it was built. - https://dev.to/warkentien2/desert-racer-worlds-first-css-only-swipe-aware-game-4j0h

#css

An Interactive Guide to CSS Container Queries

Ahmad Shadeed shares an interactive guide to container queries, explaining the problems they solve, how they work, and how you can use them today in your workflows. - https://ishadeed.com/article/css-container-query-guide

#css

Setting And Persisting Color Scheme Preferences With CSS And A “Touch” Of JavaScript

Henry Bley-Vroman will walk you through a new possibility to implement Dark Mode that leans into cutting-edge CSS, with minimal JavaScript to support persisting the user’s color scheme preference across pages. - https://www.smashingmagazine.com/2024/03/setting-persisting-color-scheme-preferences-css-javascript

#css

Infinite-Scrolling Logos In Flat HTML And Pure CSS

Silvestar Bistrović demonstrates a CSS-only technique to create an infinite-scrolling list of images with as little HTML as possible. - https://www.smashingmagazine.com/2024/04/infinite-scrolling-logos-html-css

#css

Testing HTML With Modern CSS

Heydon Pickering shows how to use modern CSS selectors to find and expose bad markup. - https://heydonworks.com/article/testing-html-with-modern-css

#css

The box model and box sizing

Andy Bell gives a quick run-through of the box model and box sizing. - https://piccalil.li/blog/the-box-model-and-box-sizing

#css

Things That Can Break aspect-ratio in CSS

Chris Coyier outlines some cases where aspect-ratio property might give unexpected results. - https://frontendmasters.com/blog/things-that-can-break-aspect-ratio-in-css

#css

Drawing a Line to Connect Elements with CSS Anchor Positioning

Silvestar Bistrović demonstrates how to utilize CSS Anchor Positioning to create an interesting and useful effect. - https://frontendmasters.com/blog/drawing-a-line-to-connect-elements-with-css-anchor-positioning

#css

Should AVIF Be the Dominant Image Format on the Web?

Tim Severien explores how AVIF compares to competing image formats like JPEG and WebP. - https://tsev.dev/posts/2023-11-10-should-avif-be-the-dominant-image-format

#css

The New CSS Math: rem() and mod()

Daniel C. Wilson shows how remainders and modulo CSS Math functions work. - https://danielcwilson.com/posts/mathematicss-rem-mod

#css

Modular CSS and different ways to structure your stylesheets

Chris Ferdinandi shares how to structure CSS and work with modular files if you’re not using a compiler like Sass. - https://gomakethings.com/modular-css-and-different-ways-to-structure-your-stylesheets

#css

Using CSS content-visibility To Boost Your Rendering Performance

Rob O’Leary dives into the benefits and practical use cases of the content-visibility CSS property, as well as situations where it might not be the most suitable option. - https://blog.logrocket.com/using-css-content-visibility-boost-rendering-performance

#css

Textareas with auto-increasing height using CSS

Amit Merchant gives a short intro to an experimental CSS rule with form-sizing property that will let you increase the height of the textarea automatically based on the amount of text the user enters. - https://www.amitmerchant.com/textarea-auto-increase-height

#css

How Custom Property Values are Computed

Stephanie Eckles reviews how the browser determines values for any property, the impact of “computed value time,” pitfalls around using custom properties with cutting-edge CSS, and why inheritance should inform your custom property architecture. - https://moderncss.dev/how-custom-property-values-are-computed/

#css

Solved by CSS Scroll-Driven Animations: Detect if an element can scroll or not

Bramus Van Damme shows how to selectively style an element based on it being scrollable or not. - https://www.bram.us/2023/09/16/solved-by-css-scroll-driven-animations-detect-if-an-element-can-scroll-or-not

#css