如何放置 ampcss 框架的 css 成为有效的 AMP 页面？

Question

我正在使用 ampcssframework 但是当我进行放大器测试时，它 return 错误：

The author stylesheet specified in tag 'style amp-custom' is too long - document contains 116909 bytes whereas the limit is 75000 bytes.

注意：我将 css 代码放在 <head> 下，与 index.html

的同一文件

<style amp-custom>

      /*!
      * AMP CSS Framework v4.4.1 (https://www.ampcssframework.com/)
      * Based/build on Bootstrap (https://getbootstrap.com/)
      * Copyright 2018-2020 AMP CSS Framework
      */
        :root{--blue: ##0084b4;--indigo: #6610f2;--purple: #6f42c1;--pink: #e83e8c;--red:

      ....

<style amp-custom>

有什么想法可以放置 ampcssframework 的 css 以便我的页面有效吗？

Answer 1

错误是指您 css 的大小。您必须在放大器限制 (75,000) 内缩短 css 大小：

-仅使用该特定页面中的样式。 - 使用图像的相对路径等。 - 使用 shorthand 属性 - 使用 css 优化器 (https://css.github.io/csso/csso.html) 甜瓜

Answer 2

我认为您在页面上放置的样式不正确。我没有错误。您的代码中可能只是存在语法错误。或者你插入了两次样式。

看一下步骤：

1). 下载存档后。在 CSS 文件夹中，我看到了以下文件：

我不知道为什么里面有这么多文件，或者你需要什么样的文件。我将以这个为例：amp-source.min.css

2). 我将 amp-source.min.css 中的所有样式插入 AMP 页面：

<!--
     This is the minimum valid AMP HTML document. Type away
     here and the AMP Validator will re-check your document on the fly.
-->
<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="self.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  
  <style amp-custom>
  /*!
 * AMP CSS Framework v4.4.1 (https://www.ampcssframework.com/)
 * Based/build on Bootstrap (https://getbootstrap.com/)
 * Copyright 2018-2020 AMP CSS Framework
 */:root{--blue: #0084b4;--indigo: #6610f2;}
  </style>
  
  </head>
<body>Hello, AMP world.</body>
</html>

AMP验证器没有错误，自己检查一下：https://validator.ampproject.org/

在 Codepen 上查看完整版本：https://codepen.io/alexandr-kazakov/pen/QWNKLLg

注意无论如何，我不建议你使用这个CSS框架，它对AMP来说太重了。 40-50KB 仅用于框架，太多了。

如何放置 ampcss 框架的 css 成为有效的 AMP 页面？

How to place css of ampcssframework to become valid AMP Page?

html

css

validation

amp-html