[JS]Responsiveデザイン用のスタイルシートファイルのロードを最適化するスクリプト -eCSSential
Responsiveデザイン用に用意した複数のスタイルシートファイルのロードを最適化する超軽量（2KB）のスクリプトを紹介します。 eCSSential -GitHub [ad#ad-2] スタイルシートファイルのロードの注意点 eCSSentialとは eCSSentialの使い方 スタイルシートファイルのロードの注意点 スタイルシートファイルのローディングの最適化、あるいは優先順位をつける方法は非常に難しいです。ウェブサイトがクリーンなロードをするためには、ページレイアウトのレンダリングに必要なスタイルシートがドキュメントのhead内に配置されなくてはいけません。 もし、スタイルシートがドキュメントより後ろに配置、あるいはJavaScriptで動的に配置される場合は、ページのレンダリングと共ににスタイルシートのロードが始まってしまうので、ページの表示が遅くなります。 Responsiv
Dynamic PNG shadow position & opacity with jQuery - by Daniel Kurdoghlian | PushingPixels.at
Dynamic PNG shadow position & opacity with jQuery by Daniel Kurdoghlian The Source Code Below you can see the magic interesting part of my script: function moveShadow(){ lightX = parseInt(lightbulb.offset().left) + lightCenterX; lightY = parseInt(lightbulb.offset().top) + lightCenterY; logoX = parseInt(logo.offset().left) + logoCenterX; logoY = parseInt(logo.offset().top) + logoCenterY; distanceX
Javascript cssRulesの差分 (Rev.7,最新版) - とみぞーノート
1. 概要 Javascriptからスタイルシート内のルールを変更する処理のまとめ。スタイルシートそのものを変更したい場合は「Javascript 動的なCSSの適用」を参照。 2. スタイルシート関連のオブジェクト Javascriptからスタイルシートのルールを操る際に関係するオブジェクトを図1にまとめる。FireFoxとIEで若干扱いが異なるので注意が必要。 2.1 stylesheet オブジェクト まずドキュメント内のスタイルシートを扱うstylesheetオブジェクトがある。stylesheetオブジェクトはドキュメントが読み込んでいるCSSファイルや<style>タグで指定したCSS毎に存在する。stylesheetオブジェクトはdocument.styleSheets配列で参照できる。 ドキュメント内のstylesheetオブジェクトは全てdocument.styleShe
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
［柔軟すぎる］IEのCSS解釈で起こるXSS
［柔軟すぎる］IEのCSS解釈で起こるXSS：教科書に載らないWebアプリケーションセキュリティ（3）（1/3 ページ） XSSにCSRFにSQLインジェクションにディレクトリトラバーサル……Webアプリケーションのプログラマが知っておくべき脆弱性はいっぱいあります。そこで本連載では、そのようなメジャーなもの“以外”も掘り下げていきます （編集部） なぜか奥深いIEのXSSの話 皆さんこんにちは、はせがわようすけです。 第1回「［これはひどい］IEの引用符の解釈」と第2回「［無視できない］IEのContent-Type無視」でInternet Explorer(IE)の独自の機能がクロスサイトスクリプティング（XSS：cross-site scripting）を引き起こす可能性があるということについて説明してきました。 第3回でも引き続き、IE特有の機能がXSSを引き起こす例ということで、
...
var style = document.createElement('style'); style.appendChild(document.createTextNode('a img{ border : none }')); とかするとエラーになる。 （styleをdocument.getElementsByTagName('head')[0].appendChildした後でもエラーになる） styleのinnerHTMLもだめ。 （「予期しないメソッドの呼び出し、またはプロパティ アクセスです」とか言われる） var style = document.createTextNode(([ '<style type="text/css">', 'a img { border : none };', '</style>' ]).join('')); document.getElements
なぜCSSは先でJavaScriptは後に読み込ませることが推奨されるのか – cyano
最近よく言われることとして『CSSファイルは先に、JavaScriptは後で読み込むようにしましょう』というのがあります。 私も理由を考えることもなく従ってきたわけですが、今日どうしてそうすることがいい事なのか分かったので、共有したいと思います。 理由はブラウザの挙動にあります。 まず、"ブラウザはダウンロードできたパーツから順次レンダリングしようとする"ということが挙げられます。従って、まずHTMLを読み込み、DOMを構築し、レンダリングしようとします。 そこで問題になるのがCSS。昨今のWebサイトはWebの標準化に伴って、CSSでレイアウトを組むことが多くなってきています。従って、CSSファイルを読み込んで、そのCSSのパースが終わらないことにはユーザーに見てもらう最終的なレイアウトが決定できないと言うことになります。 さて、そこで気になるのが、ブラウザがどのようにファイルを読み込む
jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ
JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){
簡単に色々な種類の角丸ボックスが作れる「DD_roundies」:phpspot開発日誌
DD_roundies: Another (better?) round-corner HTML box concept 簡単に色々な種類の角丸ボックスが作れる「DD_roundies」 角丸にするのに必要なのは次の一行だけ(当然、最初にライブラリを読んでおく必要があります)。 DD_roundies.addRule('.box', 10); 次のように、太い線のものや背景色指定してみたりと、いろんな種類の角丸が作れます。 角丸ライブラリのひとつの選択肢として覚えておくとよさそう。 関連エントリ クールにアニメーションする角丸LightBox「prettyPhoto」 1個の画像でシンプルに角丸を実装するCSSサンプル CSSで角丸テクニック２５ CSSでの角丸ブロック簡単ジェネレーター「CSSROUND」 CSS角丸ボックスジェネレーター「RoundedCornr」
WebKitの３D回転をざっくりまとめてみた - livedoor Blog（ブログ）
MobileWebKitで要素を回転させる系のCSSをざっくりまとめてみました。PC版のsafariではまだ実装されていないみたいです。iPhone/Android向けサイトで使ってみるといいと思います。 CSS Transform/Transitionの基本 -webkit-transformで２次元や３次元の位置や角度、倍率を規定する。-webkit-transitionで-webkit-transformが変化する時のアニメーションを規定する。 流れとしては-webkit-transitionを決めた後に-webkit-transformを変化させる感じ。 javascriptから操作する時は-を省略して二文字目以降を大文字にする。 CSS:-webkit-backface-visibility:hidden; JS:hogehoge.style.webkitBackfa
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ページの描画順序について : ブログカスタマイズ
Rendur 2.4
https://hardwar.org.uk/