第 1 部分：真正控制您的 Web 应用程序

山姆·奥尔伯里( Sam Albury ) 在Unsplash上的照片

编辑：本系列文章不是关于构建 COMMON 网页。

我必须承认，我发现 HTML 和 CSS 太复杂了，尤其是在页面元素的微调方面。规则太多，违反直觉，相互冲突。有时我们需要使用技巧（！）来实现简单的事情。元素的定义可能分布在许多地方：HTML、CSS（内联、嵌入和外部文件）和 JavaScript。在级联系统中很容易迷失方向。

并且存在浏览器和设备问题，因为对于某些浏览器来说工作正常的东西可能对另一个浏览器来说表现不佳，甚至在不同设备上的同一个浏览器上也是如此。

我放弃了处理 HTML 和 CSS；不是因为它很复杂（对我来说）。我放弃了，因为它不起作用（应该做的）。

浏览器/设备特性

有一次我非常沮丧，因为当页面在 iPhone 上加载时（尽管也使用 Chrome），表格中的某些文本占用的空间比我计划的要多，从而破坏了布局。我多次修改和更改 CSS 甚至 HTML 都没有结果。

你不能责怪字体，因为我使用的是特殊字体（不是浏览器标准字体），所以每个设备都应该使用相同的字体。我更深入地使用了自己的字体，使用了不同的名称（也许 iPhone 缓存了不同的版本）。还是好不了。我制作了屏幕截图并开始逐个像素地分析不同的结果，并意识到问题出在文本字符之间的空格上。iPhone 上的空间更大。所以，我很快开始编辑letter-spacing CSS 属性。还是不好！

非 iPhone 设备上的结果

iPhone 上的结果

然后我明白了：不能依靠 HTML 和 CSS 来真正控制网页的呈现（无处不在）。忘记使用复杂的 CSS 来设计精美的表格：将图像扔到网页中！

字体大小配置

您无法控制网页的呈现方式还有另一个重要原因。即使世界上只有一种设备和一种浏览器，由于可访问性问题，浏览器让用户选择最小字体大小，覆盖您对字体大小的定义，非常混乱网页设计。

计划字体大小

用户覆盖的字体大小

翻译

我们可以更进一步，浏览器可以做的另一件事，不仅是破坏你的设计，还破坏应用程序：翻译！我有一个非常糟糕的经历。我不只是在谈论按钮上的压倒性和无意义的文本。我说的是谷歌浏览器显示 12 个菜单按钮，应该只有 6 个。它们都不起作用。让我再说一遍：因为翻译功能在用户的浏览器中处于活动状态，Chrome *发明* 6 个菜单按钮并破坏了我的网络应用程序！！！

标准菜单

浏览器“翻译”菜单

可能发生这种情况是因为页面元素是用 JavaScript 而不是 HTML 创建的，所以浏览器不够聪明，无法弄清楚。

浏览器希望向其用户提供翻译。也许您可以欺骗一个浏览器一段时间不提供翻译，但这并不可靠。浏览器是不同的并且经常变化。

编辑：我再次测试了该应用程序的旧（2017 年）版本。Chrome 顺利翻译了页面。干杯!

编辑 2：React 的人似乎在 2017 年遇到了类似的问题：
Make React 对谷歌翻译中的 DOM 突变具有弹性 #11538

缩放

此外，用户更改的缩放级别可能会破坏设计。

所以现在怎么办？

如果您正在创建一个简单的 (*) 网页，您可以继续使用 HTML 和 CSS，推送图像而不是使用 HTML 标记和 CSS 属性构建表格。因此，您的表格将在任何浏览器、任何设备、任何缩放、任何语言和用户配置的任何字体大小上保持美观和良好。此外，只使用旧的、传统的、通用的东西（小心炒作）。

编辑：关于简单（*）：在这种情况下，“简单”意味着页面可以与浏览器的流畅布局相匹配。抱歉耽误了解释。

但是，如果您正在创建像这个绘图工具这样的复杂应用程序（目前仅适用于 PC），那么我建议您停止使用 HTML 和 CSS，而使用画布和 JavaScript。

.html 文件

为了让自己清楚，上面的代码（.html 文件）包含您需要的所有 HTML 和 CSS。

打印文本

使用其标准函数fillText在画布上打印文本很简单；但结果在视觉上很差。

var canvas = document.createElement("canvas") 
var context = canvas.getContext("2d") 
document.body.appendChild(canvas)context.font = "20px arial" 
context.fillText("xyz", 50, 50)

画布填充文本白底黑字（放大）

直接在网页上打印文本会产生更好的结果。

document.body.style.fontFamily = "arial" 
document.body.style.fontSize = "20px" 
document.write("xyz")

HTML 白底黑字（放大）

上面的两个图像对应于在白色背景上用黑色打印“xyz”产生的真实像素，使用字体Arial和20 像素的字体大小。

当我们使用标准功能在画布上打印时，我们只有灰度像素。

当我们直接在页面上打印文本时，我们有大量不同颜色的像素；虽然在肉眼看来，角色看起来是纯黑色（或深灰色）。此外，它们看起来比以前的打印方式要好得多。