自動CSS3プレフィックスとコンプレッサー

キーテイクアウト

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

すべてのCSSファイルを連結し、コメントと不必要な空白を剥がして、サーバーの要求の数を減らし、ページの読み込み時間を短縮する

• Webページが要求されたときにフライでプロセスを実行する 最終結果がどれほど簡単であるかを示す例を以下に示します。 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> rel<span>="stylesheet"</span> href<span>="css/css.php?f=css_file1|css_file2|css_file3"</span>></span></span></span>

  単一のリンク要素を使用すると、3つのCSSファイルが1つとしてロードされます。 css.phpスクリプトは、リストされているファイル（css_file1.css、css_file2.css、css_file3.css）で読み取り、それらを結合し、単一のファイルとして返します。 使いやすく見えますよね？さらに、さらにADOを使用して、いくつかのコードを書き始めましょう！

  コードを書く

  先に進み、次のコードでファイル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でアクセス可能）。各ファイルは、パイプキャラクターで区切られています。 explode（）関数は、ファイル名の配列を返すパイプ上に文字列を分割します。 関数file_get_contents（） 変数$内容に1つずつ追加された各ファイルの内容を取得します。 CSSファイルの内容が取得された後、次のステップは、アンダースコアから始まるCSSプロパティを見つけて、ブラウザー固有のプレフィックスプロパティに置き換えることです。関数preg_match_all（）は、正規表現に一致するテキスト内のすべての部分を見つけ、マッチを配列として$マッチ[0]に配置します。 PHPマニュアルの関数に関する明確な説明を読むことができるため、$ Matchesに配列インデックス0がある理由は説明しません。むしろ、私たちのプログラムの流れを説明することに集中したいと思います。 この画像は、正規表現のパターンを説明しています。

  

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

  

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

  

  正規表現と一致する部品は、ブラケット内の文字に置き換えられます。

  

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

  今後のスクリプトの簡単な使用例を提供したいと思います。 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> rel<span>="stylesheet"</span> href<span>="css/css.php?f=css_file1|css_file2|css_file3"</span>></span></span></span>

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

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

  結論

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

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

  に関するよくある質問

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

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

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

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

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

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

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

以上が自動CSS3プレフィックスとコンプレッサーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。