자동 CSS3 접두사 및 압축기

키 테이크 아웃

텍스트에 시연 된 PHP 스크립트는 브라우저 특정 접두사를 사용하여 CSS3 속성을 자동 생성하고 추가 도구가 필요하지 않고 개선 된 페이지로드 시간을위한 CSS 파일의 압축을 허용합니다.

. 스크립트는 CSS 파일의 밑줄 정리 된 속성을 브라우저 별 접두사 속성 세트로 바꾸고 CSS 파일을 연결하고 압축하여 서버 요청과 불필요한 공백을 연결하고 압축하여 작동합니다. 스크립트는 SASS 이외의 다른 CSS 전 처리기와 함께 사용할 수 있으며, 그 이점은 다양한 브라우저에서 웹 사이트 성능과 호환성을 향상시키고 공급 업체 접두사를 수동으로 추가하고 CSS 파일을 압축하는 시간과 노력을 절약하는 것이 포함됩니다.

CSS 파일을 압축하거나 브라우저 특정 CSS3 접두사를 자동으로 생성하는 방법에는 여러 가지가 있지만 일반적으로 추가 도구가 사용되므로 매우 성가시다. PHP 만 사용하여 이러한 작업을 수행 할 수있는 방법을 보여 드리고자합니다. 이 기사에서는 다음 방법을 볼 수 있습니다.
• > 브라우저 별 접두사로 CSS3 속성을 생성하여 모두를 갖지 않도록합니다. 모든 CSS 파일을 연결하고 서버 요청 수를 줄이고 페이지의로드 시간을 줄이기 위해 주석과 불필요한 공백을 제거합니다. 웹 페이지가 요청되면 즉시 프로세스를 수행합니다

다음은 최종 결과가 얼마나 쉬운지를 보여주는 예입니다. 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>

그런 다음 HTML에서 스타일을 가져 오기 위해 이와 같은 링크가 작성됩니다.

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/css.php?f=css_file1|css_file2|css_file3"</span>></span></span>

단일 링크 요소를 사용하면 3 개의 CSS 파일이 하나로로드됩니다. CSS.PHP 스크립트는 나열된 파일 (CSS_FILE1.CSS, CSS_FILE2.CSS 및 CSS_FILE3.CSS)에서 읽은 후 단일 파일로 반환합니다. 사용하기가 매우 쉬워 보입니다. 더 이상 고민하면 코드를 작성하기 시작합시다! 코드 작성 계속해서 다음 코드로 css.php 파일을 만듭니다.

코드는 먼저 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;

배열 $ 접두사에는 브라우저 특정 접두사 배열이 포함되어 있습니다. 필요에 따라 더 많은 접두사를 추가하거나 일부를 제거 할 수도 있습니다. $ 일치 [0]의 각 속성 정의는 브라우저 별 접두사를 가진 CSS3 속성 세트로 변환됩니다. 코드는 각 속성을 반복하고 결과 버퍼를 생성하고 속성의 밑줄을 브라우저 별 접두사로 교체하고 결과를 버퍼로 푸시 한 다음 텍스트의 원래 속성을 버퍼의 내용으로 교체합니다. 브라우저 특정 접두사를 확장 한 후 $ 컨텐츠로 다시 병합 된 후 스크립트는 컨텐츠의 댓글을 제거하여 크기를 줄입니다. 이 이미지는 관련 정규식을 설명합니다.

그런 다음 다른 정규 표현식은 불필요한 공백 및 새로운 라인을 제거하여 컨텐츠의 크기를 더욱 줄입니다.

정규 표현식과 일치하는 부품은 예를 들어 브래킷 내부의 문자로 대체됩니다.

마지막으로 $ 컨텐츠에 저장된 CSS가 보낼 준비가되었습니다. 첫 번째 헤더 () 호출은 브라우저에 출력이 CSS 파일로 취급되어야한다는 것을 브라우저에 알려줍니다. 두 번째 Header () 호출은 브라우저 에이 파일이 1 시간 안에 만료되는 것을 알려 주므로 브라우저는 한 시간 동안 캐시하고 서버에서 다시 요청하는 대신 캐시 된 사본을 사용합니다. 스크립트 사용 방금 만든 스크립트에 대한 간단한 사용 예제를 제공하고 싶습니다. css.php를 넣으십시오 이 세 가지 CSS 파일과 함께 CSS 디렉토리에. 첫 번째 파일은 header.css입니다.

두 번째 파일은 center.css :

세 번째 파일은 riger.css입니다.

<span>_border-radius: 10px;</span>

CSS3 속성이 어떻게 작성되었는지 살펴보십시오. 브라우저 별 접두사가있는 것들은 한 번만 주어지고 그 앞에 밑줄이 있습니다. 다음으로 스타일을 사용할 파일 index.html을 만듭니다.

<span>-o-border-radius: 10px;
</span><span>-moz-border-radius: 10px;
</span><span>-webkit-border-radius: 10px;
</span><span>border-radius: 10px;</span>

링크 태그의 HREF 속성을보십시오. 모든 CSS 파일 이름은 파이프로 분리됩니다.

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/css.php?f=css_file1|css_file2|css_file3"</span>></span></span>

결론 이 기사에서는 PHP를 사용하여 CSS의 일반적인 조작을 자동화하는 방법을 보여주었습니다. 이 스크립트는 정규 표현식에 크게 의존합니다. 정규 표현은 매우 강력한 언어로 문자열을 조작 할 수 있지만 적합합니다. 전반적으로 스크립트는 매우 간단하지만 많은 이점을 제공합니다. 다음 프로젝트에서 사용해보십시오. 1xpert / shutterstock을 통한 이미지 CSS3 접두사 및 압축기에 대한 자주 묻는 질문 <?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; CSS3 접두사 및 압축기의 목적은 무엇입니까?

CSS3 접두사 및 압축기는 더 나은 성능과 호환성을 위해 CSS 파일을 최적화하는 데 도움이되는 도구입니다. 공급 업체 접두사를 CSS 속성에 자동으로 추가하여 다른 브라우저에서 작동하도록합니다. 압축기 함수는 불필요한 문자를 제거하여 CSS 파일의 크기를 줄여 웹 사이트의로드 속도를 향상시킵니다.

CSS3 접두사 및 압축기는 어떻게 작동합니까? CSS3 프리 픽스 및 컴프레서는 CSS Prefix를 vendorfixe를 위해 CSS 파일을 스캔하여 작동합니다. 그런 다음 이러한 접두사를 자동으로 추가하여 수동으로 수행하는 시간과 노력을 절약합니다. 압축기 기능은 CSS 파일에서 공간, 주석 및 라인이 나오는 것과 같은 불필요한 문자를 제거하여 크기를 줄여서 작동합니다. CSS3 접두사와 압축기를 사용해야하는 이유 CSS3 접감기와 컴프레서를 사용하여 웹 사이트의 성능과 호환성을 크게 향상시킬 수 있습니다. CSS 속성이 다른 브라우저에서 작동하고 CSS 파일의 크기를 줄여 웹 사이트의로드 속도를 향상시킵니다. 또한 공급 업체 접두사를 수동으로 추가하고 CSS 파일을 압축하는 시간과 노력을 절약합니다. CSS3 접두사와 압축기를 사용하는 단점이 있습니까?

CSS3 접두사와 압축기는 많은 이점을 제공하지만 항상 필요한 것은 아닙니다. 일부 최신 브라우저에는 더 이상 특정 CSS 속성에 대한 공급 업체 접두사가 필요하지 않습니다. 또한 CSS 파일을 과도하게 압축하면 읽기 및 유지 관리가 어려워 질 수 있습니다.

CSS3 접두사 및 압축기를 사용하려면 CSS3 접두사 및 압축기를 사용하려면 CSS 파일을 도구에 입력하면됩니다. 그런 다음 필요한 공급 업체 접두사를 자동으로 추가하고 파일을 압축합니다. 일부 도구는 또한 미니 화 및 최적화와 같은 추가 기능을 제공합니다.

다른 CSS Preprocessors와 함께 CSS3 접두사 및 압축기를 사용할 수 있습니까?

예, SASS 또는 그 이하의 다른 CSS Preprocessor와 함께 CSS3 프리 픽사 및 압축기를 사용할 수 있습니다. 이 도구는 단순히 필요한 공급 업체 접두사를 추가하고 출력 된 CSS 파일을 압축합니다.

좋은 CSS3 접두사 및 압축기 도구는 무엇입니까?

AutoPrefixer, PostCSS 및 CSS 드라이브를 포함하여 사용 가능한 많은 CSS3 프리 픽사 및 압축기 도구가 있습니다. 이 도구는 다양한 기능을 제공하며 다양한 CSS 전 처리기와 함께 사용할 수 있습니다.

올바른 CSS3 접두사 및 컴프레서 도구를 선택하는 방법은 무엇입니까?

CSS3 접두사 및 압축기 도구를 선택할 때 사용 편의성, CSS 사전 프로세서와의 공동성 및 기능 범위를 고려하십시오. 또한 도구의 성능과 신뢰성을 고려해야합니다.

큰 CSS 파일에 CSS3 접두사와 압축기를 사용할 수 있습니까?

예, 대형 CSS 파일에는 CSS3 접두사 및 압축기를 사용할 수 있습니다. 그러나 더 큰 파일의 경우 처리 시간이 더 길어질 수 있습니다.

모든 프로젝트에 CSS3 접두사 및 압축기를 사용해야 하는가?

모든 프로젝트에 대해 CSS3 접두사 및 압축기를 사용해야하는지 여부는 프로젝트의 특정 요구 사항에 따라 다릅니다. 브라우저 호환성과 성능이 중요한 고려 사항이라면 CSS3 접두사와 압축기를 사용하는 것이 유리할 수 있습니다.

위 내용은 자동 CSS3 접두사 및 압축기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!