css

<p>Happy birthday, CSS!</p><p>&quot;The first CSS specification to become an official W3C Recommendation is CSS level 1, published on 17 December 1996.&quot;</p><p><a href="https://en.wikipedia.org/wiki/CSS" rel="nofollow"><span class="invisible">https://</span>en.wikipedia.org/wiki/CSS</a></p><p>&quot;CSS stood out because it was simple, especially compared to some of its earliest competitors.&quot;</p><p><a href="https://thehistoryoftheweb.com/look-back-history-css/" rel="nofollow" class="ellipsis" title="thehistoryoftheweb.com/look-back-history-css/"><span class="invisible">https://</span><span class="ellipsis">thehistoryoftheweb.com/look-ba</span><span class="invisible">ck-history-css/</span></a></p><p><a href="/tags/css/" rel="tag">#CSS</a> <a href="/tags/anniversary/" rel="tag">#anniversary</a> <a href="/tags/webdev/" rel="tag">#webdev</a> <a href="/tags/internet/" rel="tag">#internet</a> <a href="/tags/theweb/" rel="tag">#TheWeb</a></p>

<p>Named Colors Wheel<br><a href="https://arantius.github.io/web-color-wheel/" rel="nofollow" class="ellipsis" title="arantius.github.io/web-color-wheel/"><span class="invisible">https://</span><span class="ellipsis">arantius.github.io/web-color-w</span><span class="invisible">heel/</span></a></p><p>CSS 中所有名字的色彩</p><p><a href="/tags/我在读什么/" rel="tag">#我在读什么</a> <a href="/tags/css/" rel="tag">#CSS</a></p>

<p>New year, new role <span class="h-card"><a href="https://mastodon.social/@Mastodon" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>Mastodon</span></a></span>! </p><p>Our core team is looking for a senior Front-end Developer to elevate the web UI/UX experience for our users. </p><p>Ideally:</p><p>1. You are highly skilled in accessible and semantic <a href="/tags/html/" rel="tag">#HTML</a><br>2. Proficient in modern <a href="/tags/css/" rel="tag">#CSS</a><br>3. Experienced with <a href="/tags/javascript/" rel="tag">#Javascript</a>, <a href="/tags/typescript/" rel="tag">#Typescript</a> and complex React/Redux applications</p><p>This remote full-time position requires a 4-hour overlap with the CET timezone.</p><p>For more info/to apply:<br><a href="https://jobs.ashbyhq.com/mastodon/6a0953c4-812b-4697-b5b3-ea0a2ae402c0" rel="nofollow" class="ellipsis" title="jobs.ashbyhq.com/mastodon/6a0953c4-812b-4697-b5b3-ea0a2ae402c0"><span class="invisible">https://</span><span class="ellipsis">jobs.ashbyhq.com/mastodon/6a09</span><span class="invisible">53c4-812b-4697-b5b3-ea0a2ae402c0</span></a></p><p><a href="/tags/fedihire/" rel="tag">#FediHire</a> <a href="/tags/getfedihired/" rel="tag">#GetFediHired</a> <a href="/tags/hiring/" rel="tag">#hiring</a> <a href="/tags/frontend/" rel="tag">#frontend</a></p>

<p>v1.0.0 of @ch-ui/tokens is out! My sweet bébé!</p><p>Been vetting this in production for a while and I think it’s ready for prime-time.</p><p>Use it to set up font ramps, color palettes, spacings, any set of tokens you want to use in a design system. Can be used with <a href="/tags/tailwind/" rel="tag">#Tailwind</a> (@ch-ui/tailwind-tokens) and <a href="/tags/vite/" rel="tag">#Vite</a> (@ch-ui/vite-plugin-tokens). It’s Just <a href="/tags/css/" rel="tag">#CSS</a>™.</p><p>Explainer here: <a href="https://ch-ui.dev/tokens" rel="nofollow"><span class="invisible">https://</span>ch-ui.dev/tokens</a></p>

<p>A Simple CSS Solution To Fix Element Blocking Page Anchor Links</p><p>Create the best website user experience possible using one of two simple Cascading Style Sheet properties to fix element blocking page anchor links.</p><p><a href="https://www.adamsdesk.com/posts/fix-element-blocking-page-anchor-links-css/" rel="nofollow" class="ellipsis" title="www.adamsdesk.com/posts/fix-element-blocking-page-anchor-links-css/"><span class="invisible">https://</span><span class="ellipsis">www.adamsdesk.com/posts/fix-el</span><span class="invisible">ement-blocking-page-anchor-links-css/</span></a></p><p><a href="/tags/blog/" rel="tag">#blog</a> <a href="/tags/web/" rel="tag">#web</a> <a href="/tags/webdev/" rel="tag">#WebDev</a> <a href="/tags/css/" rel="tag">#CSS</a> <a href="/tags/website/" rel="tag">#website</a></p>

<p>Does anyone know of alternative styles for the default web app when &quot;advanced web interface&quot; mode is activated with v4.3.x - it&#x27;s too wide (mainly the &quot;getting started&quot; column has problems wrapping...) and typo too large for me. </p><p>PS: my question is not about using other interfaces such as Trunks or Elk or...</p><p><a href="/tags/mastodon/" rel="tag">#Mastodon</a> <a href="/tags/css/" rel="tag">#CSS</a></p>

<p>.bathroom {<br> width: fit-content;<br>}</p><p><a href="/tags/memes/" rel="tag">#memes</a> <a href="/tags/css/" rel="tag">#css</a></p>

<p>What’s new in web typography?</p><p>This is a question I’ll be answering at this year’s <a href="https://webdayout.com" rel="nofollow"><span class="invisible">https://</span>webdayout.com</a></p><p>I’ll run along the cowpaths that have been paved and spend time with the new and shiny things that bring expressiveness, fine detail, responsiveness, consistency and efficiency to your work: variable fonts in all their glory, typographic units, drop-caps, hanging punctuation, `text-box-trim`, container-aware fonts and fluid type. </p><p>Use JOIN_RICH to get 10% off.</p><p><a href="/tags/typography/" rel="tag">#typography</a> <a href="/tags/css/" rel="tag">#css</a></p>

<p>Something I recently discovered to be possible in TiddlyWiki is using `clamp()` in the `font-size` settings. It&#x27;s sweet!</p><p><a href="https://whtwnd.com/youronly.one/3lukcyypixm2z" rel="nofollow" class="ellipsis" title="whtwnd.com/youronly.one/3lukcyypixm2z"><span class="invisible">https://</span><span class="ellipsis">whtwnd.com/youronly.one/3lukcy</span><span class="invisible">ypixm2z</span></a></p><p><a href="/tags/css/" rel="tag">#CSS</a> <a href="/tags/tiddlywiki/" rel="tag">#TiddlyWiki</a> <a href="/tags/trick/" rel="tag">#Trick</a> <a href="/tags/tip/" rel="tag">#Tip</a> <a href="/tags/accessibility/" rel="tag">#Accessibility</a> <a href="/tags/a11y/" rel="tag">#a11y</a> <a href="/tags/wiki/" rel="tag">#Wiki</a></p>

<p>Mastodon Bird UI support for Mastodon v4.6.0 with CSS properties is coming soon. The theme will also be modularized using SCSS partials to match Mastodon&#x27;s new style infrastructure.</p><p>The build process will include npm scripts and Parcel, making the theme ultra-portable for any Mastodon instance, whether added through the Custom CSS textarea or directly by a Mastodon admin. </p><p>I&#x27;ll also create a simple bash script for Mastodon admins to enable the theme as a selectable option more easily than the current fork-and-cut method. </p><p>This is no easy feat, but definitely worth it.</p><p>GitHub: <a href="https://github.com/ronilaukkarinen/mastodon-bird-ui" rel="nofollow" class="ellipsis" title="github.com/ronilaukkarinen/mastodon-bird-ui"><span class="invisible">https://</span><span class="ellipsis">github.com/ronilaukkarinen/mas</span><span class="invisible">todon-bird-ui</span></a></p><p>Progress in the nightly branch.</p><p><a href="/tags/mastodonbirdui/" rel="tag">#MastodonBirdUI</a> <a href="/tags/css/" rel="tag">#CSS</a> <a href="/tags/opensource/" rel="tag">#OpenSource</a> <a href="/tags/mastoadmin/" rel="tag">#MastoAdmin</a> <a href="/tags/theming/" rel="tag">#Theming</a> <a href="/tags/birdui/" rel="tag">#BirdUI</a> <a href="/tags/mastodon/" rel="tag">#Mastodon</a> <a href="/tags/buildinpublic/" rel="tag">#BuildInPublic</a></p>

<p><img src="https://neodb.social/media/emoji/mastodon.design/kare_news.png" class="emoji" alt=":kare_news:" title=":kare_news:"> In other news, I see that <span class="h-card"><a href="https://post.lurk.org/@doriane" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>doriane</span></a></span> has published the english translation of my &quot;tactical design&quot; article. </p><p>The best part is her &quot;added notes&quot; in the context of the declarations.style project, &quot;letting the text shapes our practices and our practices shapes the text&quot; as she puts it. Thank you very much!</p><p><a href="https://declarations.style/texts/2025-01-21_tactical-design-and-from-style-tools-to-folkloric-fabulations.html" rel="nofollow" class="ellipsis" title="declarations.style/texts/2025-01-21_tactical-design-and-from-style-tools-to-folkloric-fabulations.html"><span class="invisible">https://</span><span class="ellipsis">declarations.style/texts/2025-</span><span class="invisible">01-21_tactical-design-and-from-style-tools-to-folkloric-fabulations.html</span></a></p><p><a href="/tags/tacticaldesign/" rel="tag">#tacticaldesign</a> <a href="/tags/css/" rel="tag">#css</a> <a href="/tags/webdesign/" rel="tag">#webdesign</a></p>

<p>Something I recently discovered to be possible in TiddlyWiki is using `clamp()` in the `font-size` settings. It&#x27;s sweet!<a href="https://whtwnd.com/youronly.one/3lukcyypixm2z" rel="nofollow">whtwnd.com/youronly....</a><a href="/tags/css/" rel="tag">#CSS</a> <a href="/tags/tiddlywiki/" rel="tag">#TiddlyWiki</a> <a href="/tags/trick/" rel="tag">#Trick</a> <a href="/tags/tip/" rel="tag">#Tip</a> <a href="/tags/accessibility/" rel="tag">#Accessibility</a> <a href="/tags/a11y/" rel="tag">#a11y</a> <a href="/tags/wiki/" rel="tag">#Wiki</a> <br><br><a href="https://whtwnd.com/youronly.one/3lukcyypixm2z" rel="nofollow">TiddlyWiki Legibility Tip: fon...</a></p>

<p>&gt; The key legal question here is: Does modifying how a website displays through browser-side tools like ad blockers count as breaking the [copyright] law?</p><p><a href="https://www.techradar.com/vpn/vpn-privacy-security/germanys-possible-ad-blocker-ban-could-threaten-user-freedom-and-privacy-says-mozilla" rel="nofollow" class="ellipsis" title="www.techradar.com/vpn/vpn-privacy-security/germanys-possible-ad-blocker-ban-could-threaten-user-freedom-and-privacy-says-mozilla"><span class="invisible">https://</span><span class="ellipsis">www.techradar.com/vpn/vpn-priv</span><span class="invisible">acy-security/germanys-possible-ad-blocker-ban-could-threaten-user-freedom-and-privacy-says-mozilla</span></a></p><p>This is ridiculous. There are so many ways to display a <a href="/tags/webpage/" rel="tag">#webpage</a>. So, would using custom <a href="/tags/css/" rel="tag">#CSS</a> also violate the <a href="/tags/law/" rel="tag">#law</a>? Or using a browser like Lynx that just shows the text? Or viewing raw HTML? If anything, it&#x27;s the raw <a href="/tags/code/" rel="tag">#code</a> that should be copyrighted. <a href="/tags/ad/" rel="tag">#ad</a> <a href="/tags/adblock/" rel="tag">#adblock</a> <a href="/tags/legal/" rel="tag">#legal</a> <a href="/tags/internet/" rel="tag">#internet</a> <a href="/tags/netzpolitik/" rel="tag">#netzpolitik</a> <a href="/tags/browser/" rel="tag">#browser</a> <a href="/tags/copyright/" rel="tag">#copyright</a></p>

<p>年底了 如果你不知道给程序员朋友送什么小礼物，可以看看我的这个 <a href="/tags/css/" rel="tag">#css</a> 钥匙扣，寓意美好。</p><p>双面亚克力。</p><p>另有 <a href="/tags/java/" rel="tag">#java</a> <a href="/tags/python/" rel="tag">#python</a> <a href="/tags/go/" rel="tag">#go</a> 等版本</p><p><a href="/tags/1link1day/" rel="tag">#1link1day</a> <a href="/tags/长毛象安利大会/" rel="tag">#长毛象安利大会</a></p>

<p>Modern <a href="/tags/css/" rel="tag">#CSS</a> code snippets, side by side with the old hacks they replace. </p><p><a href="https://modern-css.com/" rel="nofollow"><span class="invisible">https://</span>modern-css.com/</a></p><p>&quot;Stop writing CSS like it&#x27;s 2015.&quot;</p><p><a href="/tags/webdev/" rel="tag">#webdev</a> <a href="/tags/frontend/" rel="tag">#frontend</a></p>

<p>1. 在 <a href="https://instances.social/" rel="nofollow"><span class="invisible">https://</span>instances.social/</a> 注册了mstdn.feddit.social<br>2. 添加了：本站名称、联系邮箱、本站简介、本站缩略图、Favicon、应用图标<br>3. 新访客的主页 从 热门 改为 本站动态<br>4. 自定义CSS：Tangerine UI for Mastodon 🍊 <a href="https://github.com/nileane/TangerineUI-for-Mastodon/blob/main/TangerineUI.css" rel="nofollow" class="ellipsis" title="github.com/nileane/TangerineUI-for-Mastodon/blob/main/TangerineUI.css"><span class="invisible">https://</span><span class="ellipsis">github.com/nileane/TangerineUI</span><span class="invisible">-for-Mastodon/blob/main/TangerineUI.css</span></a></p><p><a href="/tags/mastodon/" rel="tag">#mastodon</a> <a href="/tags/instances/" rel="tag">#instances</a> <a href="/tags/admin/" rel="tag">#admin</a> <a href="/tags/css/" rel="tag">#css</a> <a href="/tags/fediverse/" rel="tag">#fediverse</a> <a href="/tags/selfhosted/" rel="tag">#selfhosted</a> <a href="/tags/server/" rel="tag">#server</a></p>

<p>🤔 &quot;Add text-autospace to status content&quot; <a href="https://github.com/mastodon/mastodon/pull/37694" rel="nofollow" class="ellipsis" title="github.com/mastodon/mastodon/pull/37694"><span class="invisible">https://</span><span class="ellipsis">github.com/mastodon/mastodon/p</span><span class="invisible">ull/37694</span></a></p><p>From Webkit blog (<a href="https://webkit.org/blog/16574/webkit-features-in-safari-18-4/#text-auto-space" rel="nofollow" class="ellipsis" title="webkit.org/blog/16574/webkit-features-in-safari-18-4/#text-auto-space"><span class="invisible">https://</span><span class="ellipsis">webkit.org/blog/16574/webkit-f</span><span class="invisible">eatures-in-safari-18-4/#text-auto-space</span></a>): &quot;WebKit defaults to `text-autospace: no-autospace` to match the current default behavior of older (currently all) browsers. The CSS specification calls for browsers to switch the default to `text-autospace: normal`…&quot;</p><p>It&#x27;s Baseline 2025 (newly available) on MDN <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-autospace" rel="nofollow" class="ellipsis" title="developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-autospace"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/do</span><span class="invisible">cs/Web/CSS/Reference/Properties/text-autospace</span></a></p><p><a href="/tags/css/" rel="tag">#CSS</a></p>

<p><a href="/tags/jellyfin/" rel="tag">#Jellyfin</a> scripting wizards, here&#x27;s one for you. I wrote a bit of CSS to customize my layout. Now I&#x27;d like a backdrop for cast/crew pages, which can be the main backdrop of any of the movies they have featured on their page – granted there is one. Would this be possible with pure <a href="/tags/css/" rel="tag">#CSS</a>, or does that require <a href="/tags/js/" rel="tag">#JS</a> or <a href="/tags/json/" rel="tag">#JSON</a>?</p><p>Image 3 is some Tampermonkey <a href="/tags/javascript/" rel="tag">#JavaScript</a> trickery for Letterboxd that does just that &gt; <a href="https://github.com/Tetrax-10/letterboxd-custom-images/tree/main" rel="nofollow" class="ellipsis" title="github.com/Tetrax-10/letterboxd-custom-images/tree/main"><span class="invisible">https://</span><span class="ellipsis">github.com/Tetrax-10/letterbox</span><span class="invisible">d-custom-images/tree/main</span></a></p><p>See alt for hopefully a better explanation.</p>