转载：浏览器兼容的反思、前端人员的学习之路、Web标准：我们是否一直在错误的道路上越走
看主题前个人观点：标准是基础，其它皆魔道，掌握基本功，干活方可耍花招。--吕海鹏
正文：
我不想谈主流浏览器的历史、每个版本发布的时间，支持的特性与市场份额作为开头，这些大家可以从网络上获取浩如烟海的信息，甚至无聊时可以当做小说般读的津津有味。我只想回忆一些自己的学习经历，以此来反思自己曾经有过的现在自认为错误的想法。还记得你第一次写CSS代码吗？07年的时候朋友介绍我去校内网注册个账号，可以找到很多很多的同学。那时候上传真实相片可以获得星级用户，可是我不想用自己的相片去摧残不小心浏览到我页面的朋友。我开始查找既可以获取星级用户又可以不显示我的真实头像的方法，结果是我把头像的图片隐藏了，利用CSS背景图片加载了一个自己上传的卡通头像。
对于那时候的我，CSS是个新鲜事物，成功的激起了我的好奇心和兴趣，于是我在浦东新区图书馆借了一本CSS方面的书，很薄，开始在我的主页上试验起来，直到半夜2点多，我捣鼓出来了一个自认为是很成功的主页，后来被别人告知是我的审美观可能有问题。
当时敲CSS代码时很多时候不起作用，在网上得到的信息是IE6不支持很多CSS属性，后来想深入的学习一下，于是找到了几个跟Web标准化相关的网站，知道了W3C。并找到了一个可以当做在线手册的网站http://www.w3school.com.cn/,又去借阅了一本CSS权威指南，开始在业余时间学习起来。我把每个CSS的属性和属性值在IE6和FireFox进行了试验，这个时候我知道了CSS hack。CSS hack可以让我给不同的浏览器提供不同的样式。* html {}只有IE认识，多么神奇。随着工作中遇到了和网站相关的项目，遇到了需要使用CSS的时候，我用这些神奇的CSS hack、IE条件注释、加上一些像zoom:1;这些对标准浏览器无害但能达到使IE行为正常化的属性让网站实现了浏览器的兼容性，期间又断断续续的学了JavaScript基础、了解了jQuery、Mootools、YUI CSS等等。
浏览器兼容，我现在的理解是网站可以在不同的浏览器呈现相同的外观、行为和用户体验。以前的理解是一份CSS文件通用所有浏览器，一份JavaScript文件通用所有浏览器。
为了让一份JavaScript文件通用所有浏览器，需要了解不同的浏览器对JavaScript的支持，需要在一份代码中判断不同的浏览器为不兼容的部分提供不同的代码。感谢JavaScript框架,简单易学的jQeury，面向对象的Mootools，不只是可以让一份JavaScript通用所有浏览器，更重要的是这份代码中不需要有针对不同浏览器的代码。JavaScript框架为我们屏蔽了浏览器的不同。CSS也言必谈跨浏览器兼容，各种CSS框架也不断涌现。用YUI CSS吧，你可以让所有浏览器的表现一致、使用YUI CSS的跨浏览器网格布局或960 Grid System，你不用再为布局烦恼。
IE6有太多不标准不规范的地方，而我们不得不兼容它，IE7的发布并没有从根本上解决IE6遗留的问题，直到IE8才让让IE系列对标准的支持有了质的飞跃。有一段时间我在招聘美工，主要的工作是英文站的前端相关内容。大约2个月的时间面试了有几十人，这些人按工作时间从刚毕业到七八年不等，一半以上的人可以按照要求做出外观符合标准的页面，而且是只运行在IE下。少部分说有过兼容火狐的经验。提起W3C标准有些是滔滔不绝，可是一旦现场让写基础的三行三列自适应高度的浏览器兼容布局几乎难住了所有的人，我只好进行简单的CSS标准属性考核，一份http://www.w3school.com.cn/的随机试卷能及格者凤毛麟角，80分以上的只有一个。我感到一种痛惜，不是为应聘者的表现不佳，而是感觉到这些人普遍的一种心理状态：Web标准我是知道很多，即使现在忘了，几天我就能捡起来。css hack我也懂不少，这才是我的实力。有问题，不怕，网上一堆一堆的解决方案等着我。
Web标准，如CSS2.1，我相信一个肯付出努力和动手实践的人，一周时间就可以在FireFox下做出令人满意的作品并且代码清晰、可阅读性和可维护性都高。但我更相信可能需要一个月时间他才能让这份作品兼容IE系列的浏览器并且思路混乱，甚至自己维护时都搞不清其中某些代码的加入原因。可是真的存在兼容浏览器的CSS吗？在IE霸占了3个名额的情况下，我不认为有这样的代码。我认为这种兼容其本质是根据主流浏览器对CSS的通用子集的基础上，在一份CSS文件中部分的包含了让不同浏览器进行不同的解析的代码。牺牲了众多可以简化代码的高级特性，让所有浏览器接收一份CSS并按照浏览器自己的逻辑解析达到的不是兼容，这是对Web标准的讽刺，更是对使用者的嘲笑。甚至可以说当前的CSS兼容让符合Web标准的代码没有了。
一个前端人员在CSS上的学习之路可能是这样：
1.接触合学习CSS和Web标准。可以针对标准的浏览器写出符合Web标准、较高的可读性和维护性的代码。
2.接触浏览器兼容性，认为一份包含了不同浏览器支持代码的CSS文件被不同浏览器解析出相同的效果是CSS的浏览器兼容。
3.在如何通过各种手段实现2中所述兼容性的道路上弹精竭虑，为新版浏览器的发布而不断调整代码。
4.大多数人累了，开始使用CSS框架和Google解决问题，甚至开始荒废以前的积累。少数人勇猛精进，总结出了自己的解决方案或通用框架。
现在我认为，一个前端人员在CSS上的学习之路应该是这样：
1.接触和学习CSS和Web标准。可以针对标准的浏览器写出符合Web标准、较高的可读性和维护性的代码。
2.接触浏览器兼容性，认为IE6、IE7和其他标准的浏览器是不同的，为了让网站在这些浏览器上兼容，应该针对IE6、IE7这些行为非标准的浏览器提供附和他们自己逻辑的CSS文件。
3.把精力放在实用的新知识和技术上、网站可用性、用户体验和设计上不断学习和充实自己。
4.在IE6、IE7市场份额可以抛弃的情况下，停止维护并删除那些针对IE6或IE7的CSS文件。
做一个假设，写一份附和Web标准并有较高可读性和维护性的代码提供给标准的浏览器用时1天。使用css hack等把这份代码扩充成可以让包括IE6、IE7等浏览器解析出相同效果用时7天。使用IE私有的属性或其他技术把这份代码改造成只支持IE6或IE7的代码用时7天。则一份所谓的兼容所有浏览器的代码用时8天，同样，对标准浏览器和非标准浏览器提供不同版本代码用时8天。新版本浏览器发布IE6、7市场份额消失都需要对第一份代码进行不断修改，比如hack的支持，多余代码的删除，整体代码的优化等。而第二份则不需要，因为IE6永远是IE6、IE7也永远是IE7。
两种代码我都十分明白每一行的作用，我不用为这两种的任何一个版本考虑兼容性或浏览器的升级，我以后的维护也很简单。夸张的说，用YUI CSS我不知道里面有多少代码有着特俗的兼容性使命的意义，我不知道浏览器的升级会对这些代码的某个部分造成多大的冲击。我甚至读不懂这些代码，虽然我能读懂CSS标准代码和IE私有代码，我不知道如果让我维护这些代码我从哪里入手，我会手足无措。
而实际上，第一份代码在实现所谓的兼容性和网站维护、改版时带来的工作量个人认为绝对超出第二种方式。因为， IE6或IE7对标准CSS属性的不同解释、浏览器私有属性和扩展、JavaScript的辅助、互联网上大量现有问题解决方案可以让我们不那么费力的实现网站在IE6或IE7上的相同表现、行为和用户体验。我们以正常的思路使用标准的代码来支持标准的浏览器，而使用私有属性或扩展等非标准浏览器来支持其本身。向不同的浏览器发送不同的CSS文件，可以在ASP.NET或PHP等网站的后台代码中，建立一个Hander处理所有浏览器请求来实现。
出处：http://easygame.cnblogs.com
转载：浏览器兼容的反思、前端人员的学习之路、Web标准：我们是否一直在错误的道路上越走相关推荐
- 转载：浏览器兼容的反思、前端人员的学习之路、Web标准：我们是否一直在错误的道路上越走...
看主题前个人观点:标准是基础,其它皆魔道,掌握基本功,干活方可耍花招.--吕海鹏 正文: 我不想谈主流浏览器的历史.每个版本发布的时间,支持的特性与市场份额作为开头,这些大家可以从网络上获取浩如烟海的 ...
- 转载【酷 壳 – COOLSHELL--技术人员的发展之路】
[color=darkred][b]转载自[url="http://coolshell.cn/articles/17583.html"]酷 壳 – CoolShell [/url] ...
- 前端人员必备的9款web前端开发框架
近年来,Web技术的发展速度快得让人窒息,特别是最近几年一代又一代的变革一次又一次的创造.各大巨头又纷纷把技术转向HTML5和CSS3,各种企业级框架如雨后春笋般涌现. 那么今天我就给大家介绍几个在w ...
- 【转载】软件性能测试分析与调优实践之路-Web中间件的性能分析与调优总结
本文主要阐述软件性能测试中的一些调优思想和技术,节选自作者新书<软件性能测试分析与调优实践之路>部分章节归纳. 在国内互联网公司中,Web中间件用的最多的就是Apache和Nginx这两款 ...
- python写前端代码_python学习之路前端-JavaScript
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚本是通过嵌入在HTML中来实现 ...
- 前端转java学习之路（一）：java高精度计算之bigdecimal
又是学习java的一天,好开心哎嘿 文章目录 前言 BigDecimal是啥?? BigDecimal的缺点 BigDecimal的数值比较 BigDecimal的封装 总结 前言 在开发中,数值计算 ...
- 一名前端爱好者的学习之路 - 说说我和前端的认识过程我的前端学习路线（结束更新了 希望之后顺利～）
23/4/11更新 我的知识库 一些动态会更新在这里 近况就是 校招签了阿里 23 届萌新前端继续前进!有对职业规划迷茫的/想交个朋友的小伙伴可以通过我的知识库首页找到我~ 我的 2022 实习之路总 ...
- 转：【总结】浏览器CSS Hacks汇总，浏览器兼容方式CSS Hacks
[总结]浏览器CSS Hacks汇总 浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的漏洞 ...
- web标准 浏览器介绍 开发工具介绍 HTML介绍 HTML颜色介绍 规范 HTML结构详解 {前端之前端初识}...
前端之前端初识 前端初识 本节目录 一 web标准 二 浏览器介绍 三 开发工具介绍 四 HTML介绍 五 HTML颜色介绍 六 规范 七 HTML结构详解 一 web标准 web准备介绍: 1.w3 ...
最新文章
- 如何查看静态库和动态库是32位还是64位
- Enterprise Library 2.0 技巧（4）：如何用编程的方法来配置Logging Application Block
- PHP的SPFA，由于是之前的c代码，风格你懂的........(夹带php队列实现)
- 远程密钥登陆linux系统（putty、xshell）
- 速修复！这个严重的 Apache Struts RCE 漏洞补丁不完整
- PHP网站开发有哪些框架,罗列几款时下高人气的PHP开发框架
- docker container DNS配置介绍和源码分析
- Javascript特效：动态获取鼠标位置
- 客厅计算机笔记本cpu,我的家庭娱乐中心，适合客厅的 HTPC（家庭影院电脑）
- 揭秘：顶级产品经理是如何写产品需求文档（PRD）的
- Elastic：data_hot,data_warm,data_cold角色有什么用
- mac 教程 终端设置代理
- 营收同比增长13.55% 领跑ICT的中天科技为何跌了？
- 最全的固态硬盘ssd安装win10专业版指南
- R语言 Hurst指数计算
- 科技云报道：全面云化时代，企业需要怎样的云安全能力？
- DM8:达梦数据库DEM--dmagent监控服务器代理部署（详细步骤）
- Http status code 状态码
- STM32 启动代码分析
- typescript 类型约束(:普通约束、接口约束、type约束)