I’m excited for CSS to help distribute AVIF images! Here’s some demo code that follows current spec drafts:
- if in data saver / lite mode
- match first format supported
- match first resolution supported
- make that image the background
image-set() spec
Jake Archibald: 📝 AVIF has landed!
⬇️ Here’s how to use it today, and how it performs vs other web image formats.
https://jakearchibald.com/2020/avif-has-landed/
One Action, Multiple Terminal Windows Running Stuff
https://css-tricks.com/one-action-multiple-terminal-windows-running-stuff/
Jetpack 8.9: Take Donations, Capture Email Subscribers, AMP integration, and More
https://css-tricks.com/jetpack-8-9-take-donations-capture-email-subscribers-amp-integration-and-more/
Going to (or throwing?) a conference soon?
Now that we’re settling into all virtual events, it would be good to get the ol’ conferences site updated with lots of choices:
https://conferences.css-tricks.com/
Menu Reveal By Page Rotate Animation
https://css-tricks.com/menu-reveal-by-page-rotate-animation/
All the Ways to Make a Web Component
https://css-tricks.com/all-the-ways-to-make-a-web-component/
Import Non-ESM libraries in ES Modules, with Client-Side Vanilla JS
https://css-tricks.com/import-non-esm-libraries-in-es-modules-with-client-side-vanilla-js/
Working with JavaScript Media Queries
https://css-tricks.com/working-with-javascript-media-queries/
Using max() for an inner-element max-width
https://css-tricks.com/using-max-for-an-inner-element-max-width/
Beyond Media Queries: Using Newer HTML & CSS Features for Responsive Designs
https://css-tricks.com/beyond-media-queries-using-newer-html-css-features-for-responsive-designs/
Supercharging Number Inputs
https://css-tricks.com/supercharging-number-inputs/
A new collection of CSS Gradients: Lens Flare! Colorful linear gradients with radial gradients stacked on top to give a “lens flare” effect:
https://www.gradientmagic.com/collection/lensflare
Stroke Text CSS: The Definitive Guide
https://css-tricks.com/stroke-text-css-the-definitive-guide/
Use#CSS to customize HTML list bullets (and more!) in the upcoming Chromium 86 release (Canary or Beta today)
🆕 individual && global selectors
li::marker {
color: var(–neon-pink);
}
li:first-child::marker {
font-size: 1ex;
}
Learn more 👉
https://web.dev/css-marker-pseudo-element/
How to Simplify SVG Code Using Basic Shapes
https://css-tricks.com/how-to-simplify-svg-code-using-basic-shapes/
State of Jamstack 2020: Data Deep Dive by @kenticokontent.
https://css-tricks.com/state-of-jamstack-2020-data-deep-dive/
A Complete Walkthrough of GraphQL APIs with React and @fauna
(❥s for the sponsorship and useful info, Fauna gang!)
https://css-tricks.com/a-complete-walkthrough-of-graphql-apis-with-react-and-faunadb/
Re 😮 And there’s also a new#CSSPodcast today!
On one of my favorite topics: CSS Filters 🎉
Filter effects are very well supported and most can be polyfilled for IE6+
🤓 Learn more about them in Episode 23:
https://pod.link/thecsspodcast/episode/ZTU4NDI4ZGMtYTc1NC00Y2RlLWI5ZTYtYjlkM2IxOTAzNDZj
