在线自定义 CSS 和 Sharepoint

Question

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

我正在研究通过替代 CSS 在发布站点中应用自定义 CSS 并查看这篇文章：

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

本文在"General Principles"下有一点，这一点是ambiguous/vague，没有详细说明。

一般原则

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

SharePoint Online 服务在不断改进。为服务提供的更新可能会影响 DOM 开箱即用页面的结构，以及开箱即用文件（例如母版页）的内容。开发人员必须牢记这一点，不应依赖不受支持的自定义方法（例如，页面 DOM 结构中特定元素的位置）。

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

有人可以澄清一下吗？我需要专家意见。以上声明是否仅适用于 Office 365 栏 DOM 并且它是 CSS 或 DOM 的 OOTB 网页部件页面？如果是这样又如何？有人可以举个例子吗？我已经编写了自定义 CSS 并通过备用 CSS url 进行了应用，它主要更改了 Web 部件区域的外观和其中的 OOTB 列表视图 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 或 class.考虑 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 中的位置，突然间我的选择器不再起作用了。我相信这就是微软暗示的危险。

因此，'safer' 直接定位所需的元素，# 到select the ID:

#div {
  color: red;
}

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

很明显，有些情况下您没有元素的 ID，但您可以依赖 class selectors, attribute selectors, or even type selectors. Work with specificity, 并适应, 旨在尽可能避免上下文。

希望对您有所帮助！ :)

在线自定义 CSS 和 Sharepoint

Custom CSS and Sharepoint online

html

css

dom

office365

sharepoint-online