Stylish 的維護者換人,開始蒐集使用者資訊...

Solidot 上看到 Google Chrome 上的 Stylish 換人開始蒐集使用者所有的瀏覽記錄:「Chrome 版 Stylish 开始收集用户数据」。

之前是靠 Stylish 在處理 Feedly 的版面,移除掉之後就變得很窄很不好讀... 基於不信任的理由,也不可能用 userstyles.org 上的 Greasemonkey 版本 (反而更危險)。

結果塞翁失馬,找到「Custom Feedly Styles (+ Always Show Left Menu)」這個套件,一包直接支援多種功能,還可以透過 checkbox 選擇要哪些...

Trac 的 button 有時候按下去不會生效的問題...

Trac 時常遇到的問題之一:

當 button 按的「不夠中間」的時候就不會有效。原因是按下去後會觸發物件偏移,如果你按到比較邊邊的地方就會失效:

input[type=button]:active, input[type=submit]:active,
input[type=reset]:active {
 position: relative;
 top: .1em;
 left: .1em;
}

解法就是在 template 加上:

input[type=button]:active, input[type=submit]:active, input[type=reset]:active {
    top: 0;
    left: 0;
}

讓他不要亂跑就沒事了...

uBlock Origin 支援的 :has()

查資料的時候發現 uBlock Origin 的「Static filter syntax」已經自己實作 :has() 了 (雖然有一些限制)。

這個 CSS4 (draft) 的特性目前還沒有瀏覽器支援,所以 uBlock Origin 決定自己來:

This is a planned CSS4 operator, but no browser supports it yet. I decided to go ahead and implement it so that it can already be used. See The Relational Pseudo-class: :has() in the Selector Level 4/Editor's Draft.

由於效能問題,要求一定要有 hostname,而不能是 global rule:

uBO's implementation is simplified so as to ensure performance. The :has operator must be used with at least one hostname (it must be specific), and must be of the form (example)[.]

這對於 html block 長的幾乎一樣,只有在某個地方多出 Promoted by ... 之類的結構處理起來很方便,可以拿來找出「裡面有廣告 div 的母體 div」然後整包處理掉... (你不會只想要拿掉 Promoted by ...,而是連廣告內容都拿掉)

在這個純 CSS 技巧被遺忘的年代,許多可以用 CSS 就做到的效果...

在「You Don't Need JavaScript for That!」這邊看到好多讓人懷念的技巧,用純 css 做到很多動態效果 (現在 browser 對 css 的支援比以前好很多,這些技巧應該都沒問題了):

  • Tooltips
  • Dropdown menu
  • Toggle Visibility

以前前端的人會講 accessibility,不過現在好像沒 javascript 就沒人權了...

簡易的 jQuery CSS Selector 替代品

在追 refined-twitter 程式碼的時候,在「refined-twitter/extension/content.js」這邊看到:

const $ = document.querySelector.bind(document);

這樣就可以拿 CSS Selector 掃出元件,程式變得比較好讀... 當然,這個方式不是 fluent interface,沒辦法再依樣串下去。

Google 查了一些資料,看起來至少從 2013 年就有這個技巧了。

關於 CSS 中 :visited 的隱私問題

在七年半前 (2008 年八月) 寫的「利用 CSS 產生的隱私問題」文章,最近好像是因為 Rplus ChenFacebook 上的這邊提到而又有不少點擊進來,不過這個問題在 2010 年左右已經被解決了。

可以參考 MDN 上「:visited - CSS」的說明,以及當時 Mozilla 所發佈的文章:「privacy-related changes coming to CSS :visited」。

由於隱私問題,Mozilla 的作法是限制 :visited 可以改變的項目,只剩下少數與呈現方式有關的屬性可以用:

For privacy reasons, browsers strictly limit the styles you can apply using an element selected by this pseudo-class: only color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, column-rule-color, fill and stroke.

另外各種想要取得 :visited 的 CSS 資訊的方法,也會以沒有瀏覽過該網站重新計算,並且傳回假資料以確保還是不會洩漏:

The first change is that Gecko will lie to web applications under certain circumstances. In particular, getComputedStyle() and similar functions such as element.querySelector() always return values indicating that a user has never visited any of the links on a page.

18F 丟出 CSS 的代碼風格指南

好幾個禮拜前的東西,這幾天才上 Hacker News:「Introducing the CSS coding style guide」。

18F 是美國政府的官方單位,取名自辦公室所在的地址:(取自 Wikipedia 的「18F」說明)

Its name refers to its office location in northwest Washington, D.C., on 18th and F Streets.

不只是定義了 CSS Coding Style Guide,還給了 SCSS Lint 工具使用:

The styleguide provides a method of linting Sass (SCSS) code to ensure it conforms to the rules in the styleguide.

把 HTTP 站台逐步換向 HTTPS 站台的步驟

Jerry Qu 寫的「关于启用 HTTPS 的一些经验分享」這篇文章講了要怎麼將 HTTP 站台逐步換成 HTTPS 站台的方式 (以及工具)。

一開始會遇到 Mixed Content,瀏覽器預設值不會直接全部擋掉,而是會放行圖片類資源 (但是出現對應的警告)。然後可以用 upgrade-insecure-requests 來幫助邊換,讓 url 裡指定 http 的自動連到 https。

當全站把 url 都修完後,接著就可以考慮用 HSTS 強制全上 HTTPS。

做到這邊的安全性已經到一定程度了,接下來要不要進 HSTS Preload List 就看大家自己的想法了。

在 Gmail 上做 CSS 效果的問題

TechCrunch 上看到的「Gmail, We Need To Talk」這篇裡提到 Gmail 的問題,尤其是 CSS 這塊:

Each Gmail client renders email differently. You may not be aware of this, but each Gmail client has its own set of frustrating quirks. Having to deal with each version of Gmail makes creating email a nail-biting chore:

  • Gmail.com Webmail. Supports <style> but does not support ids and classes.
  • Gmail Webmail for Business. Does not support <style>.
  • Gmail App for iOS. Randomly increases font sizes by 50 percent (no <style>).
  • Gmail App for Android. Randomly ignores container widths (no <style>).
  • Gmail App for Android (for non Gmail.com addresses). Does not support background images in addition to ignoring container widths (no <style>).
  • Inbox by Gmail for Android. Randomly ignores container widths but does so differently than Gmail App for Android (no <style>).
  • Inbox by Gmail for iOS. Does not support <style> but seems to not suffer from as many quirks as other Gmail mobile apps.

這也就可以理解為什麼有時候手機上看起來怪怪的了 XD