2003年,我在一个个人网站源码里看到一行注释:“此页面在IE6下最佳浏览。”那会儿IE6占着全球90%以上的浏览器市场,网页设计师只要伺候好这一位“大爷”,就能吃遍天。可后来的事谁都知道了——Firefox冒头,Chrome崛起,移动端爆发,IE6成了笑话。那些当年只写IE私有属性的网站,如今全成了数字废墟。
web标准是什么?说白了就三件事:结构用HTML,表现用CSS,行为用JavaScript。听起来简单得像废话,但真做起来,能把人逼疯。我见过一个企业后台系统,一个按钮的点击事件绑了七层嵌套函数,HTML里塞着几百行的style属性,CSS类名全是a1、a2、b7这种天书。维护这种代码,就像在别人吐过的口香糖上继续嚼。
标准的意义不在于“好看”,而在于“省命”。2019年我接手过一个老项目,页面在Chrome上正常,到了Safari就错位。查了半天,原因是用了CSS的`position: sticky`,但没写`-webkit-`前缀。就这么一行代码,三个前端工程师加一个测试,耗了整整两天。如果当初按标准写,加个前缀就完事——这时间够我读完一本《JavaScript高级程序设计》了。
更坑的是那些“非标准”的写法。有些开发者觉得`
`布局简单直接,可等你要做响应式的时候,那表格就像焊死的铁板,掰都掰不动。还有些人爱用``堆一切,满屏的`
`嵌套,语义化标签一个不用,屏幕阅读器读出来就是“容器容器容器”,视障用户直接懵圈。标准在那儿摆着,不用,就是给自己刨坑。
当然,标准也不是死板的教条。浏览器厂商之间打架,标准也在变。CSS Grid刚出来那会儿,各家实现都不一样,你敢直接用,就得做好被坑的准备。所以懂标准的人,会查Can I Use,会看兼容性列表,会写降级方案。这不是怂,是聪明。就像老司机开车,知道哪条路有坑,绕一下总比陷进去强。
我见过最离谱的一次,是某外包公司给客户做的官网,首页用了十几张高清大图,每张都超过3MB,还没做懒加载。客户在手机上打开,转圈转了半分钟,直接投诉。后来一查,他们的“前端工程师”根本不知道有`loading="lazy"`这个属性。这玩意儿是标准的一部分,写上去就一行代码的事,能省掉用户80%的等待时间。
标准这东西,平时你感觉不到它存在,一旦出了问题,你才意识到它有多重要。就像交通规则——你老老实实走斑马线,不会觉得红绿灯碍事;可要是所有人都不看信号灯,路口就变成碰碰车现场。web标准就是网络的交通规则,让不同浏览器、不同设备、不同用户都能顺畅通行。
所以我现在看一个网站,先按F12打开控制台,看看有没有报错,再拖拽窗口大小,试试响应式,最后用键盘Tab键走一遍,检查能不能聚焦到所有交互元素。这三步下来,一个网站的技术底子基本就摸清了。标准做得好的站,全程无感;做得烂的,处处硌手。
写代码这行,混日子容易,写好难。标准不是束缚,是你跟浏览器之间的共同语言。你按标准写,浏览器就好好渲染;你胡来,它就用各种奇怪的bug报复你。就这么简单。