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

Ref.

HEX8桁に対応したカラーコードコンバータ（8-digit HEX converter）