Re: [-Fx-] Firefox 137.0 released
以前有人問要如何知道Firefox改版後,
我們自定義的使用者樣式會失效。
今天剛好碰到一個例子。
Firefox有一個獨特的功能 ── 容器分頁,
容器分頁上有標誌不同身分顏色的襯線。
在v137的原生垂直分頁,這個襯線會顯示在左側,
https://i.imgur.com/KZSEdTV.png

而到了v138之後則改到了右側。
https://i.imgur.com/Dzicw6Z.png

放在右側比較好,因為左側會有樹狀分支的群組襯線,
二條線都在左邊,如果將來要做多層分支的時候,
就會分不清楚左邊的襯線是容器的標誌還是樹枝。
https://i.imgur.com/Qe3vWFh.png

但是v138+放在右側的襯線的顯示效果不好,
我看了難受,所以做了一些調整。
結果昨晚打開Nightly一看,
寫好的樣式又全滅了XD
用瀏覽器工具箱可以找到這條襯線是 `.tab-context-line`,
然後到 https://searchfox.org/ 搜尋 `.tab-context-line`,
搜尋結果會顯示
> browser/components/contextualidentity/content/usercontext.css
> 121 .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-
context-line {
點 > 121 這一行進去,會顯示這條襯線的原生CSS是
...... .tab-context-line {
#vertical-pinned-tabs-container &,
#tabbrowser-tabs[orient="vertical"] & {
height: auto;
width: 2px;
margin: 3px 0;
}
......
點右邊的 Mercurial log,
找最近的日期,4/7日那筆變更,按下diff,會顯示
...... .tab-context-line {
#vertical-pinned-tabs-container &,
#tabbrowser-tabs[orient="vertical"] & {
- position: absolute;
- inset-inline-end: 0;
- height: calc(100% - 4px);
- margin: 0;
- margin-inline-end: 3px;
+ height: auto;
width: 2px;
+ margin: 3px 0;
}
}
這樣就可以很快找出更新到底改了什麼,
甚至可以撿回原來的設定。
目前Nightly的襯線因為高度的關係幾乎完全看不到,
這是因為負責這個修改的開發人員還在開發中,
所以樣式隨時會變動。
遇到這種情況建議暫時放棄自定義修改這個元素,
等襯線的設計進入穩定版以後再說,
不然之前花費的心血可能很快會付之東流。
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 61.228.145.34 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/Browsers/M.1744175712.A.BE1.html
→
04/09 13:29,
6天前
, 1F
04/09 13:29, 1F
→
04/09 13:29,
6天前
, 2F
04/09 13:29, 2F
→
04/09 13:29,
6天前
, 3F
04/09 13:29, 3F
→
04/09 13:29,
6天前
, 4F
04/09 13:29, 4F
推
04/09 20:11,
5天前
, 5F
04/09 20:11, 5F
推
04/10 04:14,
5天前
, 6F
04/10 04:14, 6F
討論串 (同標題文章)
完整討論串 (本文為第 3 之 3 篇):
Browsers 近期熱門文章
PTT數位生活區 即時熱門文章