5

私が知っていること

これで、Web ページに印刷スタイルシートを追加して印刷レイアウトをデザインする方法がわかりました。そのようなもの：

<link rel="text/css" href="/css/print.css" media="print" />

しかし、私はそれを望んでいません。

このブログでは、任意の記事または投稿に移動し、ページを印刷プレビューします (Google Chrome を使用)。ページを (PDF 保存モードで) 下に移動すると、余分なテキストが追加されていることがわかります(このストーリーは、もともと Digital Inspiration で公開されました.. ）。このメッセージは、通常は Web ページではなく、印刷 (-preview) した場合にのみ表示されます。

調べてみたこと

ページのページ ソースを表示すると、1 つはメインで、もう 1 つは Web フォント用の2 つのスタイルシートしか添付されていません。JavaScript の場合、メインの JavaScript ファイルが 1 つだけ添付されており、残りは Web フォント、CSS3 MediaQueries、HTML5-Shiv、および印刷関連のものを含んでいるとは思えない広告用です。メインの CSS ファイルと JavaScript ファイルの両方を ( CTRL-F機能を使用して) 検索しようとしたとき、プリンター フレンドリーの検索は何も一致しませんでした。

試していないこと

サイトの所有者にどうやってそれをしたのか聞いていませんし、尋ねるつもりもありません ;)

質問

彼はどうやってそれをしたのですか？ここに JavaScript が関係していますか? またはCSS？[noscript] タグでは、そのタグ内のテキストは、ユーザーが JavaScript を無効にしている場合にのみ表示されます。印刷に同じものはありますか？【onlyonprint】タグみたいなもの？

4

2 に答える 2

5

彼は:after疑似要素を使用しています:

#content:after {
    content: "This story was originally published at Digital Inspiration...";
    font-size: 90%;
    font-style: italic;
    line-height: 1.5em;
    margin: 3em 0;
}

これは彼の印刷スタイルシートに存在します。

于 2012-05-20T03:58:29.467 に答える
0

疑似要素を使用し:afterたり:before、印刷スタイルシートにテキストを追加したり、単に要素をページに追加して印刷スタイルシートにdisplay: none;変更しdisplayたりできblockます。

于 2012-05-20T04:01:54.197 に答える