IEはさておき、Edgeまで透明度ありのHEX8桁使えないの!?
ChromeでWebアプリをゴリゴリ作り込んでいたら、IE、Edgeで透明色が表示されないことが判明。
HEX8桁のカラーコード(例 #3498dbdd)に対応していないらしいのですが、
今更、全てのCSS中を探して、逐一変換していくのはちょっと、、
こんなお間抜けは筆者だけなのかもしれませんが、
Webサービス等でも一括変換はしてくれなかったので、Pythonでサクッと一括変換コードを書きました。
なんてことはない正規表現です。
ファイル内の全てのHEX8桁 → rgba()
int(文字列, 基数)
で、○進数表記の文字列`を10進数の数値に変換できます。
import re
def hex2rgba(css):
# 正規表現で8桁HEX部分を探索
pattern = r'#[a-fA-F0-9]{8}'
m = re.findall(pattern, css)
for ccode in m:
r = int(ccode[1:3], 16)
g = int(ccode[3:5], 16)
b = int(ccode[5:7], 16)
a = int(ccode[7:9], 16)/255
rgba = "rgba({}, {}, {}, {})".format(r, g, b, a)
css = css.replace(ccode, rgba)
return(css)
お試し
hex2rgba("#3498dbdd")
# 'rgba(52, 152, 219, 0.8666666666666667)'
ついでにCSSファイル全部変換
あとはJupyterでも開いて、glob使ってサクッと全CSSファイルを一括変換
import codecs
import glob
from tqdm import tqdm
fn_list = glob.glob('hogehoge/static/app/css/*.css')
for fn in tqdm(fn_list):
with codecs.open(fn, encoding='utf-8') as f:
css = f.read()
css_mod = hex2rgba(css)
with codecs.open(fn, encoding='utf-8', mode='w') as f:
f.write(css_mod)
終盤で急にIE対応が必要になった際は、是非。
(そんな要件定義はイヤだ)
環境
- Python 3.6.5
- Windows10
- Jupyter notebook