用于Web设计和开发的跨浏览器/平台的完整参考

时间:2012-01-12 11:19:43

标签: reference cross-browser cross-platform

我是网页设计和网站开发领域的新手,现在我开始对HTML,CSS,Javascript,AJAX和PHP感到非常满意,我想知道在哪里可以获得跨浏览器的完整参考设计与开发。

我在其他网页设计师的博客/个人网站上学到了很多东西,每次他们解释跨浏览器兼容性问题和解决方案时,我总是想知道他们从哪里得到这个,他们如何了解浏览器以及他们如何保持这些最新(特别是浏览器经常更新,分辨率随硬件的发展而变化(显示器,平板电脑,智能手机等))。

任何愿意提供任何参考资料的网页设计师? 是否有(完整的)参考来学习这些东西?

我是否应该广泛了解现代浏览器,Gecko,Webkit等,或者对于我想要的用途,它是否精通技术/复杂/耗时? (我还想了解有关安全性的现代浏览器的更多信息,因此我实际上不介意从哪里开始学习有关浏览器内部以及它们如何运行的技术内容的建议。)

非常感谢您提供任何建议/答案/参考(网站,书籍,播客,Feed,推特上的专家,g +等)

PS:我对跨浏览器(IE,Firefox,Chrome,Safari,Opera)和跨平台(PC,mac,linux,移动设备,可能是平板电脑)感兴趣

2 个答案:

答案 0 :(得分:2)

我建议您专注于目前最常用的内容。

如果我是你,我会专注于学习用现代浏览器做事,然后继续进行响应式设计,&最后,我们继续尝试使用旧版浏览器。

据我所知,关于跨设备& amp;跨浏览器测试/开发。这就是为什么你可能想在这里和那里挑选东西并试着写自己的笔记,你自己的参考。

让旧版浏览器正常运行:

现在在2014年,我们可以看到IE8仍然在网络上使用 - 我怀疑主要是因为没有升级标准操作系统的大公司(以及随附的标准浏览器)别无选择,只能使用IE8。

无论如何,我会专注于学习IE8上的跨浏览器解决方案。 IE9。 IE10 +比以前的版本工作得更好,即使它仍然不如其他浏览器好。 Firefox,Safari& Chrome通常是最新的,因此无需担心它们太多。通常,您可以通过一些谷歌搜索找到适用于这些浏览器的CSS。 CSS技巧也是一个很好的参考,即。 http://css-tricks.com/snippets/css/cross-browser-opacity/

同样,节省时间的一个好方法是编写自己的笔记,或保存链接到精彩的文章/代码片段。无论哪种方式适合您,使用evernote,您的博客,或其他方式。

以下是我的笔记https://sites.google.com/site/adrienitnotes/html-css,我几乎每天都使用它们。

最好的事情就是边做边学,但更好的是通过做更多的研究,阅读和阅读,在下班后学习额外的东西。实验。没有那么多人有/花时间去做那件事......但它可以带来巨大的变化。

关于跨浏览器测试,您可以使用browserstack。微软现在通过让您免费试用3个月(适用于Windows操作系统的Web浏览器)来“支持”browserstack http://www.modern.ie/en-us/virtualization-tools

我在browserstack上创建了关于IE浏览器测试的问题:Internet Explorer versions testing in February 2014: browserstack, saucelabs, ghostLab, spoon & other tools

关于跨浏览器功能兼容性,使用Modernizr绝对是可行的方法:modernizr可帮助您测试Web浏览器支持的功能。然后相应地采取行动(即加载库,或者最坏的情况,显示“不支持的Web浏览器”错误消息)。但是,您只想将其用于“某些”功能,每次加载额外的库时,它都会使您的页面加载速度变慢。可能与另一个图书馆发生冲突。由你来达成适合你的妥协。

关于HTML5,CSS3,Modernizr和&amp ;;我写的一些事情(真的注意到了) Polyfill(polyfill:js shim复制旧浏览器的标准API):https://sites.google.com/site/adrienitnotes/html-css/html5

另一个提示:阅读很多相关的SO问题&答案有很好的评价(仅限!),即。 How do I give text or an image a transparent background using CSS?

祝你好运!

修改

在过去的几个月里,我还想到了一些其他的事情:

  • 尝试注意质量和网站的质量。专注于那些:互联网上有很多内容,确保你学习以质量着称的网站(即csstricks,caniuse.com,mozilla.org,sitepoint.com,html5rocks.com,aListApart)。 COM)。同样地,你想知道在搜索主题时出现的常见网站,但质量很差,有很多(即w3schools,见w3fools.com

  • 在您所在领域处于领先地位的研究作者/开发人员,尝试查找他们的博客,他们的书籍,他们的视频,他们的演示文稿,他们的互动课程(如果他们提供任何)。即。 http://davidwalsh.name/

  • 了解良好做法。这将使您在项目和工作中节省大量时间。你作为开发人员的职业生涯只是google“html good practices”或“javascript good practices”,或“jQuery good practices”

  • 了解同一种语言中相似“事物”之间的差异,您很可能会以这种方式更快地学习。 (即“jQuery:fadeIn()和fadeTo()之间有什么区别?”)。细节有所不同。

  • 尝试一些在线学习工具,现在有很多,只需尝试一对:teamtreehouse.com和teamtreehouse.com/library,tutsplus.com,codecademy.com,www.coursera.org,gibbon.co/ flow#programming,khanacademy.org /computing / cs,udacity.com,academicearth.org,memrise.com / courses / english / comput-engineering /,edx.org,ocw.mit.edu,codeschool.com

  • 尝试找一份有导师的工作,有人可以指导你,建议你,鼓励你。根据我的经验,与一位优秀的导师(每天有一点时间)学习可以<强>你的学习速度加倍或三倍

答案 1 :(得分:1)

您必须查看Modernizr http://www.modernizr.com/ javascript库,它为您提供了大量工具来探索客户端的兼容性并升级您的。

相关问题