Category Archives: CSS

Google Chrome 59 之後的新功能:看 CSS 與 JS 的 Coverage

在「What's New In DevTools (Chrome 59)」這邊看到 Google Chrome 59 後所推出新的工具,可以看目前網頁的 CSS 與 JS 跑過的 coverage 比率。 像是這樣,總大小以及未使用的比率: 然後可以再直接看有哪些部份沒跑到: 可以拿來分析,降低使用者下載的量。不過真的要切的話好像不太好做...

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

Web Cache Deception Attack

在「How (Not) to Control Your CDN」這邊看到了「Web Cache Deception Attack」這個攻擊方式。 攻擊的手法是利用網站會把 /user/personal-info/foo.css 與 /user/personal-info 視為一樣的內容時,配合 CDN 或是 reverse proxy server 會把 .css 設定無差異 cache 時,就可以在 cache server (cache edge) 取得使用者的敏感資料。 這主要是 url routing 的條件放太寬造成的。 另外 Mark Nottingham 還建議 cache 應該在 origin … Continue reading

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

用 unicode-range 混合不同的字型

「Combining fonts」這邊示範了如何使用 CSS 的 unicode-range 針對某些特殊字元混用不同的字型,作者利用這個技巧,把 hyphen 與 equals 換掉...: 看了一下,支援度還蠻高的?IE 支援度是 9+ 的功能...

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

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

從 Solidot 上看到 Google Chrome 上的 Stylish 換人開始蒐集使用者所有的瀏覽記錄:「Chrome 版 Stylish 开始收集用户数据」。 之前是靠 Stylish 在處理 Feedly 的版面,移除掉之後就變得很窄很不好讀... 基於不信任的理由,也不可能用 userstyles.org 上的 Greasemonkey 版本 (反而更危險)。 結果塞翁失馬,找到「Custom Feedly Styles (+ Always Show Left Menu)」這個套件,一包直接支援多種功能,還可以透過 checkbox 選擇要哪些...

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

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; } 讓他不要亂跑就沒事了...

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

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