Tag Archives: css

Flat UI 反而造成使用者困擾

Posted on September 10, 2017 by Gea-Suan Lin

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

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

Adobe 的 Typekit 在嘗試純 CSS 版本的網頁字型了

Posted on September 1, 2017 by Gea-Suan Lin

先前 Typekit 需要使用 JavaScript，現在則是開始嘗試純 CSS 版本了：「Now in Early Access: Serve web fonts without JavaScript」。 然後另外發現 use.typekit.net 以前是 EdgeCast，現在變成 Akamai 了...

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

Firefox Nightly 的 Stylo

Posted on July 26, 2017 by Gea-Suan Lin

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

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

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

Posted on July 16, 2017 by Gea-Suan Lin

在「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

Posted on June 9, 2017 by Gea-Suan Lin

在「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 混合不同的字型

Posted on May 1, 2017 by Gea-Suan Lin

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

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

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

Posted on December 11, 2016 by Gea-Suan Lin

用 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()

Posted on October 29, 2016 by Gea-Suan Lin

查資料的時候發現 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

CloudFront 支援將 Query String 內的特定 Key/Value 當作 Cache Key 的一部分

Posted on September 4, 2016 by Gea-Suan Lin

Amazon CloudFront 可以指定 query string 中的某個特定的 key/value 當做 cache key 的一部分了：「Announcing Query String Whitelisting for Amazon CloudFront」，對應的文件在「Configuring CloudFront to Cache Based on Query String Parameters」這邊可以查到。 先前只能針對選擇忽略掉整個 query string，或是把整個 query string 當作 cache key 的一部分，現在可以細部調整了。 最簡單的應用可以用在 css/js 的 asset 上，針對 v=\d+ … Continue reading →

Posted in AWS, CDN, Cloud, Computer, Murmuring, Network, WWW | Tagged , , , , , , , , , , , , , , | Leave a comment

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

Posted on May 31, 2016 by Gea-Suan Lin

在「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