php - 是否可以使用 PHP 检测 css 伪元素？

Question

在我使用 Twitter Bootstrap 的响应式 WordPress 主题中，我尝试使用类似于 CSS Conditional loading 的技术。但依靠 PHP 而不是 Javascript 可以最大限度地减少如此多的请求加载。

我想做的是使用 PHP 检测 :after 伪元素内容属性，以根据浏览器的媒体查询/视口(viewport)大小查看正在加载的元素。

这是示例 CSS:

    body:after { 
        display: none; 

        /* Default */
        content: "A";
    }

    @media (min-width: 35em) {
        body:after {
            content: "B";
        }
    }

具体来说，如果 PHP 可以检测到 content: "A" 处于事件状态，它将加载呈现移动内容的 custom_mobile_content() Hook 。如果它检测到 content: "B"，它将加载 custom_desktop_content() Hook ，从而呈现更多桌面内容。

我尝试使用 javascript 版本，但它需要我将一大块格式化的 HTML 放入 javascript 变量中，并且在呈现页面时，包含在 javascript 中的页面上有一大块不活动且未使用的文本。 PHP 似乎更合适。

有代码可以很容易地产生这个吗？

---

编辑:看来我必须将 JS 变量或函数传递给 PHP 才能使其工作，我想这相当复杂。

这是我尝试使用的 javascript:

$(function() {
    var currentSize = "A";
    $(window).resize(function() {
        var size = window.getComputedStyle(document.body, ':after').getPropertyValue('content');

        /* Ridiculous thing to deal with inconsistent returning of
        value from query. Some browsers have quotes some don't */
        size = size.replace(/"/g, "");
        size = size.replace(/'/g, "");

        if (size != currentSize) {
            if (size == 'B') {
               $(".content").load('<?php custom_hook(); ?>');
               currentSize = 'B';
            }
        }

    }).resize();

}

我已将上述代码包含在 WordPress 页面本身中，因为它不需要缓存在文件中。它仅在该页面上使用一次。但是，这样做的问题是 custom_hook() 代码呈现在页面上并且该 Hook 包含一堆标记。如果 javascript 确定我使用的是 A，那么所有标记都无缘无故地出现在源代码的页面上。我想找到一种方法来防止自定义 Hook 呈现，除非它在 ​​B 中使用。希望这是有道理的。

Answer 1

目前没有可靠的方法来检测伪元素，即使在 JavaScript 中也是如此。他们没有 CSS 对象模型 (CSSOM)。在这种情况下，PHP 也无法帮助您，因为它仅在服务器端起作用。

对于备用工作流程，您可以使用 JavaScript 找出当前处于事件状态的媒体查询。在此基础上，您可以根据需要加载其他资源。

查看此 article on MDN有关如何使用来自 JavaScript 的媒体查询的详细信息。