可視性

可視性ユーティリティを使って、要素の表示形式を変更せずに、可視性を制御しましょう。

可視性ユーティリティを使って、要素の visibility を設定します。これらは display の値をまったく変更せず、ほとんどのユーザからコンテンツを隠すのに便利ですが、スクリーンリーダーでは残ります。

必要に応じて .visible または .invisible を適用します。

<div class="visible">...</div>
<div class="invisible">...</div>

// クラス
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}

// ミックスインとして使用
.element {
  @include invisible(visible);
}
.element {
  @include invisible(hidden);
}