透過 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 的部份)。

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

網頁本身是個合法的 JSON 的展示

Hacker News Daily 上看到「Web Data Render」這個有趣的東西,這個網頁本身是個 JSON,透過一些技巧載入 javascript 後就可以讀取資料 render...

不過網頁本身就不是合法的 HTML 了:「Showing results for https://webdatarender.com/」,只能算是個有趣的作法...

用 picture + source + img 替代本來的 JavaScript 替換

目前我在 blog 上使用 Imgur 的圖檔主要是用 WebP 格式,然後針對不支援 WebP 的瀏覽器 (主要就是蘋果家的 Safari) 是用 JavaScript 換回 JPEG 格式...

昨天早上看到「AVIF has landed」這篇,提醒我有 <picture> 這個原生支援的方式可以用,翻了一下 Can I Use 上面的支援程度,看起來除了 IE11 以外幾乎都支援了 (參考「Picture element」),而且 IE11 應該也會因為語法的關係走到正確的 JPEG fallback,大概是這樣:

<picture>
    <source type="image/webp" srcset="https://i.gslin.com/imgur/xxxxxx.webp" />
    <img src="https://i.gslin.com/imgur/xxxxxx.jpg" alt="" />
</picture>

換完後來觀察看看...

用純 HTML + CSS 做出來的踩地雷...

一樣還是 Hacker News Daily 上看到的東西,不過這個東西主要就是趣味性為主而已。這次看到的是純 HTML + CSS 做出來的踩地雷 (Minesweeper),沒有 JavaScript 在內:「css-sweeper from PropJockey」。

自從 HTML + CSS3 證明是 Turing-complete 後,再加上 CSS 本身又一直加各種互動性質的操作,出現這些東西好像不太意外就是了 XDDD

依照他的說明,這邊用到的 CSS 技巧主要是 Space Toggle 這個技巧 (也就是 --toggler 這個),但試著找了對應的文獻說明居然沒翻到,有人可以給個 hint 嗎...

HTML 轉 SVG

在「html-to-svg」這邊看到的,專案在 GitHub 上的「as-a-service/html-to-svg」這邊。

整個服務的程式碼其實很短 (大約 50 行?),因為主要的業務是透過 Chrome (headless) 生出 PDF 檔,再用 Inkspace 把 PDF 轉成 SVG:「htmltosvg.js」。

主要是 Inkspace 可以做 PDF 轉 SVG 這件事情算是新知...

jQuery 3.5.0 的修正,補 XSS 漏洞

這次 jQuery 3.5.0 修正了一個安全性漏洞:「jQuery 3.5.0 Released!」,不過實測了一下,不完全算是 jQuery 的自己出的問題,比較像是幫使用者擦屁股。

jQuery 的說明如果看不懂,可以交叉參考「XSS Game」這篇的說明,搜尋 htmlPrefilter 應該就可以看到了。

這次修正的函數是被 html() 用到的 htmlPrefilter(),這個函數會在 3.5.0 之前會把 <tag/> 這樣的元素轉成 <tag></tag>,而 3.5.0 之後會保留本來的形式。

利用這個特性,就可以用這樣的字串來打穿 WAF:

<style><style/><script>alert(1)<\/script>

原因是 WAF 在看到時會以為 <script><style> 內部的 data 而認為不是 XSS 攻擊而穿過 WAF 的檢查,但實際上被 jQuery 展開後變成:

<style><style></style><script>alert(1)<\/script>

而最前面的 <style><style></style> 被當作是一包,後面的 <script> 就成功被拉出來執行了。

這是相同程式碼使用 jQuery 3.4.1 與 jQuery 3.5.0 的差異,我把 alert(1) 改成 document.write(1),比較容易在 JSFiddle 上看出差異:

不過回過來分析,會發現一開始用 html() 才是問題的起點,要修正問題應該要從這邊下手,而不是用 WAF 擋...

MVP.css

看到「MVP.css — Minimalist stylesheet for HTML elements」這個,目標是只需要寫 semantic html,剩下的就交給 css 處理:

No class names, no frameworks, just semantic HTML and you're done.

這種專案主要是看樣式喜不喜歡,畢竟選這種方案主要目的就是「懶」而不是要做太多效果,之後有機會來用看看...