CodePen 2.0 is now in public beta
A major update is now in public beta with a file system, build blocks, and realtime collaboration.
CSS news — Page 7
The too early breakpoint
Why websites switch to mobile layout too soon and how to fix it with modern CSS.
Define the theme color for Safari 26
How Safari 26 determines browser chrome color and a CSS workaround.
Native random values in CSS
New
random()andrandom-item()CSS functions from the Values and Units Level 5.
Sprites on the web
A practical guide to CSS spritesheets,
steps(), and real-world trade-offs.
An in-depth guide to customising lists with CSS
Markers, counters, and
@counter-styletips for better bullets and numbering.
Border-shape: the future of the non-rectangular webNew property makes borders, shadows, and outlines follow custom geometry.
Declarative Dialog menu with invoker commands
Hamburger menu built with
<dialog>, minimal JS fallback, and smooth transitions.
CSS grid lanes are arriving sooner than you think
Use progressive enhancement to ship masonry-style layouts now with JS polyfill or a CSS grid layout fallback.
CSS
scroll-statecontainer queries can now detect scrollingChrome 144 adds a CSS-only scroll direction state for lightweight UI tweaks.
Opinionated CSS reset for modern browsers
Low-specificity defaults via
@layerplus modern typography and form, and media normalization.
Popover context menus with anchor positioning
A practical recipe for popover menus that animate, and flip to fit the viewport.