RT Una Kravets 👩🏻💻
🚨 Add a custom color to your forms in 1 line of CSS: INTRODUCING the accent-color property!!
`accent-color: pink`= pink checkboxes, radio buttons, sliders, etc.
Landing in:
Chromium 93 (Aug 31)
Firefox 92 (Sept 7)
Read:
Try it:
https://web.dev/accent-color/
https://accent-color.glitch.me/
RT Josh W. Comeau
New blog post: ⭐️ “The World of CSS Transforms” ⭐️
The `transform` property is ridiculously versatile. It can help with so many otherwise-challenging layouts and effects, IF you understand it well.
That's what this post is all about! Check it out:
→
https://www.joshwcomeau.com/css/transforms/
RT Adam Argyle
user adaptive frosted glass 😎
```#css
.adaptive-glass {
--glass-lightness: 100%;
background: hsl(0 0% var(--glass-lightness) / 50%);
backdrop-filter: blur(40px);
@media (prefers-color-scheme: dark) {
--glass-lightness: 0%;
}
}
```
https://codepen.io/argyleink/pen/qBmJyvv
RT Adam Argyle
#CSS `:focus-visible`
Lets the browser decide whether or not to show focus
Video shows the difference between `:focus` and `:focus-visible` when Javascript is used to focus buttons after mouse interaction
tldr;
less concerns / better UX
Learn more
https://web.dev/learn/css/pseudo-classes/#:focus-:focus-within-and-:focus-visible
RT Addy Osmani
The CSS :is() pseudo-class is useful for writing repetitive selectors in a more compact form:
http://goo.gle/cssis
RT Adam Argyle
make taps 300ms faster with 1 line of CSS:
```#css
touch-action: manipulation;
```
means:
element doesn't want double-tap to zoom
result:
browser *immediately* responds to taps instead of waiting 300ms for a "potential" 2nd tap 🤓
caniuse (YES!)
https://caniuse.com/mdn-css_properties_touch-action_manipulation
RT Pablo Lara H
Codepen @CodePen Radio #Podcast:
#320: Andy @piccalilli_ and Una @Una from Google’s Learn CSS Project
by @chriscoyier
#css #learnCSS
https://blog.codepen.io/2021/06/16/320-andy-and-una-from-googles-learn-css-project/
RT Adam Argyle
🆕 #GUIchallenges on Color Schemes
⚙️ auto
☀️ light
🌙 dark
💡 dim
Learn how I use CSS custom properties for multiple color schemes. How do you?!
Watch
Read along
Try a demo
Code
https://www.youtube.com/watch?v=oHcTn83M1ls&list=PLNYkxOF6rcIAaV1wwI9540OC_3XoIzMjQ
https://web.dev/building-a-color-scheme/
https://gui-challenges.web.app/color-schemes/dist/
https://github.com/argyleink/gui-challenges
RT Adam Argyle
🆕 post on
both new functional pseudo class selectors have:
✅ great support
✅ lots of use cases
✅ 1 super power, to squash specificity
📄 read post
🔎 peep caniuse
http://web.dev/
https://web.dev/css-is-and-where/
https://caniuse.com/mdn-css_selectors_where
RT Sara Soueidan
This workshop might be of interest to many of you. It's free and led by @argyleink — who's only probably the most prolific CSS person I know.
Sign up ⬇️
Adam Argyle: #GoogleIO is online and free for everyone! May 18-20 🎉
I'll be giving a 1hr workshop on "Building User Adaptive Interfaces"
✅ accessibility
✅ color theming
✅ media queries
✅ logical properties
✅ adaptive layouts
✅ respectful motion
Register 👉
https://events.google.com/io/session/f09c3e3e-f64e-4551-a948-9a718588a463
RT laura bananas
the train is on a flexbox layout. you can save everybody if you make it go vertical instead of horizontal first try but you cant look this up on mdn
RT Adam Argyle
CSS triangle shaped paragraph‽
1️⃣ shape-outside
2️⃣ floats
3️⃣ text-align-last (clutch!)
Demo
(inspired by the book Triangle and Aesop Rock's "Long Legged Larry"
https://codepen.io/argyleink/pen/vYgovQz
https://www.youtube.com/watch?v=us3pCHd8PLs
RT Adam Argyle
typography and copy editing 🔥 tip
✅ word break with
<wbr/>
and/or
```html
<h1>
superlongword
</h1>
<h1>
super
<wbr/>
long
<wbr/>
word
</h1>
<h1>
superlongword
</h1>
```
try it!
learn more
https://codepen.io/argyleink/pen/vYgjVVx?editors=1100
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr
RT Ahmad Shadeed
✍️ New Article: Say Hello To CSS Container Queries
I wrote about CSS container queries, how they work, why to use them, with use-cases and examples. I enjoyed learning and writing about them. Happy reading!
🔗
https://ishadeed.com/article/say-hello-to-css-container-queries/
RT Amelia Wattenberger 🍓 華曼如
working on a little platform to teach SVG!
I want to explore ways to make learning ambient & enjoyable. but also, I want everyone to know the basics of SVGs
RT Lea Verou
[New blog post!] Dark mode in 5 minutes, with inverted lightness variables
https://lea.verou.me/2021/03/inverted-lightness-variables/
RT Josh W. Comeau
So you know those super cool swirly gradients that Apple and Stripe has been using recently?
Evidently, they're called “mesh gradients”, and I found a tool to generate them ✨
https://meshgradient.com/
RT Adam Argyle
```#css
color-mix()
color-contrast()
lab()
lch()
color()
```
ALL in Safari Tech Preview 122 🎉
Codepen CSS can drop the `in srgb` in Safari TP because they support the default `lch()` 🤓
Color Level 5 gettin love!
Adam Argyle: 🆕 mix colors in CSS in Firefox Nightly today!
```#css
background: color-mix();
```
draft spec Firefox is prototyping with
🕹 play with a **working** light/dark theme in this Codepen 💯
https://drafts.csswg.org/css-color-5/#color-mix
https://codepen.io/argyleink/pen/WNoWadG
RT Adam Argyle
🆕 mix colors in CSS in Firefox Nightly today!
```#css
background: color-mix();
```
draft spec Firefox is prototyping with
🕹 play with a **working** light/dark theme in this Codepen 💯
https://drafts.csswg.org/css-color-5/#color-mix
https://codepen.io/argyleink/pen/WNoWadG
RT Adam Argyle
A grid with centered content and more padding as more screen space is available
✅ custom property spacing
✅ nesting centralized ownership
✅ level 4 @ media query syntax
ty @ postcss-preset-env for enabling us, love being able to write this
https://preset-env.cssdb.org/features
