Create accountLogin

Recent searches

No recent searches

Search options

Only available when logged in.
mastodon.world is one of the many independent Mastodon servers you can use to participate in the fediverse.
Generic Mastodon server for anyone to use.

Administered by:

Server stats:

9K
active users

mastodon.world: AboutStatusProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.3.7

Public
Vesa Piittinen

So it looks like there is no data sheet on CSS system colors per browser + OS + versions combination.

I've noticed that it isn't all that easy to use the system colors with features like color-mix. Why? Because sometimes colors are "bonkers" compared to other browsers, and there is the whole light vs dark thing also going on.

I don't know yet if I really want to collect all the data, but I made an utility pen to help out in the process:

codepen.io/Merri/pen/xbbePOY

codepen.ioCSS System Colors as JSON & :root CSS...
#WebDev#WebDesign#CSS
Public
GripNews

🌕 CSS 顏色對比自動選擇：contrast-color() 的應用與考量
➤ 簡化設計，提升可及性，但仍需謹慎評估
✤ webkit.org/blog/16929/contrast
這篇文章介紹了 CSS 新功能 `contrast-color()`，它能讓瀏覽器根據背景顏色自動選擇最佳的文字顏色（黑色或白色），簡化網頁設計流程。然而，作者也強調，`contrast-color()` 並不能完全解決可及性問題，仍需要人工檢查以確保足夠的顏色對比度。目前 Safari Technology Preview 預覽版使用 WCAG 2 算法，但此算法存在感知上的缺陷，未來可能採用更先進的 APCA 算法。
+ 哇，這個功能真的太方便了！以前要手動調整顏色，現在可以讓瀏覽器自動幫忙，省下很多時間。
+ 雖然很方便，但可及性還是很重要，不能完全依賴這個功能，還是要自己檢查一下顏色對比度。
#CSS #網頁設計 #可及性 #顏色對比

WebKit · How to have the browser pick a contrasting color in CSSHave you ever wished you could write simple CSS to declare a color, and then have the browser figure out whether black or white should be paired with that color?
Public
Brooke Kuhlmann

The CSS `contrast-color()` function is neat for letting the browser figure out contrasting color. This doesn't mean it'll be perfectly WCAG compliant, though. Details here: webkit.org/blog/16929/contrast

This is not supported by all browsers yet and is only in the WebKit Technology Preview...but worth keeping an eye on.

WebKit · How to have the browser pick a contrasting color in CSSHave you ever wished you could write simple CSS to declare a color, and then have the browser figure out whether black or white should be paired with that color?
#css
Public
Xenomorph 🐉

Кто-то видел уже в небе #css и сравнивал видимое с #iss (часто вижу и даже общаюсь) ? Я вот готовлюсь к 24-му числу, надеюсь 🤞 на первый раз. astroviewer.net/iss/en/observa

www.astroviewer.netTiangong observationA localized list of Tiangong sighting opportunities. Find out when the Chinese Space Station can be observed from your location.
Public
Nathan Smith

I love all the modern CSS tools at our disposal nowadays. I also appreciate Chris Ferdinandi taking the time to explain things in his newsletter.

In this case, here is a good writeup about the difference between `:is` and `:where` when chaining selectors together.

gomakethings.com/is-vs.-where

Logo
gomakethings.com:is() vs. :where()Back in March, I wrote about the :is() pseudo-class and how it can be used to reduce selector complexity. Today, I wanted to talk about another pseudo-class that does the same thing, :where(), how they’re different, and when to use one versus the other. Let’s dig in! How :where() works You use the :where() pseudo-class exactly the same way you’d use :is(). Pass in a comma-separated list of selectors, and it groups them together.
#css
Public
Bjarne Oldrup

Here's a take on styling mastodon feeds on a WordPress page, in a Pinterest-like way, using Wolfgang's plugin:

wordpress.org/plugins/include-

It's thought of as a dynamic decorative element on a page, and therefore limiting the amount of text and hashtags.

Demo page and CSS:
test.oldrup.dev/mastodon/

Tested in full width and wide width containers, with optional tilt and clip.

Most interesting on laptops and upwards.

All feedback welcome.

Sample of photography feed, full width, not tilted, not clipped.
Sample of a hashtag feed, in this case handmade dice.
Sample of a feed in a wide group container, #CatsOfMastodon, mandatory.
Sample of my personal feed on mastodon.green
#mastodon#WordPress#css
ExploreLive feeds
About
404Not Found