avalak

Есть prefixr.com (кстати что с ним?). У многих редакторов есть плагины, использующие его api. + консольные утилиты prefixr

Правильно использовать хук wp_enqueue_scripts.

Если я правильно понял что вы хотите получить, то можно использовать table-cell (пример)
ie 8+ caniuse

Как-то так.

Есть Kube.

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

Дим, я так и не понял в чём вопрос и что ты хочешь получить в итоге/в чём проблема. Обнови пример что ли (jsfiddle / plunker)
В инспекторе (chrome, firefox, opera) разницы между вёрсткой нет, на глаз тоже всё нормально.
Если хочешь единообразного отображения используй normalize.css

У Prefixr мощная поддержка вендорных префиксов.

Сомневаюсь что это будет проще, но ещё есть вариант с canvas. Мне очень понравился калькулятор скилов из Path Of Exile. Правда реализовывать придётся самому.

Не знаю пригодится ли вам, но для «резиновой» (min-width max-width) вёрстки можно сделать так.

Про кисти ничего посоветовать не могу, но для создания спрайта можно использовать imagemagick.
symbols.txt — символы
fontawesome-webfont.ttf — шрифт

Архив с примером

#!/usr/bin/env bash

convert \
  -size 400x50 \
  -background transparent \
  -font font/fontawesome-webfont.ttf \
  -pointsize 25 \
  -fill black \
  -gravity South \
  label:@text/symbols.txt \
  -flatten out/sprite.png

Если я вас правильно понял, вам нужен примерно такой эффект.

Навскидку есть три очевидных решения:
— скрипт который будет выдавать готовое изображение. Просто и эффективно.
— js/css box-shadow с inset. Есть ограничения.
— js/svg. Крайне ограниченное применение.

Не уверен что правильно вас понял, но вот вариант на div'ах.