2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-27 14:46:01 +03:00

Making use of prefers-reduced-motion media query (#25641)

* Making use of `prefers-reduced-motion` media query

As discussed in #25249 - if a user (Who is using Safari / iOS) requests
reduced motion in their system settings, we should avoid transitions.

* Ignoring prefers reduced motion for CSS Linting
* Updating copy clarifying the reduce motion functionality in accessibility.md
This commit is contained in:
Mike Rogers
2018-03-20 09:28:21 +00:00
committed by Patrick H. Lauke
parent c53825d902
commit 2306f62bf1
3 changed files with 11 additions and 0 deletions
@@ -43,6 +43,10 @@ For visually hidden interactive controls, such as traditional "skip" links, `.sr
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
{% endhighlight %}
### Reduced motion
Bootstrap includes support for the [`prefers-reduced-motion` media feature](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion). In browsers/environments that allow the user to specify their preference for reduced motion, most CSS transition effects in Bootstrap (for instance, when a modal dialog is opened or closed) will be disabled. Currently, support is limited to Safari on macOS and iOS.
## Additional resources
- [Web Content Accessibility Guidelines (WCAG) 2.0](https://www.w3.org/TR/WCAG20/)