iamdtms
| YouTube | https://youtube.com/kevinpowell |
| Newsletter | https://kevinpowell.co/newsletter |
Kevin Powell
@kevinpowell@front-end.social
- 1.1K Followers
- 73 Following
- 411 Posts
Helping people fall in love with CSS
YouTube
Frontend Dogma“:only-child”, by @kevinpowell:
https://html-css-tip-of-the-week.netlify.app/tip/only-child/
CSS WeeklyCSS Weekly #609
💙 Build UIs for humans
💬 Create a background that follows inline text
🏁 Explore approaches to style counters
🔢 Check a proposal to style pseudo-elements of form controls
Featuring @wattenberger, @anatudor, @adactio.com, @cferdinandi, @stefanjudis, @kevinpowell, @addyosmani, @twogrey. 🙏
“:in-range” Pseudo-Class, by @kevinpowell:
Mia (web luddite)Thanks to Christophe Coevoet, @kevinpowell, and @andreu for supporting the campaign to unstick progress on logical shorthands!
It’s surprising that `size` can’t set `inline-size`, and the `inset` shorthand doesn’t include `inset-block-start`. Let's change that.
I'll write up an explainer about the various paths forward. Let me know if you have questions you want me to cover!
https://opencollective.com/oddbird-open-source/contribute/css-logical-shorthands-86141
OddBird Open Source - CSS Logical Shorthands - Open Collective
These days, it's a common practice to use logical flow-relative properties & values like `block-size` whenever possible. But the shorthand properties feel stuck in the past. It's surprising that a `size` shorthand can't set the `inline-size`, and the …
Anyone have a good use-case for :only-child?
Most things I'm thinking of at the moment are combining it with :has(:only-child).
That can be super handy, but I'm looking for something simpler.
Jen SimmonsSafari Technology Preview 215 is here! It includes several exciting features:
- Scroll Driven Animations
- text-wrap-style: pretty
- CSS Anchor Positioning
- HDR images
- Trusted Types
- File System WritableStream API
https://webkit.org/blog/16523/release-notes-for-safari-technology-preview-215/
With single color stop gradients gaining support in all the browser engines all of a sudden, does anyone have any good use cases for them?
Great for overlays on a background-image, but I'm sure there's other stuff that could come in handy too!
https://caniuse.com/mdn-css_types_gradient_linear-gradient_single_color_stop
(for those who don't know, you'll be able to do this: linear-gradient(var(--color)); - also works with conic-gradient as well)
Schalk Neethling
Create a fun quick text flip effect
Niall Winters ⁂If you’re interested in learning the basics of #CSS and /or just want to explore what a very well-designed online course looks like, I highly recommend you check out @kevinpowell ‘s “HTML & CSS For Absolute Beginners”. It’s brilliant 💯💯💯