Re: fullscreen mode 全屏

(11/08/17 5:38), John Hax wrote:
> [恕刪]
> 2011/8/16 Kang-Hao (Kenny) Lu <kennyluck@w3.org <mailto:kennyluck@w3.org>>
>
>     你這個演講的應用似乎完全就切中整個提案提出的所有功能，所以你何不試
>     著多做一點，比如說
>
>     gotoSlide 就是 element.requestFullScreen
>     .current 就是 :full-screen（這又需要 CSS 解析就是了）
>
>
> 我觉得requestFullScreen在slide这个例子里不是很贴切。我所写的这个slide
> 框架并不需要主动要求全 屏，而是提供在全屏下的不同展现（你可注意到当屏
> 幕大小不同时，样式是不一样的）。

我知道使用 requestFullScreen 來啟動全屏是不對的，但是當全屏已啟動的時候
似乎 requestFullScreen 就跟你的 gotoSlide 做的事情差不多 —— 呼叫
requestFullScreen 的元素得到 :full-screen 這個偽類。而你 run.css 的樣式：

header, section, footer {
    position: fixed;
    left: 0; right: 0; top: 0; bottom: 0;
    margin: 0;
    border: none;
    padding: 0 2% 3em 2%;   
    overflow: auto;
    visibility: hidden;
}

.current {
    visibility: visible;
   
    -webkit-animation-name: fade-in;
    -webkit-animation-duration: 0.5s;
}

看來是跟這份全屏提案[1]建議的 UA 樣式表

:full-screen:not(:root) {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:2147483647;
    background:black;
}

重複率很高，看來是有機會能直接縮小需要寫的額外 CSS（假設這個草案完全被採
用了）。這裡用不是 requestFullScreen「啟動」全屏而是「切換」，似乎很違反
這個方法名稱的直觀解釋。

一時也想不到什麼新的方法命名，畢竟 video.requestFullScreen 這種「啟動」
的用法還是這個草案的一個重點。

[1] https://wiki.mozilla.org/Gecko:FullScreenAPI

> 以我的理解，应该是采用media query，但是在当前的spec里并没有提供相应的
> query fullscreen能力，因此用监听fullscreenchange事件的方式。

提案裡是有 full-screen: on 這個 media query 的。

> 与slide比较相关的CSS草案有一个presentation levels：http://dev.w3.org
> /csswg/css3-preslev/Overview.src.html ， 我倒是考虑在slide框架里加上类
> 似的API来实现更复杂的动画效果。

（尚未詳讀，之後再檢討這兩份提案的關係。順道一提，WebKit 已經有全屏 API
了，Gecko 則是即在眼前[2]）

[2] https://bugzilla.mozilla.org/show_bug.cgi?id=545812

>     用 alternate stylesheet 似乎有點多餘了？
>
>
> 使用alternate style sheet是因为按照我的想法，play slide实际上并不一定
> 要fullscreen，且slide形式只是文档的不同展现形式，理论上UA若支持
> preslevels和相应的控制，则用纯 CSS即可。所以alternate style sheet似乎
> 比较符合这个模型。

老實說我不太明白什麼時候是 media query 什麼時候是 alternate style
sheet，有請開釋。EPUB 3.0 就引入[3]了使用 alternate style sheet 作為豎橫
模式轉換的情形。或許你是對的，應該拿去 WHATWG 問一下，子斌提到的三個月前
全屏 API 的討論我還沒看。

ACTION: XX 去問一下在 slide 的使用情節下到底該用 alternate style sheet
還是 media query。

[3] http://idpf.org/epub/altss-tags/


此致

呂 康豪（Kenny）, 中文興趣小組W3C連絡人
Google+: https://plus.google.com/112088462407783855918/posts
新浪微博: http://t.sina.com.cn/1950042164