can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
ブラウザ動作の理解－リフローとリペイント及びその最適化 | ゆっくりと…
ブラウザ動作の理解の2回目です。今回はレンダリング・ツリーの更新に絡む、リフロー （要素の大きさ、位置などの再計算） とリペイント （描画） に関する解説を、「High Performance Web Pages – 20 new best practices」 の著者 Stoyan Stefanov のブログエントリーから 「Rendering: repaint, reflow/relayout, restyle」 を翻訳してお届けします。 同記事は、前半がリフローとリペイントに関する解説と、表示レスポンスを向上させるためのスタイル変更に関する Tips、後半は dynaTrace AJAX Edition と SpeedTracer を使った IE および Chrome の描画パフォーマンスの計測の解説で構成されてる、長い記事となっています。 今回はその前半部分をご紹介します。 レンダ
ブラウザ動作の理解－レンダリングの負荷を測る | ゆっくりと…
転勤・単身赴任というライフ・イベントがあり、すっかり更新が止まっていましたが、前回 に続き、「Rendering: repaint, reflow/relayout, restyle」から後半のレンダリング負荷を測るツールの使い方をお届けします。記事中の リフロー や リペイント といった用語は、前回記事「用語の定義」 を参照してください。 元記事は初稿が2009年12月でツールのバージョンも古いため、現時点の最新バージョンで記事を再構成しています。また実行環境によって観測結果が異なるため （非力なマシンの方がレンダリング負荷の割合が高いけど、サンプルとしては分かりやすい）、以下に本記事で試した環境を記しておきます。 dynaTrace AJAX Edition バージョン：Version: 2.1.0.603, built on 2010-12-15 ブラウザ、PC：IE8 / Wind
Alex Le’s Blog » Blog Archive » 10K Apart Contest: Cheating by Compressing Your JavaScript and CSS to PNG Images
I submitted my application entry, GithubFinder, to the 10K Apart Contest last night. GithubFinder is basically a Mac-like Finder app to explore a Github repository. A lot of the time when I’m visiting Github, I wanted to quickly browse a repository, but there isn’t a quick way to do so. The 10K Apart contest gave me a reason to build something cool that I also could use. The rules to the contest a
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
普通の検索ボックスを作りました - 最速チュパカブラ研究会
The JUI 2009 Returns で Paul が CSS Transforms をプッシュしていたので、それにつられてデモを一つ作ってみました。 http://gyu.que.jp/giftbox/google/ 見てのとおり、普通の検索ボックスです。 普通にクエリ入力できます 普通に検索結果を見られます 箱の中にまた箱があることもあります。 …という感じで、また3Dネタですが、単なる画像ではない「生きている」HTML要素がグリグリ画面上を動き回れるというのは、何か新しいことができるんじゃないかという可能性を感じます。Canvas のほうは環境マッピングとかやって見た目は派手でしたが、いずれ O3D やら 3D Canvas やらが普及するまでの「つなぎ」です（だから、ライブラリ化したりする気がおきなかったんですが） しかし、IFRAME を変形させながらネストしてもしっかりレン
IEでlabel内の画像をクリック可能にする - os0x.blog
ウノウラボ by Zynga Japan: IEでlabelの子要素に画像を含めるをより汎用的に実装してみます。 まず、修正方針は以下の2点。 HTML側に処理を書かない(onclickは使わない) IEだけで処理されるようにする 素直に書いてみるとこういった感じになります。 /*@cc_on window.attachEvent('onload', function(){ // まず、label内の画像に自分がクリックされたらlabelにクリックを投げる関数を定義する var label_img_enclick = function(label) { var imgs = label.getElementsByTagName('img'); for (var i = 0, l = imgs.length;i < l; ++i) imgs[i].attachEvent('onclick',
大量に同じ画像を表示したいとき - 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セレクタで属性だけじゃなく、スタイルもクエリーできちゃうとすごく便利(かも) - latest log
「CSSセレクタって、CSSのルールで絞り込みはできても、CSS(スタイル)で絞り込みができないんだ…」って思ったことはありませんか? 実験的なテーマになりますが、styleプロパティの値を、CSSセレクタでクエリーできるように構文を拡張してみました。 # 構文や機能に対する改善案をお待ちしています。 スタイルで絞込みを行う場合の基本的な構文は、E { prop operator value } 以下のバリエーションを用意しました。 prop の値は、計算済みの値(currentStyle または getComputedStyle())の値と比較します。 IEで、currentStyle(element).width === "auto" なケースがありますが、そのような場合でも "auto" を px単位の値に自動的に変換したうえで比較します(つまり div{width="auto"}
IE で一時的に要素のスタイルを変更する - IT戦記
いろいろためしたけど、以下が一番楽 // 変更 element.runtimeStyle.cssText = ' width: 100%; height: 100%'; // 戻す element.runtimeStyle.cssText = ''; 特に、戻すときに cssText 以外のプロパティを空にしても、おかしな挙動をするので cssText を使うといい。 しかも IE だけは、 CSSStyleSheet オブジェクトにも cssText が使える // これも IE だけ var sheet = document.createStyleSheet(); sheet.cssText = 'div { hoge: hoge; fuga: fuga } div div { piyo: piyo }'; sheet.cssText = '';
Latest topics > CSS3セレクタとXPathでの表現の対応表 - outsider reflex
Latest topics > CSS3セレクタとXPathでの表現の対応表 宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！ « getElementsByなんちゃら の代わりにXPathを使う Main Mozilla 24 » CSS3セレクタとXPathでの表現の対応表 - Sep 13, 2007 拡張機能勉強会の時に焚き付けられた、Text Shadowのコード（textshadow.js）を教材にして拡張機能開発のノウハウを解説していくシリーズ。 XPathをノードの検索に活用する方法を紹介したけど、肝心のXPathが書けなきゃ意味がないわけで。でもXPathって、ノードセットがどうとかノードテストがどうとか軸がどうとか修飾がどうとか、い
CSSのセレクタをXPathに変換する - nazokingのブログ
Warning! 2008/5/22追記：このエントリは情報が不十分だったり間違いが含まれてたりするので、下記URLのページを参考にするようにしてください↓ http://piro.sakura.ne.jp/latest/blosxom/mozilla/xul/2007-09-13_selector-to-xpath.htm CSS3あたりをXPath1.0あたりに変換する表 CSSXPath .class//*[@class="class"]*1 .class//*[contains(concat(" ",@class," ")," class ")]*2 tag//tag #id//*[@id="id"] tag.class#id//tag[@class="class"][@id="id"] .class.class2//*[contains(concat(" ",@class," "
Jan 18 2007 :: CSS 勉強会で発表しました / nulog, NULL::something : out of the washer
バイト先の社内 CSS 勉強会でちょっと (?) しゃべりました。資料 置いときます。(Safari, Fx, Opera 用) 資料は実際に見せたのと少し変えてあります。本来しゃべるつもりじゃなくてコメントアウトした部分もしゃべってしまったので表示させてあります。 だいぶテンパってまして何分喋ったかよくわかりません。資料とかgdgdですが楽しんでいただけたら幸いです（てけ デザイナさんがいるのにデザインがどうこういうのは笑えよwwwwトロンボーンwwwwって感じですたけど、何も考えないことにしました。 ありがとうございました。 CSS の根本的な部分は発表直前に書きました。ネタがこのへんかぶると思っていたら全くかぶらなかったので急遽入れました。 プレゼンツールは text-hatena.js と MochiKit, KeyTypeListener.js を使ってつくりました。はてグのプレ
hoshikuzu | star_dust の書斎 InternetExplorer6::base要素のstyle属性が全要素に効くのでJavaScriptも記述し放題
下のソースでローカルにHTMLファイルを作りIE6で開く。一行目はおまじないなので省略しない。img要素とかbr要素とかが泣ける。 <!-- saved from url=(0014)about:internet --> <html> <head> <title>nandakore</title> </head> <body> <base id="b00" style="width:expression(setTimeout(this.innerText,0))"> <pre> resizeTo (400, 400); </pre> <img> document.title='areare'; </img> <br> var hoge = 'foo'; </br> <blockquote> window.status = hoge; </blockquote> </body> </html
拡張子に対応したアイコンの取得 - 技術メモ帳
Firefox限定だが、 moz-icon://.拡張子?size=アイコンのサイズ で、拡張子に対応したアイコンを取得できるらしい。 そこでためしに、URLが html, pdf, zip で終わってるリンクに それに対応したアイコン画像を付加する Greasemonkey を作ってみた。 すごいリソース無駄遣いしてるが、これは後でリファクタリングする。 add_mozicon.user.js // ==UserScript== // @name add_mozicon // @include http://* // ==/UserScript== var extensions = [ 'html', 'pdf', 'zip' ]; var items = document.getElementsByTagName("a"); for(var i=0; i<items.length; i
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://edankwan.com/lab/3dit
WebKit JS | Apple Developer Documentation
49885’s gists
?D of K
https://www.uselesspickles.com/triangles/