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

Question

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

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

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

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

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

CSS генерируется с помощью PHP с моей функцией шорткода.

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

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

1

css html internet-explorer php stylesheet

Решение

Другие решения

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

0

если вам тоже нравится, вы можете отправить все пользовательские 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 по умолчанию.

0

Источник

Accepted Answer

Вы можете решить это с помощью 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, и если да, то объединить стили.

0