rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-29 21:52:22 +01:00
Code Issues Actions Packages Releases Activity

Merge pull request #18235 from twbs/fix-18230

Browse Source 
Move [hidden] style from _utilities.scss to _reboot.scss
This commit is contained in:
Chris Rebert 2015-11-12 19:21:40 -08:00
commit 87b11578c3
4 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
docs/components/utilities.md
View File

@ -318,19 +318,3 @@ Aspect ratios can be customized with modifier classes.
<iframe class="embed-responsive-item" src="..."></iframe> <iframe class="embed-responsive-item" src="..."></iframe>
</div> </div>
{% endhighlight %} {% 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.

16
docs/content/reboot.md
View File

@ -285,3 +285,19 @@ The `<abbr>` element receives basic styling to make it stand out amongst paragra
<div class="bd-example"> <div class="bd-example">
Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue. Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue.
</div> </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.

5
scss/_reboot.scss
View File

@ -298,3 +298,8 @@ output {
// line-height: $line-height; // line-height: $line-height;
// color: $input-color; // color: $input-color;
} }
// Always hide an element with the `hidden` HTML attribute (from PureCSS).
[hidden] {
display: none !important;
}

5
scss/_utilities.scss
View File

@ -31,11 +31,6 @@
@include sr-only-focusable(); @include sr-only-focusable();
} }
// Always hide an element with the `hidden` HTML attribute (from PureCSS).
[hidden] {
display: none !important;
}
.invisible { .invisible {
visibility: hidden !important; visibility: hidden !important;
} }