브라우저에서 지원하는 모든 스타일 속성을 읽는 방법

Question

브라우저에있는 모든 스타일 속성을보고하는 간단한 Javascript 루틴을 만들었습니다.

var list = new Array(); 
var div = document.createElement('div'); 
for (var style in div.style) 
    list.push(style); 

그리고 작동합니다. 결과는 JavaScript 형식이므로 예를 들어 borderTopLeftRadius은 border-top-left-radius, MozAnimationTimingFunction은 -moz-animation-timing-function을 의미합니다.

여기에 a fiddle이 있습니다. 어디서 볼 수 있습니까?

(예 : Firefox 및 IE의 경우 목록에 float이 포함되어 있지 않지만 Chrome에서는 Firefox 및 IE에 cssFloat이 포함되어 있습니다. 그.)

지금까지 그렇게 좋았어.
그러나 제 목표는 CSS 속성 이름 목록 만 사용하는 것입니다. 그러나 결과에는 getPropertyPriority 및 length과 같은 속성 이름이 전혀없는 항목도 포함됩니다. 그리고 제 질문은, 어떻게 이들을 걸러 낼 수 있습니까? 이 항목들을 구분하는 방법 (일부는 자바 스크립트 기능이고 일부는 읽기 전용 속성 임)과 실제 CSS 속성 이름은 무엇입니까?

편집 :
SVG에만 적용되는 속성에 대해서는 신경 쓰지 않습니다. 그것을 지키는 것이 좋습니다.

Mr_Green이 지적한 것처럼 속성에 'string'유형이 있는지 확인하여 대부분의 문제를 필터링 할 수 있지만 (updated fiddle 참조) 여전히 CSS 속성 이름이 아닌 일부 항목이 목록에 있습니다. cssText 및 marks (일부 브라우저에서만 후자). 나는 그것들을 걸러 내기를 원하지만 그렇게 할 방법을 찾지 못했습니다.

W3C에는 supports()이라는 기능이 있지만 그 기능을 수행하지 못했습니다. 아무도 나에게 모범을 찾을 수 있을까? 당신의 목표는 속성 지원 여부 만

function isPropertySupported(property) 
{ 
    return property in document.body.style; 
} 

는 속성이 지원되는지 여부를 확인 할 수 있습니다 여부를 확인하는 경우

Answer 1

나도 몰라. 나는 그것이 도움이되기를 바랍니다. 내가 틀렸다면 나를 바로 잡아라.

Check whether a CSS property is supported or not

편집 :

확인이 밖으로 CSS Supports

supports(DOMString property, DOMString value), returns boolean 
supports(DOMString conditionText), returns boolean 

속성이 문자 인 경우 supports() 방법은 두 개의 인수 속성과 값으로 호출 될 때, 그것이 사실 반환해야 UA가 지원하는 CSS 속성의 이름과 일치하며 값은 해당 속성에 대해 지원되는 값으로 성공적으로 파싱됩니다. . 리터럴 일치는 CSS 이스케이프 처리가 수행되지 않고 앞뒤 공백이 제거되지 않으므로 속성의 이름과 동일한 공백, 후행 공백 또는 CSS 이스케이프가 있으면 false를 반환합니다. 그렇지 않으면, 거짓을 반환해야합니다.