Discover ways to use border-shape to outline customized border shapes for parts, the way to model lists, the way to enhance your typography utilizing text-indent key phrases, and extra.
Headlines
border-shape: The Way forward for the Non-rectangular Net
Una Kravets introduces border-shape, a robust upcoming CSS primitive that defines a customized border form for a component.
An In-Depth Information to Customising Lists With CSS
Richard Rutter created an intensive information to styling lists, protecting list-style, list-item, ::marker, counters(), counter(), @counter-style, symbolic, symbols(), symbols, and extra to push your HTML and CSS lists to the subsequent degree.
From Our Sponsor
What in case your IDE flagged accessibility points the identical manner it flags a lacking semicolon?
BrowserStack’s Accessibility DevTools does precisely that, catching WCAG violations as you code and routing repair strategies by means of Copilot, Claude, or Cursor proper the place you are already working.
No context switching, no separate audit cycles. IBM analysis places the price of fixing accessibility post-release at 25x greater than catching it in improvement. It is free and takes underneath a minute to put in.
CSS Weekly on YouTube
CSS text-indent Key phrases?
A short information on the way to use CSS text-indent key phrases, each-line and hanging to enhance your typography.
Frontend Information #20: CSS Grid Lanes, ::search-text Pseudo-Component
Learn the way to create native masonry layouts utilizing CSS grid-lanes, how a single emoji character causes large efficiency points, the way to model in-page search outcomes, how the Geolocation HTML ingredient works, and extra.
Articles & Tutorials
Digital Scroll-Pushed 3D Scenes
Gunnar Bachelor examines the constraints of conventional DOM-based scrolling choices, demonstrates how digital scrolling permits extra managed scroll-driven interactions, and exhibits the way to implement it responsibly.
Probably Coming to a Browser :close to() You
Daniel Schwarz has a number of concepts for the way we might use :close to(), a proposed pseudo-class that detects when the pointer is close to a component.
Sticky Grid Scroll: Constructing a Scroll-Pushed Animated Grid
Theo Plawinski exhibits the way to construct a structured scroll-driven picture grid the place motion unfolds progressively inside a sticky format.
Getting Began With The Popover API
Godstime Aburu provides a pleasant introduction to the Popover API.
Popover API or Dialog API: Which to Select?
Zell Liew goes over the variations between Popover API and Dialog API by way of accessibility.
Sponsored Hyperlink
Perceive what internet browsers are able to at Net Day Out
The previous few years have seen leaps in HTML, CSS, and JavaScript. For those who haven’t saved up, Net Day Out is for you.
Be part of us on 12 March for a convention about what you are able to do in internet browsers at the moment. That includes talks from Rachel Andrew, Manuel Matuzović, Harry Roberts & extra.
Use code CSSWEEKLY_10 for 10% off.
Instruments
Hotkeys
Hotkeys is a type-safe, cross-platform hotkey library with sequence detection, key state monitoring, hotkey recording, and framework adapters for React and extra.
Masonry Grid
A quick, light-weight, and responsive masonry grid format library in vanilla JavaScript.
Inspiration
March Mad CSS
March Mad CSS is the Final CSS Event that includes 16 of probably the most elite CSS builders from world wide who will battle it out for the prospect to be dubbed the INAUGURAL MADCSS CHAMPIONS OF THE WORLD.
Till Subsequent Week
Thanks for studying! For those who discover the content material precious, please contemplate supporting the e-newsletter on Patreon.
Glad coding,
