打字与印刷样式CSS的本领和要义

2013/08/02 · CSS · 2
评论 ·
CSS

原稿出处: cocss   

不通过其余管理而一直打字与印刷网址上的页面会获取一个无法的意义。

我们WEB开垦职员能够简简单单利用多少个要点来使之到达较为适宜的功用:

  • 运用响应式布局设置打字与印刷的职能
  • 在适合的时候打字与印刷背景图片和颜色
  • 加上海展览中心示的网站或页面链接,以供参谋
  • 采纳css filter 升高打字与印刷的图形效果

扩充打印样式里的超链接

如若向来打字与印刷,超链接将只是一些文字,而不会现出链接的网站,这样以来,是从未意思的。

小编们能够将url链接体未来打印的页面上,大家得以采纳:after伪类来兑现而不影响周边的成布满局:

JavaScript

@media print { article a { font-weight: bolder; text-decoration: none; }
article a[href^=http]:after { content:” <” attr(href) “> “; } }

1
2
3
4
5
6
7
8
9
10
@media print {
   article a {
      font-weight: bolder;
      text-decoration: none;
   }
 
   article a[href^=http]:after {
      content:" <" attr(href) "> ";
   }
}

看上面那是HTML:

JavaScript

<p>You’ve explored this <a href=”/blog”>website</a>;
now it’s time to <a href=” other
Web development documentation</a>.</p>

1
<p>You’ve explored this <a href="/blog">website</a>; now it’s time to <a href="http://www.webplatform.org/">read other Web development documentation</a>.</p>

上边是显得的意义:
图片 1
在那之中贰个主题材料是,打字与印刷页面上的锚文本和图像链接也将扩张。大家得以很好的用CSS法规修复。

JavaScript

article a[href^=”#”]:after { content: “”; }

1
2
3
article a[href^="#"]:after {
   content: "";
}

链接周边图疑似比较费心的,理想的图景是图像左近的链接将有三个class。

JavaScript

$a:after > img { content: “”; }

1
2
3
$a:after > img {
   content: "";
}

CSS选拔器达成将很轻易:

JavaScript

a:not(:local-link):after { content:” <” attr(href) “> “; }

1
2
3
a:not(:local-link):after {
   content:" <" attr(href) "> ";
}

怀有那几个艺术都假定用户将一连通过手工业输入网站。
三个更加好的缓和方案是经过提供相称的QXC90码的数字版本的页面更易于访问。

本着打字与印刷的体裁,而不是显示屏呈现样式

首先,我们要求使用媒体询问(media query)针对打字与印刷样式设置。

JavaScript

@media print { }

1
2
3
@media print {
 
}

重复针对打字与印刷写CSS样式是未曾供给的,大家只供给针对距离设置打字与印刷的样式覆盖掉此前的暗中同意样式。

繁多的浏览器会活动依据打字与印刷改换颜色,以节约打字与印刷原料,但是大家依然尽量的手工业安装一下。

打字与印刷样式CSS的手艺和中央。为了完成最棒作用,使颜色清晰明了,我们起码要求包蕴一下主干的打字与印刷样式。

JavaScript

@media print { body { color: #000; background: #fff; } }

1
@media print { body { color: #000; background: #fff; } }

对此打字与印刷,大大多动静下我们不须求打字与印刷整个页面,只供给打字与印刷一个简洁的能够鼓起供给音信的页面,那么大家将不相干的片段隐藏掉(如:导航条、背景图片)。

打字与印刷样式CSS的手艺和中央。JavaScript

/* Default styles */ h1 { color: #fff; background: url(banner.jpg); }
@media print { h1 { color: #000; background: none; } nav, aside {
display: none; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* Default styles */
 
h1 {
   color: #fff;
   background: url(banner.jpg);
}
 
@media print {
   h1 {
      color: #000;
      background: none;
   }
 
   nav, aside {
      display: none;
   }
}

在编写打字与印刷样式表的时候,你要注意要使用分米或然英寸作为单位而不是显示屏像素单位,实际的单位对打印极其管用。

为了确定保障打字与印刷样式有用,写CSS样式使打字与印刷的内容距离纸张边缘,看起来越来越好,要求利用
@page 那一个语法:

打字与印刷样式CSS的手艺和中央。打字与印刷样式CSS的手艺和中央。JavaScript

打字与印刷样式CSS的手艺和中央。@media print { h1 { color: #000; background: none; } nav, aside {
display: none; } body, article { width: 100%; margin: 0; padding: 0; }
@page { margin: 2cm; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@media print {
   h1 {
      color: #000;
      background: none;
   }
 
   nav, aside {
      display: none;
   }
 
   body, article {
      width: 100%;
      margin: 0;
      padding: 0;
   }
 
   @page {
      margin: 2cm;
   }
}

为了有限支撑不被跨页打字与印刷,如一个题名和剧情在页面尾部被分别:

JavaScript

h2, h3 { page-break-after: avoid; }

1
h2, h3 { page-break-after: avoid; }

另一中状态是要堤防图片过宽而赶过纸张边缘:

JavaScript

img { max-width: 100% !important; }

1
2
3
img {
   max-width: 100% !important;
}

其几个要点是保险 articles 文章标签的内容,在新的一页起先:

JavaScript

article { page-break-before: always; }

1
2
3
article {
   page-break-before: always;
}

最终,还要小心列表和图纸不被分开在不一致的页:

JavaScript

ul, img { page-break-inside: avoid; }

1
2
3
ul, img {
   page-break-inside: avoid;
}

就算这个还不到家,但是那是一个大好的上马

动用CSS3 Filter 提升打字与印刷的身分

浏览器常常会打印出横幅图像,极度是一旦有题指标样子在万籁无声的背景是反动的:

图片 2

打字与印刷样式CSS的手艺和中央。JavaScript

@media print { header { background: none; color: #000; } header img {
filter: url(inverse.svg#negative); -webkit-filter: invert(100%);
filter: invert(100%); } }

1
2
3
4
5
6
7
8
9
10
11
12
@media print {
   header {
      background: none;
      color: #000;
   }
 
   header img {
      filter: url(inverse.svg#negative);
      -webkit-filter: invert(100%);
      filter: invert(100%);
   }
}

CSS3的过滤器做什么样,你所梦想的 – 在头图像反色,产生黑卡其灰,反之亦然 –
但它们只好在Chrome和Safari。 为了弥补Firefox,大家须求一种差别的艺术 –
约等于过滤器作为三个单独的SVG文件写:

JavaScript

<svg xmlns=”; <filter
id=”negative”> <feColorMatrix values=”-1 0 0 0 1 0 -1 0 0 1 0 0 -1
0 1 0 0 0 1 0″ /> </filter> </svg>

1
2
3
4
5
6
7
8
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="negative">
<feColorMatrix values="-1 0 0 0 1
0 -1 0 0 1
0 0 -1 0 1
0 0 0 1 0" />
</filter>
</svg>

从理论上讲,你能够应用二个CSS sprite
之间进行切换差异版本的打字与印刷的标记,不过那将意味着扩大一倍的文件大小大概未有何样平价。 相反,作者建议使用CSS过滤器(和SVG当量,为Firefox)的反转图像在此之前,打字与印刷的页面:
印刷二种样式的标识(即α-蒙面PNG或纯铅灰背景)的结果是:

 图片 3

打字与印刷链接二维码使之更便于访问

如下图:

图片 4

我们要求选取Google 图形API来达成:

  • 咱俩期望谷歌(Google)提供的图形消息( qr ,在大家的例子中);
  • 彰显大小的的Q奇骏印记,以像素为单位;
  • UWranglerL举行编码;
  • 应用的字符编码方式。

一般说来大家会在页面最上部的三个标题成分关联的ULacrosseL:

XHTML

<header> <h1>Lizabeth’s Salon</h1> <h2>Providing
Intellectual Stimulation Online Since 2001</h1> </header>

1
2
3
4
<header>
<h1>Lizabeth’s Salon</h1>
<h2>Providing Intellectual Stimulation Online Since 2001</h1>
</header>

为了创制预期的打字与印刷结果,我们将提供丰裕的距离给H1用来放置二维码,因为那么些二维码要求充实到各种页面,我们须要追加一条CSS准则:

JavaScript

@media print { header h1:after { content:
url();
position: absolute; right: 0; top: 0; } }

1
2
3
4
5
6
7
8
@media print {
   header h1:after {
      content: url(https://chart.googleapis.com/chart?cht=qr&chs=150×150&chl=http://yourdomain.com&choe=UTF-8);
      position: absolute;
      right: 0;
      top: 0;
   }
}

其一艺术的欠缺是使开拓者各样成分都央求贰个API。借使您的主机是PHP,则足以自动生成当下页面包车型客车U福睿斯L:

JavaScript

@media print { h1:after { content:
url(
&chl=;
&choe=UTF-8); position: absolute; right: 0; top: 0; } }

1
2
3
4
5
6
7
8
9
10
@media print {
   h1:after {
      content: url(https://chart.googleapis.com/chart?cht=qr&chs=150×150
&chl=http://<?=$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];?>
&choe=UTF-8);
      position: absolute;
      right: 0;
      top: 0;
   }
}

给wordpress的样式:

JavaScript

@media print { h1:after { content:
url(
&chl=); position:
absolute; right: 0; top: 0; } }

1
2
3
4
5
6
7
8
9
@media print {
   h1:after {
      content: url(https://chart.googleapis.com/chart?cht=qr&chs=150×150
&chl=http://<?phpthe_permalink();?>&choe=UTF-8);
      position: absolute;
      right: 0;
      top: 0;
   }
}

总结

由于打字与印刷不便利追踪,而且贫乏注重。在WEB开垦中也往往被忽略,大大多时候我们只阅读线上的网页,而不是打字与印刷出来。
另一方面固然大家只是临时候需求打字与印刷的事物从网址,那将是杰出的,若是页面设计适合的打字与印刷机,就好像今世的网址适应种种荧屏尺寸和设备。 打字与印刷的自适应设计,可用性和可访问性和Web开荒的要害组成都部队分,同样应考虑的另三个方面。
处理打印自适应设计的另一个下面,大家贯彻越来越多的网址用户的须要-并在同有的时候候,节省墨水,纸张和别的财富,全体那几个都以致关心体贴要的上边可持续发展的设计 。

赞 1 收藏 2
评论

图片 5

背景图片和颜色

对此有个别网址,颜色和背景图依旧极度需求需求遵守的。要是用户是在 webkit
内核浏览器上打字与印刷的话,大家得以强制打字与印刷机打字与印刷荧屏上所见到的颜色(即强制在打字与印刷页面下边世任何的背景图和颜色),一般的话彩色打字与印刷机能够产生这一点,大家要求贰个单独的传播媒介询问:

JavaScript

@media print and (color) { * { -webkit-print-color-adjust: exact;
print-color-adjust: exact; } }

1
2
3
4
5
6
@media print and (color) {
   * {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
   }
}

不满的是,这不可能立时采用于firefox opera 和IE.

相关文章