D7460N
@d7460n.bsky.social
UI/UX SME
25+ yrs designing/developing the wild wild web
25+ yrs designing/developing the wild wild web
Reposted by D7460N
"enabling" a custom prop on element using :has() to trigger a style query works, and feels like it should be useful, but my mind is drawing a blank right now. Can anyone think of something cool to do with this?
Simple codepen: codepen.io/kevinpowell/...
Simple codepen: codepen.io/kevinpowell/...
June 2, 2025 at 4:17 PM
"enabling" a custom prop on element using :has() to trigger a style query works, and feels like it should be useful, but my mind is drawing a blank right now. Can anyone think of something cool to do with this?
Simple codepen: codepen.io/kevinpowell/...
Simple codepen: codepen.io/kevinpowell/...
Reposted by D7460N
:first-child and :last-child can be pretty handy (as well as using them inside of :not()).
html-css-tip-of-the-week.netlify.app/tip/first-an...
html-css-tip-of-the-week.netlify.app/tip/first-an...
:first-child and :last-child
Style the first and last elements in a group without needing extra classes or JavaScript.
html-css-tip-of-the-week.netlify.app
May 29, 2025 at 1:45 PM
:first-child and :last-child can be pretty handy (as well as using them inside of :not()).
html-css-tip-of-the-week.netlify.app/tip/first-an...
html-css-tip-of-the-week.netlify.app/tip/first-an...
Reposted by D7460N
In the hush of the forest and the silence of snow,
A tiny owl watches where few dare to go.
Eyes like fire, soul like night — the spirit of the woods in flight.
📸 Photo:francoispotvin.photography
A tiny owl watches where few dare to go.
Eyes like fire, soul like night — the spirit of the woods in flight.
📸 Photo:francoispotvin.photography
May 6, 2025 at 8:47 PM
In the hush of the forest and the silence of snow,
A tiny owl watches where few dare to go.
Eyes like fire, soul like night — the spirit of the woods in flight.
📸 Photo:francoispotvin.photography
A tiny owl watches where few dare to go.
Eyes like fire, soul like night — the spirit of the woods in flight.
📸 Photo:francoispotvin.photography
Reposted by D7460N
And here is the CSS logo made with the shape() function.
Demo: codepen.io/t_afif/full/... via @codepen.io
Take a deep breath before looking at the code 🫣
Demo: codepen.io/t_afif/full/... via @codepen.io
Take a deep breath before looking at the code 🫣
May 6, 2025 at 7:39 PM
And here is the CSS logo made with the shape() function.
Demo: codepen.io/t_afif/full/... via @codepen.io
Take a deep breath before looking at the code 🫣
Demo: codepen.io/t_afif/full/... via @codepen.io
Take a deep breath before looking at the code 🫣
Reposted by D7460N
Alt text should be as long as it needs to be in order to effectively describe the content. In some cases, this will be a few phrases. In other cases, it will take a few more sentences. Aim to be as efficient as possible without leaving out key details.
May 6, 2025 at 2:04 PM
Alt text should be as long as it needs to be in order to effectively describe the content. In some cases, this will be a few phrases. In other cases, it will take a few more sentences. Aim to be as efficient as possible without leaving out key details.
Reposted by D7460N
There’s no such thing as being TOO close to a hummingbird…
Ever 📷🪶
Ever 📷🪶
May 7, 2025 at 2:31 AM
There’s no such thing as being TOO close to a hummingbird…
Ever 📷🪶
Ever 📷🪶
Reposted by D7460N
Mamatee blessing us with twin calves 🥹〰️🐮🐮🐮〰️ #manatee #manateesofcoralcity #manatees #mamatee #babytee #twins #calves #seacow #seapotato #mama #blessed #coral #coralhead #coralcitycamera #miami #portmiami #biscaynebay #bfi #noaa #aoml #coralcity #civicpridethroughbiodiversity
May 6, 2025 at 2:48 PM
Mamatee blessing us with twin calves 🥹〰️🐮🐮🐮〰️ #manatee #manateesofcoralcity #manatees #mamatee #babytee #twins #calves #seacow #seapotato #mama #blessed #coral #coralhead #coralcitycamera #miami #portmiami #biscaynebay #bfi #noaa #aoml #coralcity #civicpridethroughbiodiversity
Reposted by D7460N
#CSS ::scroll-button(), ::scroll-marker, Carousel Configurator, and Carousel Gallery with @chriscoyier.net and @davatron5000.bsky.social on @shoptalkshow.com!
nerdy.dev/carousels-on...
nerdy.dev/carousels-on...
Carousels On Shoptalk · April 7, 2025
Website for Adam Argyle: Teacher, Speaker, CSSWG member, and creator of Open Props and VisBug.
nerdy.dev
April 7, 2025 at 2:55 PM
#CSS ::scroll-button(), ::scroll-marker, Carousel Configurator, and Carousel Gallery with @chriscoyier.net and @davatron5000.bsky.social on @shoptalkshow.com!
nerdy.dev/carousels-on...
nerdy.dev/carousels-on...
Reposted by D7460N
don't forget `touch-action: manipulation` for buttons on mobile
double taps shouldn't zoom
double taps shouldn't zoom
April 7, 2025 at 5:15 PM
don't forget `touch-action: manipulation` for buttons on mobile
double taps shouldn't zoom
double taps shouldn't zoom
Reposted by D7460N
The CSS shape() function is available in Chrome M135 and Safari 18.4. Here is some short documentation of how it can be used with clip-path for responsive clipping:
developer.chrome.com/blog/css-sha...
developer.chrome.com/blog/css-sha...
Use shape() for responsive clipping | Blog | Chrome for Developers
Learn how to create responsive clipping paths with CSS.
developer.chrome.com
April 8, 2025 at 2:29 PM
The CSS shape() function is available in Chrome M135 and Safari 18.4. Here is some short documentation of how it can be used with clip-path for responsive clipping:
developer.chrome.com/blog/css-sha...
developer.chrome.com/blog/css-sha...
Reposted by D7460N
Modern CSS has a ton of useful functions and properties that make supporting light and dark mode a breeze.
I showcase several of them, show how to make a CSS only theme switcher and how to save a users theme preference to localStorage.
Watch 🍿: www.youtube.com/watch?v=F1s8...
I showcase several of them, show how to make a CSS only theme switcher and how to save a users theme preference to localStorage.
Watch 🍿: www.youtube.com/watch?v=F1s8...
Modern CSS Theming | Light Mode / Dark Mode and More!
YouTube video by Syntax
www.youtube.com
April 8, 2025 at 5:26 PM
Modern CSS has a ton of useful functions and properties that make supporting light and dark mode a breeze.
I showcase several of them, show how to make a CSS only theme switcher and how to save a users theme preference to localStorage.
Watch 🍿: www.youtube.com/watch?v=F1s8...
I showcase several of them, show how to make a CSS only theme switcher and how to save a users theme preference to localStorage.
Watch 🍿: www.youtube.com/watch?v=F1s8...
Reposted by D7460N
March 31, 2025 at 3:34 AM
Reposted by D7460N
Proposal to add #CSS custom functions is amazing! Inspired by @bram.us’s article, I made a short video with a few examples examples of unit conversion, fluid typography, and color manipulation. So cool! Check it out: youtu.be/fhuYPNlBkyw
First look at FUNCTIONS in CSS!!! (it's a game changer)
YouTube video by Dmitry Mayorov
youtu.be
March 8, 2025 at 9:44 PM
Proposal to add #CSS custom functions is amazing! Inspired by @bram.us’s article, I made a short video with a few examples examples of unit conversion, fluid typography, and color manipulation. So cool! Check it out: youtu.be/fhuYPNlBkyw
Reposted by D7460N
Started taking some notes on CSS Carousels after boning up on some recent examples from @nerdy.dev and @kevinpowell.co — great work, guys!
css-tricks.com/css-carousels/
css-tricks.com/css-carousels/
CSS Carousels | CSS-Tricks
Chrome has prototyped these features and released them in Chrome 135. Adam Argyle has a wonderful explainer over at the Chrome Developer blog. Kevin Powell has an equally wonderful video where he foll...
css-tricks.com
April 9, 2025 at 1:11 PM
Started taking some notes on CSS Carousels after boning up on some recent examples from @nerdy.dev and @kevinpowell.co — great work, guys!
css-tricks.com/css-carousels/
css-tricks.com/css-carousels/
Reposted by D7460N
Quality is never an accident.
April 9, 2025 at 7:54 PM
Quality is never an accident.
Reposted by D7460N
Temani is at the top of their game!
📝 New CSS Article!
Excited about the new attr() function? Learn how I am using it to style the native progress element with a few lines of CSS. It's the article where I using if() as well 😁
frontendmasters.com/blog/custom-... via @frontendmasters.com
Excited about the new attr() function? Learn how I am using it to style the native progress element with a few lines of CSS. It's the article where I using if() as well 😁
frontendmasters.com/blog/custom-... via @frontendmasters.com
April 10, 2025 at 2:13 AM
Temani is at the top of their game!
Reposted by D7460N
✅ Support ::details-content pseudo-element and improved styling of
1901037 - Support ::details-content pseudo-element and improved styling of <details> element
RESOLVED (lwarlow) in Core - DOM: Core & HTML. Last updated 2025-04-03.
bugzilla.mozilla.org
April 9, 2025 at 9:23 AM
✅ Support ::details-content pseudo-element and improved styling of
Reposted by D7460N
✍️ New Article: First Look at The Modern attr()
I explored the new attr() capabilities and shared my thoughts about it. Happy reading!
ishadeed.com/article/mode...
I explored the new attr() capabilities and shared my thoughts about it. Happy reading!
ishadeed.com/article/mode...
April 3, 2025 at 1:32 PM
✍️ New Article: First Look at The Modern attr()
I explored the new attr() capabilities and shared my thoughts about it. Happy reading!
ishadeed.com/article/mode...
I explored the new attr() capabilities and shared my thoughts about it. Happy reading!
ishadeed.com/article/mode...
Reposted by D7460N
The most powerful part of `background-clip: border-area` might just be what you can do with a round box and conic-gradient background on its border. Especially if you animate it using `@property`!
See the code: codepen.io/jensimmons/p...
See the code: codepen.io/jensimmons/p...
background-clip: border-area — Demo 6
...
codepen.io
November 20, 2024 at 4:41 PM
The most powerful part of `background-clip: border-area` might just be what you can do with a round box and conic-gradient background on its border. Especially if you animate it using `@property`!
See the code: codepen.io/jensimmons/p...
See the code: codepen.io/jensimmons/p...
Reposted by D7460N
Ever hear of @custom-media CSS? A decade ago it seemed like a no-brainer, but it never shipped to browsers.
Good news: Container queries enable this!
👑 www.stefanjudis.com/notes/the-de...
Good news: Container queries enable this!
👑 www.stefanjudis.com/notes/the-de...
November 20, 2024 at 11:28 PM
Ever hear of @custom-media CSS? A decade ago it seemed like a no-brainer, but it never shipped to browsers.
Good news: Container queries enable this!
👑 www.stefanjudis.com/notes/the-de...
Good news: Container queries enable this!
👑 www.stefanjudis.com/notes/the-de...
Reposted by D7460N
I'm obsessed with #CSS Anchor Positioning lately, and @kevinpowell.co just did a great video on it. Must watch for any #frontend dev
www.youtube.com/watch?v=DNXE...
www.youtube.com/watch?v=DNXE...
CSS Popover + Anchor Positioning is Magical
YouTube video by Kevin Powell
www.youtube.com
November 20, 2024 at 2:27 PM
I'm obsessed with #CSS Anchor Positioning lately, and @kevinpowell.co just did a great video on it. Must watch for any #frontend dev
www.youtube.com/watch?v=DNXE...
www.youtube.com/watch?v=DNXE...
Reposted by D7460N
Results of the State of #CSS 2024 Survey: "Let me make a prediction: we'll look back at 2024 as the turning point between 'CSS Classic' and 'New CSS'."
State of CSS 2024
The 2024 edition of the annual survey about the latest trends in the CSS ecosystem.
2024.stateofcss.com
November 18, 2024 at 8:00 PM
Results of the State of #CSS 2024 Survey: "Let me make a prediction: we'll look back at 2024 as the turning point between 'CSS Classic' and 'New CSS'."
Reposted by D7460N
The #CSS :user-valid and :user-invalid pseudo-classes: "The advantage of the new :user-valid and :user-invalid pseudo-classes is that they match a form control only after a user has significantly interacted with the input." https://web.dev/articles/user-valid-and-user-invalid-pseudo-classes
web.dev
Guidance to build modern web experiences that work in every browser.
web.dev
November 19, 2024 at 6:00 PM
The #CSS :user-valid and :user-invalid pseudo-classes: "The advantage of the new :user-valid and :user-invalid pseudo-classes is that they match a form control only after a user has significantly interacted with the input." https://web.dev/articles/user-valid-and-user-invalid-pseudo-classes
Reposted by D7460N
"The #CSS box-decoration-break property lets you define how elements should be rendered across pages, columns and pages. It can help to achieve consistant visual effects."
box-decoration-break helps to define how elements should be rendered across lines
The box-decoration-break property lets you define how elements should be rendered across pages, columns and pages. It can help to achieve consistant visual effects.
www.stefanjudis.com
November 19, 2024 at 8:00 PM
"The #CSS box-decoration-break property lets you define how elements should be rendered across pages, columns and pages. It can help to achieve consistant visual effects."
Reposted by D7460N
The Different (and Modern) Ways To Toggle Content: "Let’s look at disclosures, the Dialog API, the Popover API, and more. We’ll consider your needs. Modal or not? #JavaScript or #HTML/#CSS? We’ll go into all that."
The Different (and Modern) Ways To Toggle Content | CSS-Tricks
Let’s spend some time looking at disclosures, the Dialog API, the Popover API, and more. We’ll look at the right time to use each one depending on your needs. Modal or non-modal? JavaScript or pure…
css-tricks.com
November 20, 2024 at 8:00 PM
The Different (and Modern) Ways To Toggle Content: "Let’s look at disclosures, the Dialog API, the Popover API, and more. We’ll consider your needs. Modal or not? #JavaScript or #HTML/#CSS? We’ll go into all that."