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」。

重點在這張:

前面九個分成三種效果在三個不同的瀏覽器呈現的結果,然後是 FigmaIllustratorPhotoshopSketch 的效果。

可以看出來在瀏覽器上的部分,大家的 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 的計算。

MozillaBugzilla 上可以看到票還開著:「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.」這個,把 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),不過跟這個主題沒什麼關係就是了...