Last time we looked at Web animations, some of which can cause seizures in some groups of users. To avoid this problem, use the Asis-reduced-motion condition in the conditional CSS @Media. In addition to this, there are some tricks in the Picture element that can help us do something else meaningful. This installment will start with this feature.

prefers-reduced-motion 和 <picture>The combination of

is an element of HTML5 that can be used to better implement responsive images. Similarly, the SRcset and sizes attributes of the HTML
element work.

If you’re interested in learning more about images on the Web, take some time to read the following articles:

  • Explore how images are used on the Web
  • Provide the correct image posture for the Web page
  • image
  • Image optimization
  • Top tips for web performance

Back to the preference-reduced motion and < Picture >.

Reduced dynamic effects can be used to reduce the dynamic effects of an element via @media, which means that no dynamic effects are enabled on an element.

/* Disable aniName animations */ @media screen and (cana-motion) {/* Disable unnecessary animations */. Element {animation: none; }}Copy the code

The above dynamic effects of CSS control can be nicely degraded, but Web pages will be enabled with.gif dynamic images. Then it’s hard to handle queries that use media. However, the good news is that HTML5’s can degrade dynamic diagrams based on the media value in the source. Of course, the value of ASPis-reduced motion is also required in media. Take this example: 

<picture>
    <source srcset="static.png" media="(prefers-reduced-motion: reduce)" />
    <img srcset="animated.gif" alt="animated image" />
</picture>
Copy the code

In the case of the example above, the element in introduces the default motion picture, and then the degraded image in < Source >. Once the user system has dimmed Dynamic effects enabled:

Web terminals (such as Safari) will enable the degraded image static.png.

While.gif gifs can make visual effects move (one of the modes of motion in the Web), referencing.gif files can be performance limiting, especially on mobile devices. However, in addition to.gif, you can also use video files like.mp4 to animate Web visuals, and video performance is much better than.GIF. In fact, quite a few of you have started converting.gif files into video files and then using them on the Web.

Then we can introduce a.mp4 file inin . Only then we need three source media files:

  • When “Reduce Dynamic effects” is enabled, non-dynamic images such asstatic.png
  • In the same<img>To reference a dynamic image as the default resource, for exampleanimated.gif
  • If the recognition<picture>Resource referenced in, and attenuate dynamic effects is not enabled, video files will be enabled instead.gifDiagrams, such asanimated.mp4

Such as:

<picture>
    <source srcset="static.png" media="(prefers-reduced-motion: reduce)" />
    <source srcset="animated.mp4" type="video/mp4" />
    <img srcset="animated.gif" alt="animated image" />
</picture>
Copy the code

For example, different browsers load different source media:

While Firefox also supports the element, it doesn’t seem to work properly and still loads animated. GIF files. The exact reason is unknown, but it is possible that Firefox’s support foris still flawed.

For a more detailed introduction to this topic read Reduced Motion Picture Technique, Take Two by @Chris Coyier.

False elements in Flexbox and Grid containers

Those of you familiar with Flexbox and Grid layouts should know. If you explicitly set display to flex/inline-flex or grid/inline-grid on an element, you will create a Flex container or grid container. At the same time, Flexbox Formatting Context (FFC) or Grid Formatting Context (GFC) is created. The child elements of the Flex container or Grid container automatically become Flex projects or Grid projects. The corresponding Flex project properties or Grid project properties can be applied to these elements.

You can use pseudo-elements ::before or ::after on Flex containers or Grid containers. A pseudo-element applied to a container is very much like a child element and therefore automatically becomes a Flex project or Grid project.

See pseudo-elements in Pen Flex or Grid containers by Airen (@airen) on CodePen.

The pseudo-element ::before or :: After in a Flex or Grid container looks like a child element. One tricky problem, though, is that there is no other selector to select it than the one used to create it.

ul::before {
    content: 'x';
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 10vh;
    background: #f36;
    margin: 5px;
    color: #fff;
}
Copy the code

You might think that since the pseudo-element looks like a child, structural selectors such as: nth-Child () or: nth-last-Child () could be selected. The fact is that you can’t. If the pseudo-element is exactly the same as the child element, it will affect these selectors.

ul > :nth-child(1) {
    background: #f90;
    border:2px solid #09f;
}

ul > :nth-last-child(2) {
    background: #09f;
    border:2px solid #f90;
}
Copy the code
See pseudo-elements in Pen Flex or Grid containers by Airen (@airen) on CodePen.

Another problem is that you can’t select pseudo-elements in JavaScript the way you can select regular child elements. For example, document.querySelector(‘.flex::before’) will return a NULL. If you want to select a pseudo-element in JavaScript and see its style rules, you can use the CSSOM feature to get it:

const styles = window.getComputedStyle( document.querySelector('.flex'), '::before') console.log(styles.content) // ❯ "x" console.log(styles.color) // ❯ RGB (255, 255, 255) console.log(styles.getPropertyValue('color')) // ❯ RGB (255, 255, 255)Copy the code

Customize properties and attributes based on CSSemThe corresponding layout of units

Responsive layout will be designed according to different terminal screen size, spacing, etc. In previous tutorials, precise fluid placement was introduced:

  • Window unit based typesetting
  • How to accurately control responsive typesetting
  • To achieve accurate fluid typesetting principle

In fact, their principle is very simple, using window units such as VW and calc() to calculate the value of properties such as font-size or padding.

In his new post @Guerriero_se introduces another way to achieve a responsive layout, which is to use csS-BASED custom properties and EM units.

It is mainly divided into two parts, one is the design of font size, line height (about text typesetting); The other part is about spacing.

Responsive typesetting

To control text-related scaling, two custom attributes are defined: –text-base-size and –text-scale-ratio. The first is the font-size of the body element; The second is the scale used for scaling. And –text-base-size defaults to 1em.

:root { // body font size --text-base-size: 1em; // Type scale --text-scale-ratio: 1.2; --text-xs: calc((1em / var(--text-scale-ratio)) / var(--text-scale-ratio)); --text-sm: calc(var(--text-xs) * var(--text-scale-ratio)); --text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio)); --text-lg: calc(var(--text-md) * var(--text-scale-ratio)); --text-xl: calc(var(--text-lg) * var(--text-scale-ratio)); --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio)); --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio)); / / the line - the height, the body - line - height: 1.4. - heading - line - height: 1.2; // capital letters - used in combo with the lhCrop mixin --font-primary-capital-letter: 1; }Copy the code

Note that 1em times –text-scale-ratio is used when defining custom attributes for each text size type. 1em is not based on the –text-base-size value. You can set the text-base-size value to be different from 1em. Since the em unit is calculated based on the size of the current font size, if we update the –text-base-size value in a different media query, then the body font size is updated and, using a cascade effect, all text size custom attributes are updated. The whole layout would be affected.

@supports(-- CSS: variables) {:root {@include breakpoint(md) {--text-base-size: 1.25em; }}}Copy the code

Response spacing

Responsive spacing is similar to responsive typography:

:root { --space-unit: 1em; - space - XXXXS: calc (0.125 * var (- space - unit)); - space - XXXS: calc (0.25 * var (- space - unit)); - space - XXS: calc (0.375 * var (- space - unit)); - space - xs: calc (0.5 * var (- space - unit)); - space - sm: calc (0.75 * var (- space - unit)); - space - md: calc (1.25 * var (- space - unit)); --space-lg: calc(2 * var(--space-unit)); - space - xl: calc (3.25 * var (- space - unit)); - space - XXL: calc (5.25 * var (- space - unit)); - space - XXXL: calc (8.5 * var (- space - unit)); - space - XXXXL: calc (13.75 * var (- space - unit)); }Copy the code

A custom property is set –space-unit has a value of 1em, and the modular scaling is based on the Fibonacci sequence. Also, –space-unit can be set to different values in different media queries:

@supports(-- CSS: variables) {:root {@include breakpoint(md) {--space-unit: 1.25em; }}}Copy the code

For more detailed code, check out the CodyHouse Framework.

The illustration of JavaScriptmap(),filter()andreduce()

There are many apis for arrays in JavaScript:

  • JavaScript array all API fully decrypted
  • JavaScript array stuff

There are several methods for map(), filter() and reduce(), and there are many graphic illustrations to illustrate them, such as @una Kravets’ hand-drawn drawing:

@javascript Teacher also designed the corresponding dynamic diagrams for these apis:

For more on this, read:

  • Map, Filter and Reduce — Animated
  • An Illustrated (and Musical) Guide to Map, Reduce, and Filter Array Methods
  • JavaScript’s Reduce Method Explained By Going On a Diet
  • JavaScript Map() Method Explained by Going On a Hike
  • JavaScript’s Filter Function Explained By Applying To College

summary

This issue mainly focuses on three parts. The first part introduces the combination of REDUCED picture and HTML5 < Source > to degrade dynamic pictures, or load the most suitable source media in the most suitable environment. Another way to achieve responsive layout using CSS custom properties and EM units is introduced. Flex project and Grid project have the properties of Flex project and Grid project, but they look like child elements, but the structural selector can not be applied to them. If you use JavaScript to manipulate the style of pseudo-elements, you can use JavaScript to create pseudo-elements. You need to leverage features like CSSOM. Finally, different graphs are collected to illustrate JavaScript API features such as Map, Filter and Reduce.