印刷プレビューで見るとリンクアドレスが表示している・・・CSS

  • このエントリーをはてなブックマークに追加

クライアントから、作成途中のサイトを検証してもらっていたら、印刷プレビューで見た時にURLが表示されているんだけど、これどうにかならないの?と言われた。

URL ?  確かにサイトを印刷プレビューで見たら、URLが表示されている。

こんな感じだ・・・

スクリーンショット 2015-02-01 17.46.42スクリーンショット 2015-02-01 17.47.32

 

調べてみた。【CSS】印刷するとリンクの後ろにURLが勝手に表示される のサイトを参考にさせてもらうと、

@media print{
a[href]:after {
  content:"("attr (href)")";
  }
abbr[title]:after{
  content:"("attr (title)")";
}

という表示があるせいだと。確かにこれでは、URLが出てしまう。
ただ、なぜこの部分が入ってしまったのか、入れた覚えがなくて・・・
DWで検索してみると、DWで生成されたCSS内に下記の記述があった。

 /* ==|== print styles ======
  Print styles.
  Inlined to avoid required
   HTTP connection: h5bp.com/r
  ======================= */

@media print {
 * { background: transparent !important; color: black !important;
 box-shadow:none !important; text-shadow: none !important;
 filter:none !important; -ms-filter: none !important;
 } 

/* Black prints faster: h5bp.com/s */
 a, a:visited { text-decoration: underline; }
 a[href]:after { content: " (" attr(href) ")"; }
 abbr[title]:after { content: " (" attr(title) ")"; }
 .ir a:after, a[href^="javascript:"]:after,
 a[href^="#"]:after { content: ""; } 

/* Don't show links for images, or javascript/internal links */
 pre, blockquote {
 border: 1px solid #999; page-break-inside: avoid; }
 thead { display: table-header-group; }

 /* h5bp.com/t */
 tr, img { page-break-inside: avoid; }
 img { max-width: 100% !important; }
 @page { margin: 0.5cm; }
 p, h2, h3 { orphans: 3; widows: 3; }
 h2, h3 { page-break-after: avoid; }
}

どうやらDreamweaver CCの可変グリッドで初期画面を作成した際にできる [boilerplate.css]にこの記述がある。

結局、クライアントからはブウラウザで表示させる状態と、ほぼ同じような印刷プレビューにしてくれないかという無茶な要望が増えた

ここで、print.cssと、とことん向き合うことになる・・・

  • このエントリーをはてなブックマークに追加

コメントを残す

%d人のブロガーが「いいね」をつけました。