在 Gmail 上做 CSS 效果的問題

TechCrunch 上看到的「Gmail, We Need To Talk」這篇裡提到 Gmail 的問題,尤其是 CSS 這塊:

Each Gmail client renders email differently. You may not be aware of this, but each Gmail client has its own set of frustrating quirks. Having to deal with each version of Gmail makes creating email a nail-biting chore:

  • Gmail.com Webmail. Supports <style> but does not support ids and classes.
  • Gmail Webmail for Business. Does not support <style>.
  • Gmail App for iOS. Randomly increases font sizes by 50 percent (no <style>).
  • Gmail App for Android. Randomly ignores container widths (no <style>).
  • Gmail App for Android (for non Gmail.com addresses). Does not support background images in addition to ignoring container widths (no <style>).
  • Inbox by Gmail for Android. Randomly ignores container widths but does so differently than Gmail App for Android (no <style>).
  • Inbox by Gmail for iOS. Does not support <style> but seems to not suffer from as many quirks as other Gmail mobile apps.

這也就可以理解為什麼有時候手機上看起來怪怪的了 XD

更新 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 短片) 以及整理。在手上素材夠多,以及一流的呈現方式,造就了這個精彩的特刊。