0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

CSS内のカラーコード8桁をRGBAに一括変換

Last updated at Posted at 2019-10-08

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)

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?