以前ブログで書いた、cssの待望の新機能「target-current,before,after」これらは、「scroll-target-group」というCSSの新機能（現時点では、まだ実験段階）です。
前回のブログ :
CSSだけでスクロール連動UI
この機能は、今現在、GoogleChromeでしか動かない（MicrosoftEdgeも含む）のですが、Safariで動かないと業界標準とは言えません。
でも、まだ世の中にPolyFill（動作補完ライブラリ）が存在しないということで、無いなら作ってしまえがモットーの自分が作っておきました。
Github
早速、ソースコードも含めて、以下にGithubのリンクを貼り付けておきます。
煮るなり焼くなり、お好きに調理してくだされ。
https://github.com/yugeta/css_scroll_target_polyfill
デモ
ついでに、GithubPagesにもデモを用意したので、こちらで動きを確認してくだされ。
https://yugeta.github.io/css_scroll_target_polyfill/sample/test/
技術内容解説
週末の貴重な時間を使って、半日ぐらいで構築できましたが、そもそものscroll-target-groupという機能を理解していないといけないので、そこの学習も含めて少し苦労してしまいました。
この機能を利用するには、README.mdにも書いてありますが、scriptタグをHTML内に貼り付けるだけという極めて簡単な仕様にしておきました。
そして、cssに書かれた設定に従って、どのブラウザでも同じ挙動になるようにしておいたので、困る人は少ないでしょう。
Polyfill対象ブラウザとそうでないブラウザの判別
そもそも、GoogleChromeには無用のプラグインなので、ライブラリではそれを判別して、処理をするかどうかを初期に決めています。
// ブラウザのtarget機能のサポートを判別
get support_browser(){
return (
CSS.supports("selector(:target-current)")
&& CSS.supports("selector(:target-before)")
&& CSS.supports("selector(:target-after)")
)
}
たったのこれだけですが、スタイルシートでのサポートを確認できる便利なJSスニペットなので、知っておくと他のサービス構築などにも有効に使えます。
target-@@の挙動
一番仕様設計で迷ったのが、この挙動設定です。
AIと相談してみたところ、クラス名で判別するのをひたすらに進められたんですが、タグ属性で設置することに決めました。
a[css-polyfill-target="current"]
こんな感じで、"css-polyfill-target" という属性値の値に、"current", "before, "after" のどれかを入れるという設計です。
クラス名で、target-currentとすると、万が一にもこのクラスメイを別の機能で使うことが無いと言い切れませんし、
そもそも、class名の切り替えは、classList.add , removeなどで簡単にできるとはいえ、".target-current"と、".target-before"などが、混在するリスクがゼロではありません。
ということで、属性で値切り替えにした方が確実だし、属性名もカブりを考えにくくすることが可能なので、コレにしました。
仮にカブりが判定される場合は、util.js内の記述を変えてやるだけで、対応できるのも我ながらいい仕様にできたと思います。
css操作
Javascriptで、document.styleSheetsとして、スタイルシートのデータを取得しても、対象外ブラウザには、target-currentなどの擬似セレクターは存在しません（読み込み時に切り捨てられます）。
なので、cssの文字列を全て取得して、その中から正規表現で、セレクタから、スタイルの内容を取得して、新たに、styleタグを設置して、その中にコピーされたスタイルを設置する仕様にしました。
少し複雑なのですが、JavascriptでCSS操作を行う処理が、他サービスでも汎用性高く使えるため、css.jsをテンプレートとして使うイメージも生まれました。
ちなみに、一番苦労したのは、"insertRule()"の命令で、どうしても値が反映されなかったんですが、ここで指定するスタイルは、複数同時ではなく、1つずつセットしないといけない仕様でした。
これを知らずに、複数の値を１回でセットしようとして、数時間を失ったんですね・・・（アホ）
イベントセット
cssがセットできたら、それに見合うために、属性値を切り替えるスクロールイベントをセットすれば完成です。
スクロールイベント発火時に、before , current , afterの値をそれぞれ切り替えてあげると、見事に、Polyfill完成です。
あとがき
このPolyfillライブラリは、おそらく今後、ホームページ制作でかなり使い倒すであろうことが想定できます。
だって、スクロール時に色々なアニメーションをさせたいとか、面白効果などを表現するときに、scrollライブラリなど使わなくても、このpolyfillをセットしておくだけで、様々な効果が作り出せそうですもんね。
いや〜、我ながらいいもん作った・・・ので、今日はビールでも飲みながら、別のプログラムを作るとするか・・・
0 件のコメント:
コメントを投稿