정규 표현식과 일치하는 부품은 예를 들어 브래킷 내부의 문자로 대체됩니다.
CSS3 접두사 및 압축기를 사용하려면 CSS3 접두사 및 압축기를 사용하려면 CSS 파일을 도구에 입력하면됩니다. 그런 다음 필요한 공급 업체 접두사를 자동으로 추가하고 파일을 압축합니다. 일부 도구는 또한 미니 화 및 최적화와 같은 추가 기능을 제공합니다. 큰 CSS 파일에 CSS3 접두사와 압축기를 사용할 수 있습니까? 모든 프로젝트에 대해 CSS3 접두사 및 압축기를 사용해야하는지 여부는 프로젝트의 특정 요구 사항에 따라 다릅니다. 브라우저 호환성과 성능이 중요한 고려 사항이라면 CSS3 접두사와 압축기를 사용하는 것이 유리할 수 있습니다. 
.
CSS 파일을 압축하거나 브라우저 특정 CSS3 접두사를 자동으로 생성하는 방법에는 여러 가지가 있지만 일반적으로 추가 도구가 사용되므로 매우 성가시다. PHP 만 사용하여 이러한 작업을 수행 할 수있는 방법을 보여 드리고자합니다. 이 기사에서는 다음 방법을 볼 수 있습니다.
다음은 최종 결과가 얼마나 쉬운지를 보여주는 예입니다.
CSS에서 브라우저 특정 접두사는 다음과 같은 밑줄로 대체됩니다.
> 브라우저 별 접두사로 CSS3 속성을 생성하여 모두를 갖지 않도록합니다.
<span>_border-radius: 10px;</span>
<span>-o-border-radius: 10px;
</span><span>-moz-border-radius: 10px;
</span><span>-webkit-border-radius: 10px;
</span><span>border-radius: 10px;</span>
<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/css.php?f=css_file1|css_file2|css_file3"</span>></span></span>
코드는 먼저 URL 매개 변수에서 문자열로 처리 할 CSS 파일 목록을 수신합니다 (PHP에서 $ _get [ "F"]로 액세스 할 수 있음). 각 파일은 파이프 문자로 구분됩니다. Explode () 함수는 파이프의 문자열을 분할하여 다양한 파일 이름을 반환합니다.
함수 file_get_contents ()
추가 된 각 파일의 내용을 하나씩 변수 $ 컨텐츠로 가져옵니다.
CSS 파일의 내용이 검색된 후 다음 단계는 밑줄로 시작하는 CSS 속성을 찾아 브라우저 별 접두사 속성으로 바꾸는 것입니다. FERG_MATCH_ALL () 함수는 정규 표현식과 일치하는 텍스트의 모든 부분을 찾아 매칭을 배열로 [0]로 배치합니다.
PHP 매뉴얼의 기능에 대한 명확한 설명을 읽을 수 있기 때문에 $ matches에 배열 인덱스 0이있는 이유는 설명하지 않습니다. 오히려 프로그램의 흐름을 설명하는 데 집중하고 싶습니다.
이 이미지는 정규 표현의 패턴을 설명합니다.
<?php
$files = explode("|", $_GET["f"]);
$contents = "";
foreach ($files as $file) {
$contents .= file_get_contents($file . ".css");
}
preg_match_all('/_[a-zA-Z-]+:s.+;|[a-zA-Z-]+:s_[a-zA-Z].+;/',
$contents, $matches, PREG_PATTERN_ORDER);
$prefixes = array("-o-", "-moz-", "-webkit-", "");
foreach ($matches[0] as $property) {
$result = "";
foreach ($prefixes as $prefix) {
$result .= str_replace("_", $prefix, $property);
}
$contents = str_replace($property, $result, $contents);
}
$contents = preg_replace('/(/*).*?(*/)/s', '', $contents);
$contents = preg_replace(array('/s+([^w'"]+)s+/', '/([^w'"])s+/'), '', $contents);
header("Content-Type: text/css");
header("Expires: " . gmdate('D, d M Y H:i:s GMT', time() + 3600));
echo $contents;
그런 다음 다른 정규 표현식은 불필요한 공백 및 새로운 라인을 제거하여 컨텐츠의 크기를 더욱 줄입니다.
마지막으로 $ 컨텐츠에 저장된 CSS가 보낼 준비가되었습니다. 첫 번째 헤더 () 호출은 브라우저에 출력이 CSS 파일로 취급되어야한다는 것을 브라우저에 알려줍니다. 두 번째 Header () 호출은 브라우저 에이 파일이 1 시간 안에 만료되는 것을 알려 주므로 브라우저는 한 시간 동안 캐시하고 서버에서 다시 요청하는 대신 캐시 된 사본을 사용합니다.
스크립트 사용
방금 만든 스크립트에 대한 간단한 사용 예제를 제공하고 싶습니다. css.php를 넣으십시오
이 세 가지 CSS 파일과 함께 CSS 디렉토리에.
첫 번째 파일은 header.css입니다.
두 번째 파일은 center.css :
세 번째 파일은 riger.css입니다.
<span>_border-radius: 10px;</span>
<span>-o-border-radius: 10px;
</span><span>-moz-border-radius: 10px;
</span><span>-webkit-border-radius: 10px;
</span><span>border-radius: 10px;</span>
<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/css.php?f=css_file1|css_file2|css_file3"</span>></span></span>
CSS3 접두사 및 압축기는 더 나은 성능과 호환성을 위해 CSS 파일을 최적화하는 데 도움이되는 도구입니다. 공급 업체 접두사를 CSS 속성에 자동으로 추가하여 다른 브라우저에서 작동하도록합니다. 압축기 함수는 불필요한 문자를 제거하여 CSS 파일의 크기를 줄여 웹 사이트의로드 속도를 향상시킵니다.
CSS3 접두사 및 압축기는 어떻게 작동합니까? CSS3 프리 픽스 및 컴프레서는 CSS Prefix를 vendorfixe를 위해 CSS 파일을 스캔하여 작동합니다. 그런 다음 이러한 접두사를 자동으로 추가하여 수동으로 수행하는 시간과 노력을 절약합니다. 압축기 기능은 CSS 파일에서 공간, 주석 및 라인이 나오는 것과 같은 불필요한 문자를 제거하여 크기를 줄여서 작동합니다. CSS3 접두사와 압축기를 사용해야하는 이유 CSS3 접감기와 컴프레서를 사용하여 웹 사이트의 성능과 호환성을 크게 향상시킬 수 있습니다. CSS 속성이 다른 브라우저에서 작동하고 CSS 파일의 크기를 줄여 웹 사이트의로드 속도를 향상시킵니다. 또한 공급 업체 접두사를 수동으로 추가하고 CSS 파일을 압축하는 시간과 노력을 절약합니다. CSS3 접두사와 압축기는 많은 이점을 제공하지만 항상 필요한 것은 아닙니다. 일부 최신 브라우저에는 더 이상 특정 CSS 속성에 대한 공급 업체 접두사가 필요하지 않습니다. 또한 CSS 파일을 과도하게 압축하면 읽기 및 유지 관리가 어려워 질 수 있습니다.
예, SASS 또는 그 이하의 다른 CSS Preprocessor와 함께 CSS3 프리 픽사 및 압축기를 사용할 수 있습니다. 이 도구는 단순히 필요한 공급 업체 접두사를 추가하고 출력 된 CSS 파일을 압축합니다.
좋은 CSS3 접두사 및 압축기 도구는 무엇입니까? 올바른 CSS3 접두사 및 컴프레서 도구를 선택하는 방법은 무엇입니까?
CSS3 접두사 및 압축기 도구를 선택할 때 사용 편의성, CSS 사전 프로세서와의 공동성 및 기능 범위를 고려하십시오. 또한 도구의 성능과 신뢰성을 고려해야합니다. 모든 프로젝트에 CSS3 접두사 및 압축기를 사용해야 하는가?
위 내용은 자동 CSS3 접두사 및 압축기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
