Как сжатый css сделать нормальным

Добавил пользователь Дмитрий К.
Обновлено: 01.09.2024

Я работаю с изображениями, и я столкнулся с проблемой соотношения сторон.

Как видите, height и width уже указаны. Я добавил правило CSS для изображений:

но big_image.jpg появляется width=500 и height=600 . Как я могу установить изображения для изменения размера, сохраняя при этом их соотношение сторон.

это заставит изображение сжиматься, если оно слишком велико для указанной области (как недостаток, оно не будет увеличивать изображение).

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

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

это решение говорит браузеру отображать изображение с максимальной доступной шириной и регулировать высоту в процентах от этого ширина.

С помощью решения fancier вы сможете обрезать изображение независимо от его размера и добавить цвет фона, чтобы компенсировать обрезку.

для строки, задающей отступ, необходимо рассчитать соотношение сторон изображения, например:

Итак, верхняя прокладка = 34.37%.

Я боролся с этой проблемой довольно трудно, и в конечном итоге пришел к этому простому решению:

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

Ура.

свойство background-size-ie>=9 только, но если это вас устраивает, вы можете использовать div с background-image и set background-size: contain :

теперь вы можете просто установить размер div на все, что вы хотите, и не только изображение будет сохранять свое соотношение сторон, но также будет централизовано как по вертикали, так и по горизонтали в div. Просто не забудьте установить размеры на css, так как divs не имеют атрибута width/height на самом теге.

этот подход в отличие от ответа setecs, используя это, область изображения будет постоянной и определенной вами (оставляя пустые пространства горизонтально или вертикально в зависимости от размера div и соотношения сторон изображения), в то время как ответ setecs даст вам поле, которое точно соответствует размеру масштабированного изображения (без пустых пространств).

изменить: Согласно MDN background-size documentation вы можете имитировать свойство background-size в IE8 с помощью собственного фильтра объявление:

хотя Internet Explorer 8 не поддерживает свойство background-size, можно эмулировать некоторые его функции с помощью нестандартной функции ms-filter:

очень похоже на некоторые ответы здесь, но в моем случае у меня были изображения, которые иногда были выше, иногда больше.

этот стиль работал как шарм, чтобы убедиться, что все изображения использовать все доступное пространство, сохранить соотношение и не режет:

удалите свойство "высота".

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

дополнительно, чтобы ограничить превышения:

просто добавьте это в свой css, он будет автоматически сжиматься и расширяться с сохранением исходного соотношения.

нет стандартного способа сохранить соотношение сторон для изображений с width , height и max-width указан вместе.

поэтому мы вынуждены либо указать width и height чтобы предотвратить "скачки" страницы во время загрузки изображений, или использовать max-width и не указывать размеры для изображений.

определения width (без height ) обычно не имеет большого смысла, но вы можете попробовать переопределить height HTML-атрибут, добавив правило, как IMG в ваша таблица стилей.

см. также связанный Firefox 392261 ошибка.

установите класс CSS вашего тега контейнера изображений в image-class :

и добавить это вам ваш CSS таблицы стилей.

используя padding-top для установки высоты от ширины.
используя position: absolute чтобы поместить изображение в дополнение пространство.
используя max-height and max-width чтобы убедиться, что изображение не будет над родительским элементом.
используя display:block and margin: auto в центре изображения.

вы можете создать div следующим образом:

и используйте этот css для его стиля:

Размер ресурса можно уменьшить, удалив ненужные байты, например лишние пробелы, переносы строки и отступы. Сократив код CSS, вы ускорите загрузку, синтаксический анализ и отображение страницы.

Обязательно делайте резервную копию кода CSS перед сжатием!

Не валидный код CSS файлов может привести к ошибке.

С помощью нашего инструмента Сжатие CSS вы сможете уменьшить объем CSS , что повлияет на скорость его обработки.

Настало время естественного продвижения. Что может быть важнее для сайта, чем статья о нём на самых авторитетных тематических ресурсах?

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

Сохранение соотношения сторон предотвращает искажение изображений из-за растяжения или сжатия. Работая с CSS, вы, вероятно, рано или поздно попадете в ситуацию, когда вам будет нужно сохранить исходное соотношение сторон изображения. Очень часто для решения этой проблемы используется CSS-свойство background-image. Есть и более современный подход – это свойство object-fit.

В этом руководстве мы поговорим о таких значениях object-fit, как fill, cover, contain, none и scale-down. Мы обсудим, как они влияют на изображение в целом, а также как с их помощью можно обрезать и масштабировать изображения. Кроме того, вы изучите свойство object-position и увидите, как оно может смещать изображения.

Требования

Чтобы выполнить этот мануал, вам нужно знать, что такое свойства и значения CSS.
Вы должны уметь использовать декларации CSS, встроенные в свойство style.
Редактор кода.
Современный веб-браузер, поддерживающий object-fit and object-position.

Стандартное поведение изображений

В этом руководстве мы рассмотрим следующий код:

В результате он выдает:

Исходная ширина этого изображения – 1200 пикселей, высота – 674 пикселей. С помощью атрибута img этим параметрам были присвоены значения 600 и 337 – это половина исходных размеров с сохранением соотношения сторон.

Давайте теперь предположим, что у нас есть макет, который ожидает, что изображения будут иметь ширину в 300 пикселей и высоту в 337 пикселей:

В браузере этот код покажет следующий результат:

Полученное изображение больше не сохраняет исходное соотношение сторон и кажется визуально сжатым.

Как работает object-fit: fill

fill – это начальное значение object-fit. Оно не сохраняет исходное соотношение сторон.

Этот код выдаст в браузере следующий результат:

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

Как работает object-fit: cover

Значение cover сохраняет исходное соотношение сторон изображения, но изображение занимает все доступное пространство.

Данный код покажет в браузере такой результат:

В определенных ситуациях object-fit: cover может обрезать изображение. В этом примере некоторые части исходного изображения (слева и справа) не отображаются, потому что они не умещаются в пределах заявленной ширины.

Как работает object-fit: contain

Значение contain сохраняет исходное соотношение сторон, но при этом изображение не может выходить за пределы доступного пространства.

Этот код выдаст в браузере следующий результат:

В некоторых ситуациях object-fit: contain приводит к тому, что изображение не может заполнить все доступное пространство. Как вы видите в данном примере, над и под изображением есть пустое горизонтальное пространство, потому что заявленная доступная высота больше, чем высота масштабированного изображения.

Как работает object-fit: none

Значение none вообще никак не изменяет размер изображения.

Этот код выдаст в браузере следующий результат:

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

Как работает object-fit: scale-down

Значение scale-down будет отображать картинку либо как contain, либо как none – в зависимости от того, что именно выдаст наименьшее изображение.

Этот код выдаст в браузере следующий результат:

В этом примере изображение было уменьшено по принципу contain.

Как работают свойства object-fit и object-position

Если в результате object-fit выдает обрезанное изображение, оно по умолчанию будет центрировано. Для изменения точки фокуса можно использовать свойство object-position.

Вернемся к примеру object-fit: cover.

Теперь давайте изменим положение видимой части изображения по оси X, чтобы показать правый край изображения:

Этот код покажет следующий результат:

В этом примере фрагмент изображения с черепахой вырезан.

А теперь давайте посмотрим, что произойдет, если указать позицию за пределами доступного пространства:

В результате получится:

В этом примере изображение сдвинуто так, что мы видим только его левую часть. Кроме того, слева мы видим интервал, который составляет 20% доступного пространства.

Заключение

В этой статье мы рассмотрели доступные значения свойств object-fit и object-position.

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

Когда вы только начинаете изучать HTML/CSS, то главным моментом для вас является запомнить все или хотя бы основные теги, понять сам принцип их использования, разобраться со странным понятием "семантика" и уяснить, какие правила CSS и к каким селекторам применять, чтобы было красиво и функционально.

Однако, рано или поздно с этим этапом вы справляетесь. У вас уже есть сверстанный сайт или посадочная страница (Landing Page), и вы даже уже выложили ее на хостинг, купив доменное имя. Кстати, если вы еще находитесь в сомнениях по поводу того, какой хостинг выбрать, рекомендую присмотреться к hostiq.ua - очень достойный хостинг на просторах СНГ с отличной поддержкой (проверено на собственном опыте). У них есть даже малоизвестный тарифный план для студентов с ооочень хорошими условиями - так что не раздумывайте долго - покупайте хостинг вместе с доменом и воплощайте свои идеи.

Вы ломаете голову над наличием и расположением заголовков, узнаете о существовании тега и думаете, что бы такого в нем написать.

Дальше-больше: до вас добирается информация о том, что есть какие-то инструменты веб-мастеров, которые позволяют рассказать Гуглу и Яндексу о том, насколько прекрасен и полезен для потребителей ваш сайт. И вы устанавливаете код Google Analytics и Яндекс-метрики на свой сайт. И вам кажется, что это все или почти все.

Не тут-то было. Оказывается, что этим системам нужно еще создать файл robots.txt и показать, где лежит sitemap.xml. Вы находите в Интернете, как сделать оба эти файла и выкладываете их к себе на сайт.

Вроде бы уже все. Вы можете быть уверены, что ваш сайт будет проиндексирован и попадет в поисковую выдачу Google и Яндекс, т.к. именно эти 2 поисковика лидируют на просторах бывшего CCCP и нынешнего СНГ, где больше всего русскоязычного контента. Если ваш сайт ориентирован на другую аудиторию - с украинским, литовским или казахским языком и т.п., то вам придется еще озаботиться тем, чтобы разместить свой сайт в других, национальных каталогах.

Я не буду здесь касаться такого вопроса, как ссылочное ранжирование, т.е. размещение внешних ссылок на ваш сайт на других сайтах, но и так становится понятно, что казавшееся вам сложным создание и размещение сайта - это только надводная часть айсберга, т.к. работы по SEO - это бОльшая часть вашей головной боли после того, как сайт вы уже создали.

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

Шаг 1. Оптимизируем структуру разметки и CSS-стили

В HTML/CSS есть такой принцип - DRY (Don’t Repeat Yourself, или "не повторяй себя" в переводе с английского), который говорит нам о том, что если можно сделать разметку или стили минимальными, т.е. уменьшить их до оптимального количества, то нужно обязательно этим воспользоваться.

Что это значит? Если в разметке вы использовали слишком много div-ов или других элементов-оберток, подумайте, от чего вы можете отказаться, чтобы глубина вложенности кода была минимальной. Чаще всего этим страдают не только html-страницы, но и CMS-системы, в которых используются builder-ы - плагины наподобие Visual Composer, DIVI, Elementor и т.п. для WordPress. Они очень помогают легко сделать красивые страницы наподобие Landing Page в CMS, но при этом добавляют зачастую избыточную разметку и избыточные css-стили, т.к. неизвестно, какими из них вы реально воспользуетесь. Избавится от них нельзя, уменьшить - крайне сложно, т.к. при обновлении плагина подтянется новый файл стилей.

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

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

Есть вариант закомментировать их, а затем минифицировать полученный файл самостоятельно, чтобы в случае ошибки вернуть нужные классы.

В том, что касается CSS, то принцип DRY говорит о том, что все стили с подобными правилами нужно сгруппировать в один класс, а все отличия указывать в других классах, используя для этого 1-2 строки, а не 5-7. Например, если все заголовки на вашей странице должны быть оранжевыми и с выравниванием по центру, задайте для них общее правило, а в отдельных указывайте только размер, например, или размер (font-size):

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

Второй пример связан оформлением нескольких больших блоков с фоновыми картинками. Для них можно задать какой-либо общий класс .bg и несколько отдельных, в которых будет только ссылка на нужную картинку. Например, так:

Давайте дальше продолжим пытаться увеличивать скорость с помощью такого инструмента как Page Speed, который устанавливается как дополнение к Мазиле или Хрому. В принципе, наверное, зря я сказал в предыдущей статье, что этот плагин сам ничего для ускорения вашего проекта сделать не может, а только дает рекомендации на что именно следует обратиться свое внимание в первую очередь. Оказывается, и сам он на что-то может сгодиться.

Оптимизация и сжатие CSS в Page Speed

В прошлой статье мы подробно рассмотрели, как установить плагин Page Speed и как настроить оптимальным образом кэширование статических объектов (изображений, скриптов, стилей) в браузерах пользователей.

По сути, Пейдж Спид указывает на то, что практически все стилевые файлы, которые подгружаются в браузер посетителя вместе с web страницей моего блога, могут быть существенно оптимизированы (сжаты) для снижения их веса.

Но самое замечательное то, что всю работу по оптимизации (сжатию) сделает сам плагин. Посмотрите внимательно, в конце строчки с названием каждого неоптимизированного стилевого файла в его окне вам будет предложено посмотреть оптимизированную (сжатую) версию, а при желании и скачать максимально избавленный от мусора файлик таблиц каскадных стилей, который позволит, пусть и немного, но повысить скорость загрузки сайта.

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

Например, мой неоптимизированный style.css, идущий в комплекте с темой WordPress, состоял из почти 2000 строк, а после того как произошла оптимизация, удалось уменьшить количество строк в нем до 400, а сам файлик похудел на одну пятую своего изначального веса. Да и внешний вид прописанных в нем свойств после этого мне нравится гораздо больше.

Судите сами, так выглядел он до того, как мне удалось его сжать в Page Speed:

А так выглядит после его оптимизации:

Теперь подключаетесь по FTP, заходите в ту папку где у вас живет оригинальный файл таблиц стилей (см. путь в окне Page Speed) и заменяете старый не сжатый на новый (тот, который вам оптимизировали), не забыв дать ему такое же название, как и у оригинала, иначе таблицы каскадных стилей работать не будут. Усе, наслаждаетесь теми миллисекундами, на которые ускорилась загрузка вашего сайта.

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

Как объединить внешние CSS в один общий файл

Можно, конечно же, залезть в код плагина и отключить стили оттуда, но если вы обновите данное расширение, то возможно придется опять копаться во внутренностях плагина для повторного отключения. Для WordPress есть способ решить эту задачу централизовано, посредством известного вам файла functions.php, который должен присутствовать в папке с используемой вами темой оформления:

Если functions.php вы не найдете, то можете его просто создать, например, в редакторе Notepad++ и загрузить в папку с темой оформления WordPress. Но, наверняка, он все же найдется. В него вам нужно будет добавить небольшой кусочек PHP кода, такого вида:

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

И даже в случае обновления какого-либо из них ничего не изменится и вам не нужно будет повторно копаться в их коде. Ну, а т.к. они обновляются довольно часто, то таким хитрым способом отключения мы сильно сэкономим наше время и нервы.

Вроде бы все просто — отключили и все, можно про это забыть. Так, да не так. Предварительно ведь еще нужно найти в коде каждого WP плагина (в котором отключаем подгрузку стилей) тот регистр, который отвечает за их подключение.

Если вы внимательнее посмотрите на приведенный выше код, то заметите строки, где перечислены эти самые регистры:

Но с отключением у всех плагинов, имеющих свои собственные файлы стилевого оформления, вам нужно не забыть скопировать все содержимое этих самых отключаемых CSS, для объединения в общий файл из папки с темой оформления (у меня style.css называется). Понятно, да?

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

Но просто скопировав код из всех файликов плагинов, не забудьте еще об одной особенности работы каскадных таблиц стилей. Очень часто в них в качестве фона (с помощью свойства background, описанного тут) используются изображения (картинки), а вот путь до них чаще всего задают в относительном виде (тут читайте про URL, относительные и абсолютные ссылки).

Наверное, вы представляете о чем идет речь. Такое CSS свойство может, например, иметь такой вид:

Запись url(flags.jpg) означает, что картинку под названием flags.jpg нужно будет искать в той же самой папке, где находится сам файл таблиц каскадных стилей. Но дело в том, что когда вы скопируете содержимое всех стилей плагинов, то в них наверняка будут использоваться такие вот относительные пути до изображений.

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

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

Отключение внешних CSS для ускорения сайта на примере

Давайте теперь на конкретном примере я попробую показать, где нужно искать название регистра WordPress плагина, позволяющего отключить подгрузку его стилевого оформления. Собственно, для поиска нужного регистра нам нужен будет файлик с расширением PHP из папки с этим плагином. Вообще, все они живут в одной и той же папке:

Следовательно, именно здесь следует искать нужный каталог. Давайте рассмотрим для примера SyntaxHighlighter Evolved, т.к. у него довольно не типичная ситуация, заключающаяся в использовании нескольких файлов стилей в зависимости от того, какие варианты оформления вы выбрали в настройках этого плагина.

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

скопировать содержимое двух CSS файликов, которые мы планируем отключить: shCore.css и shThemeDefault.css , т.к. именно на них нам показывает пальцем Page Speed (ну, и в настройках у меня выбрана дефолтная тема, для которой, вполне логично, нужен CSS с соответствующим названием).

После этого открываете на редактирование:

Смотрим, какие именно регистры позволят нам отключить подгрузку стилей shCore.css и shThemeDefault.css . Копируем их названия (в моем случае это будут: syntaxhighlighter-theme-default и syntaxhighlighter-core ) и добавляем в functions.php (из папки с вашей темой оформления) две дополнительные строчки в описанный чуть выше кусочек кода:

И так повторяете для каждого плагина Вордпресса, у которых вы планируете отключить подгрузку стилей. Надеюсь, что вам все стало ясно и понятно. Если нет, то попробуйте перечитать еще раз, ибо тема не слишком уж и простая для понимания, хотя я и пытаюсь излишне не усложнять и не утяжелять текст (кому нужны подробности, ведь чем проще — тем лучше).

В итоге всех проведенных манипуляций у вас в functions.php будет целый список строк с регистрами плагинов, чьи стили нужно отключить. А в одном общем файле CSS, из папки с темой оформления, будет содержать весь стилевой код вашего сайта. Еще раз напомню — не забудьте сжать или, другими словами, провести оптимизацию style.css через Page Speed описанным выше способом.

Комментарии и отзывы (27)

Для Joomla! есть неплохой плагин CssJsCompress, правда мне его пришлось настраивать под себя некоторое время.

Юрий, а этот плагин будет работать для связки joomla+virtuemart?

О, большое спасибо за статью. Я как раз только-только начал осваивать Вордпресс.

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

Виктория: при объединении CSS файлов нужно будет поменять все относительные путь фоновых изображений на абсолютные (более подробно смотрите в этой статье). В этом может быть причина отсутствия фона. А вот почему поехал дизайн, затрудняюсь ответить.

Дмитрий, спасибо, я выбрала другой путь сжатия файлов CSS и Java — установила плагин WP Minify, и замечания в PageSpeed по этому поводу исчезли. А так почти все шаги, что в моих силах были, по Вашим советам сделала, спасибо еще раз!

Виктория: спасибо, еще не знаком с WP Minify, надо посмотреть и возможно, попробовать.

Все сделал как написано в статье — увеличились значения Page Speed с 79 до 86 =)))) Доволен как слон :)))

он формирует URL который вызывает чтение всех стилевых листов.

правильнее будет все же оптимизировать CSS и настроить кэширование.

Дмитрий: в css важную роль играет то, в каком именно месте прописать тот или иной параметр, чем ниже написан параметр, тем выше он имеет приоритет, осмелюсь предположить, что это и послужило причиной съехавшего шаблона

Наконец то нормальное описания сжатия стилей. Везде сталкивался только с тем, что блогеры копируют друг у друга. А здесь (в прочем как и всегда) все разложено по полочкам. Объединил пару стилей и уже дошел до 81/100. Очень радует. Проблема в том, что еще не везде нашел регистры, которые позволяют отключать стили плагинов.

Спасибо вам большое! статья супер! помогла. правда до сих пор каша в голове))

Спасибо за интересную инфу, но

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );

не помогает, если плагин выводит свои стили в футере.

В таком случае мне помог код:

к сожалению, данное расширение уже сложно найти, есть только сервис

у меня возник вопрос.

Смотрите, хочу css из плагинов, а именно cformsII перенести в style.css Гугл спид тест показывает что нужно оптимизировать 2 файла: cforms2012.css и calendar.css

НА этом сайте информация устарела

Google Page Speed сжимает CSS файлы слабо.

Неоднократно тестировал оба сервиса. Разница в размере кода после оптимизации: 7-8%.

Здравствуйте! Спасибо за сервис, бум пользоваться.

Но тема тоже обновляется и в functions.php придется все делать заново. Либо никогда не обновлять тему или вносить изменения в functions.php дочерней темы.

Засаду вижу в том, что некоторые плагины умеют менять внешний вид, т.е. стили. Даже как в приведенном примере.

И вот контент-менеджер решает поменять внешний вид какой-нибудь приблуды типа шаринга в соцсети. Чем это закончится непонятно.

Точнее понятно. Лезь в файл function и меняй строку на новый регистр.

Все бы ничего, но некоторые имеющие интерфейс настройки стилей собирают переменные в массив и эта штука не работает.

По крайней мере мне не удалось заставить ее работать для плагина Social share

Читайте также: