日記
Firefox 3.5 用の CSS ハック
2009年7月1日水曜日
以前ポストした Firefox 用の CSS ハックをまとめたページを加筆して Firefox の 3.5 以降にのみに有効な CSS ハックを追加しました。
div.sample { background-image:url(img/bg00.png); }
div.sample, x:-moz-broken, x:last-of-type { background-image:url(img/bg04.png); /* Fx 3.5 以降に適用される */}
div.sample, x:x { background-image:url(img/bg00.png); }詳しい説明などは Firefox 用の CSS ハックをまとめたページをご覧いただくとして…
Firefox 3.5 からは CSS Selectors Level 3 の
- :nth-child()
- :nth-last-child()
- :nth-of-type()
- :nth-last-of-type()
- :first-of-type
- :last-of-type
- :only-of-type
が正式にサポートされました。この中で、文字数が一番少なく、確実に適用できる E:last-of-type を CSS ハックに利用してみました。Firefox 3 は Gecko 1.9 でしたが、Firefox 3.5 は Gecko 1.9.1 になっているので表示が少し変わる部分がありました (バグフィックス程度)
Firefox 3.5 ブロガーミーティングに参加してきました
2009年6月29日月曜日
Firefox 3.5 のリリースを 6月 30日 (日本時間で 2009年 7月 1日朝) を控え、Firefox 3.5 の新機能やキャンペーンについての説明が行われました。
Firefox 3.5 での改良点 / 新機能説明 : 浅井 智也 氏
- HTML 5 の video 要素 / audio 要素にネイティブで対応
- video 要素で埋め込まれる動画は Flash ではなく、HTML の一要素なので JavaScript で映像内容の解析、操作が可能。(例えば映像内の白い矩形部分からその座標取得するなど)
- 動画ファイルは特許にとらわれないオープンな技術 Ogg Theora に対応。
- オープンな技術なので GIF の特許問題のようなことは起こらない、
- オープンな技術を用いることは Web を誰でも平等に使えるために大切なこと。
- Ogg Theora は低ビットレートで H.263 より高品質、高ビットレートで H.264 とそんなに変わらない。
- W3C Geolocation(位置情報)対応。位置情報を求められると GPS や IP アドレスから現在地を送信する。コンテンツ側はその位置情報にあわせた情報を提供できる。
- WebFonts に対応。画像化した文字を使用しなくても通常テキストの表現の幅が広げることができる。
- JavaScript エンジンの高速化。Firefox 3 に比べて 2倍以上高速になった。
- 例えば画像編集ができるWebサービスもさくさくうごく。「『Web だから～しかできない』の制約はなくなるかもしれない」とコメント。
- コントロール可能なプライバシー
- プライベートブラウジング(IE 8 と似た実装)
- 履歴管理強化
- 特定のサイトの履歴削除
- 特定の時間帯の履歴削除
- Fx ユーザーは 3億人。国、個人/企業にとらわれない使われ方を目指す
- 柔軟なセッション復元
- 正常に終了しなかった場合も復元
- 閉じてしまったタブの復元
- 特定のタブを選んで起動することもできる
- タブの切り離し(Google Chrome と同様)
- ウインドウの復元
- 自動スペルチェック (辞書を搭載)
- ICC プロファイルをデフォルトでサポート。画像の色味をディスプレイの設定にあわせて表示できる
- Firefox 3.5 がサポートする Web 標準技術
- CSS 3 メディアクエリー
- 画面サイズに合わせて切り替え
- HTML 5 ドラッグ & ドロップ API
- HTML 5 localStorage
- クロスサイト XMLHttpRequest
- (SVG のマスク、フィルターを HTML の要素にも適用可能に)
- CSS 3 セレクターのサポート
- Firefox 3.5 は Web の制約を開放する
Discover Shiretoko についての講演
interFORest の人から Discover Shiretoko のキャンペーンとそのバナーについての説明などが行われました。
- interFORest について
- 実世界と Web の融合についてを研究。
- 過去に Fx 3 リリース時の灯火などをリリースした
- 灯火はダウンロードするという行為自体をコンテンツとした
- Discover Shiretoko のキャンペーンバナーは成長する
- ブログ (枝葉) と知床サイト (根っこの養分)、双方向をつなぐ
- クローズアップ表示結果は実際に知床の現在の気象状況、時間を反映
- Fx 3.5 のリリース時には灯火は再オープン予定。
2つの講演後、懇親会 + 一般ユーザーによるライトニングトークが行われました
無料のイベントにもかかわらずこれだけ用意する Mozilla ってすごい。Firefox 3 リリースパーティーの時もすごかったです。
質問したこと
懇親会中に気になっていたことについて質問してみました。
- SVG のマスクやフィルターをHTMLの要素に適用できる技術はとても便利ですが標準ではないですよね? これについてどうですか?
- すでに SVG として実装されている機能を HTML にも流用しました。まだ標準ではないけどみんなで使って便利ってなったら標準になるかも。
- SVG のフィルターがあれば CSS 3 の box-shadow とかいらなくないですか ?
- SVG は filter を書くのに何行も書かないといけないけど CSS は 1行で書けます。オーバーラップがあっても OK
- WebFonts って英語圏では問題ないけど漢字を含むとものすごく重いのですが
- よく聞かれる質問です。ファイル自体は重いけど HTTP リクエストは 1回ですみますよ ! 将来的には文字コードの範囲を区切って埋め込むこともできるようになる予定です
- Discover Shiretoko のキャンペーンバナーが iframe でできています。自分の Weblog は XHTML 1.1 なのです…。object 要素で埋め込めば解決できそうなのですが。
- うっ…。リリースしてしまったから公式にはもう直せないです。解決方法を自分で記事にしてみたらどうでしょうか。
お土産
Mozilla 主催のイベントではいつもノベルティーが付いてきます。
今回は…
- Firefox 3.5 レビュアーズガイド
- ノート
- フォクスケステッカー
- ポータブルライト
をいただきました。
ポータブルライトは壁などに照らすと Firefox のロゴが映ります !!
web creators vol.92 (2009年 8月号) で 3記事を執筆しました
2009年6月29日月曜日
web creators vol.92 巻頭特集の『クオリティそのままにコストと時間を削減する WEB 制作のアイデア』で 3記事を執筆しました。
上流工程に関することだけではなく、制作フェーズに関することもたくさん書かれています。ワークフロー改善するためのヒントになるかもしれません !!
ブライダル・ドリーム・プレビューに行ってきました
2009年6月28日日曜日
ディズニーアンバサダーホテル、東京ディズニーシー・ホテルミラコスタで開催されたブライダルフェアーにいってきました。
ドレスとかすごかったなぁ。
ミラコスタの窓からはディズニーシーの中もみえました。雨降ってるのにみんながんばるなぁ。
ちなみに… iPhone でアンバサダーホテルの Web サイトを見てみたらグローバルナビゲーションが Flash でできているためにものすごく操作しづらかったです…。swf の代替コンテンツは大切だなぁ。
第 5 回 sugamo.css
2009年6月20日土曜日
今回も巣鴨駅近くのルノワールにて会議室を借りて行われ、Funky4692 さん、kosei27 さん、likealunatic さん、miyazakiryo さん、neotag さん、sakaki0214 さん、Sig. さん、songmu さん、Takazudo さん、taku_eof さん、redmountain さん、Я さんと自分を含めて合計 13人 + 途中で少し kotarok さんが参加しました。本編は 4時間でしたが、長いと感じさせないくらいに濃い話題が飛び交っていました。今回は参加者が多かったこともあり、3つ位のグループができていました。いつも kotarok さんがまとめてくれていたんだなぁと再確認。あと、次回こそは軽くゴッドファーザーのあの方にも参加していただけたら。
いつもどおり自分の周りで話したことをメモを。ちなみに、グループが各々でいろいろな話をしていたこともあり、参加した人の Weblog などでは別の話題が上がっているようです。
ルノーアル会議室2号で行われた本編 (14:00 から 18:00)
- OOCSS という手法について
- OOCSS は例えばclass="list pages", class="list categories" のように指定すし、CSS の継承を活かす。
- ただ、class="list_pages", class="list_categories" のほうが安全ではある。
- Takazudo さんは いま Pro JavaScript Design Patterns (ISBN-13 : 978-1590599082) を読んでいる
- JS を効率よく書いても普通の Web ページでのパフォーマンスはそこまでかわらない。アプリケーション級の Web ページで効果が発揮される。
- JavaScript を専門で書く人が 50人もいる会社がある
- ライセンスのはなしとして、JastSystem,PS3 コントローラーの例
- Takazudo さんの開発環境 : メインは Windows Vista。VMware に Windows XP, hamachiX で Max OS X (バーチャルネットワークによる遠隔操作)
- CSS 3 の transform:rotate() が使えない Firefox 3 でも要素を回転させたサンプルをお披露目。詳しくは hanakuso.org で。
- Webkit には CSS 3 の transform プロパティーの rotate()
- IE には filter プロパティーの rotation
- Firefox 3、Opera には @transform[rotate()] と foreignObject 要素 (Opera は激重)
- 自分が SVG を勉強したきっかけは…XML の複合文書を勉強するときにとりあえず XHTML 以外の XML も知っておかないといけなかったので、表示結果が目に見える SVG がよさそうだと思って始めました。
- Sig. さんによる Vim 操作方法
- 英字配列キーボードはプログラミングに向いているけど、Ruby は国産の言語なので英字配列キーボードじゃなくても。
- 日本語とヨーロッパの言語の話。欧州はラテン語を覚えれば派生してほかの言語も覚えやすい。日本語はめんどくさい
本編終了後、居酒屋にて
- PNG ファイルの補助チャンクには bKGD がある。これは PNG ファイルのデフォルトの背景色を指定するチャンク。IE 6 では、不透明度をサポートしていないので、bKGD の値が背景色として表示される。多くの場合はグレーで表示されるが、この色は Windows のデフォルトの設定が bKGD の値に反映された結果。
- IE 6 自体は悪い Web ブラウザーではないのでは ? IE 6 は 10年前に Asid Test をパスしていたし、XMLHttpRequest もどきも使える。問題なのは、今でも IE 6 が生き続けていること。
- IE 6 が今でも生き続けているのは、ライバルの登場が遅かったためではないだろうか ? その意味では Google がライバルを求めている言動も納得。
- Netscape は AOL に買収されたので終わったのでは ?
- IE 7 でよかったのは PNG の不透明度をサポートしたことくらい
- IE 8 はすごくいいものになった。しかし JScript チームはあまりいい仕事をしたとはいえない。例えば、addEventListener が実装されていないので capture フェイズがない。(taku_eof さんが熱弁)
- 角丸やシャドウの実相において、CSS 3 はまだ未来のことなのでいまはあきらめて div を増やす。
- MMO にはまった人が多い。特に 2名は Lineage 2 廃人だった。自分は Fantasy Earth ZERO (戦争行きたい)。
