html - CSS 动画在 Github wiki 页面中不起作用

Question

我正尝试在 Github 上为这个元素编写 wiki。我想让 wiki 包含 CSS 动画，但是没有任何动画出现在 wiki 页面上。

当我使用 Visual Studio Code 编辑 Markdown 源代码时，动画效果在 Markdown 预览窗口中看起来很棒。但出于某种原因，它们没有出现在实际的 Github wiki 网页上，这向我暗示这可能是 Github 与 CSS 动画的兼容性的一些更深层次的问题

以下是样式表的相关部分:

canvas {
    width: 300px;
    height: 200px;
    background-size: contain;
    background-repeat: no-repeat;

    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 0.5s;

    animation-iteration-count: infinite;
    animation-duration: 0.5s;
}

.dash {
    -webkit-animation-name: dash;
    -webkit-animation-duration: 2s;
    animation-name: dash;
    animation-duration: 2s;
}

@-webkit-keyframes dash {
    0%      { background: url(dashAnimation/frame1.png); }
    29%     { background: url(dashAnimation/frame1.png); }

    30%     { background: url(dashAnimation/frame2.png); }
    59%     { background: url(dashAnimation/frame2.png); }

    60%     { background: url(dashAnimation/frame3.png); }
    79%     { background: url(dashAnimation/frame3.png); }

    80%     { background: url(dashAnimation/frame4.png); }
    85%     { background: url(dashAnimation/frame5.png); }
    90%     { background: url(dashAnimation/frame6.png); }
    100%    { background: url(dashAnimation/frame7.png); }
}

@keyframes dash {
    0%      { background: url(dashAnimation/frame1.png); }
    29%     { background: url(dashAnimation/frame1.png); }

    30%     { background: url(dashAnimation/frame2.png); }
    59%     { background: url(dashAnimation/frame2.png); }

    60%     { background: url(dashAnimation/frame3.png); }
    79%     { background: url(dashAnimation/frame3.png); }

    80%     { background: url(dashAnimation/frame4.png); }
    85%     { background: url(dashAnimation/frame5.png); }
    90%     { background: url(dashAnimation/frame6.png); }
    100%    { background: url(dashAnimation/frame7.png); }
}

这是应显示在“播放器”维基页面上的实际 Markdown 源代码:

<link href="resources/style.css" rel="stylesheet" type="text/css" />
<canvas class="dash"></canvas>

最后，这是一个 link到实际的维基页面。如您所见，该网页完全没有显示任何内容。但是因为 <canvas>，应该播放一个有趣的小动画。 markdown 源文件中的标签

基本思路是附加不同的.class HTML属性给不同的动画，然后改class="class-name"就行了<canvas> 的属性标签来改变显示的动画。这种策略在 Visual Studio Code 的 Markdown 预览窗口中产生了奇迹，但没有出现在 Github wiki 中

Answer 1

出于安全原因，这永远不会在 GitHub.com 上运行。

Github 的 HTML 清理器正在删除 <link>和 <canvas>标签。如果您使用浏览器的“查看源代码”或“检查”工具，您可以看到包装 <div>完全是空的。从该页面的 HTML 源代码的第 957 行开始，我们发现:

<div id="wiki-body" class="mt-4 flex-auto min-width-0 gollum-markdown-content instapaper_body">
    <div class="markdown-body">


    </div>

</div>

注意内部<div>完全是空的，根本没有内容。为了比较，相同部分的 HTML 源代码为 other page在您的 wiki 中看起来像这样:

<div id="wiki-body" class="mt-4 flex-auto min-width-0 gollum-markdown-content instapaper_body">
    <div class="markdown-body">
      <p>Welcome to the Flight wiki!</p>
<p>Here, you will find a formal description of the mechanics of the game, as well as some ideas about putting those mechanics together into challenging and compelling level designs.</p>

    </div>

</div>

很明显，您的 Markdown 内容的 HTML 输出包含在 <div> 中.所以，我们知道我们正在寻找正确的位置。

这可以在 GitHub 发布他们的标记处理代码时得到验证。对于初学者，自述文件 github/markup将 HTML 清理列为 5 步过程中的第 2 步。以前，链接到 this sanitizer 源代码的步骤.然而，最近 link has been removed .如果他们使用的是新的和不同的东西，大概它比旧的更严格。

无论如何，查看旧 sanitizer 的源代码，很明显 <link> 都不是也不<canvas>标签包含在允许标签的白名单中，因此它们将从文档中完全删除。这是有道理的，因为这两种类型的标签都可以用来在 GitHub 的网站上运行第三方代码，这将是一个严重的安全漏洞。

如果您想发布此类内容，您需要在您可以完全控制的网站上进行。如果您想坚持使用 GitHub，您可能希望将 GitHub Pages 作为一个选项。