[Browser Trivia] browser碎碎念: 感冒篇 + 前世今生

寫了CSS的也寫一下各大Browser們的冷知識吧 w
這回是browser們的各種麻煩和族譜 w

[CSS冷知識 #2] 最被人忽略的傢伙: html和body

有時候想到/做到一些冷僻屬性就寫一下吧...今天是常被人忽略的html和body。

[iOS/Mobile Safari] 用media query時很易中的: orientation 的 scaling bug

之前有遇過，總算有解了就寫一下

[症狀]
如果viewport有設width=device-width + initial zoom=1.0  → page scale在轉完orientation後不正確的見鬼事情
而事情會在有media query有orientation時十分明顯
而且是portrait(垂直/直向)轉landscape(水平/橫向)時發生的...

Demo

[圖解]

(1) 原本的橫向...

(2) 轉一下直向

(3) 轉回橫向 - zoom level出錯了，大了很多 ( > 1.0) 囧

那麼先直後橫呢?

會變成 (2) → (3) → (2)

...也就是說從水平轉垂直是沒事的

為什麼只是和scaling有關呢?

沒media query和scaling的原版
只有scaling
只有media query
和Demo比較一下就清楚了...只有scaling就有事，沒scaling沒事 囧

補充
這個bug最見鬼的是－reload scale照出錯 (Mobile Safari把錯的viewport設定記下來+完全無視initial-scale)，要手動scale down回 1.0才正常orz

[原因?]
好像viewport在轉向那一刻鎖成直向(769px x *)+Safari選scale up而非scale down－1024/769=1.3，於是scale出錯...

Viewport是如何出錯的Demo
(照1、2、3的次序再做一次，每次檢查HTML width和Viewport width)

[解法]
1. 不設viewport meta tag: media query的width和height會可能失敗-預設viewport是980x* [Apple文件]
2. 禁止user-scaling: user-scalable=no
3. 設一個scaling上限: maximum-scale=1

Browser戰報、番外篇: IE9 is NOT a modern browser

大戰源頭 - Mozilla 的 Prouget 造了一個網頁質疑IE9宣傳的”Modern Browser”: Is IE9 a modern browser? & IE9 vs FF4

雖然是預期以內，不過－－

就算他是用的很可能是Preview而非RC，FF 3.5 (兩年前)/3.6(一年前)也可以比IE9威...(遠目)
而且Prouget是用數據論證，這很難反擊。(頂多用RC再跑test)

當然M$的人也不是坐以待斃，有人有給回應－

M$的人無力的回應: A Modern Browser - Tim Sneath - Site Home - MSDN Blogs

(少給我廢話，Give me data!)

(番外篇，完)

Browser戰報: IE9 RC及FF4 beta 11

IE9 RC
M$這回沒跳票了，這一轉加的東西不多:

• Geolocation
• CSS3 Border-image
• Web Worker
• CSS3 text-shadow
• offline web app (appcache)

[Source]
完整的新功能見Internet Explorer 9 Guide for Developers
(*2D Transformation和WebM也有了，UI向FF/Chrome/Opera看齊...不過個人感覺是十分的Chrome...)
另外有人反映font-rendering有sub-pixel，會好看一點?
(CSS3 Multi-column、pushState沒影，history API只有onhashchange...)
[Download]

=========
問: 有甚麼是比同時支援 IE 6、7、8慘?
答 1: 同時支援 IE 6、7、8、9 !
答 2: 同時支援 IE n, ∀n∈R. (by @kelvw)
=========

FF4 beta 11
Bug Fix為主，不過Firebug和一堆addon在這一版掛了...[Release Note]
p.s. FF4有Paste & Go了，Yo!

[CSS3 Minefield] Multiple Columns

今天的是簡單一點的CSS3 Multiple columns (w3c: multi-column)。這是網頁排版的重要模組之一，可以排出報章雜誌常用的多欄文章:

[Source: Wikipedia, The Guardian Cover (Fair Use)]

[CSS3 Minefield] Media Queries

延續上回的CSS3火星系列，這次颯爽登場^的是Media Queries!

[前言]
當今世上的顯示平面實在太多－不同大小的手機、不同大小的顯示器、以至不同的媒介(media)，尺寸兩極，一個CSS難以滿足全部平台，於是讓特定的顯示平面+螢幕尺寸來切換CSS的media query應需要而生，在smartphone/iPad+CSS3橫行的年代獲廣泛應用。

Media Queries有兩個組成部分: 媒介種類(Media Type) & 特性(Media Feature)，以下逐一說明。

HTML5 Little thought: legacy template

Question came from the presentation of @codepo8:

using html5 sensibly
audio and video (video is 'coming soon')

His idea: How about moving  IE < 9 fixes to server-side? Padding with DIVs with classes and no JS for IE?

If think with Responsive Web Design...

The Idea will be: make responsive web design more responsive with legacy web browser.

The reason: even JS patch works, still, legacy browsers are too problematics to developers. (e.g. the speed, DOM incompatibility, etc)

Idea is here but the implementation is problem...may be similar to mobile template (lets call it legacy template), with much more inaccuracy. Also it may be suffer from the problem of versioning again.

IE, please die. Old version of modern browsers, please rest.

[CSS3 Minefield] Animation

上次寫過CSS3 Transition這次就寫一下CSS3 Animation－比Transition複雜但可以做出精細特效的終極神器。 (尤其是你要的屬性變更是非線性或不連續的時候)

[前言]
和CSS3 Transition一樣的是，本文只適用於webkit系的Chrome和Safari。 [Browser Support]
本篇會比一篇更傾向解Spec－基本上只要有Flash/Shockwave底子原理不難懂，差的是動畫特性: 流程與機能等。
另外這次的排版也有點不一樣－方便為主，semantics不是不想理是Blogger的系統不給理...
Let's Start。

HTML5/Browser戰報: HTML沒版號及其他...

HTML5
HTML沒版號: Living-Standardize?
WHATWG:HTML is the new HTML5
2012後WAHTWG會把HTML轉Living Standard，下一版的HTML沒有版本號
HTML5 vs. HTML – Jeffrey Zeldman Presents The Daily Report
Standard大師，Jeffery Zeldman對此事的感想－至少CSS3分出來是好事...

<video>
HTML5 and Web Video: Questions for the Industry from the Community - IEBlog - Site Home - MSDN Blogs
M$出H.264 plugin給chrome，搞啥...?

隱憂1: webM開始有patent pool形成[1][2]，就算有FSF給背書也是官司連場...
隱憂2: H.264本身問題其實不少，有developer聲稱照足spec做仍是會fail
隱憂3: H.264授權是貴死人沒命賠的那種
video這片仍然有很多問題。不過已經有人做出一些很瘋狂的事出來了

WebForm
new form features in html5
Opera又加feature了: 這次連color-picker也搞出來了...

Accessibility
http://html5accessibility.com/
全軍覆沒，一如<audio>... [Spec]
(不過<audio>其實還算是可以用的...)

相關技術
WebGL
gl64k
和js1k相似的比賽，come on 3D programmer!
Exporting video from WebGL
把WebGL輸出video，不過仍需server (node.js + ffmpeg)

瀏覽器大戰
Firefox 4, 5, 6 and 7 to be released before the end of 2011
繼Chrome後FF加入版本號競賽，一年跳(票)三個版本...

微軟將在2月10號公布IE9最終預覽版
IE9 RC，2月10日。CSS人可以先看M$官方的CSS相容性列表...

Mobile browser shares 4/4
Mobile browser戰場系列: 常識(webkit天下)是管用，不過不管Opera明顯是個bad idea...