Share
Les feuilles de style en cascade sont un langage de feuille de style de présentation. En ce sens, il n’a pas beaucoup de fonctionnalités que de nombreux développeurs veulent satisfaire leur instinct de programmeur. Aujourd'hui, nous allons voir comment suralimenter votre CSS en mettant un peu de PHP sous le capot..
Utiliser CSS pour alimenter un site Web est une exigence du Web contemporain pour les sites Web autres que Flash - et pour cause. CSS est puissant. Il peut faire ou défaire un site Web (bien que généralement IE6 est la rupture). Même avec son utilité, les concepteurs et les développeurs ont souhaité tirer davantage de ce langage depuis sa création il y a plus de douze ans avec la recommandation CSS de niveau 1. Aujourd'hui, nous allons examiner quelques moyens de Supercharge ton CSS avec PHP sous le capot.
Remarque: je ne vais pas plaider pour ou contre le concept de variable CSS et / ou de constantes CSS. Cet article est écrit en partant du principe que vous prendrez une décision éclairée à leur sujet une fois présenté ce qu’il peut faire. Cet article explique comment les configurer et les utiliser, mais ne traite pas de la controverse dans son intégralité..
Avant que la suralimentation ne commence, nous devons nous assurer que vous avez les conditions requises pour le faire. Nous allons examiner deux méthodes pour que votre CSS fonctionne avec PHP: une méthode courte et élégante, et une méthode un peu plus élégante et moins perceptible par l'utilisateur. Les deux ont les mêmes exigences de base qu'un serveur sous PHP. La version plus élégante nécessite un peu plus:
Les navigateurs Web ne sont pas très pointilleux sur les extensions de fichier s’agissant de la balise de lien HTML. Ce qui les préoccupe, ce sont les données d’en-tête qu’il reçoit pour ce fichier. Cela signifie que vous pouvez lier un fichier * .php aux données d'en-tête appropriées à la place d'un fichier * .css, et le navigateur interprétera le résultat comme s'il s'agissait d'un fichier CSS standard. Pour ce faire, ajoutez l'en-tête PHP qui indique à Apache de générer le fichier en tant que CSS:
Ensuite, liez simplement le fichier PHP comme vous le feriez normalement:
Maintenant que vous avez terminé, vous pouvez, en théorie, passer à la section suivante du didacticiel, qui traite des variables et des constantes CSS, si vous le souhaitez. Cependant, toute personne consultant votre source verra que vous avez un fichier PHP dans lequel un fichier CSS devrait se trouver. De plus, le fait que le navigateur interprète correctement le résultat ne signifie pas qu'il fera nécessairement d'autres choses, telles que la mise en cache du fichier dans le navigateur. Pour résoudre ce problème, nous passons à la version légèrement plus élégante.
Apache est livré avec un grand nombre de trucs .htaccess. C'est l'un d'eux. Nous allons dire à Apache d’interpréter tous les fichiers CSS d’un dossier en tant que fichiers PHP, et le navigateur Web (ainsi que vos utilisateurs) ne savent généralement pas que vous le faites. La première chose à faire est de placer les données d'en-tête dans votre fichier CSS, comme dans la méthode simple:
Ensuite, au lieu d'enregistrer le fichier CSS en tant que fichier * .php, vous l'enregistrez en tant que fichier * .css et vous le placez dans un dossier pour CSS (dans notre exemple, ~ / css /). Ceci fait, créez un fichier * .htaccess dans ce dossier et ajoutez ce qui suit:
AddHandler application / x-httpd-php .css
Cet extrait indique à Apache d'interpréter tous les fichiers CSS du dossier contenant le fichier * .htaccess avec le gestionnaire de script PHP. Si vous n’avez pas la possibilité d’ajouter cela à un seul dossier ou si vous avez besoin que ce soit sur l’ensemble du serveur, vous pouvez aussi l’ajouter au dossier. httpd.conf fichier de configuration du serveur pour Apache. Pour ce faire, vous voudriez ajouter l’extrait précédent juste en dessous du groupe de AddType et AddHandler déclarations (comme celles de l'un de mes serveurs):
Application AddType / x-httpd-php .php .php3 .php4 .php5 Application AddType / x-httpd-php-source .phps AddHandler script cgi .cgi .pl
Rappelez-vous simplement que si vous ajoutez cela à votre httpd.conf fichier de configuration du serveur qui CHAQUE Le fichier * .css sur le serveur doit maintenant être précédé de l'en-tête PHP pour text / css. C’est pourquoi je vous recommande de l’ajouter via .htaccess
D'après l'enquête sur la performance moyenne des 100 meilleurs blogs, en moyenne:
Nous avons effectué un test sur les 100 meilleurs blogs pour les fichiers CSS externes et leur taille totale. Le blog Top 100 utilise en moyenne 4 fichiers CSS externes (@imports inclus) avec une taille de fichier totale moyenne de 43,1 Ko (non compressée). Le nombre de fichiers CSS externes allait de 1 à 18. La taille totale des fichiers CSS allait de 0,2K à 307K. Notez que cette analyse n'inclut pas les CSS internes dans les fichiers (X) HTML. Il inclut les fichiers CSS imbriqués appelés avec les directives @import.
C'est beaucoup de CSS. Pourquoi est-ce? Souvent, c'est parce que le CSS est livré non compressé et non optimisé. Le suspect le plus probable est une surcharge de CSS et un code mal entretenu. Une option populaire pour améliorer la maintenabilité du code consiste à implémenter des variables CSS via PHP.
Cela signifie qu'au lieu d'avoir un CSS comme celui-ci (oui, cela produirait une aberration de la conception, mais il est bon pour illustrer ce point):
corps couleur: # 000; background: #fff; taille de police: 10px; div # content background: #ccc; taille de police: 1.1em; div # sidebar color: #fff; arrière-plan: # 000; taille de police: 1.0em; div # footer color: # 555; arrière-plan: #ccc;
Vous pourriez avoir CSS comme ceci:
Couleur du corps: ; Contexte: ; taille de police: px; div # content background: ; taille de police: px; div # sidebar color: ; Contexte: ; taille de police: px; div # footer color: ; Contexte: ;
Notez que les noms de variable longs sont uniquement à des fins d'illustration. Évidemment, ces variables peuvent être aussi longues ou aussi brèves que vous le souhaitez, et des variables plus courtes permettent de réduire la taille des fichiers..
Dans l'exemple ci-dessus, nous avons utilisé des variables de base pour configurer un jeu de couleurs monochrome pouvant ensuite être utilisé sur le site Web dans d'autres styles. Ces variables auraient facilement pu être interchangées avec $ color01, $ color02, $ color03, etc. pour produire des effets similaires. Les clients demandent souvent aux concepteurs et aux développeurs Web front-end "Hé, pouvez-vous assombrir tout le texte?" ou "Pouvez-vous rendre tout le texte un peu plus gros?" L'utilisation de variables telles que celle-ci ne constitue pas toujours la meilleure solution, mais elle réduit souvent le temps de maintenance lorsque de nombreux systèmes de templates et plateformes de blogs (WordPress, Moveable Type, Moteur d'expression, etc.) ou des CMS d'entreprise (Drupal, Joomla, Bitrix, etc.) sont utilisés. ).
Une autre méthode de stockage des variables consiste à stocker les données dans des tableaux associés (méthode préférée), ce qui produit un code plus proche de ce qui suit:
'# 000', 'color02' => '#fff', 'color03' => '#ccc', 'color04' => '# 555', 'baseTextSize' => '10'); ?> corps couleur: ; Contexte: ; taille de police: px; div # content background: ; taille de police: px; div # sidebar color: ; Contexte: ; taille de police: px; div # footer color: ; Contexte: ;
Une fois que vous avez paramétré l'utilisation de PHP avec votre CSS, vous pouvez effectuer des opérations simples, telles que des calculs. Supposons que vous souhaitiez configurer un système dans lequel vous fournissez un ensemble de DIV à l'écran, chacune contenant un type d'élément différent. Chaque type d'élément (c'est-à-dire img, p, blockquote, etc.) a une hauteur et une largeur uniques contrôlées via CSS, et vous souhaitez que la quantité de marge soit basée sur ces valeurs, comme suit:
Dans ce scénario, vous souhaitez configurer une grille normalisée contenant trois types d'éléments différents (img, p et blockquote) encapsulés dans deux conteneurs différents (div et li). Chaque DIV doit avoir une largeur de 550 pixels et une hauteur de 250 pixels, chaque LI doit avoir une largeur de 600 pixels et une hauteur de 300 pixels, et chaque type d'élément a une hauteur et une largeur différentes. Le positionnement des éléments à l'intérieur doit être au point mort. Au fil du temps, les hauteurs et les largeurs des différentes DIV et LI et des éléments devront probablement être modifiées. Vous pouvez entrer manuellement le montant de la marge pour chacun des différents éléments et / ou utiliser des informations de classe supplémentaires sur les conteneurs DIV pour ajouter le montant de remplissage approprié, mais cela n’est pas très utile pour les changements rapides, comme ceux souhaités par quelqu'un qui le souhaite. prototypage dans le navigateur ou qui possède 200 de ces différents éléments pour lesquels il faudrait modifier des données.
Tout d'abord, nous configurons le contenu XHTML que nous allons styler de la manière suivante:
Lorem ipsum dolor sit amet tellus.
Etiam quis nulla pretium et.
Lorem ipsum dolor sit amet tellus.
Etiam quis nulla pretium et.
Ensuite, nous configurons le fichier PHP / CSS que nous allons utiliser pour styler le XHTML. C’est ici que nous déclarons les tailles standard des différents éléments à utiliser sur toute la page..
Accentsconagua
'550', 'hauteur' => '250',); $ liData = array ('width' => '600', 'height' => '300',); $ blockquoteData = array ('width' => '440', 'height' => '100'); $ imgData = array ('width' => '450', 'height' => '150'); $ pData = array ('width' => '480', 'height' => '130'); ?> Ensuite, nous continuons le fichier PHP de l'étape 2 et utilisons les variables que nous avons définies dans les calculs. De plus, nous définissons les valeurs calculées MarginX et MarginY des différents éléments afin de réduire le nombre de calculs nécessaires..
div largeur: px; la taille: px; li largeur: px; la taille: px; div blockquote width: px; la taille: px; marge: px px; div img width: px; la taille: px; marge: px px; div p largeur: px; la taille: px; marge: px px; li blockquote width: px; la taille: px; marge: px px; li img width: px; la taille: px; marge: px px; li p largeur: px; la taille: px; marge: px px;
Cela nous permet maintenant de modifier la taille des éléments une fois en haut du fichier et de ne pas recalculer 12 valeurs de marge (24 si les valeurs de marge étaient asymétriques). Comprenez que je ne suggère pas que cela sera utilisé dans chacun de vos projets, mais ce type de technique présente des avantages certains par rapport à la méthode CSS "statique" standard..
Comme mentionné précédemment, CSS peut devenir assez gros. Une chose que vous pouvez faire pour réduire la taille de CSS est de compresser automatiquement vos fichiers CSS. Pour ce faire, vous avez deux options: directement depuis Apache en utilisant mod_gzip / mod_deflate ou en utilisant les méthodes de compression intégrées de PHP, ce que nous allons faire ici.
À l'intérieur de notre fichier CSS, nous avons déjà un extrait de PHP qui configure l'en-tête:
Tout ce que nous avons à faire maintenant, c’est d’ajouter une seule ligne de code en définissant un tampon de sortie pour utiliser ob_gzhandler avant la déclaration d’en-tête, comme ceci:
Il convient de noter qu’il existe d’autres manières de réaliser la compression gzip et qu’elles présentent toutes des avantages et des inconvénients. Ma méthode préférée utilise mod_deflate comme mentionné précédemment, mais tous les concepteurs et développeurs ne disposent pas de cette option..
L'ajout d'une logique de programmation à un langage de feuille de style n'a rien de nouveau. De nombreux sites Web déterminent les feuilles de style qu'ils utilisent en fonction de l'URL, du statut de connexion ou même de la date. Voici un exemple simple pouvant s’appliquer facilement aux blogs et aux sites de commerce électronique (entre autres). Supposons que vous avez une balise h1 remplacée à l'aide de la méthode de remplacement d'image Phark décrite par le code CSS suivant:
h1 largeur: 300px; hauteur: 80px; retrait du texte: -9999px; background: url (images / logo.png) no-repeat;
En ajoutant un peu de PHP dans le mélange pour déterminer la date de chargement du CSS, vous pouvez ensuite spécifier une image différente pour les vacances, comme Google le fait souvent avec ses Google Doodles (bien qu'ils utilisent une solution technologique différente pour le faire):
h1 largeur: 300px; hauteur: 80px; retrait du texte: -9999px; fond: url () non répété;
Ceci est juste un exemple super simple. Votre CSS n'attend que d'être amélioré par PHP. Ce que vous faites avec cela peut varier d'une personne à l'autre. Une de mes utilisations personnelles est de l’utiliser comme moyen d’obscurcir et d’incorporer des fichiers @ font-face à l’aide de chaînes d’URI de données et de vérifier si le référent demande le fichier de manière similaire aux éléments de technologie utilisés par Typekit:
@ font-face font-family: FontName; src: local ("FontName"), url () format ("opentype"); L'utilisation de variables en CSS, quels que soient le pour et le contre, est un sujet controversé depuis des années. Comme je l'ai dit au début de cet article, je ne plaiderai pas pour ou contre le concept de variables CSS ou de constantes CSS. Certains concepteurs et développeurs très respectés se sont prononcés contre, alors que d'autres l'ont défendu. J'espère, dans l'intérêt d'un meilleur Web, qu'une solution efficace basée uniquement sur CSS se produira plus tôt que plus tard. En attendant, ceux d’entre nous qui supportent les variables et constantes CSS peuvent compter sur nos langages côté serveur tandis que ceux qui ne les supportent pas continueront tout simplement comme d’habitude.
Je suis toujours à la recherche de moyens nouveaux et novateurs de suralimenter mon CSS avec PHP. Quels sont vos scénarios d’utilisation préférés pour mixer CSS et PHP??
