あなたは、「順番が逆やん！」と思うだろう。
先日、scrollイベントを、CSSだけで、連携UIが作れるブログを紹介してから、
GoogleChromeでしか使えないので、自作のPolyfillライブラリを作ってから、
しばらくブログを書き終えて考えた時に。
あれ？CSSのscroll-target-groupについて、なんも深掘りしてないやん！
と言う事に気がついてしまいました。
確かに、これまでのブログを読んでくれた人は、なんとなく便利だけど、
一体どうやって使うの？？？
と、頭の中が謎解き状態になったに違いありません。
と言うことで、今回はCSSを簡単セットできるようになるための深掘りです。
どう、今更感ハンパないでしょ？
これ知ってから、前回までのブログを読んでもらった方がいいかも・・・
基本構造
多くの場合、以下のような構成になります
UL.menu > LI.item > A.link
HTMLで書くと、以下のような感じです。
<aside>
<ul class="menu">
<li>
<a href="#top">Top</a>
</li>
<li>
<a href="#content_1">Content-1</a>
</li>
<li>
<a href="#content_2">Content-2</a>
</li>
</ul>
</aside>
<main>
<section id="top">
ページ上部
</section>
<section id="content_1">
記事1
</section>
<section id="content_2">
記事2
</section>
</main>
[プロパティ] scroll-target-group
MDN :
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/scroll-target-group
このプロパティは、「スクロールマーカーグループコンテナー」の定義設定です。
値は以下の2つです。
- none
- auto
noneを使うぐらいなら書かなくてもいいので、実質的に、autoしか使わないと言う事です。
スクロール連動して、UI連動させる擬似クラスをセットする親（上位）の要素にセットします。
基本構造のUL（またはaside）の部分にこのプロパティをセットすることになります。
[擬似クラス] :target-current
MDN :
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Selectors/:target-current
Aタグのページ内ハッシュリンク（#...と書くヤツ）で、スクロール位置に該当するエレメントを指定した状態の要素にこの擬似クラスをセットすると、
そのエレメントが、スクロールで画面に入った状態の時（厳密には、スクロールグループ内で基準ライン（画面中心位置）に一番近い時に適応できます。
[擬似クラス] :target-before, :target-after
MDN :
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Selectors/:target-before
MDN :
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Selectors/:target-after
CSSでお決まりの、BeforeとAfterですが、上記のtarget-currentの前後要素と言う形で個別にセットすることができます。
特に前後が関係ない場合は、:target-beforeと:target-afterを同時にセットしておくといいでしょう。
あとがき
いや〜、CSSがどんどん進化していきますね。
JSが不要になっていくのは、便利なのか、寂しいのか、個人的によくわからない感情が湧いてきますが、とにかく便利は良いことだと思います。
そして、こうした技術を知らずに、JSライブラリで無駄を増幅させていると考えたら、Webページは、より軽量になった方がいいし、ソースコードはより短くエラーが起きにくい状態になるのがいいに決まっています。
自分の周囲のフロントコーダーの人たちは、今回紹介したこれらの機能を全く知らなかったので、実務でしかスキルアップができていない人は、是非自分でこうした新機能のサンプルコードを作って独自のスキルの足しにするのがいいかと思いました。
と言うことで、そのうち、No-JavascriptなWebサイトなどが登場するかもしれませんね。（簡易なWebページであれば今でもできますね。）
0 件のコメント:
コメントを投稿