CSS Wrapped 2024
Chrome DevRel highlights 17 new unbelievable options launched for Chrome and the net platform in 2024.
Solved By Fashionable CSS: Function Picture
Ahmad Shadeed reveals tips on how to use container queries and CSS :has()
to construct a characteristic picture.
From Our Sponsor
Ship Pixel-Excellent UIs with BrowserStack’s Visible Testing Suite
Bored with visible bugs ruining your deployments? BrowserStack’s Visible Testing Suite—that includes Percy, App Percy, and Visible Scanner—ensures flawless UIs by catching even the smallest inconsistencies throughout 20,000+ actual units.
Write and ship your CSS with confidence, understanding that any modifications you make gained’t have unintended penalties on a seemingly unbiased a part of your UI.
CSS Weekly on YouTube
▶ A Sensible, Arms-On Information to Bettering Your UI (JavaScriptmas Problem)
A step-by-step information on fixing unhealthy person interfaces primarily based on basic UI Design rules, together with ideas that can allow you to take your UI expertise to the following stage—primarily based on a JavaScriptmas coding problem “Ugly Introduction Calendar”.
▶ Frontend Information #10: Gradient Borders, Excellent Centering, Animating Particulars/Abstract
Learn the way to make use of View Transitions API to create cross-document web page transitions, tips on how to simply present Baseline standing in your weblog posts, how Container Queries work, and extra.
Articles & Tutorials
Baseline 2024: Extra Instruments To Assist Net Builders
Mariko Kosaka, Pete LePage, and Rachel Andrew share how the Baseline mission developed in 2024.
How To Repair Largest Contentful Paint For Background Photographs
Conor McCarthy explores tips on how to detect LCP parts which are background pictures, and descriptions some optimization methods.
Pure CSS Halftone Impact in 3 Declarations
Ana Tudor demonstrates tips on how to create a shocking halftone impact utilizing a single “div”, no pseudos and simply three CSS properties.
Mastering SVG Arcs
Akshay Gupta explains tips on how to grasp radii, rotation, and arc course to create beautiful curves in SVG.
The Final Guidelines for Accessible Knowledge Visualisations
Andrée Lange shares important design rules for creating accessible charts.
Sponsored Hyperlink
Degree Up Your Coding Abilities With Scrimba
Degree up your coding expertise and construct superior tasks in quite a lot of languages and frameworks, together with HTML, CSS, JavaScript, React, TypeScript, and extra.
For a restricted time, you may get an unique low cost for those who improve to Scrimba Professional to get entry to all of their programs.
Instruments
Gradienty
Gradienty is a various set of design instruments that features mills for gradients, colour palettes, animation, glassmorphism, and extra.
Motion Desk Net Element
Native HTML net element for simply including sorting and filtering performance to tables.
Inspiration
Pace Indicator (CSS)
Konstantin Denerz created a wonderful demo utilizing solely CSS.
Till Subsequent Week
As we’re approaching the top of 2024, it’s good to look again in any respect the brand new unbelievable options we gotten this yr. The Chrome DevRel workforce did a unbelievable job highilghting a very powerful ones of their *CSS Wrapped 2024* overview, however I ponder what are *your* favorites.
Mine are `interpolate-size` property, `@starting-style` at-rule, and Cross-Doc View Transitions. Which of them would you spotlight? Let me know on Bluesky.
PS. If you wish to help this article and my work, try:
• CSS Stickers
• CSS Weekly Patreon
• CSS Weekly YouTube Channel
• Mastering Linting
Blissful coding,
Zoran Jambor