CSS 그래디언트 정의의 순서가 중요합니까?

Question

저는 최근에 CSS3 그라데이션에 대해 많이 읽었습니다. 벤더 접두어가 붙은 정의의 순서가 중요한지 아닌지에 대해 궁금합니다. 예를 들어, 나는 다음과 같은 많이 볼 : 필터 선언 상단, 또는 또한 -ms-필터 접두사를 포함하는 다른 사람을 향해입니다

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'); 

그러나, 나는 또한 때때로 CSS 그라디언트 정의의 예를 참조하십시오

• 는 정의의 순서가 중요합니까 : 등, 등

  그래서 내 질문이 있습니다 생각?

• -ms-filter 접두어를 사용해야합니까? 지금까지 내가 말할 수있는

는 너무 오래 정규 배경 선언은, 제 1 및 W3C-공식 선형 그라데이션이 마지막이다, 그것은 중요하지 않습니다.

위의 선형 그래디언트에 중점을 둡니다. 그러나 동일한 질문은 방사형 그래디언트에도 적용됩니다.

Answer 1

접두사가 붙은 CSS를 처리 할 때 정의 된 정답은 항상 접두사가 붙은 버전이 먼저 붙고 이어 접두어가없는 버전이옵니다.

그래서 -webkit-whatever 및 -moz-whatever 일반 오래된 whatever 앞에 와야하고 (이 아직 브라우저에서 지원되지 않은 경우에도) 일반 접두어가 버전을 지정해야합니다.

브라우저에서 인식하는 마지막 정의 버전이 사용되므로 중요하며 브라우저가 이해할 수없는 경우 접두사가없는 "표준"버전을 사용하는 것이 좋습니다. 미 접두사 버전 이상

, -moz-, -webkit- 같은 개별 접두사 버전의 순서 등은 일반적으로 중요하지 않습니다 - 오직 그들 중 하나를 인식해야한다 특정 브라우저 , 그래서 그것은 중요하지 않습니다 그들이 어떤 다른 이것에 대한 일반적인 대답은 깔끔하게 보이기 때문에 길이 순서대로 놓는 것이지만 실제로는 중요하지 않습니다.

나는 강조했다 "해야"그들은 자신의 -o- 접두사를 가지고 있지만 일부 브라우저 (예를 들어, 오페라) -webkit- 접두사도 구현 몇 가지 경우가 있기 때문에 위의 단락한다. 사람들이 -o-이라는 접두사를 사용하지 않았기 때문에 사람들은 브라우저가 실제로 그것을 지원 했음에도 불구하고 일부 사이트에서 기능을 상실하고 있다고 느꼈기 때문입니다. 이런 이유로 먼저 -webkit-을 정의하는 것이 좋으므로 브라우저의 고유 기본 접두사를 우선 적용 할 수 있도록하십시오.

이전 IE가 표준 대신 filter 또는 -ms-filter 스타일을 사용하는 스타일에 대해서는 IE가 필터를 사용하기 때문에 표준 CSS를 사용해서는 안되기 때문에 이것은 다시 중요하지 않습니다.

IE가 filter과 표준 CSS를 모두 인식하는 경우에도 별도의 스타일로 보여지기 때문에 주문에 대해서는 여전히 중요하지 않습니다. CSS를 특정 순서로 배치하는 것은 브라우저가 다른 브라우저를 선택하도록하는 것이지만 filter은 background을 덮어 쓰지 않으며 동일한 작업을하고 있어도 덮어 쓰지 않으므로 부적합합니다.

가 이러한 충돌 할 수있는 몇 가지 경우입니다 - 모두을하고 IE9가 발생합니다 함께 -ms-filter 및 표준 transform:rotate()를 사용하여 회전을하고 예를 들어, 따라서 사물의 혼란을합니다. IE < = 8은 -ms-filter 만 알고 있고 IE10은 -ms-filter을 전혀 지원하지 않으므로 IE9 만 영향을 받지만 순수 CSS에서는 피할 수있는 방법이 없으므로 더러운 것입니다. 브라우저 특정 코드 또는 CSS hacks 또는 polyfill 스크립트에 의존해야합니다. 그러나 IE9가 CSS 표준을 지원하지 않기 때문에이 점은 그라데이션에는 적용되지 않습니다.