Category Archives: CSS

用 CSS Grid 達到類似 Bootstrap Grid 的效果

看到這則 tweet: Bootstap 12 column grid in 5 lines of CSS. One of many ways to lay out of a page in CSS grid. You won’t be needing frameworks for layout much longer 😃 pic.twitter.com/DlxeNesna1 — Wes Bos 🔥 (@wesbos) … Continue reading

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

Firefox 的 Input 要支援 Date/Time 格式了

在 Hacker News Daily 上看到六月的文章,看起來是 Firefox 下一個版本要支援所以冒出來了:「Date/Time Inputs Enabled on Nightly」。 然後支援多國語系:(官方拿的範例剛好就是中文) 依照 MDN 上的說明「<input type="date">」以及 Can I Use 往站上的說明「Can I use Date and time input types」,可以看到這樣又多了一個瀏覽器啦: Safari 被稱為新世代的 IE 真不是蓋的 XDDD

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

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

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

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

先前 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

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

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