Internet Explorer 9의 그라디언트

누구든지 IE9 내의 그라디언트에 대한 공급 업체 접두사를 알고 있습니까? 아니면 여전히 독점 필터를 사용해야합니까?

다른 브라우저에 대한 내용은 다음과 같습니다.

background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */

보너스로 누구든지 Opera의 공급 업체 접두사를 알고 있습니까?

IE9 베타 1부터 독점 필터를 사용해야합니다.

파티에 조금 늦어 보이지만 다음은 일부 상위 브라우저에 대한 예입니다.

/* IE10 */ 
background-image: -ms-linear-gradient(top, #444444 0%, #999999 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #444444 0%, #999999 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #444444 0%, #999999 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444444), color-stop(1, #999999));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #444444 0%, #999999 100%);

/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #444444 0%, #999999 100%);

출처 : http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html

참고 : 이러한 모든 브라우저는 16 진수 표기법 대신 rgb / rgba도 지원합니다.

최고의 크로스 브라우저 솔루션은

background: #fff;
background: -moz-linear-gradient(#fff, #000);
background: -webkit-linear-gradient(#fff, #000);
background: -o-linear-gradient(#fff, #000);
background: -ms-linear-gradient(#fff, #000);/*For IE10*/
background: linear-gradient(#fff, #000);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/ 
height: 1%;/*For IE7*/ 

IE9에는 현재 CSS3 그라디언트 지원이 없습니다. 그러나 여기에 PHP를 사용하여 SVG (수직 선형) 그래디언트를 대신 반환하는 좋은 해결 방법이 있습니다. 이렇게하면 디자인을 스타일 시트에 유지할 수 있습니다.

<?php

$from_stop = isset($_GET['from']) ? $_GET['from'] : '000000';
$to_stop = isset($_GET['to']) ? $_GET['to'] : '000000';

header('Content-type: image/svg+xml; charset=utf-8');

echo '<?xml version="1.0"?>
';

?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
    <defs>
        <linearGradient id="linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#<?php echo $from_stop; ?>" stop-opacity="1"/>
            <stop offset="100%" stop-color="#<?php echo $to_stop; ?>" stop-opacity="1"/>
        </linearGradient>
    </defs>
    <rect width="100%" height="100%" fill="url(#linear-gradient)"/>
</svg>

서버에 업로드하고 다음과 같이 URL을 호출하기 만하면됩니다.

gradient.php?from=f00&to=00f

이것은 다음과 같이 CSS3 그라디언트와 함께 사용할 수 있습니다.

.my-color {
    background-color: #f00;
    background-image: url(gradient.php?from=f00&to=00f);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#00f));
    background-image: -webkit-linear-gradient(top, #f00, #00f);
    background-image: -moz-linear-gradient(top, #f00, #00f);
    background-image: linear-gradient(top, #f00, #00f);
}

IE9 미만을 타겟팅해야하는 경우에도 이전 독점 '필터'방법을 사용할 수 있습니다.

.ie7 .my-color, .ie8 .my-color {
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ff0000", endColorStr="#0000ff");
}

물론 PHP 코드를 수정하여 그라디언트에 더 많은 정지 점을 추가하거나 더 정교하게 만들 수 있습니다 (방사형 그라디언트, 투명도 등). 그러나 이것은 단순한 (수직) 선형 그라디언트에 적합합니다.

모든 브라우저 그라디언트에 사용하는 코드 :

background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom: 1;

IE에서 작동 zoom: 1하려면 높이를 지정하거나 hasLayout요소에 적용 해야합니다.

최신 정보:

다음은 LESS 사용자를위한 LESS Mixin (CSS) 버전입니다.

.gradient(@start, @end) {
    background: mix(@start, @end, 50%);
    filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@start~", EndColorStr="@end~")";
    background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end));
    background: -webkit-linear-gradient(@start, @end);
    background: -moz-linear-gradient(top, @start, @end);
    background: -ms-linear-gradient(@start, @end);
    background: -o-linear-gradient(@start, @end);
    background: linear-gradient(@start, @end);
    zoom: 1;
}

Opera는 곧 그라디언트 지원 및 기타 CSS 기능을 사용할 수있는 빌드를 제공하기 시작할 것입니다.

W3C CSS 워킹 그룹은 CSS 2.1로 끝나지 않았습니다. 다들 아시죠? 조만간 완료 될 예정입니다. CSS3는 정확하게 모듈화되어 전체 사양이 아닌 구현으로 모듈을 더 빠르게 이동할 수 있습니다.

모든 브라우저 회사는 다른 소프트웨어주기 방법론, 테스트 등을 사용합니다. 그래서 그 과정은 시간이 걸립니다.

저는 많은 독자들이 CSS3에서 어떤 것을 사용하고 있다면 "점진적 향상"이라는 것을하고 있다는 것을 잘 알고있을 것입니다. 가장 많은 지원을받는 브라우저가 최상의 경험을 얻습니다. 다른 부분은 "단계적 저하"로, 브라우저가 모듈 또는 수행하려는 작업과 관련된 모듈의 일부를 구현할 때까지 경험이 만족 스럽지만 가장 매력적이거나 가장 매력적이지 않음을 의미합니다.

이것은 불행히도 프론트 엔드 개발자가 구현에 대한 일관성없는 타이밍으로 인해 극도로 좌절하는 매우 이상한 상황을 만듭니다. 그래서 그것은 양쪽 모두의 진정한 도전입니다-당신은 브라우저 회사를 비난합니까, W3C를 탓합니까, 아니면 더 나쁘게-당신 자신 (좋은 것은 우리가 모든 것을 알 수 없다는 것을 압니다!) 브라우저 회사와 W3C 그룹에서 일하는 사람들을하십시오 회원들이 스스로를 비난합니까? 당신?

당연히 아니지. 그것은 항상 균형의 게임입니다. 그리고 아직까지 우리는 그 균형의 지점이 실제로 어디에 있는지 파악하지 못했습니다. 그것이 진화 기술 분야에서 일하는 기쁨입니다. :)

IE9는 여전히 CSS 그라디언트를 지원하지 않을 것임을 이해합니다. 그것은 다른 훌륭한 새로운 것들을 많이 지원하기 때문에 부끄러운 일입니다.

최소한의 소란으로 다양한 CSS3 기능 (그라데이션, 테두리 반경 및 상자 그림자 포함)을 지원하기 위해 모든 버전의 IE를 얻는 방법 으로 CSS3Pie 를 살펴볼 수 있습니다 .

CSS3Pie가 IE9에서 작동한다고 생각합니다 (사전 릴리스 버전에서 시도했지만 아직 현재 베타에서는 사용하지 않았습니다).

IE9에 대해서는 확실하지 않지만 Opera는 아직 그라디언트를 지원하지 않는 것 같습니다.

• http://www.opera.com/docs/specs/presto26/#css

해당 페이지에 "그라데이션"이 나타나지 않습니다.

Opera가 아닌 모든 브라우저에서 CSS 그래디언트가 작동하도록하는 Robert Nyman의 훌륭한 기사가 있습니다.

• http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/

대체 이미지를 사용하도록 확장 할 수 있는지 확실하지 않습니다.

버전 11부터 Opera는 -o- vendor 접두사가있는 선형 그래디언트를 지원합니다. Chris Mills는 이에 대한 Dev.Opera 기사를 작성했습니다 : http://dev.opera.com/articles/view/css3-linear-gradients/

방사형 그래디언트는 여전히 작업 중입니다 (사양 및 Opera 내에서 모두).

그라디언트 생성기를 사용하면 모든 것이 완벽해질 것입니다.) http://www.colorzilla.com/gradient-editor/