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
JavaScriptでCSSパーサーを書くための情報を収集中(1日目) - latest log
<style type="text/css"> ... </style> CSS ファイルを一本化できればステキ。ブラウザ毎に書き分けるのって本来の姿じゃない。 CSS3 の機能を古いブラウザで使えればもっとステキ。 古いブラウザに時間を掛けたくない。CSS のバッドノウハウなんてノーサンキュー。やりたいことが表現できればそれでいい。 ブラウザに CSS の解釈を任せなきゃいいんじゃないか? まずは、JavaScript で CSSパーサーを書くための情報収集からです。 わかってること ロード済みのスタイルシートは、document.styleSheets に擬似配列として格納されています。長さは document.styleSheets.length から取得できます。 スタイルシートの各ルールは、cssRules (IE なら rules)に格納されています。 document.sty
Kanasan.JS JavaScript 第 5 版読書会 #7: Days on the Moon
Kanasan.JS JavaScript 第 5 版読書会 #7 に行ってきました (当日のチャットログ)。範囲は前回に引き続き CSS の操作、そしてイベント周りと、一般に「JavaScript」といったとき話題になりやすい部分です。参加者のブログ記事は「JavaScriptでCSSとイベントを扱う from Kanasan.JS | Blog.37to.net」のほか読書会のページからたどれます。 display: inline-block; サイ本では解説されていませんが、CSS の display プロパティの値 inline-block に関して話が盛り上がりました。inline-block 及びそれがどのようなレイアウトに使えるかについては以下で解説されています。 書籍などに紹介されていない display : inline-block について (ヨモツネット) inlin
JavaScriptでCSSとイベントを扱う from Kanasan.JS | Blog.37to.net
最終更新日 Sun, 19 Apr 2009 20:27:25 +0900 最後のコメント Mon, 14 Jul 2014 08:14:00 +0900 ブックマーク 先日開催された、Kanasan.JS JavaScript第五版読書会#7のレポートです。 今回はCSSとイベント処理の入門的内容でした。 ご参加頂いた皆様、ありがとうございました。 JavaScriptからCSSを扱う それ程難しくはないので、簡単にまとめておきます。 はまりがちな事 Element.style.colorなど、Element.style.〜のスタイルオブジェクトで操作出来るのは、 インライン指定されたスタイルのみなので気を付ける必要があります。 僕も最初の頃は知らずによく間違えていたのですが、これを知っていると無駄に時間を使わなくて済むと思います。 <style> #foo { background-c
大量に同じ画像を表示したいとき - os0x.blog
画像周りの速度メモ - #生存戦略 、それは - subtechの件。 最終手段として、CSSを使う。 .hatenastar{ display:inline-block; width:11px; height:10px; background:url('http://s.hatena.ne.jp/images/star.gif'); } (function(){ var now = new Date*1; for (var i = 0; i < count; i++) { var span = document.createElement('span'); span.className = 'hatenastar'; container.appendChild(span); } document.title += ' css:' + ((new Date*1) - now); })();
主要ブラウザで動くCSSを追加する関数 - os0x.blog
GM_addStyleの実装と最適化 - 0xFFに関連して、「IEでGM_addStyleみたいな関数ってどう書けばいいんだろ」とつぶやいたら、fubさんにcreateStyleSheetってのを教えてもらいました。で、調べてみたらcreateStyleSheetとcssTextで割と簡単に書けるみたいなので、クロスブラウザな関数にまとめてみました。 addCSS.js function addCSS (css){ if (document.createStyleSheet) { // for IE var sheet = document.createStyleSheet(); sheet.cssText = css; return sheet; } else { var sheet = document.createElement('style'); sheet.type = 'te
CSSを追加する関数 - 素人がプログラミングを勉強していたブログ
の39番目とGM_addStyleの実装と最適化 - 0xFFについて。 まず、style要素を使う方法。 function addStyle(css) { var style = document.getElementsByTagName('style').item(0); if (!style) { style = document.createElement('style'); style.type = 'text/css'; (document.getElementsByTagName('head').item(0) || document.documentElement).appendChild(style); } style.appendChild(document.createTextNode(css + '\n')); } 元からあるstyle要素を利用する方法。コメント欄
GM_addStyleの実装と最適化 - os0x.blog
GreasemonkeyのGM_addStyle関数は呼び出すたびにhead内にstyle要素を作る。 Greasemonkey 0.8.20080609.0のソースより。 function GM_addStyle(doc, css) { var head, style; head = doc.getElementsByTagName("head")[0]; if (!head) { return; } style = doc.createElement("style"); style.type = "text/css"; style.innerHTML = css; head.appendChild(style); } これは、はっきり言って効率が悪い。 補足:CSSをミスったときの影響が自分だけに留まるというメリットはある。 補足2:効率悪いと書いたけど、体感できるような話ではないと思
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"}
Selectors API以降のセレクタ実装 - jQueryとSizzleとuupaa-selectorとkQuery - ?D of K
低速復活中なので、kQueryを細々と書き直しました。 http://kquery.if.land.to/slickspeed2/system/kquery.js URLからもわかるように大好きなSlickSpeedも置いておきました。 http://kquery.if.land.to/slickspeed2/ http://kquery.if.land.to/slickspeed2/slickspeed2.zip 広告入るスペースなので、zipに固めたものも置いておきます。 基本的に速度向上ではなくて、内部的なリファクタリングがメインなので、劇的に速度が向上したりはしていません。まぁ、少しは向上していますがｗ 今回の改造は、 親ノードを配列で複数渡せるように。 大抵のセレクタ実装だと一つの親しか渡せないけど、find関数を実装することを考えると複数取れた方が都合がいいよね？ ID、クラス
ダンジョン生成 by JavaScript+CSS+HTML(version:0.1) - Junkieta.net
Wizardry風のワイヤーフレームダンジョンをJavaScript + CSS + HTMLで作ってみた。現状では、ランダム迷路生成と移動処理のみ実装。 ワイヤーフレーム風ダンジョン Windows XP / Mozilla Firefox3, Internet Explorer7.0, Safari3.1にて動作確認。Opera9.6だとスクリプトは正常に動作するが、表示がバグる。原因調査はあきらめた。教えてエロい人。 ソース ダンジョン生成のJavaScript ダンジョン用CSS 備考 矢印キーは、ダンジョン歩行用に使うため、デフォルトイベント(スクロールとか)をカット中。 文字サイズを変更すれば、ダンジョンの大きさも変動する(IEは表示おかしい)。 CSSわかる人なら、border-colorの調節で壁・床・天井の色とか簡単に変えられる。 更新履歴 文書の描画とダンジョンの描画を
IE8での変化点一覧 + 備忘録 - latest log
IE8 ではかなりの数のメソッドやプロパティが増えているようです。書き残します。 element.getAttribute について追記しました。 window.toStaticHTML window.toStaticHTML は、XDomainRequest や postMessage で受け取った文字列(HTML)をサニタイズ(消毒)するメソッド。 XHRやJsonで受け取った文字列のサニタイズにもシーンを選べば使えるのだろうか。 onclick等のイベントハンドラ系を潰す。 <div onclick="alert('hoge')">hoge</div> ↓ <div>hoge</div> scriptタグを潰す。 <script>alert("hoge")</script> ↓ 無かったことになる CSS::expressionを潰す img { expression(uuClass
iPhone向けサイトを考える : リッチっぽいiPhone向けサイトを作るためのCSS3アニメーション - livedoor Blog（ブログ）
画像だけを表示するRSSリーダーを作る時にCSS3のアニメーションを使ったので、軽くまとめてみます。間違い等あれば指摘していただけるとありがたいです。全体的に[要出典]です。 アニメーション自体がものすごく軽いのはsafariのCSS3で使える-webkit-transformと-webkit-transitionを使っているためです。 -webkit-transformは変化後のスタイルを規定し、-webkit-transitionは動きを規定します。 -webkit-transform:translate -webkit-transform:translate(0,0)；//位置 -webkit-transform:rotate(0deg)；//角度 -webkit-transform:scale(1);//倍率 がデフォルトの値です。本来の位置からどれだけずれているかを
こっそりと特定の要素をマーキングし取得する - latest log
CSS + JavaScript(uupaa.jsも)を使い、ユーザに悟られないように要素をマーキングし、要素を特定する方法です。 昨日までの一連のエントリから、ユーザに知られずに要素をマーキングする妥当な方法がやっと見つかりました。 IE なら ruby-align: center を、その他のブラウザなら outline: 0 solid black を使う。 outline: は各ブラウザともバグだらけで、まだまだ現役で使えないプロパティだから、こういう用途にはもってこい outline: 0px solid black を指定すると実際は描画されない(描画されているかもしれないが見えない) IE は outline: に対応していないため、ruby-align で代用する。ruby-align は IE 独自機能なので安心して使える。 できた。 以下が、CSS :hover と一致
本文幅が固定されているデザインテーマで、大きな画像が貼り付けられた場合はサイズを自動縮小するようになりました - はてなダイアリー日記
かんたんデザインで設定可能な一部のデザインテーマで、ダイアリーの記事中に貼り付けたフォトライフの画像がテーマで指定された本文幅よりも大きい場合に、自動的にサイズを縮小して画像全体が表示されるように変更を行いました。 （変更前） （変更後） これまで、テーマによっては本文幅が固定されているため、指定されている本文幅よりも大きいサイズの画像を貼り付けた場合に、画像の全体が表示されなかったり、レイアウトが崩れてしまうといった問題がございました。 今回の変更により、サイズの大きな画像をそのまま貼り付けても、自動的に表示サイズが適切に調整され、クリックした先でオリジナルサイズの画像を見ることができるようになりました。なおこの変更は、本文幅で固定サイズが指定されているテーマのみとなっております。 テーマ作者様向け情報 その他のテーマ、公開デザインでも、以下のように記事部分の幅にあわせてmax-widt
スタイルシートスイッチstyleswitchソース-WEBデザイン BLOG
javascriptを使ってのスタイルシートスイッチソース元を紹介。 スタイルシートの切り替え・文字サイズの切り替え・ブラウザの表示幅を検知して表示を変更するものなどいろんなものがあります。スクリプトの参考に。ついでに個人的にスタイルシートの切り替えを導入しているサイトを少し紹介。
Parallax Background with Javascript and CSS
« back to inner.geek Parallax Backgrounds a multi–layered javascript experiment This work is licensed under a Creative Commons Attribution 3.0 License. First of all, try scrolling up and down thing page. Use your scroll wheel, use the scroll bar, use the arrow keys, page up, page down, space bar. Note how the text scrolls normally, but the green background scrolls slowly, and how the clouds scroll
JavaScript/HTML5, iPhone/Android, ハイビジョン映像, 自動化関連：[OpenSpace]
Web関連およびアプリケーション、映像関係、静止画素材、自動処理、4K/8K/ハイビジョン素材関連などを扱っています。 誤字脱字等、お気づきの点がありましたら、お気軽にメールをください。 この目次にないアプリケーション等の使い方などに関してはその他のリファレンス／アプリケーション...のページを参照してください。
IEで固定座標を指定する方法
さて、アナウンスしていたようにIEでposition: fixed;を実現する手法について簡単にまとめておきます。まぁこのテクニックもIE7が出るまでのつなぎです。やり方は大まかには2通りあって、純粋にCSS(スタイルシート)のみで指定する方法とJavaScript(正確にはMS独自のDynamic property ダイナミックプロパティーと呼ばれるもの)を使うやり方です。 まず、1.CSSのみの方法から １．基本的な考え方は、HTML(あるいはBODY)タグのスクロールバーを非表示にして、かわりにDIVタグ(HTMLならBODYタグ)のスクロールバーを表示させる方法です。具体的な記述は以下のようになります。 html { overflow: hidden; } body { height: 100%; overflow: auto; } 次に、固定表示したいDIVタグ(タグは何でも良い
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
uuAltCSS.js をリリースしました。 - latest log
