uu.snippetで「やりましょう」、Widgetの作り方入門 - latest log
続き書きました uu.snippet 入門(2) 複数の部品を一つのsnippet に - latest log Widget(Web ブラウザ上で動作する UI 部品)を作るには、構造を HTML で、見栄えを CSS で、アクションを JavaScript で記述することになります。 Widget を作る際の問題は大きく3つ。 標準的な JavaScript には DOM 構造やスタイルをヒアドキュメント化し埋め込む仕組みが無い(頑張ればなんとかなるけど、サクっとやれない) CSS には定数や外部参照可能な変数の概念が欠如している 画像数、画像サイズ、レイアウト変更に耐えるだけの構造を持たせることが非常に難しく、○○CSSなどの外部ツールに頼るか、妥協するか、実数(マジックワード)として埋め込むかを選択することになる(変数が使えないために発生するトライ&エラーや悩む時間が無駄すぎる)
document.matchesSelector 相当の機能を実装してみた - latest log
より効率的なコードに差し替えました http://dev.w3.org/2006/webapi/selectors-api2/#matchesselector と id:javascripter さんの記事 Selectors APIのmatchesSelectorと、動的なページでのイベント処理 via http://d.hatena.ne.jp/javascripter/20091018/1255889085 を参考に uu.match(expr, ctx, rtype = 0) な関数を書いてみました。 // uu.match - document.matchesSelector like function function uumatch(expr, // @param String: "css > expr" ctx, // @param NodeArray/Node: matc
ストレスの無いCSSアニメーションを - latest log
今日は、CSSアニメーション機能を担当する uu.tween.js のリライトをしていました。 uu.tween.js を組み込むと、CSS の色, サイズ, 位置を利用したアニメーションが可能になります。これ自体はよくある機能なのですが、他のライブラリにない特徴として、CSSプロパティ個別に easing 関数を割り当てられます。 デモ http://pigs.sourceforge.jp/blog/20091216/ ノード3個 と 15個版があります。ノード数が違うだけで何身は一緒です。デモにある円弧軌道は、left, top に別々の easing 関数を割り当てて実現しています。 easing 関数 デフォルトの easing関数 は easeInOutQuad です。plug/easing/uup.easing.js を組み込むと他の関数を利用できます。 http://code
uuAltCSS の改良(auto viewbox) - latest log
久しぶりに uuAltCSS.js の話を。 内容的には HTML5 + CSS3 + レイアウトデモ - latest log の続き。 uuAltCSS を導入すると古いブラウザでも box-shadow などの CSS3 の機能が利用可能になります。 ただ、uuAltCSS 上で box-shadow を利用する時は、影を描画するスペースを確保する目的で、本来は不要な見栄え用のdiv要素(viewbox)を文書構造に入れ込む必要がありました。 本来の HTML <div> コンテンツ </div>viewbox を追加した HTML <div class="viewbox"> <div> コンテンツ </div> </div>例: http://d.hatena.ne.jp/uupaa/20090820/1250742374 難点が2つ HTML5 + CSS3 をバリバリ利用したデ
HTML5 + CSS3 + レイアウトデモ - latest log
HTML5 + CSS3 + クロスブラウザ + リキッドレイアウト なデモです。 <!doctype html><html class="ifnojs"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>HTML5 demo</title> <style> @import url(html5.bone.css); @import url(html5.efx.css); </style> <script type="text/xaml" id="xaml"><?xml version="1.0"?> <Canvas xmlns="http://schemas.microsoft.com/client/2007"></Canvas></script> <script> win
静的⇒動的 - latest log
uuAltCSS.js version 0.1 は、CSS を元に静的なレンダリングを行っていましたが、次の version では JavaScript による動的なスタイルの変更をサポートする予定です。 デモ http://pigs.sourceforge.jp/blog/20090814/20090814.htm 以下の API で CSS の解析結果を公開する予定です。 uuAltCSS.getRuleset() - 解析済みのCSSの宣言の一覧を格納する配列を返します。 uuAltCSS.getDeclaredValues(node) - ノードに割り当てられているスタイルに関する情報( { order, prop } )を返します。order には "color,background," のようにスタイルが宣言された順番が文字列で格納され、prop には優先度を考慮した宣言(プロ
uuAltCSS.js - README
uuAltCSS.js は Webページデザイン を簡単にする JavaScript ライブラリです。 独自のアプローチで、ブラウザ と CSS を切り離し、 古いブラウザでも最新の CSS の仕様に基づいたデザインを可能にします。 また、WebKit系ブラウザでしか利用できないはずの最先端の機能を、様々なブラウザで利用可能にします。 Features - 特徴 CSS3 Selector ready - CSS3 セレクタによる Webページデザインが可能になります。 No! CSS Hack - CSS Hack は一切使えません。 ブラウザ毎のレンダリングの違いはコンディショナルセレクタでスマートに解決できます。 Include cutting-edge technologies - 未来の技術を先取り。豪華なオマケ付きです。 Acid2 Safe - u
display: table, display: table-cell を IE6, IE7 で使えるようにした - latest log
オリジナル uuAltCSS.js を導入 IE6 IE7 Safari4 <!doctype html><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; } .disptbl { display: table; } .disptblcell1 { display: table-cell; } .disptblcell2 { display: table-cell; } .disptblc
古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた(2日目) - latest log
若干修正しました。 コンディショナルセレクタ搭載してみました。 あー、良く考えたらコンディショナルな仕組みは必要なのかも。 レンダリングエンジンでスタイルを適用したり/しなかったり、代替スタイルを用意するって仕組みはあってもいいのかもしれない CSSハックは、ぐっちゃぐちゃなCSSになるのがアレだけど、バンドエイドとしては上手く機能しているもんね。 function autoexec() { var node = _query.tag("html")[0], cn = [node.className, "js"]; _ie && cn.push("ie ie" + _uaver); _mm.opera && cn.push("opera opera" + _uaver); _mm.gecko && cn.push("gecko"); _mm.firefox && cn.push("fx f
JavaScriptでCSSパーサーを書くための情報を収集中(5日目) - latest log
はい。5日目です。今日は「収集したルールを元に、要素にスタイルを適用する」です。 レガシーとかインラインとかは無かったことに 昨日は、レガシースタイルとインラインスタイルを収集して重み付けしましたが、今日はそのへんバッサリと削ってます。 # よくよく考えたら、いらない処理でした。 今日実装した部分 PHASE1〜2 を実装しました。PHASE3 は色々懸案事項があるので実装していません。 PHASE1. uuCSSParser.parse() STEP1. でスタイルを収集する STEP2. スタイルを重み付けでソートする(legacy, inlineは収集せず) PHASE2. uuCSSParser.execute() STEP1. uuCSSParser 専用のスタイルシート(_sheet)を追加する STEP1. spec0 から 999 までの各ルールにIDを付ける STEP2.
CSSセレクタで属性だけじゃなく、スタイルもクエリーできちゃうとすごく便利(かも) - latest log
「CSSセレクタって、CSSのルールで絞り込みはできても、CSS(スタイル)で絞り込みができないんだ…」って思ったことはありませんか? 実験的なテーマになりますが、styleプロパティの値を、CSSセレクタでクエリーできるように構文を拡張してみました。 # 構文や機能に対する改善案をお待ちしています。 スタイルで絞込みを行う場合の基本的な構文は、E { prop operator value } 以下のバリエーションを用意しました。 prop の値は、計算済みの値(currentStyle または getComputedStyle())の値と比較します。 IEで、currentStyle(element).width === "auto" なケースがありますが、そのような場合でも "auto" を px単位の値に自動的に変換したうえで比較します(つまり div{width="auto"}
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
