inline是指内联还是页内

一直以来, 我的认知里, inline是指内联, 如inline style是指内联样式, 即 <div style=""></div> 这种

但最近在看Google的开发者文档, 说到必要时可以给首屏元素使用inline style, 根据上下文它应该指的却是”页内样式”, 于是我迷惑了,究竟哪种说法才是正确的呢?

我们来一步步地验证。

w3schools

网页中说:

CSS can be added to HTML elements in 3 ways:

  • Inline - by using the style attribute in HTML elements
  • Internal - by using a “style” element in the “head” section
  • External - by using an external CSS file

以上与符合我们的基础认识. Inline是指元素内的样式

w3c recommendation

再看权威的w3c的文档, 文档里对样式的三种形式是这样说的:

  • Inline style information
  • Header style information: the STYLE element
  • External style sheets

跟w3schools一样, Inline是指元素内的样式

到止为止, 虽然说页内样式是否应该叫 Internal style 还有疑问, 但可以结论的是: External style指的是外链样式, Inline style指的是内联样式, 即元素内style属性里的样式

google developer

那么, 再看google的开发者文档, 关于加速网页的建议

For best performance, you may want to consider inlining the critical CSS directly into the HTML document.

这里是说, 有时为了性能, 可以考虑不使用外链样式, 而使用inline style, 那么, 难道这里的inline style指的是内联样式? 在些先留个疑问, 再看另一篇文档, js阻塞了渲染

里面有这样的话:

Then you can inline the script as follows:

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<script type="text/javascript">
/* contents of a small JavaScript file */
</script>
</head>
<body>
<div>
Hello, world!
</div>
</body>
</html>

这里的inline the script指的是把js放到script标签里, 则同理, 可以得出结论, 上篇文档说的inline style指的是把css放到style标签里

再去看google一些页面, 比如这个经典的输入框, 这个页面里是没有外链样式的, 样式都是写在style标签里的, 说明实践中google也是这样做的

结论

最后的结论是, 一般而言inline style指的是内联样式, 也即<div style=""></div> 这种

但是在google的开发者文档中, inline style指的是页内样式, 即写在style标签里的样式; inline script指的是页内脚本, 即写在script标签内的js代码

参考资料

w3schools
w3c recommendation

Fork me on GitHub