Tag: css3

用純 HTML + CSS 做出來的踩地雷...

一樣還是 Hacker News Daily 上看到的東西，不過這個東西主要就是趣味性為主而已。這次看到的是純 HTML + CSS 做出來的踩地雷 (Minesweeper)，沒有 JavaScript 在內：「css-sweeper from PropJockey」。

自從 HTML + CSS3 證明是 Turing-complete 後，再加上 CSS 本身又一直加各種互動性質的操作，出現這些東西好像不太意外就是了 XDDD

依照他的說明，這邊用到的 CSS 技巧主要是 Space Toggle 這個技巧 (也就是 --toggler 這個)，但試著找了對應的文獻說明居然沒翻到，有人可以給個 hint 嗎...

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

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

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

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

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

對於現在的瀏覽器，CSS 是否還需要加上 vendor prefix...

在「Do we need box-shadow or border-radius prefixes anymore?」這篇文章開頭就先給懶人包：

  • 如果沒有圓角 (border-radius) 或是陰影 (box-shadow) 會造成使用者不順。
  • 如果這四個平台 (以及瀏覽器) 的量夠大的話：Firefox 3.6-、Safari 4-、iOS 3.2-、Android 2.3-。

在這兩種情況下，你仍然需要加上 vendor prefix...

而比較長的說明，可以參考原文後半段，把這兩個效果分開說明。

如果是 Sass (SCSS) 使用者，就直接加吧，反正程式都幫你做好了... 雖然 validator 會叫 CSS 不合法，但也沒印象看過哪家瀏覽器會因為 css vendor prefix 就罷工... (真的有嗎？XD)