RT Jen Simmons
Folks who write CSS:
What `-webkit-` prefixes do you still use most often?
I mean, which (if any) that you have to use to get things to work (not stuff a tool generates en masse).
Are there any `-webkit-` prefixed properties that you most want to have as real CSS properties?
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/
There are 253 Unicode arrows.
https://css-tricks.com/unicode-arrows/
"Basically, any time you run across some cool front-end thing, there might be an opportunity to make an interactive generator for that thing." —@johnpolacek
https://css-tricks.com/building-a-cool-front-end-thing-generator/
So, you have a reusable web component. And you have a CMS. @storykaboom shows how to make them work together in a WP setup.
https://css-tricks.com/using-web-components-in-wordpress-is-easier-than-you-think/
Wanna see a whiter white?
https://css-tricks.com/wanna-see-a-whiter-white/
Where's the line between Static vs. Dynamic vs. Jamstack? @mikeneumegen says it's a lot blurrier than at first glance.
https://css-tricks.com/static-vs-dynamic-vs-jamstack-wheres-the-line/
Napkin: Sorta like Zapier, except you write code (if you want to) to make easy-to-build cloud functions that can be triggered by anything from RSS to HTTP requests to Slack messages.
https://css-tricks.com/napkin/
The little "View Source" tool by Neatnik makes it possible to view source on a mobile device!
https://css-tricks.com/view-source-on-mobile/
Parsing, processing, enhancing, and converting Markdown needs code. @KittyGiraudel has a way to keep Markdown out of the client in a Next.js application.
https://css-tricks.com/responsible-markdown-in-next-js/
One of the smaller and, yet for some reason, super exciting things about CSS nesting is how we'll be able to nest media queries.
https://css-tricks.com/css-nesting-specificity-and-you/
Cross-origin iframes are basically the heart of how CodePen works. You write code, we execute it for you in an iframe that doesn't share the same domain as CodePen itself, as the first line of defense. We didn't hear any heads up or anything.
https://css-tricks.com/choice-words-about-the-upcoming-deprecation-of-javascript-dialogs/
Re Just another great post by @ChallengesCss
Great overview from Bramus on new units like lvh, svh, nd dvh, among others.
https://css-tricks.com/the-large-small-and-dynamic-viewports/
Recent Nuxt releases are taking the developer experience to the next level, with some newer features that speed up and simplify developer processes. @sarah_edo shows us what's new in this post!
https://css-tricks.com/new-nuxt-features-past-v2-10/
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/
Exploring the CSS Paint API: Image Fragmentation Effect
https://css-tricks.com/exploring-the-css-paint-api-image-fragmentation-effect/
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
