One line of code, the whole site enters mourning mode

One line of code, the whole site enters mourning mode

Preface

To express people of all nationalities to fight against the new crown pneumonia epidemic struggle and sacrifices of the martyrs deep condolences to the death, the State Council announced its decision "to hold a national mourning April 4 2020」 .

During this period, the national and foreign embassies and consulates lowered their flags to mourn, and public entertainment activities were suspended nationwide. Starting at 10 o'clock on April 4, people across the country observed a three-minute silence. Cars, trains, and ships sounded their horns, and air defense sirens sounded.

Mourn

"I would like to pay tribute to the anti-epidemic heroes across the country. We will remember every moment in history . " As Internet people, I believe that everyone received a temporary request on April 3, asking the website to enter the mourning mode throughout the day on April 4.

On April 3rd, the author also released a boiling point, one-line code technique for the mourning pattern in the Nuggets community. At the same time, he promptly updates the projects he is responsible for.

Boiling point

skills

One line of code enters the site-wide mourning mode, just <html>replace it with <html style="filter:grayscale(1)">, simple and rude. Of course, the core code filter:grayscale(1)means "set the current element and its descendants to 100% grayscale mode" .

We can replace it with the class name and insert it into it <html>. In addition, if you need to be compatible with lower version browsers, you can take a look at the following writing.

<html class="gray">
//Modern browser
.gray {
  filter: grayscale(1);
}
//Ancient browser
.gray {
  -webkit-filter: grayscale(1);/* Old Chrome, Old Safari, Old Opera*/
  filter: grayscale(1);/* Modern browser standard*/
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);/* IE */
}

Etc., is not found the leak -moz-, -ms-, -o-these prefixes it? The author didn't write it because there are no such prefixes at all, so don't be fooled by online tutorials. Caniuse can testify, and interested students can check "CSS Filter" in Caniuse by themselves .

filter

Of course, we usually build projects based on Webpack, and access to Postcss and its plugins will automatically add prefixes to the CSS we write.

Insert a small advertisement here, I recommend that you use the "bruce-cli" independently developed by the author , a zero-configuration out -of-the- box React/Vue application to automatically build scaffolding. Just search for "bruce-cli" on "Github" or "NPM" .

There is a problem

Some students may find absolute/fixed定位的元素abnormalities when using the above techniques , causing some layouts to find typographical disorder.

This is because when the element is specified 不为none的filter属性, if there is absolute/fixedpositioning for itself and its descendants , a new container is created for it, so that these absolute/fixed定位的元素positioning references are relative to this new container.

Solution

I believe that the students who have the above problems should all set it on <body>or 某个主要元素above. According to the principle mentioned by the author above, just filter:grayscale(1)put <html>it down.

Because no matter how the positioning datum <html>is set, it is the topmost container, even if a new positioning datum element is created, it will not have an unintended impact on itself and its descendants.

This is why the beginning of the article is directly <html>replaced with <html style="filter:grayscale(1)">.

compatible

For low version browsers or some mentally handicapped browsers, it may not be supported CSS Filter. The author recommends for everyone to use grayscale.js, a gray mode JS library with multiple compatible modes.

The principle is also very simple. Analyze the style of the current element and its descendants, extract border-color, background-colorsum colorand set it to gray, extract the image of the <img>sum background-imageand use itcanvas rendering grayscale image corresponding to an original image and then replaced.

Due to the use ofcanvas绘制 there will be a loss of rendering of the entire site's pictures, and unnecessary lag, the multi-picture website should be used with caution.

summary

CSS FilterThere are also many filter properties, and the ones mentioned in this article are just very basic skills for getting started. If you want to see more CSS Filterspecial effects, you can refer to CSSgramthe source code, pass CSS Filterand CSS Blen Moderestore the "Instagram-style image filter" .

Tell a 烂GagThrough this setting filter:grayscale(1), but also the way of a browser mourning ( 貌似直指IE). It is that it refuses to cooperate with our national mourning activities and abandons it, haha!

Reference: https://cloud.tencent.com/developer/article/1614465 One line of code, the whole site enters mourning mode-Cloud + Community-Tencent Cloud