更新 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 才支援的...

預設展開 Twitter 圖片的 Userstyle

Twitter 上遇到比較大張的圖片要自己展開,之前在 Google Chrome 上面是用 Previeweet 解決,但這個套件已經年久失修...

研究了 Twitter 的 CSS 結構,看起來可以用 Stylish 處理掉,就寫了一個 style 上傳上去:「Twitter Expand Preview Image」。

這樣看圖片方便多了...

利用 data attribute 與 attr() 的 Pure CSS Responsive Table

查了 MDN 的說明,原來 attr() 在 IE8 就可以用了...

在這篇文章看到純 CSS 的 Responsive Table 技巧:「Responsive Tables in Pure CSS」,目標是把這樣的表格:

在寬度較小時自動變成這樣的形式:

用了 data attribute 與 attr(),再加上 before pseudo element。

GitHub 的 CSS 設計

在「GitHub's CSS」這篇裡面講了很多 GitHub 設計的工具,以及評估的方式。

原文有提到 IE9 以及之前的版本中,單檔有 4095 selector 的限制,這點讓人稍微怔了一下:

The split was added years ago to solve the problem of Internet Explorer’s 4,095 selectors per file limit.

超過的要切割讀入...

另外在文中有提到 2012 年的投影片「GitHub's CSS Performance」吸引我的目光:

針對 diff 頁面大量元素時的 CSS 效能分析,除了各種 browser 裡 index id & class & tag 的方式外,另外還有不少為了加速而直接修改 HTML 的建議 XDDD

Trac 裡 <pre> 元素的換行...

公司用 Trac 當作 issue tracking system,預設的 <pre> 是不會斷行的,但好像也不是所有人都能夠接受換行,所以在自己的 browser 裡面處理掉。

在裝了 Stylish 後,針對內部網域建立以下 CSS 效果:

#content pre {
  word-wrap: break-word;
}

word-wrap 強制斷行,在大多數的情況下會看得比較清楚,也不會影響到 copy/paste 時的行為。

Firefox 將可以在 CSS 內使用變數...

Firefox 將在 29 版支援 CSS 變數 (現在是 26 版):「CSS Variables in Firefox Nightly」。標準是出自 W3C 的「CSS Custom Properties for Cascading Variables Module Level 1」(在寫這篇文章時還是 draft)。

程式碼會長這樣:(直接引用比較複雜的程式碼)

:root {
  var-companyblue: #369;
  var-lighterblue: powderblue;
  var-largemargin: 20px;  
  var-smallmargin: calc(var(largemargin) / 2);
  var-borderstyle: 5px solid #000;
  var-headersize: 24px;
}
.partnerbadge {
  var-companyblue: #036;
  var-lighterblue: #369;
  var-headersize: calc(var(headersize)/2);
  transition: 0.5s;
}
 
@media (max-width: 400px) {
  .partnerbadge {
     var-borderstyle: none;  
     background: #eee;
  }
}
 
/* Applying the variables */body {font-family: 'open sans', sans-serif;}
 
h1 {
  color: var(companyblue);
  margin: var(largemargin) 0;
  font-size: var(headersize);
}
h2 {
  color: var(lighterblue);
  margin: var(smallmargin) 0;
  font-size: calc(var(headersize) - 5px);
}
 
.partnerbadge {
  padding: var(smallmargin) 10px;
  border: var(borderstyle);
}

本來用 Sass/SCSS 做的事情就可以把計算這部份推到 browser 上處理...

CSS 裡,px 的定義並沒有保證線性...?

在 Hacker News 上看到的舊文章,在「IN CSS, “PX” IS NOT AN ANGULAR MEASUREMENT AND IT IS NOT NON-LINEAR」這篇文章裡面,標題就直接提到「pixel 並非生而平等」...

文章裡的 pixel 的定義是:

a pixel is defined as the smallest object that can be displayed on a device

但我找不到這句話的出處...

到是 CSS 2.1 的 PDF 裡可以看到 px 的定義是:

px: pixel units — 1px is equal to 0.75pt.

以及 pt 的定義:

pt: points — the points used by CSS are equal to 1/72nd of 1in.

而連 in 都有定義:

in: inches — 1in is equal to 2.54cm.

然後 cm 這個縮寫定義到公制:

cm: centimeters

看起來不像是有問題啊?另外是還有對 reference pixel 的定義,看起來也很明確啊:

The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch).

暫時不考慮這個問題... 有機會再回頭來看好了 @_@

英國衛報對 Snowden 爆料 NSA 的特刊...

衛報 (The Guardian) 對 Snowden 爆料的事情開了一個特刊:「NSA files decoded: Edward Snowden's surveillance revelations explained」。

首先,Snowden 爆料 NSA 這件事情的熱潮一直在延續 (一直都很精彩),而且衛報本來就是在這整件事情裡面佔有很重要的角色,由衛報做這個特刊並不意外。

但衛報這個頁面利用 HTML5 video 與大量 CSS3 效果,向全世界展示了「網站上的特刊可以這樣做!」,強烈建議有在關注這個主題的企劃,以及視覺設計的人花時間去看看整體的呈現。

以往類似的東西要嘛就是主題不夠精彩,要嘛就是呈現不夠精彩。這次因為 Snowden 的爆料已經持續幾個月了,衛報自然願意花大量的資源專訪 (於是可以看到不少 video 短片) 以及整理。在手上素材夠多,以及一流的呈現方式,造就了這個精彩的特刊。

避免文件大量 Reflow...

今天的 Hacker News 文摘上看到關於 Reflow 的問題:「Preventing 'layout thrashing'」。

Reflow 指的是改變 DOM 後造成的畫面重新計算以及 render。

Google 有給過一些資訊:「Minimizing browser reflow」,Mozilla 也有給「Notes on HTML Reflow」,不過這兩篇都是概念性的文章...

文章的作者寫了 FastDom,把 read 與 write 包起來一起處理 (read 一包,write 一包),不過這樣寫的時候就要小心當下真正的 DOM 的值了...

不過如果只是處理 ordering 的問題,叫 FastDom 好像怪怪的...