今天清明节,各位上网中是否也发现了有些不一样?比如你往常看到的百度可能是这样的:
但今天是这样的:
因为今天的日子大家都知道,既是清明节,也是我们全体14亿人悼念新冠疫情中牺牲同胞的日子,看着这样灰色的色调,心情沉重之余,也有这样的一份好奇,就是各大互联网大厂是怎么做到以极快的速度完成整站的“换肤”的,难道平时也一直备着这样的一套皮肤么?
新冠疫情肆虐了我们整整一个春节,到了2020-04-04这一天,在这不可力拒的大自然的灾难面前,举国一心迎战,而在今天清明节这个特殊的日子里,举国沉默,为逝者哀悼。而对于各大互联网的前端们来说,可能在昨天甚至更晚的时候,收到一个紧急且极其重要的任务,那就是要在这一天,无论你的网站多么的绚丽,在这一天,都要披上朴素的衣装,为逝者哀悼。那这样的技术内幕是怎样的?笔者虽说心中有解决思路,但不禁好奇,各大网站是怎么做的,如何最快的速度,上线“换肤”,且对原有代码无污染,少破坏?也就有了这次的简单探秘。
先来看看百度吧,我们先打开今天的网页:
然后我们看到了网页最基础的一个标签
我们把这里面的CSS样式给勾掉。
你会发现,我去,一切又都是原有的样子。
这也是笔者想到的解决思路,利用滤镜,笔者可能还想到的另一种则是蒙版(但一些较旧的浏览器是不支持的,百度为了兼容性考虑没有这么做)。
那其他互联网大厂是怎么做的呢?是否跟百度一样?一起看看吧。
阿里的淘宝:
一样的做法。
再看看网易云音乐的。
由于网页用了Iframe,实际上也用了滤镜,笔者在去掉两层iframe后网站的颜色回来了。
再看看腾讯视频的,仍然是filter滤镜:
笔者勾掉滤镜后颜色出来了,但发现只有图标。
此时再看看它们的图片,发现是有做了处理了的,腾讯视频此处还是蛮用心的。
再来看看掘金,掘金的解决方案也差不多,不过它用了mourning的类名,还是比较契合当下的。
最终,找了比较典型的几个互联网界面,发现大同小异,没有给笔者什么惊喜。