This is the fifth day of my participation in the August More text Challenge. For details, see:August is more challenging

1. Response picture

is a new element of HTML5;

  • if<picture>Element with the current<audio>,<video>Element collaboration will enhance the process of responsive image work by allowing multiple Settings within it<source>Label to specify different image file names, according to different conditions for loading;
  • <picture>Different images can be loaded according to different conditions, such as viewport, width, orientation, DPR, etc
<picture> <source media="(min-width: 650px)" srcset="/images/mix/html-css-js.png"> <source media="(min-width: 465px)" srcset="/images/mix/htmlbig.png"> <img src="/images/mix/img_avatar.png" style="width:auto;" > </picture>Copy the code
  • caniuse

Compatibility is not very good

  • Load different images for different screen widths
  • Added screen orientation as a condition
  • Added screen pixel density as a condition
  • Add the image file format as a condition
  • Add width description
  • Add sizes attribute

<picture>Grammar:

  • <source>The element

The tag itself has no attributes. The magic is being used as a container.

Theelement, which is used to load multimedia such as video and audio, has been updated to use image loading and several new attributes have been added:

  • Srcset (required)

Accept a single image file path (e.g., srcset= “img/minpic.png”).

Or commas in pixel density description of the image path (such as: srcset = “img/minpic PNG, img/minpic_retina PNG 2 x”), 1 x description is not in use by default.

  • Media (Optional)

Accept any validation from the Media Query, you can see in the CSS @media selector (e.g. : media= “(min-width: 320px)”).

This is already used in the previous example of syntax.

  • Sizes (optional)

Accept single width description (sizes= “100vw”) or single media Query width description (sizes= “(min-width: 320px) 100vw”).

Or comma-separated media Query descriptions of sizes= “(min-width: 320px) 100vw, (min-width: 640px) 50vw, calc(33vW-100px)”). The last one is taken as the default.

  • type(optional)

Accept supported MIME types (e.g., type= “image/webp” or type= “image/vnd.ms-photo”)

The browser will use these tips and attributes to load the exact image resource. According to the list order of tags. The browser uses the first appropriateelement and ignores the followingtags.

  • Add the final<img>The element

The element inside is used for display when the browser does not support it or when there is no source tag match

2.CurrentColor

  • currentColorIs an attribute value that represents the current elementcolorProperty.
.box {
  color: red;
  border: 1px solid currentColor;
  box-shadow: 0 0 2px 2px currentColor;
}
Copy the code

In the above code, the border and box-shadow color are the same as the color. The nice thing about this is that if you want to change the color, you only have to change it in one place, not three.

  • currentColorAnother use for “is to make all derived classes inherit the color of the base class.
.box {
    color: red;
}
.box .child-1 {
    background: currentColor;
}
.box .child-2 {
    color: currentColor;
    border 1px solid currentColor;
}
Copy the code
  • Pseudo-elements can also be usedcurrentColor.
.box {
    color: red;
}
.box:before {
    color: currentColor;
    border: 1px solid currentColor;
}
Copy the code
  • caniuse

Compatibility is already good

3.-webkit-text-size-adjust

As you zoom in on a web page, the font size will generally increase. With the following code, the font size will only increase as you zoom in

html{-webkit-text-size-adjust: none; }Copy the code

  • HTML {-webkit-text-size-adjust:none; -webkit-text-size :none; }

  • – Webkit-text-size-adjust on the body will cause page zooming to fail

  • 3. Body inherits the styles defined in HTML

  • 4. Use -webkit-text-size-adjust and do not make it inheritable or global

  • caniuse

It doesn’t seem to be very compatible

4.scroll-behavior

There are some compatibility issues

Scroll-behavior :smooth Written on a scroll container element can smooth the scrolling of a container (not triggered by a mouse gesture)

Just add a “scroll-behavior:smooth” wherever you need to scroll

  • can i use

5.CSS variables include :: Backdrop

The :: Backdrop CSS dummy is an instantaneously rendered box on top of any elements in full screen mode (and on top of all other elements lower in the heap).

Dialog: : backdrop {background: rgba (255, 0, 25); }Copy the code
  • caniuse