HTML5与CSS3在触屏应用中的实践与经验分享

"这篇资源是关于前端JavaScript经验的分享，主要关注HTML5在触摸屏设备中的应用。分享者通过PPT的形式，展示了如何在2011年利用HTML5和CSS3来构建触屏网站，特别是在机票、酒店、团购、列车搜索以及用户中心等场景的应用。文中提到了对不同系统（如Android和iOS）的支持，并探讨了前端架构、技术选型、实施细节以及遇到的挑战。" 在分享中，前端开发者首先讨论了当时触屏设备的现状，以去哪儿网（Qunar.com）为例，展示了其在多个功能模块（如机票搜索、酒店搜索、团购和用户中心）的应用。整体架构包括浏览器、Velocity引擎、Servlet、Mobile Server和Map，以及基于Json的数据交互。前端部分选择了jQuery作为JS框架，以实现更好的兼容性和性能。 在技术选型方面，分享者进行了调研，比较了纯HTML5+CSS3方案与混合方案。虽然纯HTML5+CSS3方案具有更好的语义化和性能，但考虑到兼容性问题，他们决定采用混合方案，并为不完全支持新特性的Nokia S60 V5提供单独版本。 在实施过程中，分享者提到了一些关键的CSS3技巧，如使用`:first-child:last-child:first-of-type:last-of-type`来解决首尾差异，用`nth-child(n)`实现斑马条纹效果，用`type="tel"`和`type="search"`增强表单支持，以及使用`input[type="search"]`来优化搜索体验。同时，他们也强调了屏幕自适应的重要性，虽然在Nokia S60 V5上遇到了降级处理的挑战。 对于前端JavaScript，分享者调研了当时流行的移动Web开发框架，如iUI、jQTouch、Sencha Touch和jQuery Mobile，但由于这些框架的UI风格与需求不符，或者功能组件不完善，他们最终决定不依赖这些框架，而是自定义开发。 总结来看，这篇分享揭示了在早期阶段HTML5和CSS3在触屏设备上应用的探索和实践经验，包括前端架构的设计、技术选型的考量、兼容性问题的解决方法，以及对未来的展望，即尽管新技术带来了便利，但开发者仍需面对各种设备和平台的兼容性挑战。