[JS]納品前の確認に最適、使用されていないCSSのセレクタを見つけ出すスクリプト -Helium
ウェブサイトの多数のページ全体に渡り、スタイルシートで定義されたセレクタが使用されているかどうかチェックし、使われていないセレクタのレポートを生成するスクリプトを紹介します。 納品する際に、不要なセレクタを除去するのに役立ちますよ。 Helium -GitHub Heliumの準備 Heliumの使用方法 Heliumの準備 HeliumはjQueryなど他のスクリプトを必要せず動作し、URLのリストから全てのページをロードし、解析して、スタイルシートで見つけたセレクタが全ページで使用されているかどうかチェックし、レポートを作成します。 スクリプトは、開発環境で実行してください。 公開中のサイトで実行すると、ユーザーにもHeliumの動作が見えてしまいます。 Step 1: 外部ファイル テストするページの全てに、当スクリプトを外部ファイルとして記述します。 場所は、head内でも</bo
妻のパン屋のWebサイトを四苦HackしてIE対応した話 - give IT a try
はじめに 昨日公開した「第一回 プログラマ向けデザイン勉強会の内容を参考にして妻のパン屋のWebサイトをリニューアルしてみた」の続編を書きます。 今回は僕が苦労したIE6〜8対応のお話です。 実はIE8ユーザーの割合はIE9に次いで第2位！ Mac万歳！Chrome万歳！な僕にとって、IEは「どうせ使うことないし、どうでもいいよね〜」という「心の中でサポート対象外なブラウザ」でした。 しかし、店のWebサイトのアクセス解析を見てみると、実はIE9とIE8が1位、2位を占めていることがわかりました。 よく見ると8位にはIE6がまだしぶとく生き残っています。 この結果を見ると、「うーん、こりゃ完全に無視するわけにはいかんな・・・」と考えざるを得ませんでした。 IE対応を全く考慮していないとこうなる まず最初に、IE対応を全く考慮していないと、いったいどんな表示になるか見てみましょう。 トップペ
【クリスマスだし】Internet Explorerとうまく付き合う方法【IE対応まとめ】【25日目の6】 | DevelopersIO
IE6はﾀﾋぬDeath! こんばんは、クラスメソッドWebマスターの野中です。 今日はクリスマスですね、社内には独り身の負のオーラが満ちてます（既婚者が多いので残っている人は少ない）。 ところで、最近はCSS3もすこしずつ使えるようになってきていて、IE6からIE8の対応を蔑ろにしてしまっている自分がいます。 Web制作に携わってから6年、常に付きまとう古いIEは腐れ縁というか、ある意味青春ですね。 とっても今さら感たっぷりなお題目ですが、ここでIE対応のポイントを自分のために総浚いして青春に決着をつけたいと思います。 過去の経験と情報収集をもとにまとめているので実際にテストしたものではありません。 解決のきっかけ程度になれば良いと思いまとめています。 IEの現状 一般的なブラウザと先進的なブラウザに対する手法と考え方 ドキュメントタイプ：文書型定義 IE向け条件付きコメントで分岐処理
納期間近でIEで崩れてる！ そんな時にも慌てないCSS開発のワークフロー
まだまだIE7、そしてIE6のユーザーをターゲットに考えているウェブサイトは多くあると思います。 そんなIEユーザーをターゲットに含めたウェブサイトを制作する上で、より効率的にCSSの開発が行えるワークフローを紹介します。 Cross-Browser CSS Development Workflow [ad#ad-2] 下記は各ポイントを意訳したものです。 1. リセットかノーマライズか 2. 基本的なレイアウトはIEで 3. 最後の確認もIEで 4. 最後の手段：IEのみスタイル 5. 問題に取り組み続ける 6. おわりに 1. リセットかノーマライズか IE, Firefox, Chrome, Safari, Operaなどのブラウザには各要素ごとのデフォルトのスタイルが用意されており、制作する際にはこれらの相違を見出し、各要素を整える必要があります。 CSSリセットとは CSSリセッ
IEの標準モードと互換モード - CSSめも＠Palm84
Tweet TOPSY Internet Explorer 7.0 に関するカスケード スタイル シートの互換性 Internet Explorer 6 における CSS の拡張 目次 標準準拠モードと後方互換モード 文書型宣言 確認ページ 対策 IE8の「互換表示設定」と「モードスイッチ」 備考 標準準拠モードと後方互換モード 標準準拠モード IEのバージョン6以上。いわゆる（それなり？）標準準拠なので互換モードよりはかなりバグは少ない。でもFirefoxやOperaに比べるとやはりおかしな挙動がある。また、IE7とIE6でも差異が見られる。 IE6では width を指定しないブロックレベル要素で後述の互換モード時と同様な問題が出ることがあります。（但し、width の計算は標準） 後方互換モード IE5など古いバージョンのブラウザにも対応したモード。IEのそれは別名【変態】モードな
IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎
IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎 2011-06-04 Twitterなどを見てると、 「IE6がー！」とか 「IE6,7,8,9、Firefox、webkit系、Operaで同じレイアウトにするの大変」などのツイートをたまに見るので、クロスブラウザでも差が出にくく、効率の良くなるコーディングの基礎を紹介します。 気をつけるHTMLの記述方法 HTMLの記述方法を間違えていると、ブラウザCSSの解釈が変わってきます。 以下のようなことは基本的なことですが大切な事です。 DOCTYPEを書く。 HTMLの先頭にDOCTYPEを入れるようにして下さい。 DOCTYPEがないと、ブラウザ間での誤差が起こりやすい状態になります。 DOCTYPE スイッチについてのまとめと一覧表 (HTML 5 や IE 8 Beta 2 のモードスイッチなどの情報も含
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
