changer dynamiquement CSS avec un framework sans gras?

Question

J'essaye d'utiliser des shortcodes dans mon CSS afin de pouvoir les changer tous à la fois avec des variables sans gras.

Par exemple à partir de mon config.ini:

accentColor=8f0

Et dans mon style.css serait:

.addToCart:hover {
    background-color: #[[accentColor]];
}

dans mon fichier de vue header.htm:

<link rel="stylesheet" href="{{@BASE}}/ui/css/style-user.php">

style-user.php:

<?php
    header("Content-type: text/css; charset: UTF-8");
    $fullpath='http://'.$_SERVER['SERVER_NAME'].'/ui/css/style.css';

    if(file_exists('style.css')){
        $search=array('[[accentColor]]','[[protectPhotoOpacity]]','[[protectPhotoPosition]]'); $replace=array('{{ @accentColor }}','0.3', '30');
        echo str_replace($search,$replace,file_get_contents($fullpath));
    } else {
        echo "body {background-color: white;}";
    }
?>

Il trouve bon style.css et les autres changements de shortcode fonctionnent. {{@accentColor}} ne fonctionne pas dans le fichier style-user.php mais fonctionne correctement dans header.htm. Qu'est-ce que je rate?

Y a-t-il une meilleure façon de procéder?

EDIT: J'ai mis le .php dans le dossier racine au lieu du dossier / ui / css. Voici ce que j'ai fini avec:

<?PHP
    $f3=require('lib/base.php');
    $f3->config('options.ini'); $f3->set('CACHE',TRUE);
    echo Template::instance()->render('ui/css/style.css','text/css');
?>

Et puis dans le fichier css, utilisez simplement les variables de modèle {{@accentColor}} comme d'habitude.

Answer 1

Il trouve bon style.css et les autres changements de shortcode fonctionnent. {{@accentColor}} ne fonctionne pas dans le fichier style-user.php mais fonctionne correctement dans header.htm. Qu'est-ce que je rate?

Je suppose que vous utilisez le système de modélisation de F3 pour le rendu header.htm. Il semble que vous n'utilisez pas le système de modèles pour rendre le fichier CSS.

Je proposerais d'utiliser le système de modèle et les variables de modèle (comme {{ @accentColor }}). Ensuite, vous pourrez mettre en cache les fichiers de modèle analysés et / ou les fichiers CSS résultants pour des raisons de performances.

Votre code peut ressembler à l'extrait de code suivant:

<?php

// Setup F3 here.
// You could utilize the routing system or skip routing and return only the CSS file.
// I would prefer the routing system with a cached route.

echo Template::instance()->render(
    'style.css', // Your CSS file stored in one of the `UI` directories
    'text/css',
    [
        'accentColor' => '#123456', // Specify variables or forward variables from a configuration file
    ]
);

Bien sûr, il existe d'autres solutions. Je voudrais soit enregistrer une route CSS ou fournir un fichier PHP qui bootstrap F3 pour rendre le fichier CSS avec vos variables.