Gruntプラグイン: selector4096
IE9以下で4096個以上のセレクターがあるとスタイルが反映されなくなるバグのチェックを行うGruntプラグイン、selector4096を作った。CSSプリプロセッサーでネストしつつ@extendするとぽんぽんセレクター増えていくので、最近はまめにチェックするようにしている。自己最多記録は3400くらいで、バグに引っかかったことはまだない。 npmで普通にインストールした後、Gruntfile.jsに以下のように書いて準備完了。 grunt.initConfig({ selector4096: { all: ['src/css/**/*.css'] } }); grunt.loadNpmTasks('grunt-selector4096'); 読み取り専用タスクなので、destとかは必要ない。 $ grunt selector4096:all 実行すると、src/css/以下のすべてのC
CSSのセレクタ数を調べる
気になったので調べたら、いくつかの方法があった。 JavaScripthttps://gist.github.com/psebborn/1885511/そのままコンソールに打ち込んだり、ブックマークレットとかにして調べるのも良さそう。Grunthttps://github.com/xzyfer/ie9-selector-counterhttps://github.com/xzyfer/grunt-ie9-selector-counter試してみたけど、ちょっと出力の仕方が微妙な気がする…PHPhttp://snippet.bevey.com/css/selectorCount.php調べたいCSSをアップロード、もしくはそのURLを入力して送信bashhttp://alias.sh/count-number-selectors-css-filebashrcとかに書いて、$cat style
IE9以下の1ファイルあたりのセレクタ数の限界についてのリンクまとめ
IE9以下の4095問題IE10では解決してるようです。 IE10のIE9モードでは再現出来ません。 IETesterであれば再現出来ます。（テストケースが開けない事があるが） 最初の 31 スタイル タグ以降のスタイル タグがすべて適用されるとは限りません。 最初の 4,095 ルール以降のスタイル ルールはすべて適用されません。 @Import ルールが継続的に使用するページ上の他のスタイル シートのスタイルは、3 階層のシートはすべて無視されますインポートする外部スタイル シートをインポートします。 Microsoft サポート 『Internet Explorer での CSS スタイルを使用して、web ページが正しく表示されません。』より 調べた履歴分割Blesscss_splitter記事やテストhttp://jsfiddle.net/ub_pnr/sZNH4/embedde
Rails3.x開発時にIEで困らないためのメモ
Railsで開発するときにUIの実装時にIE8あたりで困ることないように備忘録としてまとめておく。 IE9まではファイルの読み込み限界値に気をつける。IEだけなぜかCSSが適用されないとき、IEの以下の仕様が原因。 IE9までは 1スタイルシートにルールは4095まで 1スタイルシートに @importは31個まで @importの入れ子は4階層まで ちなみにIE10からは、 1スタイルシートにルールは65534まで 1ドキュメントにスタイルシートは4095個まで @importの入れ子は4095階層まで に変更されてる。 詳しくしらべると、asset pipelineがdebug modeのままだとSprocketsがファイルを連結しないため、大量のファイルを読込むことでIEの仕様に引っかかってました。 回避策として、 /config/environments/development.r
Rails asset pipeline solution for IE 4096 selector/stylesheet limit
The problem Microsoft's IE support documentation explains that in Internet Explorer 6-9: All style tags after the first 31 style tags are not applied. All style rules after the first 4,095 rules are not applied. On pages that uses the @import rule to continously import external style sheets that import other style sheets, style sheets that are more than three levels deep are ignored. There is a lo
Dust-Me Selectors – Get this Extension for 🦊 Firefox (en-US)
Dust-Me Selectors has three main functions: == Scan any HTML page == Get details of all the stylesheets and selectors that were found, organised into used and unused selectors. This will tell you what CSS is used on that single page. == Spider an XML or HTML sitemap == Load and scan every page that's linked from the sitemap, checking every stylesheet against the DOM of every page that includes it.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Getting Around Internet Explorer's 4,096 CSS Rule Limit
Sass for everyday's cooking
CSS Usage – Get this Extension for 🦊 Firefox (en-US)
http://snippet.bevey.com/css/selectorCount.php