Подготовить пользовательские css к сгенерированным файлам CSS

Question

вот моя проблема:

Я работаю с WordPress, и у меня есть простой короткий код.

Пользователь имеет возможность выбирать цвет для каждой кнопки, которую они создают, а также цвет, когда кнопка зависает.

У меня есть пользовательский css <style> тег, сгенерированный для каждой кнопки, он работает нормально, но есть только одна проблема, он создает много тега <style> на странице и при использовании IE9 (который имеет ограничение 31) стиль кнопки не применяется.

Css генерируется с помощью php с моей функцией shortcode.

Я ищу способ генерации css в динамический файл css. Если все <style> помещены в один файл css, он должен работать с IE, но я не знаю, как это сделать.

Любая помощь будет оценена по достоинству.

Answer 1

Вы можете решить с JQuery:

function isIE() { 
    return (navigator.userAgent.toLowerCase().indexOf('msie ') != -1) || (!!navigator.userAgent.match(/Trident.*rv[:]*11\./)); 
} 

$(function() { 
    if (isIE()) { 
     //merging all the content in your generated styles 
     var styles = $("style").text(); 
     //getting rid of the many unneeded styles 
     $("style").remove(); 
     //Putting back all the styles into your document 
     $("head").append("<style>" + styles + "</style>"); 
    } 
}); 

Идея заключается в том, чтобы объединить стили в единый текст, удалить все стили, а затем создать один тег стиля вместо них. Вам это нужно только для IE, поэтому я добавил функцию, с помощью которой вы можете проверить, является ли это Internet Explorer, и если да, то слияние стилей.

Answer 2

Простейшим решением было бы создать один раздел пользовательского стиля в заголовке ваших страниц, предполагая, что они динамически генерируются. Вы должны включить ваши основные файлы CSS перед этим разделом, чтобы иметь возможность переопределять значения.

Answer 3

если вы тоже нравится, вы можете отправить все пользовательские CSS в новый файл, используя «FOPEN()»:

function CreateCustomCSSFile(){ 
$file = fopen("wp-content/themes/your_theme/css/your_stylesheet_custom_file.css","w"); // change the target path as you like 
$Color1 = '#eee'; // your custom color 1 - replace the Hex value with the custom field input 
$Color2 = '#000'; // your custom color 2 - replace the Hex value with the custom field input 
// getting the custom values into css 
$TheCSSLayout = ' 
.someclass1 
{ 
    background: ' . $Color1 . '; 
} 

.someclass2 
{ 
    background: ' . $Color2 . '; 
} 
'; 
fwrite($file, $TheCSSLayout); // writing to the file 
fclose($file); // closing the file 
} 
CreateCustomCSSFile(); 

вставить его в файл function.php и вызвать новый файл конец css включает файлы в голову, чтобы они перезаписывали настройки css по умолчанию.