6

我正在构建一个基于 jqWidgets 库的单页应用程序(SPA)（它又构建在jQuery UI之上）。

现在我想使用一个构建在另一个框架上的小部件组件（可能是Ext JS或 jQuery UI）。

我担心 CSS 兼容性可能存在的问题；我阅读了很多关于该主题的内容，并发现了所谓的 CSS Scope 属性。不幸的是，我没有看到任何关于这个主题的最新文本，所以我不确定它的状态。

在 SPA 中是否有任何其他可能性来解决这个问题？或解决方法？

4

3 回答 3

1

如果我理解正确并且您担心（本质上也是如此）与 CSS 冲突，那么在库样式表之后包含您自己的自定义样式表是最好的起点；正如@rthor 指出的那样。

然而，这可能无法解决所有问题，纯粹是因为它还取决于 CSS 选择器的特殊性。这里有一篇关于CSS specificity的好文章——它还应该使您能够有效地解决出现的任何 CSS 冲突。

现在范围？这是一个不同的主题，而且更令人困惑 - 纯粹是因为（令人惊讶的惊喜）浏览器实现不同。您可以只为旧版浏览器添加一个 polyfill，但这并不是很好。这似乎是一个纯粹的 HTML5 功能 除非你在谈论 :scope psuedo-selector.. 这是CSS Selectors 4的工作草案

我敢肯定，一些前端奇才能够专门为您提供有关范围的信息，因为我希望我的解决方案还有一些不足之处。您总是可以使用容器元素（喘气..我知道，不理想。）并确保所有样式都专门针对容器元素的子元素。

本质上..

<div id="widgetA" class="scope"> <!-- So this is our 'scope' -->
  <div id="bla bla">.....</div>
</div>

通过确保所有 CSS 选择器都以容器元素开头：

div#widgetA{ /* We essentially get a scoped namespace */ }

然而，随之而来的是诸如非语义标记和过于具体的选择器等不利于性能的问题。但是，它具有旧版支持并且快速且简单……尽管有点 hack。如果你使用像 Sass/Less 这样的东西，你甚至可以快速地将整个库 CSS 文件包装在一个div.widget{ }规则中并编译它；给出范围（尽管有上述缺点）。

或者，从 javascript 视图中 - 如果您针对特定元素（并且仅针对那些元素），我看不到由应用自己的样式的库引起的太多问题 - 因为库不应该真正篡改其他元素。

祝你好运

于 2013-07-31T11:59:28.590 回答
0

我最近不得不在一个页面上使用两个不同框架的小部件（ExtJS 和 jxlib，一个基于 mootools 的遗留小部件库。

我有两个问题：

  1. 第一个与盒子大小有关。ExtJs 使用box-sizing: border-box和 jxLib box-sizing: content-box。我只需要将它添加到 css 中：

    .jxDialog * {
    box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    -ms-box-sizing: content-box !important;
    -webkit-box-sizing: content-box !important;
}

  2. 在 Javascript 方面，我只有一个问题，并得到了这个问题的解决方案。使用 jQuery，我无法判断您是否会遇到问题。

于 2013-10-25T13:34:56.700 回答
0

只需确保在库样式之后添加您自己的样式，然后您就应该很安全了。如果您遇到一些奇怪的错误，只需删除那些特定的 CSS 规则并将它们应用于不同的类。

我相信大多数错误将直接与box-sizing, 定位, margin/padding和 sizing 相关。

干杯!

于 2013-07-31T10:21:55.187 回答