diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/components/utilities.md | 16 | ||||
| -rw-r--r-- | docs/content/reboot.md | 16 |
2 files changed, 16 insertions, 16 deletions
diff --git a/docs/components/utilities.md b/docs/components/utilities.md index 887cc32d4..788f1a3c8 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -318,19 +318,3 @@ Aspect ratios can be customized with modifier classes. <iframe class="embed-responsive-item" src="..."></iframe> </div> {% endhighlight %} - -## HTML5 `[hidden]` attribute - -HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](http://purecss.io), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden. While `[hidden]` isn't natively supported by IE9-10, the explicit declaration in our CSS gets around that problem. - -{% highlight html %} -<input type="text" hidden> -{% endhighlight %} - -{% callout warning %} -#### jQuery incompatibility - -`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. This could potentially change in jQuery 3, but we're not holding our breath. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements. -{% endcallout %} - -To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class](#invisible-content) instead. diff --git a/docs/content/reboot.md b/docs/content/reboot.md index 933df0e64..fc708554e 100644 --- a/docs/content/reboot.md +++ b/docs/content/reboot.md @@ -285,3 +285,19 @@ The `<abbr>` element receives basic styling to make it stand out amongst paragra <div class="bd-example"> Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue. </div> + +## HTML5 `[hidden]` attribute + +HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](http://purecss.io), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden. While `[hidden]` isn't natively supported by IE9-10, the explicit declaration in our CSS gets around that problem. + +{% highlight html %} +<input type="text" hidden> +{% endhighlight %} + +{% callout warning %} +#### jQuery incompatibility + +`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. This could potentially change in jQuery 3, but we're not holding our breath. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements. +{% endcallout %} + +To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/components/utilities/#invisible-content) instead. |