Préfixeur et compresseur CSS3 automatique

Les plats clés

• Le script PHP démontré dans le texte permet la génération automatique de propriétés CSS3 avec des préfixes spécifiques au navigateur et la compression des fichiers CSS pour des temps de chargement de page améliorés, sans avoir besoin d'outils supplémentaires.
• Le script fonctionne en remplaçant les propriétés préfixées de soulignement dans les fichiers CSS par un ensemble de propriétés préfixées spécifiques au navigateur, puis en concaténant et en compressant les fichiers CSS pour réduire les demandes de serveur et l'espace blanc inutile.
• Le script peut être utilisé avec d'autres préprocesseurs CSS comme SASS ou moins, et ses avantages incluent des performances et une compatibilité améliorées du site Web entre différents navigateurs, ainsi que pour gagner du temps et des efforts d'ajouter manuellement les préfixes des fournisseurs et de compresser les fichiers CSS.

Il existe de nombreuses façons de compresser les fichiers CSS ou de générer automatiquement des préfixes CSS3 spécifiques au navigateur, mais généralement des outils supplémentaires sont utilisés, ce qui est très ennuyeux. Je voudrais vous montrer comment de telles tâches peuvent être effectuées en utilisant uniquement PHP. Dans cet article, nous verrons comment:

• Générez des propriétés CSS3 avec des préfixes spécifiques au navigateur afin que nous ne les ayons pas tous à la main
• concaténer tous les fichiers CSS et éliminer les commentaires et l'espace blanc inutile pour réduire le nombre de demandes de serveur et diminuer le temps de chargement de la page
• Effectuez le processus à la volée lorsque la page Web est demandée

Voici un exemple qui montre à quel point le résultat final sera facile à utiliser. Dans le CSS, le préfixe spécifique du navigateur est remplacé par un soulignement comme celui-ci:

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

Le code générera une liste complète de propriétés comme celle-ci:

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

Ensuite, dans le HTML, un lien est écrit comme celui-ci pour importer les styles:

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

Avec l'élément de liaison unique, trois fichiers CSS seront chargés comme un. Le script CSS.PHP se lira dans les fichiers répertoriés (CSS_FILE1.CSS, CSS_FILE2.CSS et CSS_FILE3.CSS), les combinez et les renvoie sous forme de fichier. Il a l'air assez facile à utiliser, non? Donc, sans plus ADO, commençons à écrire du code!

Écriture du code

Allez-y et créez le fichier css.php avec le code suivant:

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

Le code reçoit d'abord la liste des fichiers CSS à traiter sous forme de chaîne à partir du paramètre URL (accessible en php comme $ _get ["f"]). Chaque fichier est séparé avec un caractéristique de tuyau. La fonction Explose () divise la chaîne sur les tuyaux renvoyant un tableau de noms de fichiers. La fonction file_get_contents () Obtient le contenu de chaque fichier qui est annexé, un par un, au contenu de la variable. Une fois que le contenu des fichiers CSS a été récupéré, l'étape suivante consiste à trouver toutes les propriétés CSS qui commencent par un soulignement et à les remplacer par les propriétés préfixées spécifiques au navigateur. La fonction preg_match_all () trouve toutes les pièces du texte qui correspondent à l'expression régulière et place les correspondances en $ correspondant [0] en tant que tableau. Je n'expliquerai pas pourquoi $ Matches a l'index de tableau 0 car vous pouvez lire une explication claire sur la fonction du manuel PHP. Je voudrais plutôt me concentrer sur l'explication du flux de notre programme. Cette image explique le modèle de l'expression régulière:

Le tableau des préfixes contient un tableau de préfixes spécifiques au navigateur; Vous pouvez ajouter plus de préfixes, ou même en supprimer, selon vos besoins. Chaque définition de propriété dans $ correspond [0] sera transformée en un ensemble de propriétés CSS3 avec des préfixes spécifiques au navigateur. Le code itère chaque propriété et crée un tampon de résultat, remplace le soulignement dans la propriété par le préfixe spécifique du navigateur et pousse le résultat dans le tampon, puis remplace la propriété d'origine dans le texte par le contenu du tampon. Après avoir élargi les préfixes spécifiques du navigateur et ils ont été fusionnés dans un contenu $, le script supprime tout commentaire dans le contenu pour réduire sa taille. Cette image explique l'expression régulière pertinente:

Ensuite, une autre expression régulière supprime tout espace blanc inutile et de nouvelles lignes pour réduire davantage la taille du contenu.

Les pièces qui correspondent à l'expression régulière seront remplacées par des caractères à l'intérieur du support, par exemple:

Enfin, le CSS stocké en $ contenu est prêt à être envoyé. L'appel du premier en-tête () informe le navigateur que la sortie doit être traitée comme un fichier CSS. L'appel du deuxième en-tête () indique au navigateur que ce fichier expire en une heure, de sorte que le navigateur le mettra en cache pendant une heure et utilise la copie en cache au lieu de le demander à nouveau au serveur.

en utilisant le script

Je voudrais vous donner un exemple d'utilisation simple pour le script que nous venons de faire. Mettre le css.php dans votre répertoire CSS, ainsi que ces trois fichiers CSS. Le premier fichier est en tête.css:

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

Le deuxième fichier est central.css:

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

Le troisième fichier est Footer.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>

Regardez comment les propriétés CSS3 ont été écrites; Ceux qui auraient un préfixe spécifique au navigateur ne sont donnés qu'une seule fois et ont un soulignement devant eux. Ensuite, créez le fichier index.html qui utilisera les styles.

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

Regardez l'attribut HREF dans la balise de liaison. Chaque nom de fichier CSS est séparé par un tuyau.

Conclusion

Dans cet article, je vous ai montré comment automatiser certaines manipulations courantes de CSS en utilisant PHP. Le script repose fortement sur les expressions régulières, un langage très puissant qui nous permet de manipuler la chaîne comme bon nous semble. Dans l'ensemble, le script est très simple mais il offre de nombreux avantages. Essayez de l'utiliser dans votre prochain projet. Image via 1xpert / shutterstock

Des questions fréquemment posées sur le préfixateur et le compresseur CSS3

Quel est le but d'un préfixer et compresseur CSS3?

Un préfixeur et compresseur CSS3 est un outil qui aide à optimiser les fichiers CSS pour de meilleures performances et compatibilité. Il ajoute automatiquement les préfixes des fournisseurs aux propriétés CSS pour s'assurer qu'ils fonctionnent sur différents navigateurs. La fonction du compresseur réduit la taille des fichiers CSS en éliminant les caractères inutiles, améliorant ainsi la vitesse de chargement de votre site Web.

Comment fonctionne un préfixateur et compresseur CSS3? Il ajoute ensuite ces préfixes automatiquement, vous faisant gagner du temps et des efforts de le faire manuellement. La fonction du compresseur fonctionne en supprimant des caractères inutiles comme les espaces, les commentaires et les ruptures de ligne de vos fichiers CSS, réduisant ainsi leur taille.

Pourquoi dois-je utiliser un préfixateur CSS3 et un compresseur? Il garantit que vos propriétés CSS fonctionnent sur différents navigateurs et réduisent la taille de vos fichiers CSS, améliorant ainsi la vitesse de chargement de votre site Web. Cela vous évite également le temps et l'effort d'ajouter manuellement les préfixes des fournisseurs et de compresser vos fichiers CSS.

y a-t-il des inconvénients à utiliser un préfixer et un compresseur CSS3?

Bien qu'un préfixeur et compresseur CSS3 offre de nombreux avantages, il est important de noter qu'il n'est pas toujours nécessaire. Certains navigateurs modernes ne nécessitent plus de préfixes de fournisseurs pour certaines propriétés CSS. De plus, la surexpression de vos fichiers CSS peut les rendre difficiles à lire et à maintenir.

Comment puis-je utiliser un préfixer et un compresseur CSS3?

Pour utiliser un préfixateur et un compresseur CSS3, vous devez simplement saisir vos fichiers CSS dans l'outil. Il ajoutera ensuite automatiquement les préfixes du fournisseur nécessaire et compressera vos fichiers. Certains outils offrent également des fonctionnalités supplémentaires telles que la minification et l'optimisation.

Puis-je utiliser un préfixateur et un compresseur CSS3 avec d'autres préprocesseurs CSS?

Oui, vous pouvez utiliser un préfixe et compresseur CSS3 avec d'autres préprocesseurs CSS comme Sass ou moins. L'outil ajoutera simplement les préfixes du fournisseur nécessaire et compressera les fichiers CSS sortis.

Quels sont les bons outils de préfixer et de compresseur CSS3?

Il existe de nombreux bons outils de préfixer CSS3 et de compresseur disponibles, y compris l'autoprefixeur, le PostCSS et le disque CSS. Ces outils offrent une gamme de fonctionnalités et peuvent être utilisés avec divers préprocesseurs CSS.

Comment puis-je choisir le bon outil de préfixer et de compresseur CSS3?

Lors du choix d'un outil de préfixateur CSS3 et de compresseur, considérez des facteurs comme la facilité d'utilisation, la compatibilité avec votre préfixateur CSSS et la gamme des fonctionnalités offertes. Vous devriez également considérer les performances et la fiabilité de l'outil.

Puis-je utiliser un préfixateur et un compresseur CSS3 pour les grands fichiers CSS?

Oui, vous pouvez utiliser un préfixateur et un compresseur CSS3 pour les grands fichiers CSS. Cependant, gardez à l'esprit que le temps de traitement peut être plus long pour les fichiers plus grands.

est-il nécessaire d'utiliser un préfixateur et un compresseur CSS3 pour chaque projet?

Si vous devez ou non utiliser un préfixeur et un compresseur CSS3 pour chaque projet dépend des exigences spécifiques du projet. Si la compatibilité et les performances du navigateur sont des considérations importantes, l'utilisation d'un préfixeur et d'un compresseur CSS3 peut être bénéfique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!