Acid2 セーフな uuCSSBoost.js で、ヒャッハーな世界へようこそ - latest log
ブラウザのレンダリングの互換性テストといえば、Acid2, Acid3 が有名です。 モダンブラウザだと、Firefox3+, Safari2+, Opera9+, IE8の標準準拠モードが Acid2 をパスします。 さかのぼること 8ヶ月前 こんなことを語ってました。 いまやってること CSSパーサーの実装 IE6, IE7でACID2をクリアさせようとすると、IEが理解できないCSSを自前でパースし、img src="data/image;base64,pngxxx" をデコードする必要があります。 pngデコーダを実装するためには zip のデコーダも実装する必要があるので、そこはあきらめ気味。外部のサイトで動作するPHPにbase64を丸投げして画像を受け取る方法もありだと思ってたり。 ACID2をクリアするのは正直無理だと思ってますが、その過程で得られるものが欲しいのです。 h
HugeDomains.com
Captcha security check sohaya.com is for sale Please prove you're not a robot View Price Processing
ローカルで動作するW3Cのテストスイートを公開します。 - latest log
「全てパスした」とだけ書くと、あまり良くないことが起きそうなので、ローカルで動作するように修正したCSSセレクタのテストスイートを公開します。 W3Cのテストスイート: http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/xhtml/index.html 利用される方へ注意点をいくつか そのままではパスしないテストも含んでいます(::selection や :first-letter など)。内容を確認し「このテストはパスしなくても良い」ことを判断して使ってください(index.html にヒントが埋まっている場合があります)。 ブラウザのバグによりパスできないテストも含んでいます(IE の :empty など)。 状況依存のテストも含んでいます。動的なテスト(#d1b, #d4)は負荷要因により失敗する場合があります。個別にテス
CSSセレクタライブラリのまとめ - ?D of K
すぐにuupaa-selectorに負けたのですが、Quick Phaseを露骨に充実させるのはkQueryの目指す方向じゃないので、もうちょっと探索方法とか見直せるところを探そうかなって思っています。ちなみに今のバージョンは前のバージョンよりも少し遅くなっています。まぁ、汎用性の問題でｗ まぁ、参考がてら、とりあえず、存在するCSSセレクターライブラリをまとめてみました。 base2.DOM 動かし方がよくわからなかった……。 cssQuery 2005年に作られ、サポートブラウザが多い。 dojo DOMAssistant Ext findCSS getElementsBySelector 2003年3月25日に作られた初期のもの。というわけで、これは流石に＾＾； jQuery kQuery 自作。 MochiKit MooTools NWMatcher Peppy Prototype
XBLとuserContent.cssとGreasemonkey - 素人がプログラミングを勉強していたブログ
追記：コメントでbindToUntrustedContent="true"が必要になったと指摘をうけたので追加 2015/3/21 userContent.cssに @-moz-document domain("reader.livedoor.com") { #right_body > .item { -moz-binding: url("ldr.xml#filter") !important; } } と書いて、同じchromeディレクトリに、ldr.xmlという名前で <?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl"> <binding id="filter" bindToUntrustedContent="true"> <implementation><constructor><
IE8での変化点一覧 + 備忘録(その2) - latest log
このエントリは、IE8での変化点一覧 + 備忘録 - latest logの続きです。 IE8モードで、CSS expression が無視される。 バグ回避や、max-width などを実装するため必要不可欠だった expression 構文は廃止される。 ただし、IE7モードとQuirksモードでは下位互換性のため使用可能。 <style> .title { color: expression((new Date()).getHours() % 2 ? "#B8D4FF":"#F08A00"); } </styl> CSS2.1に準拠するために、ベンダー独自プリフィクス("-ms-")が追加された 以下のCSSプロパティには先頭に "-ms-" を追加する必要がある(互換性のためつけなくても動作はするが非推奨)。 -ms-accelerator -ms-background-posit
高速な CSS セレクタエンジン「Sizzle」「Peppy」を試す - WebOS Goodies
最近のほとんどの JavaScript フレームワークには、 CSS セレクタによる DOM エレメントの取得機能が実装されています。複数の要素を柔軟な条件で取得できるので、 DOM ツリーの操作がシンプルに記述でき、とても便利です。しかし、単に CSS セレクタを使いたいだけなのに、フル機能のフレームワークを読み込むのはちょっと抵抗がありますよね。 そんな悩みを解決してくれるのが、本日ご紹介する Sizzle, Peppy という 2 つのライブラリです。これらは他のフレームワークに依存しない独立した CSS セレクタエンジンで、しかも jQuery 等の既存のエンジンより数倍高速に動作します。 unobtrusive な Web ウィジェットの開発や、独自フレームワークの開発に最適ですね。その他にも広範な用途に使えるでしょう。 以下でこれらのライブラリの使い方や動作速度等の検証結果を掲
HTML要素の位置取得 - elm200 の日記(旧はてなダイアリー)
趣旨 ウェブページとして描画された HTML 要素の画面上の位置を取得する。一見簡単そうに見えるこの作業が、現在実装されているブラウザ上ではとてつもなく難しい。そのことを以下で説明していく。 情報ソース この問題に関して調べたところ、最もよく出来ているエントリは、susie-t 氏による offsetTop/offsetLeft/offsetParentの闇 である。とてつもない力作で、実に多くのケースにわたって、包括的に探究が行われている。まるで犯人を追跡する刑事のような執拗さである。氏の自己紹介では「ナマケモノのプログラマ」とか謙遜されているが、これはとてもナマケモノにできる仕事ではない。 基本中の基本として W3C CSS 2.1 の次の章を抑えておきたい。 8 Box model 9 Visual formatting model 10 Visual formatting mode
IE6でposition:fixedがうまくいかないのをfixするhtc - Thousand Years
to-Rの西畑さんの講演を聞いてIE6でpositonfixedが動かないのを思い出した。それでそれをどう回避するかというと以下みたいにwindow.onscrollのイベントが発生したときに毎回毎回位置を計算して描画する。このコードって実は問題で描画がスクロールの速度においつかずちらつきが発生したりする。 このちらつきは僕は苦手というエントリーを以前書いた(http://d.hatena.ne.jp/shogo4405/20060919/1158664960)そこにはstyle.setExpressionを使えばちらつかなくていいとも書いた。 といわけで 今回はHTML Component(.htc)を使って書き直してみる。以下の部分をfixed.htcみたいな名前にして保存する。あとはスタイルシートのbehaviorで読み込みするだけ。 <public:component> <atta
リキッドカラムデザインの実験：ウェブログのIA研究(5) - Liner Note
リキッドカラムデザインの実験：ウェブログのIA研究(5) 書いた人： hash 投稿日： 2007年08月28日（最終更新：5年7ヶ月と15日前） 読者の皆さんの反応 2 被ブックマーク数： 0 上述するとおり、実際導入してみて失敗したのでこのサイトには導入していないのですが、コードと実装について一応書いておきます。きっかけは、前回と同じサイトの以下のテキスト。 閲覧者のウィンドウ幅が充分広くなると、当然左右、あるいは左右どちらかにスペースができる。そのスペースがある一定以上の幅になったとき、そのスペースに、それまで本文の下部にあった（あるいは異なるURIをもつ外部にあった）補足情報などがサイドバーとして登場する。つまり、ウィンドウをたくさん並べて並行閲覧していても、あるいは低解像度のモニタで閲覧しても、本文がキチンと表示されて利用しやすいリソースとなり、一方、高解像度のモニタでウィンドウ
マークアップエンジニアはどこへ向かうべきか（を考えてたらカッとなって LL の資料公開） - IT戦記
はじめに このエントリはマークアップエンジニアに対する批判ではありません。不快な想いをした方がいましたら、申し訳ありません。 きっかけ ライブドア & サイボウズラボの数人でお昼ご飯を食べにいって、いろいろ話しながら考えたことを昼食後に Twitter に書き込みました。 濃い昼飯だた、(X)HTML+CSS しか出来ない人は真剣に第二の何かを探したほうがいいと思た。(X)HTML+CSS ではもうこれ以上すごいと呼ばれる人なんて増えないと思う。 http://twitter.com/amachang/statuses/191256222 「CSS 道」は道が短すぎるんだ。マーケティングの為に長く見せてるけど、実際覚えることは少ない。「デザイン」か「JavaScript」を職業に出来るくらいにしとかないとヤバいと思う。 http://twitter.com/amachang/statuse
WebAppers Simple Javascript Progress Bar with CSS by WebAppers
Sometimes, when we are building websites and web applications, we need a percentage bar / progress bar to show the progress of a specific task. However, it is very difficult to find a working and easy solution without using Flash. Therefore WebAppers has created a simple Javascript based Percentage Bar / Progress Bar which is inspired by Bare Naked App. Bare Naked App taught us how to display Perc
style.cssText の使い処に関する考察 - IT戦記
cssText って知ってますか？ cssText っていいうのは CSSRule オブジェクトとか CSSStyleDeclaration が持っている情報を css ファイルに書く形式の文字列にしてくれる機能です。 乱暴に言ってしまえば、 css 系のオブジェクトが持っている innerHTML みたいなものです。 具体例を見てみましょう。 こんな感じの body があるときに <body style="margin: 1em; padding: 1em; border: 1em">....</body> こんな感じで使えます。 alert(document.body.style.cssText); // 'margin: 1em; padding: 1em; border: 1em' 簡単でしょう？(ボブ略 設定も出来ますよ こんな感じ // さっきの続き document.body
12 のレイアウトを切替可能なテンプレート
1つのテンプレートで 12度おいしい XHTML + CSS テンプレートを公開してみたいと思います。といっても、ごく普通のテンプレートに CSS 切り替え機能を付けただけなんですが、Blog や Webサイトを作られる際のベースとして役立てて頂けたらうれしいです。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら （zip ファイル / 50KB） 8/10 追記 初期に配布したテンプレート内に、結構な量の誤字等がありましたので、現在の最新版を下記からダウンロードしてください。 では使い方などの説明を。 ファイルをダウンロードして解凍すると下記のようなフォルダ構成になっています。 index.html （XHTML テンプレート） css （CSS ファイル格納フォルダ） img （画像ファイル格納フォルダ） js （JavaScript ファイル格納フォルダ） 基本的に
IT戦記 - Safari 3 に実装された、当たっている CSS ルールを全て抽出できる getMatchedCSSRules が凄い
今日は、まだまだ Safari 3 が熱い！ window オブジェクトを走査していたら、またしても面白そうな関数を見つけてしまった。 その名も getMatchedCSSRules ！！！ まずはデモをご覧ください 以下のブックマークレットを任意のサイトで実行すると、コンテンツの下に DOM Inspector のような要素が出現します。 そこで、要素を開いていくと Safari の場合は、どの CSS ルールが当たっているかを見る事ができます。 javascript:(function(){var d=document,s=d.createElement('script');s.className='css-inspector-script';d.body.appendChild(s);s.src='http://amachang.art-code.org/cssInspector.j
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Purchase Intent Data for Enterprise Tech Sales and Marketing - TechTarget
Home
https://www.openvista.jp/archives/note/186/?186/
https://www.openvista.jp/archives/note/185/?185/
?D of K