CSS – Gea-Suan Lin's BLOG

CSS 的 all 屬性

查資料注意到 CSS 的 all 屬性可以用來清除網站上的設定 (通常需要加上邪惡的 !important)，剛好搭配 uBlock Origin 的 :style，可以很方便的用自訂規則處理掉：

www.example.com##div.foo:style(all: initial !important;)

當然這也可以用在 UserCSS 上面。

從 Can I Use? 這邊看起來兩個陣營大概都是 2014 年就支援這個屬性了，所以自己用的話不用太在意相容性的問題：「CSS all property」。

Firefox 的 UI 修正方案

在「Firefox Proton UI userChrome.css fixes. (2021) (github.com/black7375)」這邊看到的，GitHub 上的專案頁面在「Lepton (old name: Proton Fix)」這邊。

作者先前有寫過，我在「Firefox 的 UI/UX 歷史」這篇，同一個 repository 裡面就包含了「修正方案」，補上了一些 icon，並且改了 css 效果。

不過我已經沒什麼在用 Firefox 了，而且目前看起來也不會回去了，看起來只有在交叉找問題的時候會用到...

利用信件裡面的 CSS，讓文字只在轉寄後才出現

在「Kobold letters: HTML emails are a risk (lutrasecurity.com)」這邊看到的 security advisory (算... 是吧？)，原文在「Kobold Letters」這邊，如同標題寫的，方法其實意外的簡單...

Thunderbird 是透過 .moz-text-html>div> 指定就可以達到效果：

Outlook on the web (i.e. 雲端版本) 則是有在 id 上面增加隨機的 prefix 避免，但可以用 body>div> 避開，另外有些眉眉角角的地方會稍微複雜一點，但還是可行的：

而 Gmail 則是直接用個簡單的 css selector 掛上 display: none; 就 OK 了：在 sender 端 (轉寄者) 看不到，在 receiver 端則可以 (效果更好？)：

比較慘的是目前大家都沒有想到比較好的解法，就算這次提到的方法被補上了，應該還是很容易被繞過去：

Unfortunately, for the foreseeable future, it is sadly not realistic to expect email clients to implement robust mitigation. This means that it is up to the users to be aware of the dangers of HTML emails and to take the necessary precautions.

另外文章裡面提到了 Can I email 這個網站，看起來如果要自己處理 email 內容的話是個不錯的資源...

Gitea 預定淘汰掉 jQuery + Fomantic-UI + Semantic-UI，改用 Tailwind CSS

在「So long jQuery, and thanks for all the fish」這邊宣佈了 jQuery 的退役計畫，會改用 Tailwind CSS：

We would like to celebrate the significant work done to remove a significant portion of jQuery in our codebase and the start of the switch to using Tailwind CSS.

We would also like to thank the creators and maintainers of jQuery, Fomantic-UI, and Semantic-UI which we have used for many years, and while the usage of these projects in Gitea will be going away, they have powered Gitea's interface for almost an entire decade.

不確定是不是一個好的方向，因為在這十年前端的「蓬勃發展」後，jQuery 其實比較起來變得非常輕量 (87KB，如果是 gzipped 後則是 30KB)，而且從一開始 John Resig 就很在意執行速度，不像現在各種 framework 都是抽象再抽象，沒在管效能的...

目前應該會在 Gitea 1.22 亮相，到時候可以看看改出來的結果...

CSS Flexbox 裡元素的 margin 不會重疊

前陣子在動手弄 css 的東西，才注意到 flex 有很多不太一樣的設計，對於學過「以前的標準」的人來說會比較意外，就像標題提到的...

我在 JS Fiddle 上面做了一個範例可以測試，裡面有兩組 container，第一組就很標準的 div 設定為 100x100 的大小，然後 margin 設為 10px。

可以看到第一組裡面，上下 block 的 margin 會「疊」起來 (也就是上面 block 的 margin-bottom 與下面 block 的 margin-top 疊起來)，變成 10px，而不是分開算的 20px。

這個特性可以用「margin collapsing」查到，在 MDN 上甚至有一篇「Mastering margin collapsing」可以看，而這個特性對於老人來說已經用習慣了...

但如果用 flex 實作時 (display: flex; 以及 flex-direction: column;)，會發現所有的 margin 都是自己計算而不會疊加，這點在 W3C 的文件「CSS Flexible Box Layout Module Level 1」裡面有提到：

For example, floats do not intrude into the flex container, and the flex container’s margins do not collapse with the margins of its contents.

這個特性無法被改變，取而代之的是用 gap 這個 property 設定元素之間的間格。

各家瀏覽器與工具對於 blur 效果的實際呈現比較

在 Hacker News 上看到「Blur Radius Comparison (bjango.com)」，原文在「Blur radius comparison」。

重點在這張：

前面九個分成三種效果在三個不同的瀏覽器呈現的結果，然後是 Figma、Illustrator、Photoshop 與 Sketch 的效果。

可以看出來在瀏覽器上的部分，大家的 rendering 沒有差太多。

而 Figma 所有 blur 類的效果，在瀏覽器上比較接近的只有 box-shadow，其他三套則是有不同的變化...

在 Linux 下將沒有安裝的字型指定替代物 (Consolas -> Inconsolata)

在看文件的時候發現 css fallback 的關係，被一路退到 Courier New，字有點太細... 然後發現 Consolas 沒有被指定替代字型 (通常會選 Inconsolata)，依照「Font configuration」這邊的 alias 設定不會動，還是得用 match 去換。

要把 Consolas 換成 Inconsolata 的話，需要把設定加到 fontconfig 的設定裡面：(像是 ~/.config/fontconfig/fonts.conf，或是 /etc/fonts/conf.d/ 裡面放一個號碼大一點開頭的，像是 99-match.conf 之類的)

<match target="pattern">
        <test qual="any" name="family">
                <string>Consolas</string>
        </test>
        <edit name="family" mode="assign" binding="same">
                <string>Inconsolata</string>
        </edit>
</match>

瀏覽器因為有 cache 的關係，會需要重開生效。

另外一個有換的是 Menlo 換成 Bitstream Vera Sans Mono，換完後也好不少。

Firefox 的 :has() 支援度問題

在 Can I Use... 上面的「:has() CSS relational pseudo-class」裡面可以看到 Firefox 一直都還沒支援，只有在 nightly 版本上面預設有開，這也代表還沒辦法很穩定的用這個 selector... (除非你直接忽略掉 Firefox)。

看到「Prodding Firefox to Update :has() Selection」這篇，Eric Meyer 在抱怨 Firefox 的這個問題，就算是 nightly 的版本也還是有奇怪的 bug，會抓不到 :has() 條件，需要用 contenteditable 的 workaround 觸發 Firefox 的計算。

在 Mozilla 的 Bugzilla 上可以看到票還開著：「Implement the :has() pseudo class」，看起來這陣子是一直有在更新，應該是有資源在上面追進度。

等到真的支援，就可以在 querySelectorAll() 裡面直接用 :has() 了，現在 Firefox 的情況讓 Userscript 寫起來有點卡...

用 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.」這個，把 Windows 與 macOS 上預設的字型都列出來，然後也列出對應的安裝比率。

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

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