Question

在我使用Twitter Bootstrap的响应式WordPress主题中，我正在尝试使用类似于CSS Conditional loading的技术，但是依赖于PHP而不是Javascript可以从这么多请求加载中最小化。

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

这是CSS的例子：

    body:after { 
        display: none; 

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

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

非常具体，如果PHP可以检测到content: "A"处于活动状态，它将加载呈现移动内容的custom_mobile_content()挂钩。如果它检测到content: "B"，则会加载custom_desktop_content()挂钩，从而呈现更多桌面内容。

我尝试使用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()代码在页面上呈现，并且该钩子包含一堆标记。如果javascript确定我正在使用A，则所有标记都在源代码的页面上无缘无故。我想找到一种方法来阻止自定义钩子渲染，除非它在B中使用。希望这是有道理的。

Answer 1

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

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

有关如何使用JavaScript进行媒体查询的详细信息，请参阅此article on MDN。

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

1 个答案: