キーテイクアウト

• テキストで示されているPHPスクリプトは、ブラウザー固有のプレフィックスを使用したCSS3プロパティの自動(dòng)生成、および追加のツールを必要とせずにページロード時(shí)間を改善するためのCSSファイルの圧縮を可能にします。
スクリプトは、ブラウザ固有のプレフィックスプロパティのセットを使用して、CSSファイルのアンダースコアが作成したプロパティを置き換え、CSSファイルを連結(jié)および圧縮してサーバーリクエストと不必要な空白を削減することで機(jī)能します。
• スクリプトは、SASS以外の他のCSSプリプロセッサーと一緒に使用できます。その利點(diǎn)には、さまざまなブラウザー間のウェブサイトのパフォーマンスと互換性の改善、ベンダーのプレフィックスを手動(dòng)で追加し、CSSファイルの圧縮の時(shí)間と労力を節(jié)約できます。
CSSファイルを圧縮したり、ブラウザ固有のCSS3プレフィックスを自動(dòng)的に生成する方法はたくさんありますが、通常、非常に迷惑な追加のツールが使用されます。このようなタスクをPHPのみを使用してどのように実行できるかをお見せしたいと思います。この記事では、次の方法を確認(rèn)します。
ブラウザ固有のプレフィックスを使用してCSS3プロパティを生成して、手ですべてを持っていないように

• Webページが要求されたときにフライでプロセスを?qū)g行する 最終結(jié)果がどれほど簡(jiǎn)単であるかを示す例を以下に示します。 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ファイルが1つとしてロードされます。 css.phpスクリプトは、リストされているファイル（css_file1.css、css_file2.css、css_file3.css）で読み取り、それらを結(jié)合し、単一のファイルとして返します。 使いやすく見えますよね？さらに、さらにADOを使用して、いくつかのコードを書き始めましょう！

  コードを書く

  先に進(jìn)み、次のコードでファイルcss.phpを作成します。

  <?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;

  コードは、最初にURLパラメーターから文字列として処理するCSSファイルのリストを受信します（$ _get ["f"]としてphpでアクセス可能）。各ファイルは、パイプキャラクターで區(qū)切られています。 explode（）関數(shù)は、ファイル名の配列を返すパイプ上に文字列を分割します。 関數(shù)file_get_contents（） 変數(shù)$內(nèi)容に1つずつ追加された各ファイルの內(nèi)容を取得します。 CSSファイルの內(nèi)容が取得された後、次のステップは、アンダースコアから始まるCSSプロパティを見つけて、ブラウザー固有のプレフィックスプロパティに置き換えることです。関數(shù)preg_match_all（）は、正規(guī)表現(xiàn)に一致するテキスト內(nèi)のすべての部分を見つけ、マッチを配列として$マッチ[0]に配置します。 PHPマニュアルの関數(shù)に関する明確な説明を読むことができるため、$ Matchesに配列インデックス0がある理由は説明しません。むしろ、私たちのプログラムの流れを説明することに集中したいと思います。 この畫像は、正規(guī)表現(xiàn)のパターンを説明しています。

  

  配列$プレフィックスには、ブラウザ固有のプレフィックスの配列が含まれています。ニーズに応じて、より多くのプレフィックスを追加したり、一部を削除することもできます。 $ MATTES [0]の各プロパティ定義は、ブラウザ固有のプレフィックスを備えたCSS3プロパティのセットに変換されます。コードは各プロパティを反復(fù)し、結(jié)果バッファーを作成し、プロパティのアンダースコアをブラウザ固有のプレフィックスに置き換え、バッファーの結(jié)果をプッシュし、テキスト內(nèi)の元のプロパティをバッファーの內(nèi)容に置き換えます。 ブラウザ固有のプレフィックスが実行された後、それらは$ contentsに統(tǒng)合されました。スクリプトは、コンテンツのコメントを取り外してサイズを縮小します。この畫像は、関連する正規(guī)表現(xiàn)を説明しています。

  

  次に、別の正規(guī)表現(xiàn)により、不要な空白と新しいラインが削除され、コンテンツのサイズがさらに削減されます。

  

  正規(guī)表現(xiàn)と一致する部品は、ブラケット內(nèi)の文字に置き換えられます。

  

  最後に、$ contentsに保存されているCSSを送信する準(zhǔn)備ができました。最初のHeader（）呼び出しは、出力をCSSファイルとして扱う必要があることをブラウザに通知します。 2番目のHeader（）コールは、このファイルが1時(shí)間で期限切れになることをブラウザに伝えます。そのため、ブラウザはそれを1時(shí)間キャッシュし、サーバーから再度要求する代わりにキャッシュコピーを使用します。 スクリプトを使用して

  今後のスクリプトの簡(jiǎn)単な使用例を提供したいと思います。 css.phpを置きます これら3つのCSSファイルとともに、CSSディレクトリに。 最初のファイルはheader.cssです：

  2番目のファイルはcenter.cssです。

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

  3番目のファイルはfooter.cssです：

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

  CSS3プロパティがどのように書かれているかを見てください。ブラウザ固有のプレフィックスを持つものは、一度だけ指定され、前にアンダースコアが付いています。 次に、スタイルを使用するファイルindex.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>

  リンクタグのHREF屬性を見てください。すべてのCSSファイル名はパイプで區(qū)切られています。

  <?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;

  結(jié)論

  この記事では、PHPを使用してCSSの一般的な操作を自動(dòng)化する方法を紹介しました。スクリプトは、正規(guī)表現(xiàn)に大きく依存しています。これは、非常に強(qiáng)力な言語(yǔ)であり、文字列を操作できるようにしますが、適切です。全體として、スクリプトは非常にシンプルですが、多くの利點(diǎn)があります。次のプロジェクトで使用してみてください。 1xpert / shutterstock

  経由の畫像 CSS3プレフィックスとコンプレッサー

  に関するよくある質(zhì)問(wèn)

  css3プレフィックスとコンプレッサーは、パフォーマンスと互換性を向上させるためにCSSファイルを最適化するのに役立つツールです。ベンダーのプレフィックスをCSSプロパティに自動(dòng)的に追加して、さまざまなブラウザで動(dòng)作するようにします。コンプレッサー機(jī)能は、不要な文字を排除することによりCSSファイルのサイズを縮小し、ウェブサイトの読み込み速度を改善します。次に、これらの接頭辭を自動(dòng)的に追加し、手動(dòng)で行う時(shí)間と労力を節(jié)約します。コンプレッサー機(jī)能は、CSSファイルからスペース、コメント、ラインブレークなどの不要な文字を削除することで機(jī)能し、サイズが削減されます。

  CSS3プレフィックス裝置とコンプレッサーを使用する必要があるのはなぜですか？ CSSプロパティがさまざまなブラウザで動(dòng)作し、CSSファイルのサイズを削減し、Webサイトの読み込み速度を改善することが保証されます。また、ベンダーのプレフィックスを手動(dòng)で追加してCSSファイルを圧縮する時(shí)間と労力を節(jié)約します。

  CSS3プレフィックスとコンプレッサーを使用することには欠點(diǎn)がありますか？

  CSS3プレフィックスとコンプレッサーを使用するには、CSSファイルをツールに入力する必要があります。その後、必要なベンダーのプレフィックスを自動(dòng)的に追加し、ファイルを圧縮します。一部のツールでは、模倣や最適化などの追加機(jī)能も提供しています。

  優(yōu)れたCSS3プレフィックスおよびコンプレッサーツールは何ですか？これらのツールはさまざまな機(jī)能を提供し、さまざまなCSS前処理者と一緒に使用できます。

  CSS3プレフィックスおよびコンプレッサーツールを選択するときは、CSSの使用と互換性、互換性、および範(fàn)囲の特徴を使用する要因を考慮してください。また、ツールのパフォーマンスと信頼性を考慮する必要があります。

  すべてのプロジェクトにCSS3プレフィキサーとコンプレッサーを使用する必要があるかどうかは、プロジェクトの特定の要件に依存します。ブラウザの互換性とパフォーマンスが重要な考慮事項(xiàng)である場(chǎng)合、CSS3プレフィックスとコンプレッサーを使用することは有益です。

以上が自動(dòng)CSS3プレフィックスとコンプレッサーの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。