JavaScript
http://uupaa-js-spinoff.googlecode.com/svn/trunk/uuAltCSS.js/demo/box-shadow/solid_version/multibg1.htm色々と制限はありますが、CSS3 の multiple background image を uuAltCSS.js に実装してみました。日食の画像と、モノリス(?)みたいなステージと…
http://uupaa-js-spinoff.googlecode.com/svn/trunk/uuAltCSS.js/demo/box-shadow/solid_version/demo.htmIE6+, Firefox2+, Safari3.1+, Chrome1+, Opera9.5+ で動きます。このデモで使っている CSS3 プロパティは border-radius: box-shadow: -webkit-gradi…
IE の window.resize イベントは、いくつかの問題を抱えています。 function onresize() { (何か) } window.attachEvent("onresize", onresize); うっかり無限ループする(無限に再描画が走る) 重い(特にIE6) 解決していきましょう。 無限ループ/無限リドロー…
uuAltCSS+.js のコードリード用のエントリです。コードを知らない方には無意味なエントリです。border-radius: 用の処理に、「ボーダー部分をcanvasで描画し、元々borderが設定されていたノードの borderColor を透明にする」という処理がありますが、IE6 は…
Operaの開発者ツール(Dragonfly)で、JavaScriptに特定のコードが含まれていると、コードビューアが「スクロールにコードが追従しなくなる」不具合を起こします(上記画像の白くなってる部分には、本当はコメント行が表示されてるはず) また、任意の位置にブレ…
Firefox2, Opera9.27, Safari4(リファレンス) 参考 http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20389157,00.htm
今日も uuAltCSS.js をいじってました。 ハイ・チーズ 左から、Firefox2/3/3.5, Opera9.52/10β, Safari4, Google Chrome3, IE8 です。ブラウザ毎の縮小率がバラバラですね。記念写真には写ってませんが、もちろん Opera9.27, IE6, IE7 でも動きます。canvas …
uuAltCSS.js に border-radius: と box-shadow: を実装してみました。IE6, IE7, IE8 で動きます。 http://twitpic.com/9wxi5 http://twitpic.com/9wyq8 これらは、IE8 + Silverlight3 のスクリーンショット。 ガウスフィルタ(影のぼかし)が使えない環境もあ…
オリジナル uuAltCSS.js を導入 IE6 IE7 Safari4 <html><head><title></title> <style> .cell1, .disptblcell1 { width: 20%; background-color: #FFCC66; } .cell2, .disptblcell2 { width: 29%; background-color: #CC6633; } .cell3, .disptblcell3 { width: 30%; background-color: #FF9966</head></html>…
正規表現が沢山あると、書くほうも読むほうもしんどいので、時々まとめちゃいます。 たとえば、こんなふうに。 function hoge(ary) { var i = 0, iz = ary.length, val; var rex = /\s*\!\s*important\s*/g; // グローバルフラグ付き for (; i < iz; ++i) { …
ついったーだと長すぎたので、こっちに書きます。http://uupaa-js-spinoff.googlecode.com/svn/trunk/uuCanvas.js/demo1/5_1_canvas_savestate+shadow.htmlの結果が他のブラウザと異なります。 ctx.globalCompositeOperation = "destination-over""source-ou…
大事なことなので、記憶を裏打ちしてみる。 <html><head><title></title></head><body><script> function fn() { alert(typeof a + ", " + a); // undefined, undefined alert(typeof b + ", " + b); // function, function() { alert("b2"); } b(); // alert("b2"); try { alert(typeof c + ", " + c); } cat</body></html>…
ブラウザのレンダリングの互換性テストといえば、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>…
