日記 | ヨモツネット

Google が WebFonts をホストする。Google Font API をつかっていれば様々な Web サイトから同一のリソースを参照することになるので閲覧者はローカルのキャッシュを使うことができ、ダウンロードの負荷を軽減することができる…はず。以下のように CSS を読み込めば利用可能。

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
  font-family: 'Tangerine';
}
</style>

Font previewer

コメントはありません

Teck Fielders セミナー東京 text ja 2010-04-19 http://www.yomotsu.net/wp/?p=563

Teck Fielders セミナー東京

Internet Explorer

2010年4月19日月曜日

Microsoft の新宿オフィスで開催された Teck Fielders に参加してきました。今回の『PROJECT UX : Web ブラウザー最新動向』と題して、IE に関する内容などに行われました。特に気になっていた IE の動向を。

IE 8 最新情報

パフォーマンス

起動速度向上
同時接続数の増加 (HTTP 同時接続数が 2 から 6 になった。つまりダウンロード速度向上)
HTML パーシング速度向上
スクリプト処理速度向上
メモリー使用量の増加

利便性

検索候補
アクセラレータ
Web スライス

カスタマイズ版 IE 8

IEAK をコンシューマ向けに使えるようになった。ツールバーなどのカスタマイズができる。いまは 13 社が。
個人でも IEAK による一般向けカスタマイズは可能。

安全性 : IE8 はセキュリティー対策も特に重視。

タブを個別に管理。クラッシュ時など
InPrivate ブラウズ
SmartScreen フィルター (フィッシングフィルター、マルウェアブロック)
- 他のブラウザーに比べてブロック率が高いことも第三者機関により示されている

サポート

ライフサイクルポリシーは 5 年
セキュリティ更新プログラム提供期間 10 年
IE に関する電話でのサポートが行われてる

MS IE 6 移行キャンペーン

MS としても IE 6 をアップグレードを強く推奨している。エンタープライズについても個別に MS からこれを訴えている。

セキュリティ (ガンブラーなど) のオンラインセキュリティ啓発活動
バナーが用意されており、銀行などログインページにこれを表示してもらうといった内容
セーフティ！オンラインプロジェクト

MIXで明らかにされた

MIX10 には JonResig (Mozilla) も登壇
jQuery は Visual Studio などでもサポート。ｊQuery のエディタとして活用できるとのこと
IE 9 Platform Preview 発表。開発者向けに用意したビルド。ベータ版ではない。
- HTML5, CSS3, DOM, SVG など、次世代の Web 標準への対応
- JavaScript エンジン刷新 (JScript ではなく ?) : Chakra
- ハードウェアアクセラレーション
- Direct2D, DirectWrite をつかって表現。XP への対応はするかもしれないし、しないかもしれない。
- Jpeg XR, TIFF もサポート。Jpeg XR は通常の Jpeg の圧縮効率を高めた形式。
- ICC color profile サポート
- フィードバックは IE9 PP のメニューバーの report issue から Connect にジャンプできるのでそこから。

ぜひ IE6 をIE8 にアップデートしてください人のこと

QA

Canvas ついてどうなの？: (この質問が) くると思ってましたが、今のところサポートしていないけどこの先どうかは…可能性は十分ある。他のブラウザとの相互運用性、互換性を考えても。
Filter, SMIL Animation については: これも相互運用性、互換性。使われているようであれば。
Video コーデックについては?: これも相互運用性、互換性。あらゆる機器で使われているコーデックという意味で今日現在では H.264 をサポートする予定。Ogg は国内でほとんど使われていないし…。今後 DRM の対応が問題になってきそう。
SL と canvas かぶるのでは？: その発想はない。HTML5 として準拠すべきかどうか。

コメントはありません

Opera 10.50 が新たにサポートした CSS text ja 2010-03-02 http://www.yomotsu.net/wp/?p=560 CSS, Opera

Opera 10.50 が新たにサポートした CSS

CSS
Opera

2010年3月2日火曜日

本日 Opera 10.50 がリリースされました。~~Opera 10.05~~Opera 10.50 では新たに CSS 3 の一部をサポートしています。ちなみにオートアップデートはないらしいです。

Multiple backgrounds

Multiple background images : ひとつの要素に対して background-image の値を複数適用できる。

e.g.

div {background:url(bg1.png) no-repeat 0 0, url(bg2) repeat-x 0 100% ;}

demo

background-origin

背景の開始位置を変更できる。 border から、 padding から、 content からのいずれかから始めることができる。padding-box | border-box | content-box

background-clip

背景で塗りつぶす領域を変更できる。padding のエッジからまたは border のエッジからのどちらかを選択できる。 padding-box | border-box

border-radius

角丸のためのプロパティー。Opera 10.50 では接頭辞は必要ない。Mozilla と Webkit でも既に実装済み。

e.g.

div {border-radius : 10px;}

demo

border-image

要素の枠線に画像を適用できる。Adobe Fireworks の 9 スライスのような仕組み。strach |ﾂꀀrepeat |ﾂꀀround に対応。Opera 10.50 では接頭辞は必要ない。Webkit でも既に実装済み。

e.g.

div {border-image : url(border.png) 20 20 20 20 round; }

demo

see also : 5. Border Images

box-shadow

要素にドロップシャドウの効果を与えるプロパティー。Opera 10.50 では接頭辞は必要ない。Mozilla と Webkit でも既に実装済み。ただし、box-shadow プロパティーは border-image プロパティーと矛盾が生じるため現在は CSS 3 の草案からなくなっている。

e.g.

div {box-shadow : 10px 10px 20px #000;}

demo

transform (-o-transform として)

要素を移動、拡大縮小、回転、傾かせるプロパティー。接頭辞として -o- が必要。matrix() |ﾂꀀtranslate() |ﾂꀀscale() |ﾂꀀrotate() |ﾂꀀskew() に対応。Mozilla と Webkit でも既に実装済み。

e.g.

div {-o-transform : rotate(45deg);}

demo

transition (-o-transition として)

要素の状態が変化したときにアニメーションで遷移させるプロパティー。接頭辞として -o- が必要。ease |ﾂꀀlinear |ﾂꀀease-in |ﾂꀀease-out |ﾂꀀease-in-out に対応。バグなのか :forcus には効かない。Webkit でも既に実装済み。

e.g.

div {-o-transition : background 1s ease;}
div:hover {background:blue;}

demo

CSS Transitions Module Level 3

あと、待望の <video>, <audio> もサポートするようです。Opera 10.50 が対応する形式は Ogg のみです。

また、Opera 10 (Presto 2.2 rendering engin) までのバージョンでは既に次の規則やプロパティー、値などに対応しています。

Media queries 規則
@font-face 規則 (Web Fonts)
color プロパティーの値に RGBA/HSLA 指定と透明度
CSS 3 のセレクター
background-size プロパティー (-o-background-size として)
text-overflow プロパティー
overflow-x/overflow-y プロパティー

ここで紹介したように Opera 10.50 が新たに実装するプロパティーの多くは接頭辞を必要としません。そのため、ベンダー接頭辞をつけたプロパティー (-moz-border-radius など) と同時に接頭辞をつけないプロパティー (border-radius など) を書いていた人は恩恵がありそうです。

ちなみに次期 IE でも border-radius プロパティーを実装しそうな様子です。こういった未知の実装のことも考え、新たに登場するプロパティーを利用するときには -ms-、-o- など、各ベンダー接頭辞をつけたプロパティーを同時に書いておくと将来いいことがあるかもしれません。

e.g.

div{
	        border-radius : 10px;
	    -ms-border-radius : 10px; /* IE */
	     -o-border-radius : 10px; /* Opera なくてもいいけどつけてある */
	   -moz-border-radius : 10px; /* Fx */
	-webkit-border-radius : 10px; /* Webkit */
}

2件のコメントがあります

続 Firefox 3.6 の HTML5 パーサーを試してみた text ja 2009-11-18 http://www.yomotsu.net/wp/?p=551 Firefox, HTML 5, SVG

続 Firefox 3.6 の HTML5 パーサーを試してみた

2009年11月18日水曜日

HTML5 における svg 要素についてもう少し試してみました。

CSS を試した

CSS のセレクターに名前空間を明示したときの表示を試してみたところ、表示に反映されました。HTML5 での svg 要素は SVG 名前空間 (http://www.w3.org/2000/svg) の要素ということになっているようなので、HTML 上で名前空間を明示していなくても SVG 名前空間の要素として扱われるようです。

デモ (html5.enable が有効な Firefox 用)

SVG の a 要素を試した

SVG の a 要素を使うときには、合わせて xlink の href 属性を指定するのですが、その時どうなるのか…。例えば次のような HTML の断片で

<body>
<svg>
<a xlink:href="http://google.com">
<circle cx=50 cy=50 r=45 />
<text x=20 y=55>google</text>
</a>
</svg>
</body>

のように、xmlns:xlink="http://www.w3.org/1999/xlink を宣言しなくても、xlink:href とすることで動作しました。(ちなみに、このときの a 要素の有効範囲は circle 要素の円部分のみでその外はクリックしてもなにもおこりません。)

デモ (html5.enable が有効な Firefox 用)

よくわからないけど SVG でできることはそのままできるようです。

コメントはありません

Firefox 3.6 の HTML5 パーサーを試してみた text ja 2009-11-16 http://www.yomotsu.net/wp/?p=550 Firefox, HTML 5, SVG

Firefox 3.6 の HTML5 パーサーを試してみた

2009年11月16日月曜日

以前、Firefox 3.6 で実装が予定されている CSS についての記事を投稿したとき、ブックマークのコメントにて vantguarde さんから

CSSじゃないけれど、html5.enableをtrueにすればtext/htmlでSVGもつかえるよ！

とコメントをいただきました。せっかくコメントをいただいたので、Firefox 3.6 の HTML5 パーサーの動作を試してみました。

HTML5 パーサーは Firefox 3.6 β ではデフォルトで html5.enable が false になっています。これを有効にするにはロケーションバーに about:config を入力して、設定から html5.enable を true に変更します。HTML 5 パーサーを有効にすることで text/html の文書に SVG や MathML を混在させて表示できるようになります。

次のデモ 2つは HTML5 パーサーが有効な状態のときに表示を確認することができます。

HTML5 パーサーを有効にしたときの特徴は…

text/html に SVG や MathML を埋め込むことができる
異なる名前空間の語彙に対する名前空間の宣言がいらない
一部の属性値は引用符で括らなくてもいい
空要素を閉じていなくてもパースエラーにならない (ただし、自身の後続に要素がある場合は閉じておかないとその子要素になってしまう)

といった具合でした。

例えば、HTML の文書に名前空間宣言をせずに SVG を埋め込み、circle 要素を閉じず、またその属性値を引用符で括らないで

<!doctype html>
<html>
<head>
<title>SVG in text/html</title>
</head>
<body>
<svg><circle cx=50 cy=50 r=50 fill=#f00></svg>
</body>
</html>

のように書くことができました。埋め込みだけどなんかエクステンシブルな感じです。

いつの日か <canvas>, <svg>, <math> を使い分けたりする日がくるのかも。

HTML5 の SVG と MathML は 4.8.15 MathML と 4.8.16 SVG にいろいろ書いてあります。

コメントはありません

次のページへ

日記

Google I/O で気になった部分

WebM

Adobe Dreamweaver CS5 HTML5 Pack

Google App Engine for Business

Google Storage for Developers

Google Font API

Teck Fielders セミナー東京

IE 8 最新情報

パフォーマンス

利便性

カスタマイズ版 IE 8

安全性 : IE8 はセキュリティー対策も特に重視。

サポート

MS IE 6 移行キャンペーン

MIXで明らかにされた

QA

Opera 10.50 が新たにサポートした CSS

続 Firefox 3.6 の HTML5 パーサーを試してみた

CSS を試した

SVG の a 要素を試した

Firefox 3.6 の HTML5 パーサーを試してみた

Web サイト内検索

カテゴリー一覧

この Weblog の FEED