2009-06-01から1ヶ月間の記事一覧
ブラウザのレンダリングの互換性テストといえば、Acid2, Acid3 が有名です。 モダンブラウザだと、Firefox3+, Safari2+, Opera9+, IE8の標準準拠モードが Acid2 をパスします。 さかのぼること 8ヶ月前 こんなことを語ってました。 いまやってること CSSパー…
IE6 で以下の機能が利用可能になりました。 alphapng をサポートしました。 <img src="*.png"> や <input type="image" src="*.png"> で αチャネルを持つ PNG 画像を透過表示します。 <div class="alphabg" style="background-image: url(*.png)"> のように class に "alphabg" が設定されている PNG 画像を透過表示します。 max-width をサポートしました。 <div class="maxmin" style="max-width: 120px"> のよう…</div></div>
静的なデモばかりだとつまらないので、動的なデモを作りました。 お題は、CSS3 の :target 擬似クラスを使ったタブメニューです。 Opera10 で タブメニューA が動かない問題について追記しました。@os0x さん @edvakf さん、ありがとうございます。 タブメニ…
若干修正しました。コンディショナルセレクタ搭載してみました。 あー、良く考えたらコンディショナルな仕組みは必要なのかも。 レンダリングエンジンでスタイルを適用したり/しなかったり、代替スタイルを用意するって仕組みはあってもいいのかもしれない C…
uuCSSBoost.js は uuAltCSS.js に名前が変更になりましたが、一部の説明が記事を書いた当時の古い名前のままになっています。最新版では、uuCSSBoost.revalidate() は廃止され uuAltCSS() を呼び出すように変更になっています。 コードの解説を追記しました…
IE は CSS で !important が指定されていると、runtimeStyle が機能しなくなります。 デモ IE6〜IE8 では、赤い "this is test" が表示され、その他のブラウザでは青く表示されます。 <html><head><title></title> <style>body { color: red !important }</style> </head><body>this is test <script> window.onload = functi</body></html>…
JavaScript の勉強を始めた頃(去年の今頃)こういう日記を書いてました。 IEで width: "3em", width: "auto" から px単位の値を取得する - latest log uuStyle.toPixel() を、よりクロスブラウザなコードにしてみました。 <script> var _ie = document.uniqueID; var …
window.name + フレーム のくだりについてちょっと追記 uuCSSParser.js は uuAltCSS.js の古い呼び名です。昨日の段階で、最新のCSS(CSS3)のセレクタを古いブラウザでも利用可能になりました。 このスクリプトを発展させれば、CSSハックや、ブラウザ毎にCSS…
はい。5日目です。今日は「収集したルールを元に、要素にスタイルを適用する」です。 レガシーとかインラインとかは無かったことに 昨日は、レガシースタイルとインラインスタイルを収集して重み付けしましたが、今日はそのへんバッサリと削ってます。 # よ…
4日目です。今日は、 レガシースタイル( インラインスタイルを収集する。 ⇒ _collectInlineStyle() body要素からターゲット要素までの絶対パスを生成する。⇒ _createPath() といった機能を実装しています。 デモ http://uupaa-js-spinoff.googlecode.com/svn…
三日目です。今日は、重み付け(spec)と !important です。http://uupaa-js-spinoff.googlecode.com/svn/trunk/uuCSSParser.js/demo/sortspec.htm <html><head><title></title> <link rel="stylesheet" type="text/css" href="a.css" /> <style type="text/css"></link></head></html>
はい、JavaScript で クロスブラウザな CSSパーサー の2日目です。 今日は、<link rel="stylesheet" type="text/css" href="a.css" /> の読み込みや @import url(...) への対応にトライしてみます。これが HTML です。 ロードが終わると、CSSの情報をかき集めて表示します。 <html><head><title></title> <link rel="stylesheet" type="text/css" href="a.css" /> <style type="text/css">…</link></head></html></link>
<style type="text/css"> ... </style> CSS ファイルを一本化できればステキ。ブラウザ毎に書き分けるのって本来の姿じゃない。 CSS3 の機能を古いブラウザで使えればもっとステキ。 古いブラウザに時間を掛けたくない。CSS のバッドノウハウなんてノーサンキュー。やりたいことが表現できれ…
@taku_eof さんのご指摘を受けて、タイトルを「ECMAScript5でargumentsが配列になる」から「ECMAScript5でargumentsがArgumentsオブジェクトになる(らしい)」に変更。(らしい) としているのは、また変化するかもしれないから。ECMAScript5 で arguments が配…
http://code.google.com/p/uupaa-js-spinoff/クロスブラウザな環境で、CSS3::Selector, HTML5::Canvas が使えるようになる JavaScript ライブラリの(ほぼ)最終版です。 人前に出せる状態になったので、彼らに新しい名前をつけてあげました。来週からは、仲間…
getRenderEngineVersion() は、レンダリングエンジンのバージョン番号(Major[.Minor])を返します。 <html><head><title></title></head><body> <script> function getRenderEngineVersion() { // @return Number: var rex = /(?:rv\:|Kit\/|sto\/)(\d+\.\d+(\.\d+)?)/; return parseFloat(((rex.exec(navigato</body></html>…
getBrowserVersion() は、ブラウザのバージョン番号(Major[.Minor])を返します。 <html><head><title></title></head><body> <script> function getBrowserVersion() { // @return Number: return window.opera ? (opera.version().replace(/\d$/, "") - 0) // Opera10 shock : parseFloat((/(?:IE |fox\/|ome</body></html>…
getSilverlightVersion() はインストールされている Silverlight のバージョン番号(Major[.Minor])を返します。Silverlight version 3 〜 5 を判定するようにコードを差し替えました。 <html><head><title></title></head><body> <script> var _ie = !!document.uniqueID; function detectSilverlightVersion(</body></html>…
Opera で DOM Mutation Event を使用するコードを追記しました。 まとめを追加しました。 Opera パート2に取得できないケースが見つかったため、パート3 を追加しました。rhino.jpg(幅:300px, 高さ:227px) を、 <img id="rhino" src="rhino.jpg" width="100" height="75" /> と、100 x 75 で表示している場合を例に、画…
