cssweekly - Network

Thanks so much to Cloudways for sponsoring! 🙏Secure your spot on their free online Security Bootcamp event today:...

Thanks so much to Cloudways for sponsoring! 🙏

Secure your spot on their free online Security Bootcamp event today: https://cssw.io/cloudways-security-bootcamp

Frontend News #12🦄 attr() use-cases🤔 Custom properties in shorthand properties🏞️ Base64 data URLs🎨 Color...

Frontend News #12
🦄 attr() use-cases
🤔 Custom properties in shorthand properties
🏞️ Base64 data URLs
🎨 Color accessibility

Featuring @chriscoyier, @matuzo, @coreyginnivan, @wesbos.

https://youtu.be/sDctlh_zxk4

Thanks so much to Cloudways for sponsoring! 🙏Secure your spot on their free online Security Bootcamp event today:...

Thanks so much to Cloudways for sponsoring! 🙏

Secure your spot on their free online Security Bootcamp event today: https://cssw.io/cloudways-security-bootcamp

CSS Weekly #607🛠️ New Chrome DevTools features🌌 CSS Meets Voxel Art💬 CSS Hypenation🎨 Styling the Details ElementFeaturing...

CSS Weekly #607
🛠️ New Chrome DevTools features
🌌 CSS Meets Voxel Art
💬 CSS Hypenation
🎨 Styling the Details Element

Featuring incredible work by @umaar, @bramus, @challengescss, and many others.

https://cssw.io/issue-607

Do you know the secret behind (most) Progress Bars on the web? 🤔They don't usually measure anything but just serve as an indicator...

Do you know the secret behind (most) Progress Bars on the web? 🤔

They don't usually measure anything but just serve as an indicator that the loading has not stalled.

Tyler Sticka (@tylersticka) explains more: https://cssw.io/progress-bars-fji328

[CSS Tip]I've noticed lately that some devs use `margin` to add gaps between flexbox items, particularly in menus. You can use `gap`...

[CSS Tip]

I've noticed lately that some devs use `margin` to add gaps between flexbox items, particularly in menus.

You can use `gap` property in Flexbox instead and avoid awkward `:not(:last-child)` or resetting margin on first/last item. 😉

It's in the baseline since April 2021. ✅

CSS Weekly #606🔥 How function and if() work in CSS🍞 Navigating breadcrumbs in VS Code🤔 The difference between :has(:not) &...

CSS Weekly #606
🔥 How function and if() work in CSS
🍞 Navigating breadcrumbs in VS Code
🤔 The difference between :has(:not) & :not(:has)
🦄 Reimagining Fluid Typography

Featuring @bramus, @kilianvalkhof, @birdsite.blazelight.dev, @mia, @mrtrimble, @leaverou.

https://cssw.io/issue-606

PS. You can subscribe here: https://css-weekly.com 😉

PS. You can subscribe here: https://css-weekly.com 😉

I just realized that the CSS Weekly Newsletter has reached 40,000 subscribers. 🥳I appreciate each and every one of you. Thank you so...

I just realized that the CSS Weekly Newsletter has reached 40,000 subscribers. 🥳

I appreciate each and every one of you. Thank you so much, friends! 🙏

TIL: There is an "Automatic dark mode" in Chrome DevTools. 😳From my limited test, it can't handle background images, but...

TIL: There is an "Automatic dark mode" in Chrome DevTools. 😳

From my limited test, it can't handle background images, but other than that it seems to be working pretty well. 🌓

Thanks so much to @posthog for sponsoring! 🙏https://cssw.io/product-for-engineers-feb18

Thanks so much to @posthog for sponsoring! 🙏

https://cssw.io/product-for-engineers-feb18

Frontend News #11💬 Justified text with automatic hyphenation🆕 New JavaScript moveBefore method🧪 Testing different font...

Frontend News #11
💬 Justified text with automatic hyphenation
🆕 New JavaScript moveBefore method
🧪 Testing different font combinations
➕ And more

Featuring incredible work by @tylersticka, @bramus, @argyleink, and others.

https://cssw.io/frontend-news-11

CSS Weekly #605🚀 Optimizing The Critical Rendering Path😶‍🌫️ Focus by Negation Effect🔎 Dynamic Focus Zoom Effect🌄 How to...

CSS Weekly #605
🚀 Optimizing The Critical Rendering Path
😶‍🌫️ Focus by Negation Effect
🔎 Dynamic Focus Zoom Effect
🌄 How to Favicon & Gif in 2025

Featuring @kevinpowell, @sitnik_en, @Olliew, @mrtrimble, @tahazsh, @jhey.

https://css-weekly.com/issue-605

VSCode Tip - Code Navigation Using Breadcrumbs 🔥Find out how to quickly navigate between folders, files, and symbols in @code using...

VSCode Tip - Code Navigation Using Breadcrumbs 🔥

Find out how to quickly navigate between folders, files, and symbols in @code using breadcrumbs, with a detailed overview of keyboard shortcuts and customization options.

https://cssw.io/vscode-breadcrumbs

[ 🔥 VS Code Quick Tip ]Did you know that you can click on breadcrumbs in @code and quickly navigate between folders, files, and even...

[ 🔥 VS Code Quick Tip ]

Did you know that you can click on breadcrumbs in @code and quickly navigate between folders, files, and even symbols?

CSS Weekly #604🚀 New capabilities for attr()🦄 starting-style & transition-behavior↕️ Auto-Expanding textareas ⚓️ Debugging...

CSS Weekly #604
🚀 New capabilities for attr()
🦄 starting-style & transition-behavior
↕️ Auto-Expanding textareas
⚓️ Debugging Anchor Positioning

Featuring @Una, @utilitybend, @jamessw, @css, @kizu, @bramus, @malarkey, @chriskirknielsen.

https://cssw.io/issue-604

Current status: planning this week's content. 🧠Newsletter, a few YouTube videos, and a bunch of Mastering Linting lessons. 🎥

Current status: planning this week's content. 🧠

Newsletter, a few YouTube videos, and a bunch of Mastering Linting lessons. 🎥

Happy Monday, friends! Did you do anything interesting offscreen this weekend? 🙂I went wall-climbing at a theme park, and I'm really...

Happy Monday, friends! Did you do anything interesting offscreen this weekend? 🙂

I went wall-climbing at a theme park, and I'm really proud that my daughter showed me how it's done without safety ropes. 🧗‍♂️

CSS Weekly #603👭 sibling-count() & sibling-index() functions⚜️ box-decoration-break🌗 llight-dark()🚀 tight mode in...

CSS Weekly #603
👭 sibling-count() & sibling-index() functions
⚜️ box-decoration-break
🌗 llight-dark()
🚀 tight mode in browsers

Featuring @kilianvalkhof, @mayank, @geoff, @chriscoyier, @cferdinandi, @codepo8, @julia_miocene.

A quick tip showing how to set up a simple local testing environment for simple web apps, static files, and more using the NPM package...

A quick tip showing how to set up a simple local testing environment for simple web apps, static files, and more using the NPM package Serve.

Serve: https://www.npmjs.com/package/serve
CSS Stickers: https://stickers.css-weekly.com