ピクセルからピクセルへの入力:PixelPerfectのクロスブラウザーアナログ

いいえ、モニターはすべて大丈夫です、%username%

多くの場合、一部の顧客は、レイアウト用にサイトのレイアウトを提供し、すべてのブラウザーのマークアップでピクセル単位の正確な精度を必要とします。



この対応を確認するのは簡単です-サイトのスクリーンショットを撮って、たとえばPhotoshopでグラフィックレイアウトと組み合わせる必要があります。



ただし、レイアウトプロセスでのみ、このような手法を使用するのはあまり便利ではありません。



Firefoxのソリューション

最近、FirefoxのPixel Perfectというアドオンに出会いました。

レイアウトの上に半透明のレイアウトが表示されるため、すべての不正確さがすぐに表示されます。



また、Pixel Perfectは誰にとっても素晴らしいものであり、Firefoxのみを対象としています。レイアウトはさまざまなブラウザーで動作するはずです。



皆のためのソリューション

<script>



介してhtmlマークアップを使用してファイルに接続できる小さなスクリプトを作成しました。



また、対応する拡張機能(または組み込みの0機能)があるすべてのブラウザーで、 ユーザースクリプトグリースモンキースクリプト )として使用することもできます。



レイアウトをスクリプトにフィードするには、レイアウトをpng、jpg、またはgif形式で、レイアウトをlayout.png(jpgまたはgif)に変更した後、htmlファイルがあるディレクトリにドロップするだけです。



ホットキー: 必要に応じてレイアウトを配置するには(たとえば、中央に列の形で固定レイアウトを作成する場合)、すべてのアクションがある同じディレクトリにpmarkup.cssファイルを作成できます。

/* : */

#pmOverlay { /* div, image */

text-align: center;

}



#pmOverlayImg {

/* image */

}









アクションで見る

IE6-7、Firefox 2-3でテスト済み。 Opera 9.5、Safari 3



All Articles