特に、そのステップを不要にする奇跡のテクノロジーがあることを考えると、人々がWebページで「印刷」と書かれたリンクやボタンを探す必要があることに驚かされることは決してありません。悲しいことに、それは…10歳ですが、ほとんど誰も使用していません。
印刷に追加の手順を必要とするのはばかげているだけでなく、印刷スタイルシートを使用すると、印刷可能なリンクを使用しない人のためにインクを節約できます。そしてもちろん、PDFに印刷して、紙を無駄にすることなく後で記事を保存するために使用する人はたくさんいます。
印刷スタイルシートとは何ですか？
ほとんどのWebサイトは、プリンタ用に異なる形式の別のページに移動することで印刷機能を実装していますが、これは実際には必要ありません。すべてのブラウザは、として知られている単純なCSSテクノロジーを実装しています スタイルシートを印刷する 、これは、ブラウザがページを印刷するときに非表示にする要素を指定するファイルにすぎません。
なじみのない人にとって、CSSはカスケードスタイルシートを意味し、ブラウザがWebページのHTMLソースコードを実際に画面に表示されるものにフォーマットする方法を知っている方法です。フォント、色、境界線、さらには背景画像まで、すべてをスタイルシートで指定できます。
印刷スタイルシートの追加は、この1行をページのHTMLに接続するのと同じくらい簡単です。コードのmedia = print部分は、印刷時にこのスタイルシートのみを使用するようにブラウザーに指示します。
<link rel =” stylesheet” href =” print.css” type =” text / css” media =” print”>
このファイルは通常、次のようになります。
＃sidebar、＃footer、＃navigation、＃sharinglinks、＃topad、＃comments { display:none }
はい、それは本当にそれと同じくらい簡単です。それで、それはどのように機能しますか？左側の通常のウェブページの例を次に示します。ナビゲーション、ロゴ、広告はすべてIDが関連付けられて明確に表示されています。右側は、印刷スタイルシートが適用された同じページで、これらの要素がすべて非表示になっています。
明らかに、これらの1つを他の上に印刷したいですよね？
印刷スタイルシートの失敗の例
残念ながら、これをまったく実装することを気にしない巨大なWebサイトがたくさんあります。 New YorkTimesから印刷しようとするとどうなるか見てみましょう。
サイトのGawkerネットワークなど、一部のサイトはさらに悪化しています。印刷可能なビューがないだけでなく、印刷してみると、インクスープに似ています。私たちが知る限り、Gawkerサイトから印刷するには、Readabilityなどの別のサービスを使用するか、ページのコンテンツを手動で強調表示する必要があります。これは、新しいデザインではほぼ不可能です。
本当に悲しいです最大規模のサイトの負荷は、この機能の実装に完全に失敗します。
ありがたいことに、いくつかのサイトはそれらを使用しています
これは、適切にフォーマットされた印刷可能なビューの例です。印刷リンクをわざわざ見つける必要はありません。 BBC Newsサイトは、カスタムヘッダーを備えた、印刷用の記事をきちんとフォーマットしています。印刷ビューにはコメントが含まれていますが、それでも十分に機能しています。
同じことをするサイトは他にもたくさんあります。 ArsTechnica そして…私たちのサイトですが、それらすべてのスクリーンショットを表示するのはばかげています。私たちの調査では、それらを適切に実装したサイトはほとんどありません。
最後に…サイトに印刷スタイルシートを実装するのに必要な5分かかります。
