PHP를 사용하여 CSS 유사 요소를 감지 할 수 있습니까?

Question

트위터 부트 스트랩을 사용하는 필자의 반응 형 WordPress 테마에서는 CSS Conditional loading과 비슷한 기술을 사용하려고 노력 중이지만 Javascript 대신 PHP를 사용하므로 많은로드가 최소화됩니다.

내가하고 싶은 것은 :after 유사 요소 콘텐츠 속성을 검색하여 브라우저의 미디어 쿼리/뷰포트 크기에 따라 어떤 요소가로드되는지 확인하는 것입니다. content: "A" PHP가 활성 상태인지 감지 할 수 있다면

body:after { 
     display: none; 

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

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

는 매우 구체적으로는 모바일 콘텐츠를 렌더링 custom_mobile_content() 후크로드 :

여기 CSS 예이다. content: "B"을 감지하면 더 많은 데스크톱 콘텐츠를 렌더링하는 custom_desktop_content() 후크를로드합니다.

자바 스크립트 버전을 사용해 보았지만 형식이 지정된 HTML 블록을 자바 스크립트 변수에 넣어야합니다. 페이지 렌더링시 자바 스크립트 내에 포함 된 페이지에는 사용되지 않고 사용되지 않는 거대한 텍스트 블록이 있습니다. PHP가 더 잘 맞는 것 같습니다.

쉽게 생성 할 수있는 코드가 있습니까?

---

편집 : 내가 JS 변수를 전달하거나이 작동하기 위해서는 PHP하는 기능을 줄 것으로 보인다, 나는 그 꽤 복잡 가정합니다. 이 파일에 캐시 할 필요가 없기 때문에 나는 워드 프레스 페이지 자체에서 위의 코드를 포함 시켰습니다

$(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(); 

} 

:

는 여기에 내가 함께 작동하도록 노력하고있어 자바 스크립트입니다. 이 페이지에서는 한 번만 사용됩니다. 그러나이 문제는 custom_hook() 코드가 페이지에 렌더링되고 해당 후크에 마크 업이 포함되어 있다는 것입니다. javacript가 A을 사용하고 있다고 판단하면 모든 마크 업은 이유없이 소스 코드의 페이지에 있습니다. B에서 사용중인 경우가 아니면 사용자 지정 후크가 렌더링되지 않도록하는 방법을 찾고 싶습니다. 희망은 그 말이 맞습니다.

Answer 1

현재 자바 스크립트에서도 의사 요소를 감지하는 신뢰할 수있는 방법은 없습니다. 그들은 CSS Object Model (CSSOM)이 없습니다. PHP는 서버 측에서만 작동하기 때문에 이런 상황에서 여러분을 도울 수 없습니다.

대체 워크 플로의 경우 JavaScript를 사용하여 현재 활성화 된 미디어 쿼리를 찾을 수 있습니다. 이를 기반으로 필요한 경우 다른 리소스를로드 할 수 있습니다.

자바 스크립트에서 미디어 쿼리를 사용하는 방법에 대한 자세한 내용은 article on MDN을 참조하십시오.