🔥 There are 449 Hot Tips!!

Here are 10 hot tips for using CSS :has() 👉🏻

1: CSS :has() Basics Select an element based on its children. Handy when you want to style a parent differently when it contains media.

2: The anywhere selector! When The body has a checkbox checked, you can grab literally any other element in the body and style it. Useful for toggling settings without JS.

3: The Previous Element Selector! Grab the item before the selected item. Never before (heh) possible!

4: Layout Targeting! I use this in my slide decks. Based on the contents of the slide, I can create a few commonly used layouts.

Adding or removing elements will automatically change the layout.

5. Form Validation Styling. Style the label, fieldset or wrapping element based on the validation of the input.

You can pair this with the previous element selector as well if your label and inputs are siblings.

6. All Siblings! When you are hovering a child, select all the siblings, but not the hovered one. Useful if you want to focus or scale up an element while dimming the rest. Works well table rows too!

7. Quantity Queries. When a parent has more than 5 children, style it differently.

Perhaps you want to add CSS mask and fade out the rest of the items.

8. Empty Children Select the parent when it's children are empty.

Maybe you want to show skeleton loaders, or flag an element for debugging?

9. Nested dropdown navs. Add a ↓ when there is a dropdown available.

10. Attribute Selectors! Style the parent based on it's child file type!

auto-growing <textarea> without JavaScript!

CSS is getting field-sizing: content; to size inputs by their contents.

Dropped in Chrome Canary today, demo here:

Suuuper handy new CSS:

:user-invalid and :user-valid pseudo selectors let you style inputs only once they have been interacted with

Just landed in Chrome + Safari, been in Firefox for years.

Finally! In VS Code, you can now tear off tabs and open the terminal in a new window.

This dropped in the latest VS Code update, along with native copy + paste files.

AI Experiment: Ricky from Trailer Park Boys and Tim Cook describe my appearance

Webcam → GPT4 Vision → Eleven labs Custom Voice AI

AI voice changes gonna be good removing or adding accents?!

Here is how these multi-browser demos are being made. It's not websockets!

Unreal.

This is not the first time I've said that this week.

AI writing Tailwind + JS given a quick sketch

🔥 The stale-while-revalidate header is suuuuuuper handy for striking a balance between fast loads and and frequently changed content.

Here I am using it to instantly deliver an OG image that takes ~8s to generate.

Node.js finally has support for loading .env files! You’ll no longer need the dotenv package

Dropped in 20.6.0

Also supports passing runtime flags like —inspect and —watch