Writing Exchange

59 posts52 participants7 posts today

Vivaldi🚨 New Podcast! What’s next for CSS? Bruce chats with Miriam Suzanne, CSS expert and independent contributor to the CSS Working Group, about game-changing features like Cascade Layers, Scope, Mixins, and Container Queries, and how they’re shaping the future of web design.🎧 Spotify: <a href="https://open.spotify.com/episode/4D72MJ5AwP89PKxPXCz7Fq" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://open.spotify.com/episode/4D72MJ5AwP89PKxPXCz7Fq</a> 📺 YouTube: <a href="https://youtu.be/ukUewXT_Ifk" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://youtu.be/ukUewXT_Ifk</a><a href="https://social.vivaldi.net/tags/Podcast" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Podcast</a> <a href="https://social.vivaldi.net/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://social.vivaldi.net/tags/WebDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDesign</a> <a href="https://social.vivaldi.net/tags/WebDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDevelopment</a>

Tyler StickaVery cool to see WebKit push `text-wrap: pretty` further, both in terms of design impact and performance: <a href="https://webkit.org/blog/16547/better-typography-with-text-wrap-pretty/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://webkit.org/blog/16547/better-typography-with-text-wrap-pretty/</a><a href="https://social.lol/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://social.lol/tags/Typography" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Typography</a>

LobstersBetter typography with text-wrap pretty <a href="https://lobste.rs/s/xap6ps" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://lobste.rs/s/xap6ps</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/design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#design</a> <a href="https://webkit.org/blog/16547/better-typography-with-text-wrap-pretty/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://webkit.org/blog/16547/better-typography-with-text-wrap-pretty/</a>

Susan from NeuStudioUse CSS relative color to make more chill underscores for links <a href="https://frontendmasters.com/blog/chilled-out-text-underlines/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://frontendmasters.com/blog/chilled-out-text-underlines/</a><a href="https://fosstodon.org/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://fosstodon.org/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://fosstodon.org/tags/Typography" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Typography</a>

Derk-Jan 💙💛🇺🇦God I hate Tailwind. Or rather how people use it. Tailwind my ass, it's more like a storm that sprinkles leaves all around in this project that I need to save.<a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/tailwind" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tailwind</a>

h o ʍ l e t t<a href="https://infosec.exchange/@michaelharley" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@michaelharley</a> If you're a gamer and a <a href="https://mamot.fr/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> purist, you might want to try the CSS-only approach… → <a href="https://endtimes.dev/no-javascript-dark-mode-toggle/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://endtimes.dev/no-javascript-dark-mode-toggle/</a>

Jens Oliver MeiertHow do you order your CSS properties?(A remake of <a href="https://front-end.social/@chriscoyier" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@chriscoyier</a>’s 2012 <a href="https://mastodon.social/@csstricks" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@csstricks</a> survey: <a href="https://css-tricks.com/poll-results-how-do-you-order-your-css-properties/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://css-tricks.com/poll-results-how-do-you-order-your-css-properties/</a>. Please reshare!)<a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mas.to/tags/sorting" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#sorting</a>

Adrian Roselli[1/3]New post: “Tweaking Text Level Styles, Reprised” <a href="https://adrianroselli.com/2025/04/tweaking-text-level-styles-reprised.html" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://adrianroselli.com/2025/04/tweaking-text-level-styles-reprised.html</a>It completely wipes away my 2017 post on same.You can remove _everything_ you set for these elements via ARIA or CSS. They just work (minus one egregious Apple bug, of course).<a href="https://toot.cafe/tags/accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#accessibility</a> <a href="https://toot.cafe/tags/a11y" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#a11y</a> <a href="https://toot.cafe/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a>

Ana Tudor 🐯Fun Safari bug 🪲: `drop-shadow()` does't take transforms into account <a href="https://bugs.webkit.org/show_bug.cgi?id=218734" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://bugs.webkit.org/show_bug.cgi?id=218734</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/bug" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#bug</a> <a href="https://mastodon.social/tags/cssBug" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssBug</a> <a href="https://mastodon.social/tags/SafariBug" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SafariBug</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</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/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/cssTransform" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssTransform</a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a>

Phil Gyford<a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> folk: I used to hide the little triangle in a <summary> by doing this:summary::marker, summary::-webkit-details-marker { display: none; content: ""; }But that has no effect in Safari on macOS 15.4 or iOS 18.4. Any ideas? <a href="https://codepen.io/philgyford/pen/YPzMvYw?editors=1100" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/philgyford/pen/YPzMvYw?editors=1100</a>

Ana Tudor 🐯Saw a <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> demo using... a lot! of elements (screen 1) and quite a bit of <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> to create a simple loader, so I forked it and made a 1 div version (screen 2) in under 30 CSS declarations (gradients, mask, variables to only change --c0 and --c1 values for 2nd loader): <a href="https://codepen.io/thebabydino/pen/PwoLJLR" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/PwoLJLR</a><a href="https://mastodon.social/tags/cssMask" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssMask</a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGradient</a> <a href="https://mastodon.social/tags/conicGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#conicGradient</a> <a href="https://mastodon.social/tags/maths" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#maths</a> <a href="https://mastodon.social/tags/trigonometry" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#trigonometry</a> <a href="https://mastodon.social/tags/Sass" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Sass</a> <a href="https://mastodon.social/tags/loader" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#loader</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</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/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/cssAnimation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssAnimation</a>

NFDI4Culture🤩 An der Akademie der Wissenschaften und der Literatur in <a href="https://nfdi.social/tags/Mainz" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Mainz</a> wurde am <a href="https://nfdi.social/tags/girlsday" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#girlsday</a> in Zusammenarbeit mit <a href="https://nfdi.social/tags/NFDI4Culture" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#NFDI4Culture</a> an einer Webanwendung gearbeitet, die sich "In meiner Nähe/Around me" nennt. 👏 Es wurden Wikidata-Einträge zu Museen, Schulen und Parks zur <a href="https://nfdi.social/tags/Georeferenzierung" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Georeferenzierung</a> um einen Kartenmarker abgefragt. Dabei hatten die Mädchen Einblick in <a href="https://nfdi.social/tags/wikidata" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#wikidata</a> <a href="https://nfdi.social/tags/SPARQL" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SPARQL</a> -Queries, <a href="https://nfdi.social/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://nfdi.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> und <a href="https://nfdi.social/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#javascript</a> Und vor allem viel Spaß! 😃 <a href="https://nfdi.social/tags/NFDI4rocks" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#NFDI4rocks</a>^gp (sp)

Ana Tudor 🐯Mastodon 🦣 - can you help me out?If you can test on actual Safari (not another browser), does <a href="https://codepen.io/thebabydino/pen/EaxJmwJ?editors=1100" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/EaxJmwJ?editors=1100</a> look the same for you as it does in my Epiphany screen? Or does the `conic-gradient()` cover the entire area?Retoots appreciated if you cannot test. Thanks!PS: Yes, I know it does NOT work in Firefox or Chromium browsers <a href="https://github.com/web-platform-tests/interop/issues/717" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/web-platform-tests/interop/issues/717</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/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</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/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a>

Matthias OttLoved this episode of <a href="https://front-end.social/@kevinpowell" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@kevinpowell</a>‘s podcast in which he thinks out loud about a new unified approach to <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> layout that is currently emerging. <a href="https://www.youtube.com/watch?v=lCnwX2QXTxk" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.youtube.com/watch?v=lCnwX2QXTxk</a>

KrazovI articlised notes about styling <head> elements:<a href="https://krazov.com/dev/styling-head-elements/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://krazov.com/dev/styling-head-elements/</a><a href="https://mstdn.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mstdn.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>

Code DoctorThe linwood website has now a libraries section to showcase these. Feel free to give feedback.<a href="https://linwood.dev" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://linwood.dev</a><a href="https://alpaka.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://alpaka.social/tags/opensource" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#opensource</a> <a href="https://alpaka.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a>

Ana Tudor 🐯Why isn't `filter` allowed on `:first-letter` anyway? <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter</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/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</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/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a>

Jens Oliver MeiertThanks to <a href="https://mamot.fr/@arkhi" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@arkhi</a> (with whom I maintain the CSS Naked Day site), CSS Naked Day has a new home, css-naked-day.org!See your websites CSS-free on April 9! 📺<a href="https://css-naked-day.org/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://css-naked-day.org/</a><a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mas.to/tags/cssnakedday" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssnakedday</a>

iamdtms<a href="https://graphics.social/@metin" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@metin</a> Can anybody implement it in <a href="https://mas.to/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>? ;)

LobstersFirst Look at The Modern attr() in CSS via <a href="https://dotnet.social/@kerrick" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@kerrick</a> <a href="https://lobste.rs/s/tjyf9r" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://lobste.rs/s/tjyf9r</a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://ishadeed.com/article/modern-attr/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ishadeed.com/article/modern-attr/</a>

Recent searches

Search options

Administered by:

Server stats:

#css

Recent searches

Search options

Administered by:

Server stats:

Css

#css