用于修复 CSS 的用户脚本

发布于 2024-12-24 16:44:05 字数 167 浏览 0 评论 0原文

我正在为一页编写用户脚本。它在镀铬下工作。 该页面上的元素与 Firefox 中具有圆角的元素相同。我想修复它,以便这些元素在谷歌浏览器中具有圆角边缘。

我只想在所有链接的 CSS 样式表中将 Firefox 语法替换为 chrome 语法。 最好的方法是什么?

我正在使用jquery。

Im writing Userscript for one page. It is working under chrome.
On that page are same elements that have rounded corners in firefox. I want to fix it so that those element will have rounded edges in google chrome.

I just want to replace Firefox syntax with chrome syntax in all linked CSS style sheets.
What is the best way to do it?

I'm using jquery.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

十年不长 2024-12-31 16:44:05

对于用户脚本来说,这并不是一件小事。

最明智的做法是安装Stylish之类的东西,并用它来覆盖您真正想要的样式。


尝试使用用户脚本执行此操作的困难是:

  1. 您不能使用getCompulatedStyle(),因为这仅返回已解析的适用样式。您不会在 Chrome 中看到“-moz”样式,也不会在 Firefox 中看到“-webkit”样式。

  2. 同样,document.styleSheets也仅显示已解析的样式规则,并过滤掉了特定于外来浏览器的规则。

  3. 您必须解析原始的 CSS 源文本。这是每个

  4. 限制也会妨碍获取 文本,但可以通过使用 GM_xmlhttpRequest() 来减少这种情况。

  5. 解析原始 CSS 后,只有这样您才能覆盖选择的 CSS 规则,如下所示:

    将 Mozilla 更改为 CSS3                        
    ------------------------------------------ -------------------- ------
    -moz-边框-半径-右上边框-右上-半径     
    -moz-边框-半径-右下边框-右下-半径  
    -moz-边框半径-左下边框-左下半径   
    -moz-边框-半径-左上边框-左上-半径      
    -moz-边界半径 边界半径               
    

This is not a trivial thing to do with a userscript.

The smartest thing to do would be to install something like Stylish and use it to override the styles you really want.


The difficulties with trying to do this with a userscript are:

  1. You can't use getComputedStyle(), because this only returns parsed, applicable styles. You won't see "-moz" styles in Chrome nor "-webkit" styles in Firefox.

  2. Likewise, document.styleSheets also only shows parsed style rules with alien-browser-specific rules filtered out.

  3. You would have to parse the raw, CSS source-text. That is the textContent of every <style> and the AJAXed-in text obtained by following the href of every "text/css" <link>.

    This can get tricky and don't even think about using RegEx if you want the solution to be robust at all.

  4. Cross-domain restrictions will also hamper fetching the <link> text, but this can be reduced by using GM_xmlhttpRequest().

  5. Once the raw CSS is parsed, then and only then can you go about overriding select CSS rules like so:

    Change Mozilla                      To CSS3                        
    ------------------------------      --------------------------
    -moz-border-radius-topright         border-top-right-radius     
    -moz-border-radius-bottomright      border-bottom-right-radius  
    -moz-border-radius-bottomleft       border-bottom-left-radius   
    -moz-border-radius-topleft          border-top-left-radius      
    -moz-border-radius                  border-radius               
    
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文