Warning: Invalid argument supplied for foreach() in /home/takemitasaki/route58.org/wp-content/plugins/head-cleaner/head-cleaner.php on line 2895

Warning: Invalid argument supplied for foreach() in /home/takemitasaki/route58.org/wp-content/plugins/head-cleaner/head-cleaner.php on line 2895

Warning: Invalid argument supplied for foreach() in /home/takemitasaki/route58.org/wp-content/plugins/head-cleaner/head-cleaner.php on line 2895

Warning: Invalid argument supplied for foreach() in /home/takemitasaki/route58.org/wp-content/plugins/head-cleaner/head-cleaner.php on line 2895
CSS | 国道58号線をのんびりと行く

アーカイブ

‘CSS’ タグのついている投稿

YSlow:ページ読み込み速度 gzipで高速化

2010 年 5 月 24 日 コメントはありません

こちらの記事もタイトルの
『YSlow:ページ読み込み速度 gzipで高速化』まんまです。

YSlowで、「Compress components with gzip」と出る、アレです。

このブログではサーバーにDreamhost使っていますが、gzipで高速化してみました。
先日書いたExpires Headersの最適化と同じく、.htaccessで制御(自分検証)してYSlowの評価を上げます。
同名のgzipファイルがある場合はgzipを読み込んで、gzipファイルがない場合には通常のファイルを読んでくださいね、というお願い。

ということで、.htaccessに以下を追加します。

# GZIP処理
RewriteEngine On
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} \.(css|js|html?|xml)
RewriteCond %{REQUEST_FILENAME} !\.gz
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule .+ %{REQUEST_URI}.gz
AddEncoding x-gzip .gz

IE6がgzipを読めないのか、圧縮したCSSやJSだけをサーバーに置いておくとIEでの動きが何かおかしいので、gzipと元ファイルの両方をサーバーにアップロードしておきます。
Firefoxなどはgzipを読み込むのでファイルに加筆修正した後はgzip圧縮とアップロードを忘れずに。

40kbのCSSファイルが8kbにまで圧縮され、読み込み速度も余裕で体感できる程速くなりましたよ。

YSlow:ページ読み込み速度 CSS Expressions は古いIE独自の仕様なので削除

2010 年 5 月 22 日 コメントはありません

YSlow対策:ページ読み込み速度 CSS Expressions修正。というか削除ですね、IE独自のこれは。
Wordpressで構築している別のサイト、YSlow最適化の中でAvoid CSS expressionsというのがB評価になっていました。
なんだろうと思って調べてみると、プラグインのCSSにexpressionというプロパティが入っているらしい。
自分では知らないプロパティだったのでまた調べてみる。
結果、expressionを使うとCSSの中でJavascriptが使えるようになるとのことでした。
が、これはInernet Explorer5.0以上のIE独自のCSS。

抜粋: http://www.inter-office.co.jp/……tents/187/

結果としてCSSのプロパティにJavaScriptの評価結果がセットされますが、IE以外のブラウザでは無視されます。なので、ブラウザ間で一環した表現をするために、IEだけをを特別扱いする必要がるような場合に役に立ちます。
問題はexpression 関数が思っている以上にやたらに評価されてしまうということです。ページが再描画されたりリサイズされたりする時だけではなく、スクロールしたり、マウスを動かしたりする場合にさえ評価されてしまいます。expression 関数にカウンタを書いて、どれくらい頻繁に評価されるのか追いかけてみたところ、ページ上をマウスカーソルを動かし続けたら、ちょっとの間に1万回も評価されていました。

しかもマイクロソフトによるとしかもIE8.0以降はサポートしていないとのこと
抜粋: http://msdn.microsoft.com/ja-j……53083.aspx

なぜ CSS expressions のサポートを終了するのですか?
* 標準への準拠のためです
CSS expressions は Internet Explorer の独自実装であって、他の環境との相互運用性を持ちません。
CSS expressions は通常 Internet Explorer のバグを回避するため、もしくは min-width や max-width のようにブラウザーがサポートしていないCSS 2.1 の機能をエミュレートするといった場合に用いられています。Internet Explorer 8 では、これらのバグ修正だけではなく、未実装の機能をネイティブでサポートするべく努力しました。
* パフォーマンスを向上させるためです。
Steve Souder のような Web パフォーマンスの専門家がフロント エンドのパフォーマンスを改善するために CSS expressions を利用しないこと (英語) を推奨しているように、CSS expressions の実行は非常に高い負荷を必要とします。
* ブラウザーの攻撃対象面を減らすためです。
CSS expressions はスクリプトの実行コンテキストを公開してしまうので、スクリプト インジェクションのような攻撃を受ける可能性があります。

はい、こんなことはしていられません。ということでCSS内部から該当の箇所を削除。
以下のような箇所です。

_top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight :document.body.scrollTop+document.body.clientHeight-this.clientHeight);
_left:expression(eval(document.compatMode&&document.compatMode=='CSS1Compat') ? document.documentElement.scrollLeft :document.body.scrollLeft);
}

IE。。。削除した結果、YSlowのCSS Expressionsは以下のようにE評価からA評価になりました。
最適化前


最適化(というか削除)後

最初は総合評価EだったYSlow、今のところBまで来ています。
このブログは未だにE評価か・・・

WordPress ビジュアルエディタのフォント変更 WP2.9.2

2010 年 5 月 13 日 コメントはありません

WordPress 管理ページのビジュアルエディタのフォント変更。
自分ではなかなか使わないビジュアルエディタですが、ビジュアルエディタでの雰囲気とサイトの表示が違うこともあって、関係ないところで改行したり、Pタグ入れてしまったりするようです。じゃ、書いてる時点でイメージ出来たらいいのね、ということに。
Wordpressのwp-includesのCSSを変更。

変更箇所は \wp-includes\js\tinymce\themes\advanced\skins\wp_theme\content.css ファイルのbody.mceContentBody。
Wordpress2.9.2だと67行目あたりだけどbody.mceContentBodyで検索するのが早いかも。

body.mceContentBody {
	font: 13px/19px Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
	padding: 0.6em;
	margin: 0;
}

body.mceContentBody {
	font: 13px/19px 'メイリオ',Meiryo,'MS Pゴシック',Verdana, Arial, Helvetica, sans-serif;
	padding: 0.6em;
	margin: 0;
}

に変更。MACのリクエストはないのでここでは考慮していませんが、いずれ必要になるんだろうね。

web デザイナーのナナメガキ さんのページが参考になりました。
http://loconet.web2.jp/blog/ar……amily.html

しかしInternet Explorerは早くなくなって欲しいなぁ。

外部リンクにだけ「別ウィンドウで開く」よ、というアイコンを自動的に表示するCSS

2010 年 5 月 11 日 コメントはありません

外部リンクにだけ「別ウィンドウで開く」よ、というアイコン 外部リンクを自動的に表示するCSSをやってみる。

a[href^="http"],
a[href^="https"]{background:url(/images/arrow04.gif) no-repeat right center;padding-right:15px;}
a[href^="http://www.route58.org"],
a[href^="http://route58.org"]{padding:inherit;background:transparent;}
* html a.external{ /* IE-expression (attr-selector) */
background:url(/images/arrow04.gif) no-repeat right center;padding-right:15px;}

サンプル http://route58.org
サンプル http://miyoya.com

CSSで背景として出すのではなく、イメージ画像として出す場合のCSSは以下。
素敵なアイコンと以下のCSSソースはCool Web Window さんから頂きました!ありがとうございます!

a[href^="http"]:after,
a[href^="https"]:after {content:url(/images/arrow04.gif);}
a[href^="http://www.route58.org"]:after,
a[href^="http://route58.org"]:after {content:"";}

いろいろなカラーやタイプのアイコンとソースの詳細はCool Web Windowさんのページから。
http://www.coolwebwindow.com/w……000157.php

カテゴリー: CSS タグ: ,

WordPressのサイドバー 三段組のメインを先に持ってくるCSS

2010 年 5 月 11 日 コメントはありません

WordPressのサイドバー 三段組のメインを先に持ってくるCSS
というのをいい加減やってみた。
前々からやらなきゃと思っていたのですがCMSのワードプレスはほとんどのテーマがindex.php(single.php,archive.phpなども)とsidebar.phpが分かれているので所謂メインコンテンツと右メニューを一括りにして、その後に左メニューを配置するという、定番ワザが使えない。
SEOは後回しでとにかくコンテンツ作りってやってたら、もうDIVとか訳分からなくなってしまい。。。
ということで次のWordpress用にメモ。
サイトの全体幅を1000px、メインコンテンツを600px(左右のMarginを10px取るので正味580px)、左右のサイドバーを200pxとしてみる。

HTMLソースは以下のような感じで作成。

<div id="wrap">
	<div id="header">
		ヘッダー。ロゴとかH1とか。
	</div>
		<div id="content">
			<div id="center">
				メイン記事
			</div>
			<div id="leftbar">
				左サイドバー
			</div>
			<div id="rightbar">
				右サイドバー
			</div>
		</div>
	<div id="header">
		フッター。コピーライトとか。
	</div>
</div>

このソースに合うようにCSSを作成していく。

#content {
width: 1000px;
text-align: left;
margin:0px;
padding:0px;
background-color: #CCCCCC;
}

#center {
position:relative;
float: left;
left:200px;
width: 600px;
height:100%;
margin:0px;padding:0px 10px;
background-color: #FFFFFF;
overflow: hidden;
}

#leftbar {
position:relative;
float: left;
left:-800px;
width: 200px;
height:100%;
margin:0px;padding:0px;
background-color: #CCCCCC;
overflow: hidden;
}
#rightbar {
position:relative;
float: left;
left:200px;
width: 600px;
height:100%;
margin:0px;padding:0px 10px;
background-color: #CCCCCC;
overflow: hidden;
}

僕が言ってやる~ ♪

Positions by Seo-Watcher