CSS Weekly #620 🎂 Read about history of Google Chrome 📐 Learn CSS Alignment ✨ Lean into Progressive Enhancement 🌈 Understand OKLCH Colors Featuring @addyosmani.bsky.social, @css-only.dev, @bell.bz, @jakubkrehel.bsky.social, @sunkanmifafowora.bsky.social, @projectwallace.com. 🙏 cssw.io/issue-620

I have a last-minute open sponsorship in this week's newsletter. Do you want to snatch it for 55% off? 🔥 It's a first-come, first-served deal. Please reach out to [email protected] with the subject "Last-Minute Sponsorship" 😉

Frontend News #16 📰 :heading Pseudo-Class 🌈 Faded Text Effects 📦 Don’t Inherit the Box Model 🔥 View Transitions Demos Featuring @cassidoo.co, @miriam.codes, @jasonsantamaria.bsky.social, @nerdy.dev. 🙏 youtu.be/qGad28-Qh1E

I've been talking to quite a few developers lately, and I'm stunned at how many still have no idea what Baseline is. 🤷‍♂️ Are you aware of it? Do you use it when thinking about browser support?

Did you know I'm launching a new newsletter, AI Developer, focused on helping you stay up-to-date with AI tools & trends? More than 600 people have already signed up, so I suppose it's time to send the first issue. 🙂 Subscribe here so you don't miss it: aideveloperweekly.com

CSS Weekly #619 👀 Create Scrollspy effects using only CSS 🧮 Learn how the random() function works ↩️ Restore deleted files in VS Code Featuring @sarasoueidan.com, @jensimmons.bsky.social, @shadeed9.bsky.social, @amitsheen.bsky.social 2x, @anatudor.bsky.social. 🙏 cssw.io/ssue-619

[VS Code Quick Tip 💡] Learn how to restore deleted files in @vscode.dev using local file history, and how to restore different versions of files outside of version control.

[Quiz] Is this valid CSS? 🤔 To be clear, this is the entire context, & is not nested within another selector. (I'll share the explanation tomorrow.)

🗞️ Frontend News #15 After a (too) long hiatus, I'm back with another video, covering: 🔎 CSS transform order matters 💬 Creative drop caps 🧐 Quiz: You're not a front-end developer until you've... Featuring @jakearchibald.com, @allthatmalarkey.bsky.social, @bartspaans.com. 🙏 cssw.io/frontend-new...

CSS Weekly #614 🧱 Combine BEM, utility classes, & Cascade Layers 🌈 Eliminate banding in CSS gradients 🚀 How CSS if() function works 🚧 Get the most from the Console in DevTools cssw.io/issue-614

I'm back from vacation and ready for new CSS (and AI) challenges! 💪 Are *you* planning to travel somewhere this summer? 🏖️

Are you curious about how to fit AI into your dev workflow or how to use it effectively? Same here. That's why I'm launching the AI ​​Developer Weekly newsletter. As with CSS Weekly, you'll get top-quality: 📝 Articles 🛠️ Tools 🧠 Tips Sign up today: cssw.io/aideveloper

Are you curious about how to fit AI into your dev workflow or how to use it effectively? Same here. That's why I'm launching the AI ​​Developer Weekly newsletter. As with CSS Weekly, you'll get top-quality: 📝 Articles 🛠️ Tools 🧠 Tips Sign up today: cssw.io/aideveloper

🔥 Quick Tip How to disable Cross-Origin Resource Sharing (CORS) in Google Chrome for testing purposes.

Have you tried using AI in your development workflow, and did you find it useful? 🤖 I'll appreciate any answers you might have, including yes, no, and 'hate-it'. 🙂

Do you ever tweak the ::selection CSS pseudo-element in your projects? 🌈

[🎥 New Video] An overview of Amelia WordPress plugin that will help you create user-friendly booking solutions with powerful features such as: 📆 Event list and booking calendar view 🪄 Step-by-step booking wizard 🔁 Recurring appointments & events youtu.be/CRbUuLhoE1A

CSS Weekly #612 🎠 Are CSS Carousels are accessible? ✂️ How margin-trim works 🦉 Should you use an owl selector (* + *) 👾 Retro animations & modern CSS Featuring @sarasoueidan.com, @jensimmons.bsky.social, @anatudor.bsky.social, @jamessw.com, @konstantindenerz.bsky.social. 🙏 cssw.io/issue-612

⭐️ CSS Quick-Tip Create a flexible CSS Grid with a varying number of items that expands, shrinks, and wraps to accommodate the number of items that can fit in one grid row. cssw.io/css-grid-wrap Hat-tip to @cferdinandi.bsky.social, @5t3ph.bsky.social, & @evanminto.com. 🙏

Have you already tried the margin-trim property? ✂️ In this quick tip, you'll find out how it works and how it could become a good alternative to the owl selector. youtu.be/9oAEaXWhkKU

CSS Weekly #610 🏞️ Blurry Image Placeholders 🚀 The Modern attr() ⛔️ Navigation Menu UI Mistakes Featuring @leanrada.com.web.brid.gy, @ishadeed.com, @preethisam.bsky.social, @martijnhols.nl, @amyhupe.bsky.social, @addyosmani.bsky.social, @alohe.bsky.social, @donotfold.bsky.social. 🙏 cssw.io/issue-610

In-Depth Guide to BeTheme 🎨 Find out how you can easily create websites with BeTheme WordPress Theme, using its powerful, developer-friendly features like Query Loop Builder with built-in WooCommerce compatibility. cssw.io/betheme-guide

I'm always fascinated when I hear YouTube's audio translation of my videos. It sounds quite natural, but I'm not sure how accurate or useful it really is. Do you ever watch auto-translated videos? 🙂

A short guide to the CSS Owl Selector 🦉 Are you using it or avoiding it? cssw.io/css-owl-sele...

I've been trying out Cursor AI Editor to build an app without touching code, and I'm impressed and frustrated at the same time. Does anybody have any tips on writing better prompts? 🙂

[🎥 New Video] Find out how you can easily create advanced headers and footers, including sticky menus, action bars, mega dropdowns, and off-canvas menus, using the Blocksy WordPress theme. youtu.be/9QPvkereZms

Really happy to see my article on common UI gotchas in navigation menus featured in @frontendfocus.bsky.social. 🙏 If you still haven't read it, the link is below. And if you're still not subscribed to Frontend Focus, fix this mistake immediately. 😉

It seems like CSS Layers are pretty much overlooked and underused. 🤔 Are you using CSS Layers?

I've been dealing with a ton of spam lately, and this is the best type of spam I regularly get — kind-hearted messages thanking me and praising my work. 🤣 Still spam, still annoying to deal with, even with solid filters in place. 😠

Just a developer here. 👋

The word is (in my comments section) that @chriscoyier.net is a legend. 🦄 But even this might be an understatement. The influence Chris has on promoting CSS and pushing it forward is indescribable. Thank you so much for everything you do for our community, Chris! 🙏

Frontend News #14 🫶 Fix -webkit-text-stroke 📜 Start using border-image 🚀 Properly size your images Featuring @chriscoyier.net, @ianvanagas.bsky.social, & others. 🙏 cssw.io/frontend-new...

A short (and hopefully sweet) reminder that CSS is becoming more and more powerful and that the new features are far from trivial and simple. 🤩 youtu.be/SfrhU6CLSo4

CSS Weekly #609 💙 UIs for humans 💬 Nackgrounds that follows inline text 🏁 Styling counters 🔢 Style Legend Featuring @wattenberger.com, @anatudor.bsky.social, @monknow.bsky.social, @adactio.com, @stefanjudis.com, @kevinpowell.co, @addyosmani.bsky.social, @twogrey.bsky.social. 🙏 cssw.io/issue-609

⚡️ New Blog Post ⚡️ Hands-on tips that will help you recognize and avoid some of the most common UI gotchas with navigation menus. To be perfectly honest, these are pretty basic mistakes, but I see them all the time. Here's what you need to know: blog.css-weekly.com/top-5-css-na...

Friends, has anyone else noticed a bug in Chrome DevTools when they become unresponsive? For me, it's particularly pronounced on @codepen.io when inspecting an iframe. To be clear, I've experienced it otherwise as well, but I can reproduce it most reliably on CodePen. 😟

TypeScript => CSS<Challenge> 🧩 Make 2 single-character changes to the following TypeScript snippet to turn it into valid CSS. Share your guesses below, and I'll reveal the correct answer and the explanation later. 👇

TypeScript => CSS<Challenge> 🧩 Make 2 single-character changes to the following TypeScript snippet to turn it into valid CSS. Share your guesses below, and I'll reveal the correct answer and the explanation later. 👇

CSS Weekly #608 🦄 Customizable select as progressive enhancement ⚓️ Better Anchor Positioning with position-area 🫣 Faster Rendering with the content-visibility 🎨 CSS Relative Colors Featuring @utilitybend.com, @jamessw.com, @ishadeed.com, @bram.us, @chrisnicholas.dev. 🙏 cssw.io/issue-608

Happy Monday, friends! 👋 Did you do anything fun this weekend, related or, even better, unrelated to coding? 🙂 I spent some time digging into @nextjs.org and @vitest.dev. Good times. 🥳

⏳ CSS-Only Dropdown Menu Close Delay For this effect, you only need: 🌒 transition-behavior property 🚀 :has() pseudo-class For a detailed video guide on how this works and how to improve the UI of your navigation menus, check the link below. 👇

Frontend News #13 ⚜️ Use cases for document.designMode 🦄 How to think about Baseline and polyfills 👀 Style Observer 👾 Alternative to Animated GIFs Featuring @chriscoyier.net, @lea.verou.me, @d12n.me, @ryanmulligan.dev. 🙏 cssw.io/frontend-new...

Frontend News #12 🦄 attr() use-cases 🤔 Custom properties in shorthand properties 🏞️ Base64 data URLs 🎨 Color accessibility Featuring @chriscoyier.net, @matuzo.at, @coreyginnivan.bsky.social, @konstantindenerz.bsky.social. 🙏 youtu.be/sDctlh_zxk4

CSS Weekly #607 🛠️ New Chrome DevTools features 🌌 CSS Meets Voxel Art 💬 CSS Hypenation 🎨 Styling the Details Element Featuring incredible work by @ekrof.bsky.social, @geoffreygraham.bsky.social, @bram.us, @css-only.dev, and many others. 🙏 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 that the loading has not stalled. Tyler Sticka (@tylersticka.com) explains more: cssw.io/progress-bar...

[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) & :not(:has) 🦄 Reimagining Fluid Typography Featuring @bram.us, @mattzeunert.com, @kilianvalkhof.com, @miriam.codes, @ryantrimble.com, @lea.verou.me. cssw.io/issue-606

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 other than that it seems to be working pretty well. 🌓

Frontend News #11 💬 Justified text with automatic hyphenation 🆕 New JavaScript moveBefore method 🧪 Testing different font combinations ➕ And more Featuring incredible work by @tylersticka.com, @bram.us, @mattzeunert.com, @nerdy.dev. youtu.be/aP5gJiUyWuY