2

jQueryモバイルを含む多くのプラグイン/ライブラリを見てきました。要素の変更を非表示にするために、左および/または上部のプロパティなどです。

div {
   left : 99999px;
   top : 99999px;
}

この場合、常に消えるとは限らず、時々スクローラーがそのプロパティに増加するため、コードが何度も台無しになるため、いくつかのプラグインとcssを編集して要素を非表示にするdisplay:none;

そして、人々が表示プロパティを切り替える代わりにそうすることを選択する理由があるのか​​ 、それとも開発者の悪い習慣なのか、私は疑問に思っています.

これらの 2 つの方法の間にパフォーマンスの違いはありますか? 非表示の要素で実行できない JavaScript コードはありますか? より良いアプローチは何でしょうか？

4

1 に答える 1

2

TLDR; : スクリーン リーダー

要素を非表示にするさまざまな方法を次に示します。

  • display:none;要素をフローから外します。ドキュメントは、要素が存在しないかのようにレンダリングされます。そのため、この要素はスクリーン リーダーによって読み上げられません。

  • 次にvisibility:hidden、ボックスを非表示にしますが、それでも layout に影響します。

  • 最後に、オフセットを使用した絶対配置などのハックを使用して、レイアウトに影響を与えずに要素を非表示にし、音声化します。HTML5 Boilerplate からの例を次に示します。

    .visuallyhidden {

    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
于 2013-02-25T11:05:10.780 に答える