xml地图|网站地图|网站标签 [设为首页] [加入收藏]
响应式设计的5个CSS实用技巧,SO热门问答
分类:web前端

打印样式CSS的技巧和要点

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

原文出处: cocss   

不经过任何处理而直接打印网站上的页面会得到一个不理想的效果。

我们WEB开发人员可以简单采用几个要点来使之达到较为合适的效果:

  • 使用响应式布局设置打印的效果
  • 在合适的时候打印背景图片和颜色
  • 添加显示的网址或页面链接,以供参考
  • 使用css filter 提高打印的图形效果

SO热门问答:可以为半个字符应用CSS样式吗?

2014/06/13 · CSS · CSS

本文由 伯乐在线 - Carman 翻译。未经许可,禁止转载!
英文出处:stackoverflow。欢迎加入翻译组。

响应式设计的5个CSS实用技巧

2012/05/26 · CSS · 1 评论 · CSS

英文原文:5 Useful CSS Tricks for Responsive Design ,翻译:Viven Chen

正如我在教程响应式Web设计三步走当中所讲的,响应式的Web设计其实并不难,但是要让元素在布局切换时能够平滑过渡就比较考验技巧了。现在我分享在编码时常用的五个CSS技巧并举例说明。这些技巧都是使用简单的CSS属性,如min-width、max-width、overflow 和相对属性值,但是这些属性在响应式设计中发挥着很大的作用。

1. 响应式Video (demo)

响应式video的CSS技巧是由tjkdesign.com发现的。我之前的一篇文章介绍过它,你可以在这里阅读。响应式视频会适应它的容器宽度。

CSS

.video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
 
.video iframe,
.video object,
.video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

2. Min & Max Width (demo)

属性设置了元素的最大宽度。其目的是防止元素“越线”。

最大宽度容器

在下面的例子当中,我定义了container的宽度是800px(译注:如果它的父容器不小于800px),但是不超过父容器的90%。

CSS

.container { width: 800px; max-width: 90%; }

1
2
3
4
.container {
    width: 800px;
    max-width: 90%;
}

CSS

<strong>响应式图片</strong>

1
<strong>响应式图片</strong>

使用max-width:100% and height:auto,图片能自适应父容器的宽度。

CSS

img { max-width: 100%; height: auto; }

1
2
3
4
img {
    max-width: 100%;
    height: auto;
}

上述的CSS在IE7和IE9都能起作用,但是IE8不识别。可以使用width:auto来修复。你可以使用针对IE8的条件CSS,或者使用下面的IE hack:

CSS

@media screen { img { width: auto; /* for ie 8 */ } }

1
2
3
4
5
@media screen {
  img {
    width: auto; /* for ie 8 */
  }
}

Min-Width

相反,它设置了元素的最小宽度。在下面的例子里面,min-width用来定义input的宽度,防止input被拉伸的时候变得过小。

图片 1 3. 相对值 (demo) 响应式设计中,使用相对值可以简化CSS和改善布局。下面举例说明。 相对Margin 下面的例子是评论列表,使用相对margin来设置。我用百分比的值而不用绝对的像素值来隔开子列表。下面的截图可以看到,如果用像素来定义,子列表会变得越来越小。 图片 2 相对字体大小 以相对值(如em或%)设置的字体、行高、外边距可以被继承。例如,只要简单地更改父级元素的字体大小,那么它的子元素的字体大小也能随之改变。 图片 3 相对内边距 下面的截图说明了相对的百分比边距比绝对的固定像素边距更好。左边的容器体现了使用像素边距的不平衡。右边的容器则体现了对容器空间的充分利用。 图片 4 4. Overflow:hidden Trick 技巧 (demo) 如我在之前的文章所说的,可以使用overflow属性来清除浮动。这个技巧很实用。应用overflow:hidden,可以对上一个元素清除浮动,保证当前容器的内容能正常显示。 图片 5 5. Word-break (demo) 我之前也说过word-wrap 属性。可以在强制长文本(如长URL链接)换行。

CSS

.break-word { word-wrap: break-word; }

1
2
3
.break-word {
        word-wrap: break-word;
}

图片 6

 

 

赞 5 收藏 1 评论

图片 7

针对打印的样式,而不是屏幕显示样式

首先,我们需要使用媒体查询(media query)针对打印样式设置。

JavaScript

@media print { }

1
2
3
@media print {
 
}

重新针对打印写CSS样式是没有必要的,我们只需要针对差异设置打印的样式覆盖掉之前的默认样式。

大多数的浏览器会自动根据打印更改颜色,以节省打印原料,但是我们还是尽可能的手工设置一下。

为了达到最佳效果,使颜色清晰明了,我们至少需要包含一下基本的打印样式。

JavaScript

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

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

对于打印,大多数情况下我们不需要打印整个页面,只需要打印一个简洁的能够突出需要信息的页面,那么我们将不相关的部分隐藏掉(如:导航条、背景图片)。

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 这个语法:

JavaScript

@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;
}

尽管这些还不完美,不过这是一个良好的开始

Mathew MacLean 提问

我正在寻找:

一种方法为半个字符应用样式(在这种情况下,一半的字母是透明的)。

我目前已经搜索并尝试的(不走运)

  • 渲染一半字符/字母的方法
  • 用CSS或JavaScript渲染字符的一部分
  • 对一个字符的50%应用CSS

以下是我尝试实现的一个例子:

图片 8

这个是否有一个CSS或者JavaScript的解决方法存在,还是我必须采用图片的方法?我不愿意采用图片的方法,因为文本将最终是动态生成的。

 

背景图片和颜色

对于一些网站,颜色和背景图还是非常必要需要遵循的。如果用户是在 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.

来自 Arbel 的最佳回答:(1280+ 赞)

扩展打印样式里的超链接

如果直接打印,超链接将只是一点文字,而不会出现链接的网址,这样来说,是没有意义的。

我们可以将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>

下面是显示的效果:
图片 9
其中一个问题是,打印页面上的锚文本和图像链接也将扩大。我们可以很好的用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) "> ";
}

所有这些方法都假定用户将继续通过手工输入网址。 一个更好的解决方案是通过提供匹配的QR码的数字版本的页面更容易访问。

已做成一个插件,放 Github 上了!

打印链接二维码使之更容易访问

如下图:

图片 10

我们需要使用谷歌 图形API来实现:

  • 我们希望谷歌提供的图表信息( qr ,在我们的例子中);
  • 呈现大小的的QR印记,以像素为单位;
  • URL进行编码;
  • 使用的字符编码形式。

通常我们会在页面顶部的一个标题元素关联的URL:

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=150x150&chl=http://yourdomain.com&choe=UTF-8);
      position: absolute;
      right: 0;
      top: 0;
   }
}

这个方法的缺点是使开发者每个元素都请求一个API。如果你的主机是PHP,则可以自动生成当前页面的URL:

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=150x150
&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=150x150
&chl=http://<?phpthe_permalink();?>&choe=UTF-8);
      position: absolute;
      right: 0;
      top: 0;
   }
}

演示 | 下载 Zip | Half-Style.com (重定向到GitHub)


  • 单个字符的纯css
  • JavaScript用来自动覆盖文本或多字符
  • 保护文本的可读性,盲人或视障人士使用的屏幕阅读器可识别

使用CSS3 Filter 提高打印的质量

浏览器通常会打印出横幅图像,特别是如果有问题的旗帜在黑暗的背景是白色的:

图片 11

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或纯黑色背景)的结果是:

 图片 12

第一部分: 基本解决方案

图片 13

演示: 


这种方法用于任何动态文本或单个字符,并且都是自动适用的。所有你需要做的就是在目标文本上添加一个class,剩下的就解决了。

同时,保留了原文的可访问性,可以被盲人或视障人士使用的屏幕阅读器识别。

单个字符的实现

纯CSS。所有你需要做的就是把.halfStyle class用在每个你想要渲染一半样式字符的元素上。

对于每个包含字符的span元素,你可以添加一个data属性,比如data-content=”X”,并且在伪元素上使用content:attr(data-content);这样,.halfStyle:before class将会是动态的,你不需要为每个实例进行硬编码

任意文本的实现

只需添加textToHalfStyle class到包含文本的元素上。


CSS:

JavaScript

.halfStyle { position:relative; display:inline-block; font-size:80px; /* or any font size will work */ color: black; /* or transparent, any color */ overflow:hidden; white-space: pre; /* to preserve the spaces from collapsing */ } .halfStyle:before { display:block; z-index:1; position:absolute; top:0; left:0; width: 50%; content: attr(data-content); /* dynamic content for the pseudo element */ overflow:hidden; color: #f00; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.halfStyle {
    position:relative;
    display:inline-block;
    font-size:80px; /* or any font size will work */
    color: black; /* or transparent, any color */
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
}
.halfStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    left:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    color: #f00;
}

HTML

JavaScript

<p>Single Characters:</p> <span class="halfStyle" data-content="X">X</span> <span class="halfStyle" data-content="Y">Y</span> <span class="halfStyle" data-content="Z">Z</span> <span class="halfStyle" data-content="A">A</span> <hr/> <p>Automated:</p> <span class="textToHalfStyle">Half-style, please.</span>

1
2
3
4
5
6
7
8
9
10
<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>
 
<hr/>
<p>Automated:</p>
 
<span class="textToHalfStyle">Half-style, please.</span>

它会自动生效,只要添加 textToHalfStyle class到包含文本的元素上。

jQuery 自动模式:

JavaScript

jQuery(function($) { var text, chars, $el, i, output; // Iterate over all class occurences $('.textToHalfStyle').each(function(idx, el) { $el = $(el); text = $el.text(); chars = text.split(''); // Set the screen-reader text $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>'); // Reset output for appending output = ''; // Iterate over all chars in the text for (i = 0; i < chars.length; i++) { // Create a styled element for each character and append to container output += '<span aria-hidden="true" data-content="' + chars[i] + '">' + chars[i] + '</span>'; } // Write to DOM only once $el.append(output); }); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
jQuery(function($) {
    var text, chars, $el, i, output;
 
    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
        $el = $(el);
        text = $el.text();
        chars = text.split('');
 
        // Set the screen-reader text
        $el.html('&lt;span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);"&gt;' + text + '&lt;/span&gt;');
 
        // Reset output for appending
        output = '';
 
        // Iterate over all chars in the text
        for (i = 0; i &lt; chars.length; i++) {
            // Create a styled element for each character and append to container
            output += '&lt;span aria-hidden="true" data-content="' + chars[i] + '"&gt;' + chars[i] + '&lt;/span&gt;';
        }
 
        // Write to DOM only once
        $el.append(output);
    });
});

演示: 


本文由澳门新葡亰手机版发布于web前端,转载请注明出处:响应式设计的5个CSS实用技巧,SO热门问答

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文