CSS3 방사형 그래디언트 벤더 구문 테스트

Question

내가 지정한 값을 기반으로 자바 스크립트 요소의 배경 그라디언트를 업데이트하려고 할 때 문제가 발생합니다.

내가이 경로 시도 : 웹킷과 게코는 CSS3 그라디언트에 대한 두 개의 서로 다른 구문을 가지고 있기 때문에

elem.style.backgroundImage = '-webkit-gradient(radial, '+x+' '+y+', 0, '+x+' '+y+', 800, from(#ccc), to(#333)), -moz-radial-gradient('+x+'px '+y+'px, circle cover, #ccc 0, #333 100%)'; 

을, 나는 모두를 지정해야합니다. 그러나 위의 코드는 작동하지 않습니다. Gecko 문법이나 Webkit 문법 만 있고 둘 다있는 것은 아닙니다.

CSS 그래디언트 지원을 확인할 수는 있지만 내 질문은 브라우저가 스니핑되지 않고 어떤 구문을 사용해야하는지 확인하는 방법이 있습니까? 그래디언트의 x 및 y 좌표가 동적으로 변경되므로이 방법으로 그라디언트를 설정해야한다는 점을 명심하십시오.

희망적입니다. 감사합니다.

Answer 1

편집 아래의 내용은 다른 이유로 유용하지만, 실제로 웹킷이나 파이어 폭스 symtax를 사용할지 여부를 알 수있는 OP 문제에 도움이된다고 생각하지 않습니다! (Doh) 그래디언트를 전혀 사용할 수 있는지 여부를 아는 데 도움이됩니다.

다시 편집하지만! Modernizr 소스를 살펴보면 기능 테스트를 통해이를 수행하는 방법을 알 수 있습니다 (영리한 사람들입니다). 당신은 아마 소스에서 자신을보고 그것을 알아낼 수 있지만, 여기에 빨리 해킹 - 함께 예입니다

function testGradientSyntax() { 
    var element; 

    element = document.createElement("testsyntax"); 
    element.style.cssText = 
     "background: -webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62))"; 
    if (element.style.background.indexOf("-webkit") >= 0) { 
     // It's WebKit syntax 
     log("This supports WebKit syntax"); 
    } 
    else { 
     // It's not WebKit syntax 
     log("This doesn't support WebKit syntax"); 
    } 
} 

---

당신은이에 대한 Modernizr을 사용할 수 있습니다. relevant syntax을 감지하고 두 구문 모두에서 하나의 CSS 파일을 사용할 수있는 방법을 제공합니다. 워드 프로세서에서

샘플 그라데이션 코드 : 위의에서

button.glossy { 
    background: #ccc url(gloss.png) 50% 50% repeat-x; 
} 
.cssgradients button.glossy { 
    background: #ccc -webkit-gradient(linear, left top, left bottom, 
     from(rgba(255,255,255, .4)), 
     color-stop(0.5, rgba(255,255,255, .7)), 
     color-stop(0.5, rgba(0,0,0, .2)), 
     to(rgba(0,0,0, .1))); 
} 
.cssgradients button.glossy:hover { 
    background-color: #fff; 
} 

(편집, 나는 문서의 오류처럼 나에게 보였다 .cssgradients button.glossy 규칙의 끝에서 선을 제거했습니다.)

.cssgradients 클래스를 참조 하시겠습니까? Modernizr을 실행하면 관련 구문인지 여부를 감지하고, 그렇다면 html 요소에 클래스를 추가합니다. 그러면 자손 선택기 .cssgradients button.glossy이 켜져 규칙이 적용됩니다.

이것은 슬프게도 자바 스크립트를 사용하는 브라우저에 따라 다릅니다.

Answer 2

관심있는 사람이 있다면, 여기 나와 있습니다. 나는 그것이 많은 개선을 사용할 수있을 것이라고 확신하지만, 지금까지 효과가있다.

var syntax; 
var syntaxCheck = document.createElement('syntax'); 
var syntaxFound = false; 
while(!syntaxFound) { 

    syntaxCheck.style.backgroundImage = '-webkit-gradient(linear,left top,right bottom,from(#9f9),to(white))'; 
    if(syntaxCheck.style.backgroundImage.indexOf('webkit') !== -1) { 
      syntax = 'webkit'; 
      syntaxFound = true; 
      break; 
    } 

    syntaxCheck.style.backgroundImage = '-moz-linear-gradient(left top,#9f9, white)'; 
    if(syntaxCheck.style.backgroundImage.indexOf('moz') !== -1) { 
      syntax = 'moz'; 
      syntaxFound = true; 
      break; 
    } 
} 

if(syntax == 'webkit') // use -webkit syntax 
else if(syntax == 'moz') // use -moz syntax 

Answer 3

전혀 감지 할 필요가 없습니다. element.style.backgroundImage를 연속으로 두 번 설정하면 구문 분석하지 않는 요소는 무시됩니다.