CSS

CSS2KB をちょっと改良 + CSSファイル に Canvas の描画ルーチンを埋め込む

CSSにデータを埋め込む方法を考えてみた(CSS2KB) - latest log の続きCSS2KB とは CSS にちょっとした情報を埋め込むトリックの1つ。 list-style: url(1dot.gif?key=val) から key=val を取り出せるというもの。 CSS2KB の難点は、ダミーファイル(1dot.gif) …

uuAltCSS の改良(auto viewbox)

久しぶりに uuAltCSS.js の話を。 内容的には HTML5 + CSS3 + レイアウトデモ - latest log の続き。uuAltCSS を導入すると古いブラウザでも box-shadow などの CSS3 の機能が利用可能になります。 ただ、uuAltCSS 上で box-shadow を利用する時は、影を描画…

CSSにデータを埋め込む方法を考えてみた(CSS2KB)

ここ最近 DOM + CSS + JavaScript な Widget を作ってます。タブとかスライダーとかです。 Wiget の見栄えを切り替える方法(テーマ)も実装してますが、CSS とテーマ情報を格納するファイルが、別々のファイル(CSS + js)に分かれてしまうので、どうにかしてこ…

静的⇒動的

uuAltCSS.js version 0.1 は、CSS を元に静的なレンダリングを行っていましたが、次の version では JavaScript による動的なスタイルの変更をサポートする予定です。 デモ http://pigs.sourceforge.jp/blog/20090814/20090814.htm 以下の API で CSS の解析…

IE に なんちゃって text-shadow: を実装する試み

IE になんちゃって text-shadow: を実装する目処が付いた。currentStyle.display が "inline" なら "inline-block"に、IE6,IE7で currentStyle.width が "auto" ならstyle.zoom = 1 にするといいらしい。コードはこんな感じ。ShadowフィルタとMotionBlurフィ…

uuAltCSS.js をリリースしました。

uuAltCSS.js READMEブラウザからCSSを引き剥がし、古いブラウザでもCSS3セレクタを使ったWebページデザインが可能になる夢(?)のJavaScriptライブラリの初版リリースです。豪華なオマケもついてます。説明不足な点や、色々と問題もあるとは思いますが精一杯作…

曲線は美しい

ぐあい悪いけど無理してログ書くよ。昨日の日記 ⇒ 日食 と uuAltCSS.js と CSS3 multiple background image - latest log だと、画面幅を縮めると魚の尻尾みたいなレンダリング(↓)してましたが、今日はそのへんを主に改善してました。 魚の尻尾は、border-ra…

日食 と uuAltCSS.js と CSS3 multiple background image

http://uupaa-js-spinoff.googlecode.com/svn/trunk/uuAltCSS.js/demo/box-shadow/solid_version/multibg1.htm色々と制限はありますが、CSS3 の multiple background image を uuAltCSS.js に実装してみました。日食の画像と、モノリス(?)みたいなステージと…

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…

background-image: -webkit-gradient(...) を実装してみた。

Firefox2, Opera9.27, Safari4(リファレンス) 参考 http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20389157,00.htm

角丸(border-radius:)をほぼ全てのブラウザに + ドロップシャドウ(box-shadow:)を一部のブラウザで使えるようにしてみた

今日も uuAltCSS.js をいじってました。 ハイ・チーズ 左から、Firefox2/3/3.5, Opera9.52/10β, Safari4, Google Chrome3, IE8 です。ブラウザ毎の縮小率がバラバラですね。記念写真には写ってませんが、もちろん Opera9.27, IE6, IE7 でも動きます。canvas …

角丸 + ドロップシャドウ(border-radius + box-shadow)を IE に実装してみた

uuAltCSS.js に border-radius: と box-shadow: を実装してみました。IE6, IE7, IE8 で動きます。 http://twitpic.com/9wxi5 http://twitpic.com/9wyq8 これらは、IE8 + Silverlight3 のスクリーンショット。 ガウスフィルタ(影のぼかし)が使えない環境もあ…

display: table, display: table-cell を IE6, IE7 で使えるようにした

オリジナル 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>…

Acid2 セーフな uuCSSBoost.js で、ヒャッハーな世界へようこそ

ブラウザのレンダリングの互換性テストといえば、Acid2, Acid3 が有名です。 モダンブラウザだと、Firefox3+, Safari2+, Opera9+, IE8の標準準拠モードが Acid2 をパスします。 さかのぼること 8ヶ月前 こんなことを語ってました。 いまやってること CSSパー…

古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた(4日目)

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セレクタを使ってWebページをデザインできるようにしてみた(3日目)

静的なデモばかりだとつまらないので、動的なデモを作りました。 お題は、CSS3 の :target 擬似クラスを使ったタブメニューです。 Opera10 で タブメニューA が動かない問題について追記しました。@os0x さん @edvakf さん、ありがとうございます。 タブメニ…

古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた(2日目)

若干修正しました。コンディショナルセレクタ搭載してみました。 あー、良く考えたらコンディショナルな仕組みは必要なのかも。 レンダリングエンジンでスタイルを適用したり/しなかったり、代替スタイルを用意するって仕組みはあってもいいのかもしれない C…

古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた

uuCSSBoost.js は uuAltCSS.js に名前が変更になりましたが、一部の説明が記事を書いた当時の古い名前のままになっています。最新版では、uuCSSBoost.revalidate() は廃止され uuAltCSS() を呼び出すように変更になっています。 コードの解説を追記しました…

JavaScriptでCSSパーサーを書くための情報を収集中(5.5日目)

window.name + フレーム のくだりについてちょっと追記 uuCSSParser.js は uuAltCSS.js の古い呼び名です。昨日の段階で、最新のCSS(CSS3)のセレクタを古いブラウザでも利用可能になりました。 このスクリプトを発展させれば、CSSハックや、ブラウザ毎にCSS…

JavaScriptでCSSパーサーを書くための情報を収集中(5日目)

はい。5日目です。今日は「収集したルールを元に、要素にスタイルを適用する」です。 レガシーとかインラインとかは無かったことに 昨日は、レガシースタイルとインラインスタイルを収集して重み付けしましたが、今日はそのへんバッサリと削ってます。 # よ…

JavaScriptでCSSパーサーを書くための情報を収集中(4日目)

4日目です。今日は、 レガシースタイル( インラインスタイルを収集する。 ⇒ _collectInlineStyle() body要素からターゲット要素までの絶対パスを生成する。⇒ _createPath() といった機能を実装しています。 デモ http://uupaa-js-spinoff.googlecode.com/svn…

JavaScriptでCSSパーサーを書くための情報を収集中(3日目)

三日目です。今日は、重み付け(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日目)

はい、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>

JavaScriptでCSSパーサーを書くための情報を収集中(1日目)

<style type="text/css"> ... </style> CSS ファイルを一本化できればステキ。ブラウザ毎に書き分けるのって本来の姿じゃない。 CSS3 の機能を古いブラウザで使えればもっとステキ。 古いブラウザに時間を掛けたくない。CSS のバッドノウハウなんてノーサンキュー。やりたいことが表現できれ…