크로스 브라우저 CSS, 그림자, 그라데이션

Question

은 다음과 같은 각 브라우저마다 수동으로 특수 태그를 사용해야하는 대신 사용할 수있는 CSS 라이브러리입니다.

-moz-linear-gradient 
-webkit-gradient 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient 

Answer 1

나는 개인적으로 아무 것도 모른다.하지만 PHP로 구문 분석 할 CSS 파일을 설정 한 다음 필요한 모든 것을 출력하는 함수를 작성할 수있다. 예 :

<?php 
function makeBorderRadius($radius) { 
    echo "-moz-border-radius: " . $radius . "\n"; 
    echo "-webkit-border-radius: " . $radius . "\n"; 
    echo "border-radius: " . $radius . "\n"; 
} 
?> 

#mydiv { 
    width: 50%; 
    background: #000; 
    <?php makeBorderRadius(5); ?> 
} 

Answer 2

3 년 후 나의 다른 대답을 재발견하는 것이 훨씬 더 좋은 해결책이라고 말할 수 있습니다. 접두사가 붙은 일들은 본질적으로 끝났지 만 비슷한 상황에서 좋은 코드 재사용을 장려 할 수 있습니다.

SASS은 변수, 기능 및 믹스 인을 포함한 많은 편리한 기능을 추가하는 확장 CSS 구문입니다. CSS를 생성하기 위해 별도의 컴파일 단계가 필요하지만보다 강력한 개발 언어를 사용하면 훨씬 많은 코드를 관리 할 수 ​​있다는 장점이 있습니다. mixin를 사용하여, 이전의 국경 반경의 예는 다음과 같습니다

@mixin border-radius($width) { 
    -moz-border-radius: $width; 
    -webkit-border-radius: $width; 
    border-radius: $width; 
} 

.mydiv { 
    @include border-radius(5px); 
} 

현실에서, 당신이 당신의 자신의 CSS 호환성 유지 mixin을 유지할 필요가 없습니다. 그래서 Compass과 같은 다른 프레임 워크가 있습니다. 프레임 워크 개발자는 어떤 브라우저에서 접두사를 사용하고 호환성을 관리하는지 추적하며 웹 사이트를 완성하는 데 집중할 수 있습니다. 그들은 심지어 고체 선형 그라데이션 지원을, 그래서 당신은 쓸 수 :

.mydiv { 
    @include background-image(linear-gradient(left top, white, #ddd)); 
    background-image: linear-gradient(to bottom right, white, #ddd); 
} 

이 솔루션의 가장 좋은 부분은 당신이 PHP 나 아파치 설정으로 엉망 필요가 없다는 것입니다 - 몇 가지 간단한 명령을 실행하거나를 사용 도구를 사용하여 CSS를 컴파일 한 다음 다른 스타일 시트처럼 포함시킵니다.