Category Archives: CSS

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 … Continue reading

Posted in Browser, Computer, CSS, Murmuring, Network, Programming, Software, Spam, WWW | Tagged , , , , , , | Leave a comment

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

在「You Don't Need JavaScript for That!」這邊看到好多讓人懷念的技巧,用純 css 做到很多動態效果 (現在 browser 對 css 的支援比以前好很多,這些技巧應該都沒問題了): Tooltips Dropdown menu Toggle Visibility 以前前端的人會講 accessibility,不過現在好像沒 javascript 就沒人權了...

Posted in Browser, Computer, CSS, Murmuring, Network, Programming, Software, WWW | Tagged , , , | Leave a comment

簡易的 jQuery CSS Selector 替代品

在追 refined-twitter 程式碼的時候,在「refined-twitter/extension/content.js」這邊看到: const $ = document.querySelector.bind(document); 這樣就可以拿 CSS Selector 掃出元件,程式變得比較好讀... 當然,這個方式不是 fluent interface,沒辦法再依樣串下去。 用 Google 查了一些資料,看起來至少從 2013 年就有這個技巧了。

Posted in Computer, CSS, Murmuring, Network, Programming, Software, WWW | Tagged , , , , , , | 1 Comment

關於 CSS 中 :visited 的隱私問題

在七年半前 (2008 年八月) 寫的「利用 CSS 產生的隱私問題」文章,最近好像是因為 Rplus Chen 在 Facebook 上的這邊提到而又有不少點擊進來,不過這個問題在 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 … Continue reading

Posted in Browser, Computer, CSS, Murmuring, Network, Security, Software, WWW | Tagged , , , , , , , , , | 1 Comment

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 … Continue reading

Posted in Computer, CSS, Murmuring, Network, Political, Programming, WWW | Tagged , , , , , , , , , | Leave a comment

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

Jerry Qu 寫的「关于启用 HTTPS 的一些经验分享」這篇文章講了要怎麼將 HTTP 站台逐步換成 HTTPS 站台的方式 (以及工具)。 一開始會遇到 Mixed Content,瀏覽器預設值不會直接全部擋掉,而是會放行圖片類資源 (但是出現對應的警告)。然後可以用 upgrade-insecure-requests 來幫助邊換,讓 url 裡指定 http 的自動連到 https。 當全站把 url 都修完後,接著就可以考慮用 HSTS 強制全上 HTTPS。 做到這邊的安全性已經到一定程度了,接下來要不要進 HSTS Preload List 就看大家自己的想法了。

Posted in Computer, CSS, Murmuring, Network, Security, WWW | Tagged , , , , , , , , , , , , , | Leave a comment

在 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 … Continue reading

Posted in Computer, CSS, Mail, Murmuring, Network, Programming, Software, WWW | Tagged , , , , , , | Leave a comment

用 CSS 比較兩張圖片的差異...

老文章但上了 Hacker News:「Image diffing using CSS」。 於是本來這樣的兩張圖: 在經過 -webkit-filter: invert(100%) opacity(50%); 的疊合下變成:(這邊就直接抓圖了)

Posted in Computer, CSS, Murmuring, Network, WWW | Tagged , , , , , , | Leave a comment

更新 Twitter Expand Preview Image 樣式...

在「預設展開 Twitter 圖片的 Userstyle」這邊利用 CSS 效果展開圖片,這次更新把多張圖片的縮圖也展開了:「Twitter Expand Preview Image」。 連帶的,本來有裝「Photo Zoom for Twitter」就順便移除了... 這次學到 unset 這個屬性:「unset - CSS | MDN」,現在 Google Chrome 也才 43,也就是在 Google Chrome 上是兩個版本前的 41 才支援的...

Posted in Browser, Computer, CSS, Firefox, GoogleChrome, Murmuring, Network, Photo, Recreation, Social, Software, WWW | Tagged , , , , , , , , , , | Leave a comment

預設展開 Twitter 圖片的 Userstyle

在 Twitter 上遇到比較大張的圖片要自己展開,之前在 Google Chrome 上面是用 Previeweet 解決,但這個套件已經年久失修... 研究了 Twitter 的 CSS 結構,看起來可以用 Stylish 處理掉,就寫了一個 style 上傳上去:「Twitter Expand Preview Image」。 這樣看圖片方便多了...

Posted in Browser, Computer, CSS, Firefox, GoogleChrome, Murmuring, Network, Programming, Software, WWW | Tagged , , , , , , , | 1 Comment