まだ知らないCSSプロパティと出会える方法

　どうも！LSSです！！

CSSで色々やってみたい、と思った際に、

HTML5 & CSS3ポケットリファレンス [改訂新版] (POCKET REFERENCE)

↑こういう本を眺めています。

基本から教えてくれる入門書、というわけではなく、CSSで使えるプロパティにどういうものがあるか、どのように使うか、がどっさり掲載されている辞書的な本ですね^^

これ面白そう、って思ったら試してみて、使い方や組み合わせを考える感じです。

ところが。

CSSのプロパティというのは数が膨大で、この本に掲載されているものも数が膨大なのですが、それでも本が全てのプロパティを網羅しているわけではありません。

また、仮に「全てのCSSプロパティを網羅した本」があったとしても…CSSは進化しているので、時が経つとまた新たなプロパティが生まれたりもします。

プロパティ名でネット検索すると、解説しているサイトに行き当たり、そこで詳細を知る事もできますが、そもそも「まだ知らないプロパティの名前が分からない」という根本的な問題がありますねｗ

と、ふと、「あるHTML要素に対して設定可能なプロパティの一覧」をJavaScriptで取得する方法を思いついたので、試してみました！

CSSプロパティ一覧

↑ずらーっと並んでいるのがCSSプロパティ一覧です。

それぞれリンクがかかっており、クリックすると別タブで「CSS」という文字とそのプロパティ名をキーワードにGoogle検索した結果ページが開きます^^

このスクリプトのコード

コード

<div id="gamen" style="width: 290px; height: 400px; overflow-y: scroll; background-color: #eeeeee; padding: 0.6em; border-radius: 5px;"></div>
<p>
<script>
txt='';
for(i in gamen.style){
 if(isNaN(i)){
  txti=i.replace(/[A-Z]/g,(a)=>{return '-'+a.toLowerCase();});
  txt+='<a href="https://www.google.co.jp/search?hl=ja&q=CSS+'+txti+'" target="_blank">'+txti+'</a><br/>';
 }
}
gamen.innerHTML=txt;
</script>
</p>

スクリプトの部分的な解説（自分用備忘録）

for(i in gamen.style){処理}

「gamen.style」というモノが持つ子要素のひとつひとつを、変数「i」に入れて子要素の個数分ループを回す書き方です。

処理の部分に書かれた内容を何回も繰り返し行います。

if(isNaN(i)){処理}

変数「i」が数字以外の場合のみ処理を行う、という判定部分です。

txti=i.replace(/[A-Z]/g,(a)=>{return '-'+a.toLowerCase();});

replaceは文字置換を行います。

例えば変数「i」が「borderWidth」だった場合。

CSSプロパティは途中に「-（ハイフン）」が入っている事がありますが、JavaScriptからCSSを制御する場合は「ハイフンの次の文字を大文字にして、ハイフンを削ったもの」を指定する必要があります。
つまりCSSプロパティ「border-width」はJavaScript上では「borderWidth」となるんですね。
このJavaScript上での名前を、普通のCSSプロパティ名に変えるために「途中に大文字があれば、それを小文字にしてその前にハイフンを入れる」という逆の処理を行い、CSSプロパティ名に変換しています。

ただし…

JavaScript特有のものであったり、あるいはSVG用のCSSも混ざっていたりするので、全てがCSSプロパティ名、というわけではありません。

つまり「ハズレ」も混ざっている、という事ですねｗ

また、見ている方のブラウザでこのスクリプトを走らせ、その結果を表示しているので、見ている環境によって結果は変化すると思います。

あと、根本的なところで…「わざわざ このスクリプトを使わなくても、しっかりプロパティ名一覧つきの解説サイトも存在する」というのがありますｗｗｗ

（強いてこのスクリプトの利点をあげると…クリックひとつでGoogle検索結果が出るので、そのサイトに依存しない様々な情報を調べる手間が少し減る、ぐらい？）

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^