用 RSS Bridge 的 CssSelectorBridge 產生出 feed

Hacker News 上看到「Generate RSS feed for any website using CSS selectors (rss-bridge.org)」這個,裡面的連結是 CssSelectorBridge,看起來是剛併進去的:「Add CustomBridge #3457」。

我拿蘋果日報為例子,網址設為 https://tw.nextapple.com/,文章的選擇器設為 .stories-container article,文章的內容設為 .post-inner p,產生出來的頁面連結裡面就包括了 Atom 以及其他種類的 feed。

對於沒有 feed 的網站可以用這可以工具省下不少功夫,之前寫的 feedgen 裡面有不少東西可以退役 (不過當初是打算練 Python,有額外的目的...)

在 CSS 裡面使用系統字型的選擇

一開始是看到「Show HN: Modern Font Stacks – New system font stack CSS for modern OSs (modernfontstacks.com)」這個,專案希望可以使用不用另外下載的字型 (系統內建字型),但這個網站本身不好用,留言區提到的一些其他網站好用多了...

首先是「CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code.」這個,把 WindowsmacOS 上預設的字型都列出來,然後也列出對應的安裝比率。

而另外一個則是在 GitHub 上的專案「Modern Font Stacks」,把類似的字型放在一起。

看起來可以參考,比起只用 serif 或是 sans-serif 來說會多一些變化可以用。

WebKit 要支援 nested CSS 了

從龍哥這邊看到的消息,WebKit 要支援 nested CSS 了:

原文在「Try out CSS Nesting today」這邊,就是這樣的寫法:

.foo {
  color: green;
 .bar {
    font-size: 1.4rem;
  }
}

這個在很多預處理的工具都會支援,然後編譯成展開的形式。

比較特別的是在 nested CSS 中不支援 element 的指定:

main {
 article { ... }
}

他寫的理由我是看不太懂:

That code will fail, because article begins with a letter, and not a symbol. How will it fail? The same way it would fail if you’d misspelled article as atirlce. The nested CSS which depends on that particular selector is simply ignored.

反而要用個奇怪的設計去繞開:

main {
 & article { ... }
}

這邊是真的沒看懂在閃什麼問題...

CSS 的 feature detection:@support

在「Conditional CSS」這篇裡面在講很多 CSS 條件過濾的方式,裡面看到有 @support 這個規格,可以透過 feature detection 的方式來過濾:「CSS at-rule: @supports: selector()」。

文章作者給的範例是這樣:

@supports selector(:has(p)) {
  .card-thumb {
    aspect-ratio: 1;
  }
}

在瀏覽器支援 :has(p) 的情況下才指定裡面的 CSS。

翻了一下 @support 在各家瀏覽器上實做的情況:在 Firefox 上是 69 開始支援,推出的日期是 2019/09/03。在 Chrome 上是 83 開始支援,推出的日期是 2020/05/19。在 Safari 上是 14.1 開始支援 (對應到 iOS 版本是 14.5),推出的日期是 2021/04/26。

從日期可以看出來算是比較新的功能,但主要幾個大的瀏覽器都支援了。

這個讓我想起來早期利用各家瀏覽器的 bug 產生出的各種 hack:「Browser Specific Hacks」。

jQuery 3.6.2

看到 jQuery 出新版的消息:「jQuery 3.6.2 Released!」。

這個版本的說明裡面針對了 :has() 這個功能著墨,主要還是因為這功能 jQuery 支援很久了,而 ChromiumSafai 在最近都開始支援了:「Issue 669058: CSS selectors Level 4: support :has()」、「Using :has() as a CSS Parent Selector and much more」。

不過看起來 jQuery 要整合原生的 :has() 還是有技術困難,因為裡面可能會包括 jQuery 自己定義的 selector extension:

That was problematic in cases where :has() contained another jQuery selector extension (e.g. :has(:contains("Item"))) or contained itself (:has(div:has(a))).

總之,難得又看到 jQuery 的消息... 前一版的 3.6.1 是 2022/08/26,而 3.6.0 則是再一年多前的 2021/03/02,再往前面是 3.5.1 的 2020/05/04 與 3.5.0 的 2020/04/10。

是個歷史...

把所有在 CSS 裡面「有名字」的顏色都呈現出來

前幾天在 Hacker News Daily 上看到「Show HN: A color picker for named web colors (arantius.github.io)」這個作品,把 CSS 裡面有名字的顏色都呈現出來:「Named Colors Wheel」。

移動上去可以看到每個顏色在 CSS 被定義的名稱與色碼,另外從 html code 裡面可以看到他參考了「<named-color>」這份資料。

另外在 Hacker News 上的這則留言也讓我笑的蠻開心的,greenyellow (在黃色 yellow 的左邊) 與 yellowgreen (在 greenyellow 的右上) 的差異:

Also: Finally, a tool to help me decide between greenyellow and yellowgreen.

另外看到這種圖會讓我想到四色定理 (Four color theorem),不過跟這個主題沒什麼關係就是了...

透過 CSS 達到可折疊的 tree view

Hacker News 上看到「Tree views in css」這篇,講怎麼用純 CSS 技巧達到可折疊的 tree view:

主要是用了 ulli 的 html 結構來搭建 tree view 的意義,再透過 <summary><details> 這兩個本身就有 toggle 能力的元素來操作展開與收合,後面就是 visual effects 的設計了。

Can I use 這邊可以看到支援度沒什麼問題 (連 Android 4.4 的 WebView 都支援),除非你還得跟 IE11 奮戰:「Details & Summary elements」。

CSS 的 :has() 有新進展了

在「Using :has() as a CSS Parent Selector and much more」這邊看到 Safari 宣佈對 :has() 的支援,查了一下 Can I use... 上面的資料「:has() CSS relational pseudo-class」,看起來是從 15.4 (2022/05/14) 支援的。

隔壁 Google Chrome 將在下一個版本 105 (目前 stable channel 是 104) 支援 :has(),沒意外的話 Microsoft Edge 應該也會跟上去,看起來只剩下 Firefox 要開了。

先前在「Chromium 的 :has() 實做進展」這邊有翻一下進度,看起來 Chromium 這邊要進入收尾階段了。

等普及後一些延伸套件裡的寫法也可以用 :has() 來處理了,就不用自己在 javascript 裡面檢查半天...

透過一些簡單的設定,產生 RSS 頁面的 RSS Please (rsspls)

RSS Please 是一套簡單設定 (但應該是對 programmer 簡單),可以把網頁內容轉成 RSS/Atom feed 的軟體。

我把官網上範例的註解拿掉,可以看到你需要去讀 HTML 頁面的結構,然後找出對應的 css selector:

output = "/tmp"

[[feed]]
title = "My Great RSS Feed"
filename = "wezm.rss"

[feed.config]
url = "https://www.wezm.net/"
item = "article"
heading = "h3 a"
summary = ".post-body"
date = "time"

跟我在 feedgen 上用 Python 做的事情其實差不多,他用了彈性換方便性:rsspls 可以簡單設定一些值就生出一個 feed,而我這邊的 feedgen 需要寫一段 code (雖然不長);但因為 feedgen 是用 Python 處理事情,所以可以不只可以讀 HTML 也可以讀 JSON API,另外也可以設計一些轉換邏輯 (像是 summary 的部份)。

但有人寫起來推廣總是不錯...

DigitalOcean 買下 CSS-Tricks

Hacker News 首頁上看到的消息,DigitalOcean 買下 CSS-Tricks:「CSS-Tricks is joining DigitalOcean!」,DigitalOcean 的公告在「CSS-Tricks joins DigitalOcean, expanding our commitment to community」,而 Hacker News 上對應的討論在「DigitalOcean acquires CSS-tricks (css-tricks.com)」。

不知道 DigitalOcean 的想法,有人猜算是買媒體的一種,也有人猜是因為 css-tricks.com 的 SEO 分數超高。

對 css-tricks.com 這邊來說,基本上就是脫手賣掉?不過沒看到金額...