html - 在线自定义 CSS 和 Sharepoint

Question

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

我正在研究通过替代 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 网页部件页面的 CSS 或 DOM？如果是这样又如何？有人可以举个例子吗？我编写了自定义 CSS 并通过备用 CSS url 进行了应用，它主要更改了 web 部件区域的外观和其中的 OOTB ListView web 部件(如颜色、宽度、更大的字体等)

Answer 1

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

"Developers [...] should not rely on [...] position of specific element in DOM structure of the page"

我相信 Microsoft 指的是使用 CSS(甚至 JavaScript)来根据 DOM 结构定位元素，而不是元素 ID 或类。考虑 p + div (它以任何 <div> 元素为目标，该元素紧接着一个 <p> 元素)。

在这种情况下，它有效:

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 所暗示的危险。

因此，使用# 来直接 定位所需的元素要“安全”得多。到 select the ID :

#div {
  color: red;
}

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

很明显，有些情况下您不会拥有元素的 ID，但您可以依赖 class selectors , attribute selectors ，甚至 type selectors 。与 一起工作 specificity ，并适应，旨在尽可能避免上下文。

希望对您有所帮助! :)