第15章使用 YUI CSS 工具

戴鸿羽

2023-12-01

本章内容简介：

建立跨浏览器一致性
控制字体
利用网格构建布局

15.1 建立跨浏览器一致性

每种浏览器制造商都构建了自己的布局算法，虽然这些算法非常接近，但并不完全相同。因此，在不同的浏览器上，页面中对象之间的距离甚至字体间距调整都可能稍有不同。实际上，对于浏览器目前的状态，不可能在不同的浏览器上实现完全相同的呈现效果。

YUI 的 CSS 文件试图尽可能地统一呈现引擎， 首先就是使用 reset.css 文件。这个文件将浏览器的默认呈现值去除，从而所有元素的所有字体大小变得相同，所有的外边距和内边距值都设为 0 等。尽管结果不是很完美，但它确实建立了一个统一的基础，在此基础之上可以设置一个默认值。如果没有其他设置，那么它将确保开发人员不会认为默认值理所当然。换言之，如果一个列表项需要项目符号，而且要有 1em 的左内边距，那么就要由开发人员指定该值，而不是假设所有浏览器都是同样的设置。

然而，即使将大小和定位值的默认呈现去除，不同浏览器的输出结果仍然不能做到完全一致。但是，向重置的呈现分配一致的新外边距、内边距和字体大小值确实可以真正地让所有浏览器产生更加类似的呈现效果。注意，分配的字体值实际上来自于 font.css 文件。

尽管 base.css 文件能够很好地校正样式，但是并不真正推荐将其用于生产环境，这是因为大多数生产网站都有特定的布局需要，这就要求使用特定的 CSS 规则。事实上，使用 reset.css 和 font.css 将所有样式重置到一个基准，然后再向页面添加大量的规则才能实现有用的状态。此外，使用网站的特定 CSS 重写 base.css 并没有多大意义。

15.2 控制字体

字体一直是 Web 出版的弱项。浏览器依赖于存放在本地的字体满足呈现需求。换言之，不能将字体文件随着 HTML 、CSS 和 JavaScript 文件一起传送给浏览器。这样，页面的呈现效果就取决于它在什么平台上呈现。更糟糕的是，在处理字体间距调整和其他计算时，不同的浏览器处理同一种字体的方式也不同。

为了缓解这个问题，YUI 提供了一个 font.css 文件，它将不同浏览器之间的字体差异尽可能规范化。 它将默认字体系列设为 Arial，并为常见的字体系列建立降级路径 (如果一种字体不可用，就请求它的已知的等价字体)。同时， 它还将基准字体大小设为 13像素，将行高设为 16 像素。

但是，考虑到 在 CSS 中字体值具有继承关系，设置嵌套百分比将产生非预期的效果。因此，将容器元素的字体大小设置成 93%，然后同样将子元素的字体大小设置成 93% ，那么最终将把子元素的字体大小设置成 93% 的 93%，也就是 11.2 像素。因此，重点是明智地设置字体大小，确保绝对不会嵌套设置，除非是故意这么做。

15.3 利用网格构建布局

布局一直是 Web 开发世界中产生摩擦的来源。关于是否使用表实现布局的争论已经尘埃落定，现在只剩下 CSS 可用于在页面上正确地放置内容。这应该算是好消息，但是浏览器有一个非常不好的传统，就是实现布局的方式彼此不同。如果 Web 开发人员希望只使用一种统一的布局，那么这就会带来问题。

YUI 的 grids.css 文件能够以跨浏览器的、健壮的、灵活的方式来实现页面布局。网格系统提供的基本尺寸与美国互动广告局 (Interactive Advertising Bureau, IAB) 的 Ad Unit Guidelines 的常见广告尺寸一致。换言之，可以选择与 IAB 标准广告尺寸相一致的 "列宽" 或 "单元格宽度" (使用 table 语法)。YUI 团队甚至提供了一个 "网格生成器 (Grid Builder)" 工具 (http://developer.yahoo.com/yui/grids/builder/) ，只需要在窗口部件上单击几次就可以把全部标记整合在一起。

YUI 网格有4种主要的风格，由4个根ID表示这些风格：

div#doc 建立750像素的页面宽度。
div#doc2 建立950像素的页面宽度。
div#doc3 建立 100% 的页面宽度 (注意，100%的页面宽度也会设有10像素的左右外边距，这样页面内容与浏览器边框之间就会有一些空间)。
div#doc4 建立974像素的页面宽度，这是 YUI 2.3.0 版本中的网格的新增风格。

100% 页面宽度布局的两侧均有 10 像素的外边距，这样就可以防止内容渗透到浏览器边框中。但是，可以使用下面的 CSS 规则重置外边距：

#doc {margin: auto}

定制网格布局的宽度是一件简单的事情。因为 YUI 的网格布局基于 em 值，而该值又与基准字体大小相联系，所以将想要的宽度转换成 em 值只需要少量简单的计算即可。宽度是按照 em 单位设置的，因为 em 会随着基准字体大小缩放。换言之，当用户调整字体大小时，整个网格也会随之作出响应。由于基准字体大小设为13像素，因此转换成 em 值时，只要将宽度除以 13 即可，至少对于多有非 IE 浏览器来说是如此。对于 IE 而言，必须将宽度除以 13.3333 。下面的示例演示如何实现一个重写值：

<style>

#custom-doc {

margin: auto; text-align: left; /* leave unchanged */

width: 46.15em; /* non-IE */

*width: 45.00 em; /* IE */

min-width: 600px; /* optional but recommended */

}

</style>

在本节的示例中，我们已经给出了基于网格的文档的基本结构，如下所示：

<html>

<head>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

首先，在文档的 head 标记中包括 grids.css 文件。然后创建带有想要的 doc ID 的 div 元素，在这里就是 "doc" ，这会产生 750 像素宽度的布局。在该元素内部有 3 个 div 元素，ID 分别为 hd、bd 和 ft，分别表示页眉、正文和页脚。

15.3.1 模版

大多数网站都有列式布局，其中的一列表示主要内容，另一列表示次要内容。YUI Grids 有一组围绕这个概念构建的预制模版 (尺寸基于 IAB 指导原则)。最初的两列有两个带有CSS类名 yui-b 的 div 元素， b 代表 "block"(块) 。为了实现源代码顺序无关性 (换言之，主要内容或次要内容首先出现在源代码中，但在布局中并不是如此)，使用 ID 为 yui-main 的 div 元素将主要内容块包装起来。最后，为了触发 6 种预设模版中的一种，要把如下CSS 类名之一分配给根 div 元素。

-------------------------------------------------------------------------------------

模版类 | 预设说明

-------------------------------------------------------------------------------------

yui-t1 | 左列宽度160像素

yui-t2 | 左列宽度180像素

yui-t3 | 左列宽度300像素

yui-t4 | 右列宽度160像素

yui-t5 | 右列宽度180像素

yui-t6 | 右列宽度300像素

-------------------------------------------------------------------------------------

下面是使用预设 yui-t4 实现基本模版布局的代码清单：

</div>

</div>

</div>

</div>

15.3.2 嵌套网格

可以使用 YUI 网格进一步将内容块划分成两部分。网格 (在有限的程度上) 等同于 HTML 表中的行元素。在网格中放置两个单元元素，它们等同于表的单元格。网格通过 CSS 类名 yui-g 来识别，而单元通过 CSS 类名 yui-u 来识别。下面是一个网格中有两个单元的代码：

....

</div>

</div>

.......

实现4个单元的代码如下：

</div>

</div>

</div>

</div>

注意，外层网格 (yui-g) 包含另外两个网格。因为每个网格只有两个单元，所以总共有4个单元。还请注意CSS类名first。每当有两个或更多的 yui-u 或 yui-g 这样的一系列项时，CSS 类名first 将告诉 YUI 特殊对待这一系列中的第一项 (例如调整外边距等)。简而言之，CSS 类名 first 确保元素能够正确地布局。

网格单元 (yui-u) 将可用空间划分成相同的两部分。但在有些情况下，需要让其中一个单元更大一些，或者需要3个单元。这就是特殊网格发挥作用的地方。

------------------------------------------------------------------------------------------------------------------

特殊网格类 | 说明

yui-gb | 1/3-1/3-1/3

yui-gc | 2/3-1/3

yui-gd | 1/3-2/3

yui-ge | 3/4-1/4

yui-gf | 1/4-3/4

------------------------------------------------------------------------------------------------------------------

通过结合使用网格和特殊网格，我们可以构建非常复杂的布局。下面的代码就实现了这样的一个复杂布局。

<html>

<head>

</head>

<body>

<h1>Header</h1>

</div>

<h2>Primary Col</h2>

<div class="yui-u first"><h3>Row 1, Col 1</h3><p>Lorem ipsum dolor sit amet, consectet......</p></div>

<div class="yui-u"><h3>Row 1, Col 2</h3><p>Lorem ipsum dolor sit amet, consectet......</p></div>

</div>

<div class="yui-u first"><h3>Row 1, Col 3</h3><p>Lorem ipsum dolor sit amet, consectet......</p></div>

<div class="yui-u"><h3>Row 1, Col 4</h3><p>Lorem ipsum dolor sit amet, consectet......</p></div>

</div>

<div class="yui-u first"><h3>Row 2, Col 1</h3><p>Lorem ipsum dolor sit amet, consectet......</p></div>

<div class="yui-u"><h3>Row 2, Col 2</h3><p>Lorem ipsum dolor sit amet, consectet......</p></div>

</div>

</div>

</div>

<h2>Secondary Col</h2>

<p>Lorem ipsum dolor sit amet, consectet......</p>

</div>

</div>

<p>Footer</p>

</div>

</div>

</body>

</html>

YUI 3 中的新增功能

除了出于清晰起见而将 CSS 文件夹和文件重命名为以添加 "css" 前缀 (它们现在名为 cssreset、cssfonts 和 cssgrids) 之外，YUI 3 CSS 文件现在也包括上下文。这意味着我们并不会被迫将CSS文件应用于整个页面，而是可以通过库文件的 -content.css 版本只将它们应用于页面的某个部分。这使得改进没有使用 YUI 的现有页面变得简单得多。此外，不再是一个 ID 定义一个网格文档，而是每个页面上可以有多个布局并存，所有基于 ID 的css选择器已经替换成 css 类名。

第15章使用 YUI CSS 工具

15.1 建立跨浏览器一致性

15.2 控制字体

15.3 利用网格构建布局

15.3.1 模版

15.3.2 嵌套网格

YUI 3 中的新增功能

相关阅读

相关文章

相关问答

相关文档

第15章 使用 YUI CSS 工具

15.1 建立跨浏览器一致性

15.2 控制字体

15.3 利用网格构建布局

15.3.1 模版

15.3.2 嵌套网格

YUI 3 中的新增功能

相关阅读

相关文章

相关问答

相关文档

第15章使用 YUI CSS 工具