自定义 CSS 和 SharePoint 在线

Question

我正在研究支持和不支持的自定义以及可以在sharepoint online中用于品牌推广的自定义CSS方法，但是由于微软令人困惑和模糊的文章，很难得到澄清。

我正在研究如何通过发布站点中的替代CSS应用自定义CSS，并研究了这篇文章：

https://msdn.microsoft.com/en-us/pnp_articles/portal-branding

在这篇文章中，在"一般原则"下有一点，这一点是模棱两可/模糊的，没有详细澄清。

一般原则

在 SharePoint Online 环境中打造门户品牌时，应考虑以下一般原则：

SharePoint Online 服务正在不断改进。预配到服务的更新可能会影响现成页面的 DOM 结构和现成文件(例如母版页(的内容。开发人员必须牢记这一点，不应依赖不受支持的自定义方法(例如，特定元素在页面的 DOM 结构中的位置(。

在上面提到： 开发人员必须牢记这一点，不应该依赖不受支持的自定义方法(例如，特定元素在页面的 DOM 结构中的位置(。 -- 这到底是什么意思？这是否仅适用于在少数 Web 部件页面上通过备用 CSS URL 应用的自定义 CSS，并且 CSS 仅适用于 Web 部件区域和其中的 OOTB Web 部件。

有人可以澄清一下吗？我需要专家意见。上述声明是否仅适用于Office 365 bar DOM，它是OOTB Web部件页面的CSS或DOM？如果是这样，那如何？有人可以提供一个例子吗？我已经编写了自定义CSS并通过备用CSS url应用，它主要更改Web部件区域的外观和其中的OOTB列表视图Web部件(如颜色，宽度，更大的字体等(

Answer 1

我认为这与SharePoint无关，甚至与外部CSS样式表的使用无关。让我们分解一下语言：

"开发商 [...]不应该依赖于页面 DOM 结构中特定元素的 [...] 位置">

我相信Microsoft指的是使用 CSS(甚至 JavaScript(来定位基于 DOM 结构的元素，而不是元素 ID 或类。 考虑p + div(它针对任何立即进入<p>元素的<div>元素(。

在这种情况下，它有效：

p + div {
color: red;
}

<p>Text</p>
<div id="div">More text</div>

在此情况下，它不会：

p + div {
color: red;
}

<p>Text</p>
<a>Link</a>
<div id="div">More text</div>

我所做的只是移动#div元素在DOM中的位置，突然我的选择器不再工作。我相信这就是Microsoft所暗示的危险。

因此，直接定位所需的元素会"更安全"，#选择 ID：

#div {
color: red;
}

<p>Text</p>
<a>Link</a>
<div id="div">More text</div>

显然，在某些情况下，您将没有元素的 ID，尽管您可以依赖类选择器、属性选择器甚至类型选择器。工作具体，适应，旨在尽可能避免上下文。

希望这有帮助！ :)