CSS-Tricks @[email protected]

We’re making progress on our#CSS#specificity#visualization tool – the user experience has been dramatically improved and it now works equally well on desktops and touch devices.
We’re now working on the UI, which will help to find problems with CSS selector ordering and more.

Re @KowaleczkoMatt Totally, Javascript is way better.. 🙊

Get a walk through on YouTube as I explore and spelunk a few layouts 🤘💀
Adam Argyle: The Chromium CSS Grid Devtools team is doing an awesome job 🤩
- new options let me control styles of the overlay and manage which overlays persist
- I LOVE seeing my rem sized tracks with the authored value in the overlay.

💯 CSS flex gap is in Chrome 84 💯
play around at this sandbox on @codepen 👇
Adam Argyle: 🎉 flex that gap in the latest release of Chrome Canary 🎉
```css
display: flex; 🦾
gap: 1ch; 🔥
```
early adopters:
help us test it out won't ya!?
note:
requires web experiments enabled, visit chrome://flags/#enable-experimental-web-platform-features in Canary to enable

⚠️ CSS gotcha ⚠️
The "viewport" IS NOT the device screen
This is contrary to how we generally talk about the viewport, which is why this is a gotcha.
CSS viewport units are relative, not absolute. This is why `vh` units can surprise you or even change after scroll.

bored of your #CSS easing?
try a new one!
Here's 18 pop choices 🤓
example:
--ease-out-expo: cubic-bezier(.19, 1, .22, 1);
gist
play/fork
https://gist.github.com/argyleink/36e1c0153d2a783d513bd29c9f25aaf2
https://codepen.io/argyleink/pen/BajvPLz

inline vs block

Quick CSS tip: did you know that you can use "empty" values to conditionally apply styles with CSS variables?
--some-var: /**/;
var(--some-var, value);
I call it the prop-and-lock technique, since it works like canal locks ⛴️🔒
https://codepen.io/davidkpiano/pen/WNrYNLg

🔥 You can easily make an API on Netlify with our Serverless Functions!
This quick article by @chriscoyier shows you how...
https://css-tricks.com/make-yourself-a-little-api-with-netlify-functions/

Did I mention on here we have posters for sale for CSS Flexbox and CSS Grid? Here's mine in my office.
Flexbox:
Grid:
✨ Which are designed by @lynnandtonic! ✨
https://css-tricks.com/product/css-flexbox-poster/
https://css-tricks.com/product/css-grid-poster/

CSS conic-gradient borders 🤘💀
https://codepen.io/argyleink/pen/pogZxaZ