Home » Computer » Network » WWW » Archive by category "CSS" (Page 2)

Flat UI 反而造成使用者困擾

在「Flat UI Elements Attract Less Attention and Cause Uncertainty」這邊透過追蹤眼球的技術,發表了研究結果:

Summary: Flat interfaces often use weak signifiers. In an eyetracking experiment comparing different kinds of clickability clues, UIs with weak signifiers required more user effort than strong ones.

其中最明顯的一個例子就是大家被訓練「有底線的文字應該可以按」,這也是最能馬上被想到的問題... 不過這算是 Flat UI 的問題嗎?

The popularity of flat design in digital interfaces has coincided with a scarcity of signifiers. Many modern UIs have ripped out the perceptible cues that users rely on to understand what is clickable.

Firefox Nightly 的 Stylo

Firefox 的 Nightly 納入 Stylo 了,一個用 Rust 開發的套件,可以將 Servo 的 CSS style system 整進 Gecko 內:「Stylo is ready for community testing on Nightly!」。

Stylo (a.k.a. Quantum CSS) will integrate Servo's CSS style system into Gecko, such that the style system code can be shared by Gecko and Servo.

Quantum CSS, aka Stylo, aims to integrate Servo’s parallelized CSS style system written in Rust into Gecko.

Mozilla 把愈來愈多的東西都改用 Rust 寫了...

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 server 上控制,而非在 CDN 上設定。也就是說,在 origin server 上送出 Cache-Control,讓 CDN 或是 reverse proxy server 使用這個值來判斷 cache。

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;
}

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

Archives