タグ

ブックマーク / www.tak-dcxi.com (3)

  • タブやアコーディオンの非表示コンテンツにはhidden="until-found"を使うべし | TAKLOG

    タブやアコーディオンの非表示コンテンツにはdisplay:noneがよく用いられますが、hidden="until-found"を利用するほうがメリットがあります。 hidden=“until-found”で非表示にしたコンテンツはページ内検索でアクセスできるuntil-foundはhidden属性に新たに追加された属性値です。 hidden - HTML: ハイパーテキストマークアップ言語 | MDN 従来のhidden属性とは違い、until-found"属性値を指定した場合はブラウザのページ内検索やページ内リンクでそのコンテンツが検出された場合、自動でhidden属性が取り除かれて表示することができます。 従来のdisplay:noneを使用した非表示ではコンテンツ内にページ内検索でマッチすべきワードがあったとしても検出できませんでしたが、hidden="until-found"を使

    タブやアコーディオンの非表示コンテンツにはhidden="until-found"を使うべし | TAKLOG
    ihok
    ihok 2024/04/02
  • hoverを指定するならany-hoverメディア特性を使いなさい!俺流hover実装例も紹介します | TAKLOG

    タップデバイスでもhoverが動いているWebサイトが多すぎる! hoverを指定するならany-hoverメディア特性を使いなさい前提として、タップデバイスでのhoverアクションは次のようなデメリットから無効化すべきです。 タップデバイスでhoverアクションを用いると、タップ後にhover状態が継続し、UIの予期しない振る舞いやユーザー体験の混乱を招く可能性があるデバイスによってはhoverが指定されている要素はダブルタップしないと反応しない可能性があるタップ操作orポインター操作の区別を行うための方法はいくつかありますが、現在ではhoverメディア特性が全モダンブラウザでサポートされているためこちらを利用しましょう。 /* 🙆‍♂ Recommended */ @media (any-hover: hover) { .button:hover { background-color

    hoverを指定するならany-hoverメディア特性を使いなさい!俺流hover実装例も紹介します | TAKLOG
    ihok
    ihok 2024/03/19
  • あなたが教わってるそのCSSテクニックはもう古い | TAKLOG

    Xの初学者のポストにて古の手法を教わっている方をよく見かけるので、2024年現在そのCSSテクニックはもう古いってものをいくつか列挙しました。 ブロックのセンタリングに margin を使うなら margin-inline:auto を使いなさいmarginを使ってブロックのセンタリングを行う際によく教わるのはmargin:0 autoあるいはmargin:autoでしょう。

    あなたが教わってるそのCSSテクニックはもう古い | TAKLOG
  • 1