From 87475788ac529762d78d2db935dff3a61bf5c0ca Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Thu, 2 Jun 2022 16:21:31 +0200 Subject: [PATCH 1/5] Ensuring function name is portrayed as code --- _includes/markdown/CSS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_includes/markdown/CSS.md b/_includes/markdown/CSS.md index 5910cdbf..85df39d6 100644 --- a/_includes/markdown/CSS.md +++ b/_includes/markdown/CSS.md @@ -338,7 +338,7 @@ Very common examples include gradients and triangles. It's a common belief that CSS animations are more performant than JavaScript animations. A few articles aimed to set the record straight (linked below). * If you're only animating simple state changes and need good mobile support, go for CSS (most cases). -* If you need more complex animations, use a JavaScript animation framework or requestAnimationFrame. +* If you need more complex animations, use a JavaScript animation framework or `requestAnimationFrame`. Limit your CSS animations to 3D transforms (translate, rotate, scale) and opacity, as those are aided by the GPU and thus smoother. Note that too much reliance on the GPU can also overload it. From e49eaa7f07770de3a2d7f8ccb7d888c591c1a604 Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Thu, 2 Jun 2022 16:23:29 +0200 Subject: [PATCH 2/5] Being consistent --- _includes/markdown/CSS.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/_includes/markdown/CSS.md b/_includes/markdown/CSS.md index 85df39d6..56953007 100644 --- a/_includes/markdown/CSS.md +++ b/_includes/markdown/CSS.md @@ -345,12 +345,14 @@ Limit your CSS animations to 3D transforms (translate, rotate, scale) and opacit Avoid: ```css -#menu li{ +#menu li { left: 0; transition: all 1s ease-in-out; } #menu li:hover { - left: 10px + left: 10px; +} +``` } ``` Always test animations on a real mobile device loading real assets, to ensure the limited memory environment doesn't tank the site. **Note:** [WCAG 2.1, Guideline 2.3.2 Motion from Animation](https://www.w3.org/WAI/WCAG21/quickref/#animation-from-interactions) dictates that, "Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed." From 635e8b51668bc8185bd64644fda9639ea15f4366 Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Thu, 2 Jun 2022 16:27:13 +0200 Subject: [PATCH 3/5] Adding missing Prefer to showcase issues --- _includes/markdown/CSS.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/_includes/markdown/CSS.md b/_includes/markdown/CSS.md index 56953007..f38ce92b 100644 --- a/_includes/markdown/CSS.md +++ b/_includes/markdown/CSS.md @@ -353,8 +353,19 @@ Avoid: left: 10px; } ``` + +Prefer: + +```css +#menu li { + transform: translate3d(0, 0, 0); + transition: transform 1s ease-in-out; +} +#menu li:hover { + transform: translate3d(10px, 0, 0); } ``` + Always test animations on a real mobile device loading real assets, to ensure the limited memory environment doesn't tank the site. **Note:** [WCAG 2.1, Guideline 2.3.2 Motion from Animation](https://www.w3.org/WAI/WCAG21/quickref/#animation-from-interactions) dictates that, "Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed." Articles worth reading: From a35ba664768f778b651039f3b37c923074e0e533 Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Thu, 2 Jun 2022 16:28:05 +0200 Subject: [PATCH 4/5] Using `pcss` code syntax for nesting --- _includes/markdown/CSS.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/_includes/markdown/CSS.md b/_includes/markdown/CSS.md index f38ce92b..341e49cb 100644 --- a/_includes/markdown/CSS.md +++ b/_includes/markdown/CSS.md @@ -79,9 +79,10 @@ Avoid: Prefer: -```css +```pcss .some-class { color: red; + @media only screen and (min-width: 1024px) { color: blue; } From 9bc127bcf31b2ff48c0032a34542d715436fbfb9 Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Thu, 2 Jun 2022 16:29:04 +0200 Subject: [PATCH 5/5] Writing more around animations and accessibility --- _includes/markdown/CSS.md | 41 +++++++++++++++++++++++++++++++++------ 1 file changed, 35 insertions(+), 6 deletions(-) diff --git a/_includes/markdown/CSS.md b/_includes/markdown/CSS.md index 341e49cb..ef04832c 100644 --- a/_includes/markdown/CSS.md +++ b/_includes/markdown/CSS.md @@ -10,19 +10,48 @@ Our websites are built mobile first, using performant CSS. Well-structured CSS y Not every animation brings pleasure to the end user. In some cases motion can trigger harmful reactions from users with vestibular disorders, epilepsy or even migraines. -The `prefer-reduced-motion` CSS media feature does not currently have the widest support, but is active in [Safari and Firefox](https://caniuse.com/#feat=prefers-reduced-motion)). However, we still recommend applying it, as it is simple to implement and affords a better experience for those using supported browsers. +The `prefer-reduced-motion` CSS media feature has a [decent support](https://caniuse.com/#feat=prefers-reduced-motion) nowadays. However, we still recommend applying the media query with an accessibility-first approach so the code is progressively enhanced rather than potentially missing users that might not want the motion but their devices aren't able to process the media query. Here is an example: ```css -.animation { - animation: vibrate 0.3s linear infinite both; +@media (prefers-reduced-motion: no-preference) { + .animation { + animation: vibrate 0.3s linear infinite both; + } } +``` -@media (prefers-reduced-motion: reduce) { - .animation { - animation: none; +It might also be a good idea to create a simpler animation that doesn't rely on movement as a default, and if the user hasn't expressed any preference, we enhance by adding some movement. Here's an example of an animation for modals appearing on the screen: + +```css +/* + By default, we'll use the REDUCED MOTION version of the animation. +*/ +@keyframes modal-enter { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +/* + Then, if the user has NO PREFERENCE for motion, we can OVERRIDE the + animation definition to include both the motion and non-motion properties. +*/ +@media ( prefers-reduced-motion: no-preference ) { + @keyframes modal-enter { + from { + opacity: 0; + transform: scale(.7); + } + to { + opacity: 1 ; + transform: scale(1); } + } } ```