digitalcourage.social

74 posts64 participants5 posts today

robrich<a href="https://daily-dev-tips.com/posts/css-pseudo-classes-other-states/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://daily-dev-tips.com/posts/css-pseudo-classes-other-states/</a> - <a href="https://hachyderm.io/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> pseudo-classes: is(), has(), and not().

James ScholesIs a <a href="https://dragonscave.space/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> selector possible that targets all unordered lists where each `<li>` only contains a single `<a>` (to then remove the bullets)? Other than knowing about all such lists upfront and giving them a class, or putting every such list inside a nav.

Nils HörrmannIn Safari, does anyone know why the existence of a container definition (`container-name`/`container-type`) in a layout results in media queries not getting executed at all or being delayed by 5 to 10 seconds? Like you resize the window and nothing happens, you can still interact with the site and then suddenly the layout flips?! Experienced this for the first time and am a bit stumped.<a href="https://mastodon.social/tags/webdesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdesign</a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/safari" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#safari</a> <a href="https://mastodon.social/tags/bug" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#bug</a> <a href="https://mastodon.social/tags/containerQuery" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#containerQuery</a> <a href="https://mastodon.social/tags/mediaQuery" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#mediaQuery</a>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Guides" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Guides</a> Browser-applied contrast · How to make CSS choose black or white for contrast <a href="https://ilo.im/163v80" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/163v80</a>_____ <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/Color" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Color</a> <a href="https://mastodon.social/tags/BlackWhite" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#BlackWhite</a> <a href="https://mastodon.social/tags/Contrast" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Contrast</a> <a href="https://mastodon.social/tags/Accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Accessibility</a> <a href="https://mastodon.social/tags/WCAG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WCAG</a> <a href="https://mastodon.social/tags/APCA" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#APCA</a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Browser</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Frontend</a>

iamdtms<a href="https://beige.party/@mayintoronto" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@mayintoronto</a> ``` user-select: none; ```<a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a>

Mauve 👁💜Bro what. You can make almost any element resizeable in <a href="https://mastodon.mauve.moe/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> with just the `resize` property and no JavaScript. 🤯<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/resize" rel="nofollow noopener noreferrer" target="_blank">https://developer.mozilla.org/en-US/docs/Web/CSS/resize</a>

Reilly Spitzfaden (they/them)One of the things in my digital garden is this set of tutorials on webmentions: <a href="https://reillyspitzfaden.com/digital-garden/tutorials/webmention-tutorial/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://reillyspitzfaden.com/digital-garden/tutorials/webmention-tutorial/</a> I noticed I kept writing blog posts about them (and realized I would probably keep doing that for a while!) and decided to put everything in one place. You can use the table of contents (also a new site feature!) to hop around and choose the tutorial you want, and the first two are pretty easy even with only a small amount of HTML experience.<a href="https://hachyderm.io/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://hachyderm.io/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://hachyderm.io/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://hachyderm.io/tags/IndieWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#IndieWeb</a> <a href="https://hachyderm.io/tags/Webmentions" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Webmentions</a> <a href="https://hachyderm.io/tags/Microformats" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Microformats</a>

Tom WalkerAnimating to 'auto' sizes continues to be a trash fire in <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a>.This property that might someday fix it is not supported in Safari or Firefox: <a href="https://caniuse.com/?search=interpolate-size" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://caniuse.com/?search=interpolate-size</a>The I-have-no-time-and-this-is-stupid fix is that this has been a one-liner in jQuery since forever.

LobstersCSS attr() gets an upgrade via <a href="https://mastodon.social/@matheusrich" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@matheusrich</a> <a href="https://lobste.rs/s/io9rbo" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://lobste.rs/s/io9rbo</a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://developer.chrome.com/blog/advanced-attr" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://developer.chrome.com/blog/advanced-attr</a>

Reuben Walker aka mobileatomSmashing Animations Part 2: How CSS Masking Can Add An Extra Dimension. <a href="https://flipboard.com/tag/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a><a href="https://www.smashingmagazine.com/2025/05/smashing-animations-part-2-css-masking-add-extra-dimension/?utm_source=flipboard&utm_medium=activitypub" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.smashingmagazine.com/2025/05/smashing-animations-part-2-css-masking-add-extra-dimension/?utm_source=flipboard&utm_medium=activitypub </a>Posted into Responsive Design, UX, UI, and more <a href="https://flipboard.com/@mobileatom/responsive-design-ux-ui-and-more-26jetk41z" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@responsive-design-ux-ui-and-more-mobileatom</a>

LavX NewsRevolutionizing CSS: The Enhanced attr() Function in Chrome 133The latest update to the CSS attr() function in Chrome 133 introduces groundbreaking capabilities, allowing developers to leverage HTML attribute values across various CSS properties. This enhancement...<a href="https://news.lavx.hu/article/revolutionizing-css-the-enhanced-attr-function-in-chrome-133" rel="nofollow noopener noreferrer" target="_blank">https://news.lavx.hu/article/revolutionizing-css-the-enhanced-attr-function-in-chrome-133</a><a href="https://mastodon.cloud/tags/news" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#news</a> <a href="https://mastodon.cloud/tags/tech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tech</a> <a href="https://mastodon.cloud/tags/WebDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDevelopment</a> <a href="https://mastodon.cloud/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.cloud/tags/Chrome133" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Chrome133</a>

David BissetHiding elements that require JavaScript without <a href="https://phpc.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a><a href="https://0xda.de/blog/2025/04/hiding-elements-that-require-javascript-without-javascript" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://0xda.de/blog/2025/04/hiding-elements-that-require-javascript-without-javascript</a><a href="https://phpc.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://phpc.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a>

Marc AmosI recently overhauled my website and when it was time to style the buttons I decided: nah, let's roll with browser defaults.(I stuck with browser defaults for a lot of things.)It looks good – I might even consider it great. It all works perfectly in light and dark mode, it's accessible, and it's less <a href="https://front-end.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> I need to send over the wire, maintain, etc.

Larry GarfieldThis is almost certainly not the right way to do this, but damn it is cool that you can.<a href="https://dev.to/madsstoumann/guitar-chords-in-css-3hk8" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://dev.to/madsstoumann/guitar-chords-in-css-3hk8</a><a href="https://phpc.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://phpc.social/tags/NoJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#NoJS</a>

Justin FerrellWhen I see <a href="https://front-end.social/@chriscoyier" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@chriscoyier</a> build stuff like this, I feel like I don’t actually know <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> at all 😂<a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://frontendmasters.com/blog/container-query-for-is-there-enough-space-outside-this-element/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://frontendmasters.com/blog/container-query-for-is-there-enough-space-outside-this-element/</a>

Wolfram wants peaceSometimes the best tools are the simplest. This minimal "Copy to Clipboard" component demonstrates how far you can go with just standard web technologies. No build tools, no frameworks, no external dependencies—just a few lines of CSS and JavaScript. It works anywhere HTML works.<a href="https://picostitch.com/blog/2025/05/allow2copy/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://picostitch.com/blog/2025/05/allow2copy/</a><a href="https://mastodontech.de/tags/usetheplatform" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#usetheplatform</a> <a href="https://mastodontech.de/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodontech.de/tags/js" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#js</a> <a href="https://mastodontech.de/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a>

small circle 🕊 in calmnessAyllu v0.4 has been released!<a href="https://social.coop/tags/Ayllu" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Ayllu</a> is a code forge designed for performance, simplicity and hackability. The <a href="https://social.coop/tags/AGPL" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#AGPL</a>-licensed project by Kevin Schoon can be considered a <a href="https://social.coop/tags/SmallTech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallTech</a> / <a href="https://social.coop/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> initiative.You can find the Ayllu code, hosted on Ayllu at: <a href="https://ayllu-forge.org/ayllu/ayllu" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ayllu-forge.org/ayllu/ayllu</a>Read all about new features in the release notes. Also, are you good at <a href="https://social.coop/tags/UX" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#UX</a> and designing UI's with plain <a href="https://social.coop/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> and <a href="https://social.coop/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>?Then how would you design the UI for <a href="https://social.coop/tags/git" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#git</a> blame, asks Kevin.<a href="https://kevinschoon.com/blog/announcing-ayllu-0.4" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kevinschoon.com/blog/announcing-ayllu-0.4</a>

Mia (web luddite)On Thursday, <a href="https://front-end.social/@stacy" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@stacy</a> & I will be answering your <a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> questions on <a href="https://front-end.social/@OddBird" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@OddBird</a> 's Winging It live stream!Like: - In 2025, is there still a use case for float? - What's the “flat tree”? - Use cases for container queries?What are you curious about? Join us and ask!<a href="https://www.youtube.com/watch?v=EPuzf0onSQ0" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.youtube.com/watch?v=EPuzf0onSQ0</a>

Nathan KnowlerFun what you can do with `linear()`, `sibling-index()`, invoker commands, `<dialog>` elements, `@starting-style`. <a href="https://sunny.garden/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://sunny.garden/@knowler/114502776946163404" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://sunny.garden/@knowler/114502776946163404</a>

Matthias Ott“Semantics should be defined in HTML. And styles and visual affordances should follow from there.”An incredibly thorough and important post by <a href="https://sarasoueidan.dev/@SaraSoueidan" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@SaraSoueidan</a> about the current state of CSS carousel (in)accessibility. 👏tl;dr – don’t use them (yet?) <a href="https://mastodon.social/tags/a11y" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#a11y</a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a><a href="https://www.sarasoueidan.com/blog/css-carousels-accessibility/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.sarasoueidan.com/blog/css-carousels-accessibility/</a>

Recent searches

Search options

Administered by:

Server stats:

#css