diff options
| author | Mike Rogers <[email protected]> | 2018-03-20 09:28:21 +0000 |
|---|---|---|
| committer | Patrick H. Lauke <[email protected]> | 2018-03-20 09:28:21 +0000 |
| commit | 2306f62bf19bb0696a9455aaf2eea6b083d9fdae (patch) | |
| tree | c4c78e05882e13b5eb932d18feeb609a1d638f64 | |
| parent | c53825d9029812f2218a8122716a76332b76e774 (diff) | |
| download | bootstrap-2306f62bf19bb0696a9455aaf2eea6b083d9fdae.tar.xz bootstrap-2306f62bf19bb0696a9455aaf2eea6b083d9fdae.zip | |
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
| -rw-r--r-- | .stylelintrc | 3 | ||||
| -rw-r--r-- | docs/4.0/getting-started/accessibility.md | 4 | ||||
| -rw-r--r-- | scss/mixins/_transition.scss | 4 |
3 files changed, 11 insertions, 0 deletions
diff --git a/.stylelintrc b/.stylelintrc index c9d67250e..c65940be2 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -33,6 +33,9 @@ "no-descending-specificity": null, "no-duplicate-selectors": true, "number-leading-zero": "never", + "media-feature-name-no-unknown": [true, { + "ignoreMediaFeatureNames": ["prefers-reduced-motion"] + }], "order/properties-order": [ "position", "top", diff --git a/docs/4.0/getting-started/accessibility.md b/docs/4.0/getting-started/accessibility.md index 0f9e87ae1..d4381aa21 100644 --- a/docs/4.0/getting-started/accessibility.md +++ b/docs/4.0/getting-started/accessibility.md @@ -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/) diff --git a/scss/mixins/_transition.scss b/scss/mixins/_transition.scss index 7e33dee31..f85382134 100644 --- a/scss/mixins/_transition.scss +++ b/scss/mixins/_transition.scss @@ -6,4 +6,8 @@ transition: $transition; } } + + @media screen and (prefers-reduced-motion: reduce) { + transition: none; + } } |