オタクは、どうしてそんなに多くのWebサイトが印刷スタイルシートを使わないのか？

特にそのステップを不要にする奇跡的な技術があることを考えると、人々がWebページ上の「印刷」と言うリンクまたはボタンを探す必要があることを私が驚かせることは決してありません。それが…10歳であるにもかかわらず、ほとんど誰もそれを使用していません.

印刷に余分な手順が必要なのはばかげているだけでなく、印刷スタイルシートを使用すると、印刷可能リンクを使用しない人にとってはインクの節約になります。そしてもちろん、紙を無駄にすることなく後で印刷するためにprint-to-PDFを使用する人々がたくさんいます.

印刷スタイルシートとは?

ほとんどのWebサイトでは、プリンタ用にフォーマットが異なる別のページに移動することで、印刷機能を実装しています - しかし、これは実際には必要ありません。すべてのブラウザは、印刷スタイルシートと呼ばれる単純なCSSテクノロジを実装しています。これは、ブラウザがページを印刷するときに非表示にする要素を指定するファイルに他なりません。.

なじみのない人にとっては、CSSはCascading Style Sheetsを意味し、ブラウザがWebページのHTMLソースコードを実際に画面に表示されるものにフォーマットする方法を知っているのです。フォント、色、枠線、さらには背景画像さえも、スタイルシートで指定できます。.

印刷スタイルシートを追加するのは、この1行をページのHTMLに差し込むのと同じくらい簡単です。コードのmedia = print部分は、印刷時にのみこのスタイルシートを使用するようブラウザに指示します。.

このファイルは一般に次のようになります。

＃サイドバー、＃フット、＃ナビゲーション、＃共有リンク、＃トップ、＃コメントdisplay：none

はい、それは本当に同じくらい簡単です。それでそれはどのように動作しますか？左側に通常のWebページの例を示します。ナビゲーション、ロゴ、および広告はすべて、IDが関連付けられて明確に表示されています。右側には、印刷スタイルシートが適用された同じページがあります。.

明らかに、あなたはこれらのうちの1つを他のものの上に印刷することを好みます、正しい?

印刷スタイルシートの失敗の例

残念ながら、これを実装するのにまったく煩わされていない巨大なWebサイトがたくさんあります。 New York Timesから印刷しようとするとどうなるかを見てください。

Gawkerのサイトネットワークのように、さらに悪いサイトもあります。印刷可能なビューがないだけでなく、印刷しようとすると、インクスープに似ています。私たちが言える限りでは、読みやすさのような別のサービスを使わずに、あるいはページ上のコンテンツを手動でハイライトすることなしにGawkerのサイトから印刷する方法はありません。.

本当に悲しいです。大規模なサイトの負荷は、この機能の実装を邪魔することに全く失敗しています.

ありがたいことに、いくつかのサイトはそれらを使用します

これは適切にフォーマットされた印刷可能なビューの例です - 印刷リンクを見つけることを煩わす必要はありません。 BBCニュースサイトは記事を印刷用にきれいに整形し、カスタムヘッダを付けて完成させた。彼らは印刷ビューにコメントを含めますが、それはまだよくできた仕事です.

ArsTechnicaや…私たちのサイトのように、同じことをするサイトは他にもたくさんありますが、それらすべてのスクリーンショットを表示するのは愚かです。私たちの研究では、それらを適切に実装したサイトはほとんどない.

まとめるために…あなたのサイトに印刷スタイルシートを実装するのに必要な5分をかけてください!