SitePoint播客#95:与Paul Irish不可同日而语

Episode 95 of The SitePoint Podcast is now available! This week Kevin Yank (@sentience) chats with Paul Irish (@paul_irish), Google Chrome Developer Relations guy, jQuery guy, and Modernizr guy, about how to detect the features supported by browsers, and what to do about the features you can’t detect.

SitePoint Podcast的 第95集现已发布! 本周,Kevin Yank( @sentience )与Paul Irish( @paul_irish ),Google Chrome开发人员关系人员,jQuery人员和Modernizr人员进行了聊天,讨论如何检测浏览器支持的功能,以及如何处理这些功能。 t检测。

在浏览器中收听 (Listen in your Browser)

Play this episode directly in your browser! Just click the orange “play” button below:

直接在浏览器中播放此剧集! 只需点击下面的橙色“播放”按钮:

下载此剧集 (Download this Episode)

You can also download this episode as a standalone MP3 file. Here’s the link:

您也可以将本集下载为独立的MP3文件。 这是链接:

面试成绩单 (Interview Transcript)

Kevin: January 17th, 2011. This week a mega-techy conversation about feature detection in a post-standards world. I’m Kevin Yank and this is the SitePoint Podcast #95: The Undetectables with Paul Irish.

凯文(Kevin): 2011年1月17日。本周,有关后标准世界中的特征检测的大型讨论。 我是凯文·扬克(Kevin Yank),这是SitePoint播客#95:与Paul Irish的不可探测之处。

And I’d like to welcome Paul Irish on the Podcast today. Hi Paul.

我想今天在播客上欢迎Paul Irish。 嗨,保罗。

Paul: Hi, Kevin, how’s it going?

保罗:嗨,凯文,最近怎么样?

Kevin: Thanks for being on. Paul is, well, Paul is a busy guy. His website says he’s a front-end developer but he also works for the Google Chrome Developer Relations Team, I assume there’s a whole team behind that developer relations, it’s not just you is it?

凯文:谢谢你的参与。 保罗很好,保罗是个忙人。 他的网站说他是一名前端开发人员,但他还为Google Chrome开发人员关系团队工作,我认为在整个开发人员关系背后都有一个团队,这不仅是您吗?

Paul: Yeah, we have about ten people all across the world talking with developers about making really cool stuff happen on the Web.

保罗:是的,我们在全球大约有十个人与开发人员交谈,以使真正酷的事情发生在Web上。

Kevin: Yep and when you’re not busy with that you’re hacking on jQuery, you’re a member of the jQuery team, and if that weren’t enough you also work on this amazing library, I guess you could call it a library, called Modernizr which is what brings us to you today.

凯文:是的 ,当您不忙于使用jQuery时,您就是jQuery团队的一员,如果还不够,您还可以在这个令人惊叹的库中工作,我想您可以称之为一个名为Modernizr的图书馆,今天就把我们带给您。

Paul: Yeah, Modernizr is basically it’s a feature detection library and it basically has the best, most robust detects for a lot of common things for if you want to know if the current browser that you’re in supports CSS transforms or border-radius or WebGL and Modernizr has collected the best ways to basically detect these things and then gives you some nice CSS hooks and JavaScript hooks so that you can kind of adapt your page to be very responsive to the unique environments that it’s displayed in.

保罗:是的,Modernizr基本上是一个功能检测库,并且如果您想知道您所在的当前浏览器是否支持CSS转换或border-radius,它基本上具有对许多常见问题的最好,最可靠的检测或WebGL和Modernizr收集了基本检测这些东西的最佳方法,然后为您提供了一些不错CSS钩子和JavaScript钩子,以便您可以使页面适应显示的独特环境。

Kevin: So we’ve always told people that the right way to handle if you need to do graceful degradation or even progressive enhancement, if you need to detect features before you rely on them in your web page, the right way to do it is to use some sort of code trick or ideally in the case of JavaScript features you can actually directly ask JavaScript does this thing exist before you use it, and we tell people to do that rather than saying, oh, detect a particular browser version I’m using and then infer the features that that has. It’s one thing to tell people that but I guess what we’ve discovered over the years is that the way of detecting those features varies from feature to feature to feature, and it almost takes twice as long to learn how to detect these things as it does to use them.

凯文:所以我们一直告诉人们,如果需要进行优雅的降级甚至逐步增强功能,正确的处理方式;如果需要在依赖网页之前检测出功能,那么正确的处理方法就是要使用某种代码技巧,或者理想情况下使用JavaScript功能,您实际上可以直接问JavaScript在使用它之前是否存在这种东西,我们告诉人们这样做不是说,哦,检测到特定的浏览器版本m使用,然后推断具有的功能。 告诉人们是一回事,但是我想我们多年来发现的是,检测这些特征的方式因特征而异,学习如何检测这些特征所需的时间几乎是原来的两倍。确实使用它们。

Paul: Right. It’s interesting, like geolocation is a really nice one where all you have to do is say if (navigator.geolocation) and you have basic geolocation support, and that’s pretty much all you need to get going. But then you look at something like 3D CSS transforms. Interestingly, the very base technique for detecting a CSS property is seeing if like element.style.webkitTransform or something exists, if the browser recognizes that property. In the case of 3D transforms it exists but even in Chrome, which hasn’t supported 3D transforms for a bit now, and so you have to do a more robust technique where you actually check to see if a specific media query would succeed or not, and so there are all these little gotchas when it comes to feature detection, things might act differently inside private browsing or incognito mode, and so these are the kinds of things that get wrapped up into the Modernizr source code which is a fun read if you’re into the stuff.

保罗:对。 有趣的是,地理位置非常好,您所要做的就是说if (navigator.geolocation)是否拥有基本的地理位置支持,这几乎就是您所需要的。 但是随后您将看到类似3D CSS转换的内容。 有趣的是,检测CSS属性的element.style.webkitTransform技术是查看浏览器是否识别出element.style.webkitTransform东西。 在3D转换的情况下,它存在,甚至在Chrome中也是如此,Chrome暂时不支持3D转换,因此,您必须做一个更强大的技术,在其中实际检查特定媒体查询是否成功,因此在进行特征检测时会遇到所有这些小难题,在私有浏览或隐身模式下,事情的行为可能会有所不同,因此,这些都是被包裹在Modernizr源代码中的,如果阅读起来很有趣。你很喜欢这个东西。

Kevin: What I love about Modernizr is the way it boils down all these tricks into something really usable. What do you get; you put Modernizr into a page, it runs, what do you hang your hat on, what does it produce for you?

凯文:我对Modernizr的爱好是将所有这些技巧归结为真正有用的方式。 你得到了什么; 您将Modernizr放到页面中,它会运行,您会戴什么帽子,它会为您带来什么?

Paul: It gives you basically two separate APIs. The most usable one and the first one that people usually grab onto is that it throws a bunch of classes onto the html element on the page, and so now the html element has a class of border-radius, but then it might have a class of no-webgl and no-flexbox for the flexible box model. And so with that in your styles you can like let’s say with box-shadow if you’re using box-shadow you’re just going to put in those box shadow rules, but if you don’t have box-shadow you might actually try and do like a fake shadow where you take the right border and make it dark gray and the bottom border and make it like a light gray, or you might introduce background images that kind of fake it, and so you kind of want to have control over when there’s not support, so that’s what you get with that API. Also at the same time it exposes a global JavaScript object called modernizr, and so modernizr.video is true if there is support for HTML5 video, and even modernizr.video.ogg is true if there is support for the Ogg codec for video.

保罗:它基本上为您提供了两个单独的API。 人们通常会抓住的最有用的和第一个是页面上的html元素上抛出了一堆类,因此现在html元素具有一类border-radius ,但是随后可能有一个类no-webglno-flexbox用于柔性盒模型。 因此,在您的样式中,您可以使用box-shadow说一下,如果您使用box-shadow ,则只需要放入那些框阴影规则,但是如果您没有box-shadow ,则可能尝试做一个伪造的阴影,将正确的边界设为深灰色,将底边界设为浅灰色,或者可以引入背景图像来伪造它,因此您想要控制何时不支持,这就是您使用该API所获得的。 此外,在同一时间,它暴露出称为全局JavaScript对象modernizr ,所以modernizr.video如果对于HTML5视频支持,甚至是真正的modernizr.video.ogg如果有对Ogg编解码器支持视频是真实的。

Kevin: Wow. So basically you get these two things, you get the class attribute on the html element which lets you — it’s kind of the next best thing to CSS media queries; ideally you’d be able to use like a CSS media query that said if the browser supports this feature use this whole bunch of CSS rules on the page, but since we can’t quite do that with media queries the next best thing is you can just make at the start of all of those rules html. the feature you’re looking for or the feature that’s absent, and you can hang a whole bunch of rules off that conditionally. So you can hang CSS off of these feature detections and then the other API I guess is for hanging JavaScript behavior off those feature detections.

凯文:哇。 因此,基本上,您得到了这两件事,您在html元素上获得了class属性,它使您可以– CSS媒体查询的第二大优点; 理想情况下,您可以像CSS媒体查询那样使用,它表示如果浏览器支持此功能,请在页面上使用全部CSS规则,但是由于媒体查询我们不能完全做到这一点,所以下一个最好的选择是可以在所有这些规则的开头添加html. 您要查找的功能或不存在的功能,您可以有条件地取消很多规则。 因此,您可以将CSS挂在这些特征检测之外,然后我猜另一个API用于将JavaScript行为挂在这些特征检测之外。

Paul: Right. And so the way that I’ve been using this for a while now is to basically “polyfill” support into older browsers if there’s isn’t any. And so “polyfill” is a word Remy Sharp actually came up with it.

保罗:对。 因此,我现在使用这种方式已有一段时间了,如果没有的话,基本上是对旧版浏览器进行“填充”支持。 因此,“ polyfill”是Remy Sharp真正想到的一个词。

Kevin: Yeah, I haven’t heard that word.

凯文:是的,我还没听说过。

Paul: It’s essentially a shim.

保罗:本质上是一个垫片。

Kevin: Well, polyfill is this product I remember my dad having in his workshop growing up; you squeezed it into cracks in the wall as far as I remember.

凯文:嗯,保鲜纸是我父亲在他的工作室里长大的产品。 据我记得,你把它挤在墙上的裂缝中。

Paul: Yeah, exactly! And so like IE 6 and 7 and 8 have a lot of cracks and so we’re gonna fill those cracks with these polyfills. So for instance I really like input type=range; I just type input type=range into my HTML I get a nice slider in WebKit and in Opera but in Firefox and IE I don’t get anything. And so actually I can use a JavaScript library to create a JavaScript based slider that acts the same as a slider that I get in the newer browsers. But then the thing is I actually would prefer not to load that JavaScript and those styles for all browsers, I don’t want to load them for the browsers that already support them. So what I can do is just say if there’s no support then I’m gonna load these files and they’re gonna activate and they’re gonna make sure that I have sliders now and that those sliders have the exact same API as the native sliders that I have. And the cool thing here is that all these polyfills they’re kind of like code with a death sentence because they’re gonna die, like the whole point is that they’re just biding time until all the browsers have these features.

保罗:好的! 就像IE 6、7和8一样,有很多裂缝,因此我们将用这些polyfill填充这些裂缝。 因此,例如,我真的很喜欢input type=range ; 我只在HTML中input type=range在WebKit和Opera中得到了一个不错的滑块,但是在Firefox和IE中却什么也没得到。 因此,实际上我可以使用JavaScript库来创建基于JavaScript的滑块,该滑块的行为与我在较新的浏览器中获得的滑块相同。 但是接下来的事情是,我实际上不希望为所有浏览器加载该JavaScript和那些样式,我不想为已经支持它们的浏览器加载它们。 所以我能做的就是说,如果没有支持,那么我将加载这些文件,然后将它们激活,并确保我现在有滑杆,并且这些滑杆具有与本机完全相同的API我有的滑块。 这里很酷的事情是,所有这些polyfill都像带有死刑的代码,因为它们会死掉,就像整个观点是,它们只是在等待所有浏览器都具有这些功能而已。

Kevin: Yeah.

凯文:是的。

Paul: But the point is that we only have to load them if we need them and so with Modernizr we have that control.

保罗:但是关键是,只有在需要时才需要加载它们,因此使用Modernizr,我们就可以控制它。

Kevin: Right. So we all have these websites that we built five years ago that if you look at the code you can go, oh, that entire approach is because I needed to support Internet Explorer 5 back then, and as a result this website is completely inefficient and difficult to maintain today because of a browser that no one uses anymore. It’s nice to be able to bundle those chunks of code that you are know are going to go away hopefully sooner rather than later so they’re really easy to lift out.

凯文:对。 因此,我们所有人都有五年前建立的这些网站,如果您看一下代码就可以使用,哦,整个方法是因为那时我需要支持Internet Explorer 5,因此该网站效率非常低下,由于浏览器不再使用,今天很难维护。 能够将您知道将要早日消失的那些代码块捆绑在一起是一件很高兴的事情,因此它们确实很容易推出。

Paul: Yeah, exactly.

保罗:好的。

Kevin: I suppose the biggest benefit of a library like Modernizr is it makes it more convenient than ever to kind of start at the top, start with the best browsers today, build a site that works in those and then gradually work down through your list of more and more loathed browsers and adding support for them as you go.

凯文:我想像Modernizr这样的图书馆最大的好处是,它比以往更方便地从顶部开始,从当今最好的浏览器开始,建立一个可在其中使用的网站,然后逐步浏览您的列表越来越讨厌的浏览器,并在您使用时为其添加支持。

Paul: Yeah, I totally agree. Andy Clark who goes by @malarkey on Twitter, he’s been evangelizing this kind of philosophy of design and development really well, it kind of coalesced it all into a nice package in his recent book Hardboiled Web Design, but it’s very much an approach of things are gonna look different in different browsers and that’s okay, but we want to be designing for the best possible experience because all browsers are catching up to where the top browser’s at, and we want to make the experiences really shine and really be engaging at that level. And we can kind of make our designs adaptive to the environment and so he’s really keen on this kind of approach of feature detection and skillful use of the features when they’re there and handling the cases when they’re not in a responsible manner.

保罗:是的,我完全同意。 安迪·克拉克(Andy Clark)在Twitter上受到@malarkey的关注,他一直在很好地宣扬这种设计和开发哲学,在他最近出版的《 硬沸腾的网络设计》一书中,这一切都很好地融合在一起,但这完全是一种方法在不同的浏览器中看起来会有所不同,这是可以的,但是我们希望为实现最佳体验而设计,因为所有浏览器都在追赶顶级浏览器的位置,并且我们希望使体验真正闪耀并真正参与其中水平。 而且我们可以使我们的设计适应环境,因此他非常热衷于这种特征检测和熟练使用特征的方法,并在不负责任的情况下处理情况。

Kevin: What’s your take on I suppose the common argument that is it just results in a whole lot more work, rather than building one website you end up building two or three.

凯文:您的看法是什么?我认为通常的说法是,这只会带来更多的工作,而不是建立一个网站,而最终却要建立两个或三个网站。

Paul: It doesn’t for me. (laughter) It makes a lot more work when — it’s a lot more work when everyone expects things to look the same, like I’ve spent a lot of time trying to get the alignment of a label to a radio button to be similar across browsers.

保罗:不适合我。 (笑声),这在以下情况下会做更多的工作-当每个人都希望外观相同时,这会做更多的工作,就像我花了很多时间试图使label与单选按钮的对齐在整个过程中都一样浏览器。

Kevin: Ah, yeah.

凯文:是的。

Paul: It’s such a pain, and like so we actually ended up landing some code in the HTML5 Boilerplate project that I’m active on to handle this, and so this issue might be put to bed, but I think trying to get rounded corners and shadows functional in IE 6 and 7 and 8 is a pain, and so it’s like selling someone on the idea that things can look different but acceptable everywhere actually ends up saving you a whole lot more time as a developer than actually trying to make it look the exact same.

保罗:真是太痛苦了,就像这样,我们实际上最终在HTML5 Boilerplate项目中找到了一些我正在积极处理的代码,因此可以解决这个问题,但我认为试图解决这个问题和阴影在IE 6、7和8中正常工作是一件痛苦的事情,所以这就像向某人推销那样,事情看起来可能有所不同,但在任何地方都可以接受,实际上最终为您节省了比作为真正开发者更多的时间。看起来完全一样。

Kevin: Yeah, I agree with you. We talked about HTML5 Boilerplate actually on this podcast back in episode #75, but yeah I think I agree with you that as soon as you— It’s an on paper argument, but in fact I think the killer hack here is to let a few of those things go. If 20% of your audience is on IE 6, and that would be a pretty extreme case these days I suppose, you’re hopefully lower than that now. But if 20% of your audience is IE 6 do you really want to spend the bulk of your time building code for that browser or do you want to make it look great on the great browsers and acceptable on the older browsers? I think you can save time that way, is what it comes down to.

凯文:是的,我同意你的看法。 在第75集中,我们实际上是在此播客中谈论HTML5 Boilerplate的,但是,是的,我想我同意你的看法,这是一个纸上论点,但实际上,我认为杀手是那些东西去。 如果您有20%的受众使用IE 6,那么我认为这是一个非常极端的情况,希望您现在比现在低。 但是,如果您有20%的受众是IE 6,您是否真的想花费大量时间为该浏览器构建代码,还是要使其在出色的浏览器上看起来不错,并在较旧的浏览器上被接受? 我认为您可以通过这种方式节省时间,这就是最终结果。

So, with all of us on the same page there is another page I wanted to talk about, and that is The Undetectables, and this is what put your name on my radar this week. This is a page you started and wrote the bulk of on the Modernizr Wiki. This is on the— Modernizr’s hosted on the GitHub code sharing service and it has a Wiki attached and one of the three pages in that Wiki is The Undetectables. So I suppose as you start writing a library to detect features you become extra aware of the features you can’t detect.

因此,我们所有人都在同一页上,我想谈的是另一页,那就是The Undetectables ,这就是您的名字在本周引起我关注的地方。 这是您开始的页面,并在Modernizr Wiki上撰写了大部分内容。 它位于-Modernizr托管在GitHub代码共享服务上,并附加了一个Wiki,该Wiki中的三个页面之一是The Undetectables。 因此,我想当您开始编写库以检测功能时,您会更加意识到无法检测的功能。

Paul: Right. And so I was I sold on feature detection a while ago, but I was always catching these cases from time to time when I was like I don’t think that this is detectable, and the most obvious one and the one that showed itself up to me first was the behavior of the select element in IE 6. Microsoft calls it a “windowed element”, and it shows up above everything else and so you’ll put like a modal dialogue on top but it’ll be like showing right through it and so you have to do this annoying thing where you use an empty iframe that’s underneath the layer that you’re trying to show and that’s the only way to like — it’s such a pain.

保罗:对。 因此,我不久前就被出售给我进行特征检测,但是我总是时不时地捕捉到这些情况,因为我觉得我认为这是不可检测的,而且最明显的一个和一个表现出来的情况对我来说,首先是IE 6中select元素的行为。Microsoft称其为“ windowed element”,它显示在所有其他内容之上,因此您将像模式对话一样放在顶部,但就像正确显示一样通过它,所以您必须做这件令人讨厌的事情,在您要显示的图层下方使用一个空的iframe ,这是唯一喜欢的方法-这真是太痛苦了。

Kevin: Yeah, the way we often do it is we hide all of the select boxes on the pages as we go to modal dialogue.

凯文:是的,我们经常做的是在进行模态对话时隐藏页面上的所有select框。

Paul: Or that, yeah.

保罗:或者,是的。

Kevin: It’s super ugly.

凯文:这太丑了。

Paul: It’s terrible. And so like I was thinking about it and I was kind of exploring the element itself and I was trying to see if it exposed any sort of API that indicated that it was windowed, and there’s really nothing, and there’s no way to—

保罗:太可怕了。 因此,就像我在考虑它一样,我正在探索元素本身,我试图查看它是否暴露了某种表示已被窗口化的API,实际上没有任何东西,并且没有办法-

Kevin: You’re looking for like a hasLayout for this particular quirk, yeah.

凯文:您正在为这个特殊问题寻找类似hasLayout的方法。

Paul: There’s no way to detect that that element will have that sort of behavior in that browser, and so you’re basically left with if it’s IE 6 do this thing, and so you use like conditional comments and like conditional comments is a lesser form of browser sniffing and so it’s moderately okay.

保罗:无法检测到该元素在该浏览器中是否具有这种行为,因此,如果使用IE 6进行此操作,则基本上就剩下了,因此,使用条件式注释和条件式注释的可能性要小一些。形式的浏览器嗅探,所以还可以。

Kevin: Well, yeah, it would be great if you could just do an API call get a list of all of the “windowed elements” on the page and do something with them to get them out of the way.

凯文:是的,如果您可以进行API调用以获取页面上所有“窗口元素”的列表并对其进行处理以使其摆脱干扰,那就太好了。

Paul: Right. And so what I wanted to do was basically starting with select elements and going to things like registerProtocolHandler, which allows you to associate the mail to protocol with a web app instead of a native system app. That is exposed in some older versions of WebKit but doesn’t actually do anything but you don’t know that it doesn’t do anything because there’s no way to tell. Yeah, so, on The Undetectables page we basically have a list of a lot of these things, things from HTML5, things relating to networking (the amount of simultaneous connections that are possible, there’s no way to detect that smoothly or easily), and other things because, you know, I am an enormous proponent of feature detection. But I don’t want people to think that we can dissolve the user agent string or completely remove browser sniffing from the foundation, from any sort of library, because I just wanted to show that there are things that we might not be able to work around with feature detection and so it’s these things to keep in mind.

保罗:对。 因此,我要做的基本上是从select元素开始,然后转到registerProtocolHandler东西,它使您可以将邮件与协议与Web应用程序而非本机系统应用程序相关联。 WebKit的某些较早版本中公开了这一点,但实际上并没有执行任何操作,但是您不知道它什么也没有执行,因为无法分辨。 是的,因此,在“无法检测到的页面”上,我们基本上列出了很多东西,包括来自HTML5的东西,与网络相关的东西(可能的同时连接数量,无法顺利或轻松地检测到),以及其他原因是因为我是特征检测的大力支持者。 但是我不希望人们认为我们可以从任何类型的库中消除用户代理字符串或完全消除基础中的浏览器嗅探,因为我只是想表明某些事情我们可能无法正常工作围绕着功能检测,因此要牢记这些。

But I also like it because it’s kind of a good hit list because some of these things might actually be detectable; a good example was that when we had a lot of people contributing to this document when we released it, generated content with using :before and :after pseudo-selectors doesn’t really show up in the DOM so you can’t really touch it that way, but so someone added that in but a lot of other people saw that and were like I bet we can actually detect that, and so we actually ended up finding a really solid method of detecting support for that in a way that works everywhere.

但是我也喜欢它,因为它很受欢迎,因为其中有些东西实际上是可以检测到的。 一个很好的例子是,当我们有很多人在发布此文档时为之贡献时,使用:before:after伪选择器生成的内容并没有真正显示在DOM中,因此您无法真正使用它这样,所以有人补充说,但是很多其他人看到了这一点,就像我敢打赌,我们实际上可以检测到这一点,因此我们最终找到了一种真正可靠的方法来检测对此问题的支持,这种方法在任何地方都可以使用。

Kevin: Do you remember off the top of your head what the trick was?

凯文:你还记得头顶上的花招吗?

Paul: I think essentially what it is, so using the :before pseudo-selector and then content it injects content into the view directly inside that element but it’s not outside the element, so anyway, the trick is to basically force the container box to expand in size either through text wrapping or another way, and we can then detect the size of that box changing dimensions.

Paul:我认为本质上是什么,所以使用:before伪选择器,然后使用content它将内容直接注入到该元素内部的视图中,但不在元素外部,因此无论如何,诀窍是基本上迫使容器框通过文本换行或其他方式扩展大小,然后我们可以检测到更改尺寸的盒子的大小。

Kevin: Right. So if you make the :before element style it as a block with one pixel height you can detect that the height of the containing element has increased by one pixel.

凯文:对。 因此,如果将:before元素样式设置为一个像素高度的块,则可以检测到包含元素的高度增加了一个像素。

Paul: Right, that there’s a change.

保罗:对,那是变化。

Kevin: Wow! Yeah, I love that stuff (laughter). I don’t know if I’m the only one but I geek out on this stuff. So, the question I have is, is this a list of things that Modernizr simply doesn’t detect or is this a list of things where you’ve had to cheat in Modernizr and put in a user agent string detection?

凯文:哇! 是的,我喜欢那个东西(笑声)。 我不知道我是否是唯一的一个,但是我很喜欢这个东西。 所以,我的问题是,这是Modernizr根本无法检测到的东西列表还是这是您必须在Modernizr中作弊并放入用户代理字符串检测的东西列表?

Paul: Modernizr has no user agent string parsing at all in it, it actually previously had a few conditional compilation flags to snag IE’s JScript engine but those are now gone. So, Modernizr is straight up feature detection, there’s no user agent tricks in there right now.

保罗: Modernizr根本没有用户代理字符串解析,它实际上以前有一些条件编译标志来锁定IE的JScript引擎,但现在已经不存在了。 因此,Modernizr是直接进行功能检测的工具,目前尚无用户代理技巧。

Kevin: So it must be really, I don’t know, that seems to me like a really purist approach, it seems like you could add support for every single bullet point in this list if you just compromised on that one point.

凯文:所以我真的不知道这真的是一种非常纯粹的方法,如果您在这一点上有所妥协,似乎可以为列表中的每个要点添加支持。

Paul: (Laughs) Yeah, probably.

保罗:(笑)可能。

Kevin: (Laughs) So what’s the rationale, do you want to keep this stuff hard so that hopefully the browser vendors will take notice—and ignoring for the sake of this conversation the fact that you work for a browser vendor.

凯文:(笑)那么,这样做的理由是什么,您是否想让这些东西保持辛苦,以便希望浏览器供应商注意到这一点,并且为了进行对话而忽略了您为浏览器供应商工作的事实。

Paul: (Laughs) Yeah, let’s ignore that! I’ll give you a good example that is very close to my heart, which is file drag and drop is really sweet. So like in Gmail you can drag a file from your desktop into Gmail and all of a sudden it detects that, it sees that you’re actually dragging, you can just drop it right onto your message and it throws it in as an attachment so you don’t have to like go through that big, long finding through your Finder dialog to find that file, you just drag it in, it’s great. The feature is huge and I think people would adapt their apps to basically acknowledge, oh, this browser can support this. The problem there is that in order to detect it you basically have to explore the dataTransfer object, the dataTransfer object is attached to the event object that’s passed into the handler of a drag event.

保罗:(笑)是的,让我们忽略它! 我会给你一个很好的例子,它非常贴心,拖放文件确实很不错。 因此,就像在Gmail中一样,您可以将文件从桌面拖到Gmail中,突然它会检测到该文件,发现您实际上在拖动,可以将其直接拖放到邮件上,并将其作为附件丢弃,您不必像在Finder对话框中那样漫长而漫长的查找来找到该文件,只需将其拖入其中就好了。 该功能非常强大,我认为人们会适应他们的应用程序,以便基本上认可这一点,哦,此浏览器可以支持此功能。 问题在于,为了检测到它,您基本上必须探索dataTransfer对象,将dataTransfer对象附加到传递给拖动事件处理程序的事件对象。

Kevin: Wow, okay.

凯文:哇,好吧。

Paul: But, Gecko exposes a global dataTransfer constructor, and so basically in Firefox we can just look inside that dataTransfer constructor and see, oh, actually there is native support for file drag and drop in here. But because that object isn’t exposed globally in WebKit—so in Safari and Chrome—you can’t.

保罗:但是,Gecko公开了一个全局的dataTransfer构造函数,因此基本上,在Firefox中,我们可以在该dataTransfer构造函数内部查看,哦,实际上,这里确实支持文件拖放。 但是,由于该对象没有在WebKit中全局公开(因此在Safari和Chrome中),因此您不能这样做。

Kevin: You need a drag event first.

凯文:首先需要一个拖动事件。

Paul: Yeah, you’d need to actually have the drag happen and then you would know at that point, but it’s usually too late when you’re actually in the action.

保罗:是的,您实际上需要进行拖曳操作,然后您会知道这一点,但是实际上当您采取行动时通常为时已晚。

Kevin: Yeah, you can’t be checking for that when Modernizr runs at the start of the page.

凯文:是的,当Modernizr在页面开始运行时,您无需检查。

Paul: Exactly, yeah, exactly. So that’s a good case where I think that the browser vendors can actually respond to this list and say— Because all the browser vendors absolutely support feature detection, in theory they agree that everyone should be doing it instead of UA parsing, and so I think there’s a few cases here where we can basically guilt browser vendors into doing the right thing. I mentioned before registerProtocolHandler, that was actually removed by WebKit because of this exact case, someone spoke up and said hey this is a pain for developers who are using feature detection, they can’t detect this, you can’t have it exposed, and WebKit’s like okay we’ll remove it. So they are being responsive and I think there are a few cases here where they could be better.

保罗:好的,是的。 因此,这是一个很好的情况,我认为浏览器供应商实际上可以响应此列表并说-因为所有浏览器供应商都绝对支持功能检测,所以从理论上讲,他们同意每个人都应该这样做,而不是UA解析,因此我认为在某些情况下,我们基本上可以使浏览器供应商犯下正确的责任。 我之前提到过registerProtocolHandler ,实际上是因为这种情况而被WebKit删除了,有人开口说,嘿,这对于使用功能检测的开发人员来说是一个痛苦,他们无法检测到,您无法公开它, WebKit就好了,我们将其删除。 因此,他们React灵敏,我认为这里有些情况可能会更好。

Kevin: So, let’s talk about what doing the right thing means because I think it has changed over the years, and particularly in the last few years we’ve kind of— We’ve moved into what I guess I would call kind of a post-web-standards era where once upon a time we thought of web platforms and features in those web platforms in terms of W3C spec versions. This browser supports CSS1; this browser supports CSS2; it supports HTML4; it supports XHTML1. You bundled all these features together and you said the browser supports all of these or none of these and I’m gonna build my web pages along those lines. And the pace of browser development, the competition between the different browser vendors in the past few years has ramped up to a pace that we haven’t seen since the Web bubble in around 2000, where the version 4 browsers were going at it. And in that environment it just does not seem practical to bundle those features together, each individual CSS property and in some cases each individual value that you can assign to that CSS property is something that may have full support, no support, or support under development in any given browser. And I think web developers need to make their peace with that, but it means that it puts the burden I think on web browser vendors to be responsible about how they introduce new features into their platforms. And many of the items in this list of undetectables strike me as examples where they have failed on that front.

凯文:所以,让我们来谈谈做正确的事意味着什么,因为我认为这些年来已经发生了变化,尤其是在最近几年中,我们已经-我们已经进入了我认为我称之为“后Web标准时代,曾几何时,我们根据W3C规范版本想到了Web平台和这些Web平台中的功能。 该浏览器支持CSS1。 该浏览器支持CSS2; 它支持HTML4; 它支持XHTML1。 您将所有这些功能捆绑在一起,并说浏览器支持所有这些功能,或者不支持所有这些功能,我将按照这些原则构建我的网页。 随着浏览器的发展,过去几年中不同浏览器供应商之间的竞争已经加速到自2000年左右的网络泡沫(第4版浏览器开始使用它以来)以来从未见过的速度。 在那种环境下,将这些功能捆绑在一起似乎不切实际,每个单独CSS属性,在某些情况下,您可以分配给该CSS属性的每个单独的值都可能得到完全支持,没有支持或正在开发中在任何给定的浏览器中。 而且我认为Web开发人员需要为此与他们保持和平,但这意味着我认为Web浏览器供应商要负担如何将新功能引入其平台的责任。 在这个无法检测到的列表中,有很多项目让我感到震惊,例如它们在那方面都失败了。

Paul: That’s a good way of looking at it. I agree though I think we can’t, you know, a lot of people used to be like, “Well which browser supports HTML5? We have to wait till browsers support HTML5.”

保罗:那是个很好的观察方法。 我同意,尽管我认为我们不能像很多人以前那样说:“哪种浏览器支持HTML5? 我们必须等到浏览器支持HTML5。”

Kevin: Yeah.

凯文:是的。

Paul: We’re not talking about one thing, we’re talking about what are the features inside HTML5 that we want to use and when are those available, and so you definitely have to break it down. Even with CSS box-shadow, box-shadow you can do an inset box shadow and that has different support other than the standard box shadow, and then there’s a way to spread out or condense the size of the box shadow that’s different than the spread, and so there’s like all these little pieces of these implementations that differ even across the browsers that support the base feature.

保罗:我们不是在谈论一件事,而是在谈论我们要使用HTML5中的哪些功能以及何时可用这些功能,因此您绝对必须对其进行分解。 即使使用CSS box-shadowbox-shadow您也可以创建inset box shadow,它具有与标准box shadow不同的支持,然后还有一种方法可以散布或压缩与split不同的box shadow大小,因此,即使在支持基本功能的浏览器之间,这些实现的所有小细节也有所不同。

Kevin: Yeah, features, and sub-features, and aspects of features.

凯文:是的,功能和子功能,以及功能的各个方面。

Paul: And so I was gonna say seems like all those things that I mentioned are totally detectable, so it’s totally flexible for you as a developer to respond and to customize that experience.

保罗:我想说的是,我提到的所有这些东西似乎都是可以检测到的,因此,作为开发人员,您可以灵活地响应和定制这种体验。

Kevin: Right. So it seems like the browser vendors by mutual consensus have agreed that the right way to support a new CSS property is to put a dash at the start of a temporary property name and these are like these sort of features under development, these preview properties, and every time Internet Explorer does their own sort of hinky implementation of something and forgets to implement it as a temporary property I think people get legitimately upset, and more and more I think the onus is on the browser vendors to do the right thing here. With JavaScript features it’s relatively straightforward in most cases to detect the presence of a property or a method in the API, but some of the items in this list of Undetectables are things that you know the browser will tell you they exist but if you try and use them they don’t actually do anything yet.

凯文:对。 因此,浏览器供应商似乎已经达成共识,即支持新CSS属性的正确方法是在临时属性名称的开头加上破折号,这些就像正在开发的这类功能,这些预览属性,每当Internet Explorer自己执行某种巧妙的实现,而忘记将其实现为临时属性时,我认为人们都会感到不高兴,而且越来越多的人认为浏览器供应商有责任在这里做正确的事情。 使用JavaScript功能,在大多数情况下检测API中属性或方法的存在相对简单,但是“无法检测到的”列表中的某些项目是您知道的,浏览器会告诉您它们的存在,但是如果您尝试并使用它们,他们实际上还没有做任何事情。

Paul: So, a good example of this here is that— Well, I guess it’s worth pointing out that the vendor prefix is basically a signal to you as a developer that this, the behavior of this style might change, and by using this style you are entering into an agreement that you might have to update it in the future.

Paul:因此,这方面的一个很好的例子是-嗯,我想值得指出的是,供应商前缀基本上是作为开发人员向您发出的一种信号,表明这种风格的行为可能会发生变化,并且通过使用这种风格您正在签订协议,将来可能需要更新它。

Kevin: Yeah, you’re gonna have to subscribe to a mailing list if you use this feature (laughter).

凯文:是的,如果您使用此功能,则必须订阅邮件列表(笑声)。

Paul: In general we haven’t really seen too much of that where the behavior has changed quite significantly, but I can tell you just I think this last week WebKit changed how it does gradients.

保罗:总的来说,我们并没有真正看到太多行为发生了很大变化的东西,但是我可以告诉您,我只是想上个星期WebKit改变了它做梯度的方式。

Kevin: Yeah, that was the big one, CSS gradients.

凯文:是的,那是最大CSS渐变。

Paul: Right, and so now WebKit does linear and radial gradients very similar to how Firefox has been doing it which aligns very closely to what the spec has been updated to. And so it’s a little bit, it’s actually a touch different than what Firefox has had but it’s pretty close. But the nice thing is that actually it uses new properties so actually the syntax is different, so your old code should actually succeed and the new code uses new properties and so there won’t actually be a conflict there, but if you’re doing CSS gradients it will slowly be moving over to a completely standardized style which I think everyone is really looking forward to.

保罗:是的,所以现在WebKit进行线性和径向渐变非常类似于Firefox的工作方式,它与更新的规范非常接近。 因此,这有点,实际上与Firefox有所不同,但非常接近。 但可喜的是,实际上它使用的是新属性,因此语法实际上是不同的,因此您的旧代码应实际上会成功,而新代码将使用新的属性,因此实际上不会有冲突,但是如果您这样做CSS渐变将逐渐过渡到完全标准化的样式,我认为每个人都非常期待。

Kevin: Yeah, the other one that comes to mind I think was rounded corners, for a while every browser had its own border-radius property with its own vendor prefix, and at least in Firefox’s case it was because they didn’t feel like their implementation was quite complete, the background of the box would bleed out underneath the rounded corners for a while and they said until we get this working exactly the way we want we’re gonna keep it with a vendor prefix even though we’re not technically doing anything that breaks the standard where we don’t feel like this feature is complete yet I guess.

凯文:是的,我想到的另一个是圆角的,有一段时间,每个浏览器都有其自己的border-radius属性,并带有自己的供应商前缀,至少在Firefox的情况下是因为它们感觉不像他们的实施非常完整,盒子的背景会在圆角下方渗出一会儿,他们说,直到我们完全按照我们希望的方式进行工作,即使我们不愿意,也要保留供应商前缀从技术上讲,我认为做任何违反标准的事情都是我们认为该功能不完整的。

Paul: Right, yeah.

保罗:对,是的。

Kevin: So, why haven’t we seen similar things happen with JavaScript APIs? Why don’t we see methods with vendor prefixes?

凯文:那么,为什么我们还没有看到JavaScript API发生类似的事情? 为什么我们看不到带有供应商前缀的方法?

Paul: Um, that’s a good question.

保罗:嗯,这是一个很好的问题。

Kevin: Because it seems like the HTML5 web sockets API that I haven’t taken a close look at but I’ve seen a lot of people talking about how it’s just not ready for prime time and the browsers that do implement it the implementation isn’t good enough or final enough or stable enough for regular use.

凯文:因为似乎我没有仔细研究过HTML5网络套接字API,但是我看到很多人都在谈论它还没准备好迎接黄金时段,而真正实现它的浏览器却没有对于常规使用而言,效果不够好,效果不够好或不够稳定。

Paul: This is for web sockets in particular?

保罗:这特别是用于网络套接字吗?

Kevin: Yeah, yeah, yeah.

凯文:是的,是的。

Paul: Yeah, web sockets is an interesting one where Firefox and Opera removed their support and Chrome hasn’t removed their support but we have the code written and we’re ready to land a patch if there’s an exploit in the wild but we haven’t. But the thing is that the API itself of how web sockets work, the JavaScript API is completely fleshed out, it’s totally stable, it’s fine, in fact the problem that caused Firefox and Opera to remove it is at the protocol and networking level and so it’s kind of separate. But there are cases where JavaScript APIs are kept prefixed, and a good example there is Indexed Database, so Indexed Database the asynchronous implementation is already in Firefox and Chrome and the synchronous implementation is landing in Firefox in beta 9 which is due out, it’s supposed to be due out today so who knows, but that if you want to access Index DB you can’t just say window.indexedDB, you have to go window.webkitIndexedDB or window.mozIndexedDB, and that’s because we want developers to get used to these APIs and explore them and offer some feedback to the Standards list, and maybe there’s enough of a feedback, enough feedback that it’s worthwhile to change the API. And so it’s kind of like a time while things stay prefixed it’s a time for everyone to kind of explore things, see if you like it, and offer feedback to the Standards list to see if maybe we should tweak this because this doesn’t actually suit my needs as a user. And so until everyone feels comfortable that what is shipping in these experimental implementations, it’ll stay behind those vendor flags.

保罗:是的,Web套接字很有趣,其中Firefox和Opera取消了对它们的支持,而Chrome并没有取消对它们的支持,但是我们已经编写了代码,如果野外有漏洞利用,我们已经准备好发布补丁,但我们没有没错 但问题是,Web套接字如何工作的API本身,JavaScript API已完全充实,完全稳定,可以,实际上,导致Firefox和Opera删除它的问题在于协议和网络级别,因此这是分开的。 但是在某些情况下,JavaScript API保留了前缀,并且索引数据库是一个很好的例子,因此索引数据库的异步实现已经在Firefox和Chrome中实现,而同步实现则已经在Firefox Beta 9中着陆了,这是由于要在今天到期,所以谁知道呢,但是如果您要访问索引数据库,则不能只说window.indexedDB ,而必须进入window.webkitIndexedDBwindow.mozIndexedDB ,这是因为我们希望开发人员习惯于这些API并进行探索,并向“标准”列表提供一些反馈,也许有足够的反馈和足够的反馈,值得更改API。 因此,这就像是事物保持前缀的时间,这是每个人都应该探索事物,查看是否喜欢它并向“标准”列表提供反馈的时间,以查看是否我们应该对此进行调整,因为这实际上并没有满足我作为用户的需求。 因此,直到每个人都对这些实验性实施中将要发布的内容感到满意之前,它始终会落在那些供应商的旗帜后面。

Kevin: So, there’s a right way to support—for browser vendors to support—feature detection in CSS, there’s a right way for them to do it in JavaScript, but there area few of the items on this Undetectables list that I looked at them and I went wow. That struck me as something I would never expect to be able to detect, things like support for the soft hyphen character; I kind of looked at that and went wow!

凯文:因此,有一种支持浏览器供应商的正确方法,即支持CSS浏览器中的功能检测,有一种通过JavaScript实现特征检测的正确方法,但是我在“无法检测到的对象”列表中很少看到这些内容。我哇。 这让我震惊,这是我永远都无法发现的东西,例如对软连字符的支持。 我有点看着它,哇!

Paul: I actually think you can detect support for soft hyphen.

保罗:我实际上认为您可以检测到对软连字符的支持。

Kevin: Right, you think there’s a test case you could build similarly like measure the box dimensions?

凯文:对,您认为有一个测试用例可以像测量盒子尺寸一样构建?

Paul: Similar to the last one. Yeah, exactly.

保罗:和上一个类似。 是的,完全正确。

Kevin: But just in general if you as a browser vendor were implementing that feature from scratch is there room for a standard API for advertising support for features like this? Like it’s an HTML entity, it’s really an invisible character that affects text flow.

凯文:但是总的来说,如果您作为浏览器供应商从头开始实现该功能,是否有标准的API可以为此类功能提供广告支持? 就像它是HTML实体一样,它实际上是一个影响文本流的不可见字符。

Paul: Right. I think, you know, with the exception of IE 6 though 8, a global constructor is created like it’ll be called HTMLElement and then there’s HTMLPElement and HTMLBrElement, and those are exposed as a JavaScript global object, and so you know there might actually be one for sh— well,

保罗:对。 我想,您知道,除了IE 6至8外,创建了一个全局构造函数,就像它被称为HTMLElement,然后是HTMLPElement和HTMLBrElement,它们被公开为JavaScript全局对象,所以您知道实际上是一个sh –好吧,

­

&害羞;

is an entity.

是一个实体。

Kevin: Yeah, well it’s a Unicode character really; it’s a particular code point that is treated differently.

凯文:是的,确实是一个Unicode字符。 这是一个特殊的代码点,其区别对待。

Paul: Yeah, there’s no API. But an interesting thing is that browsers actually a long time ago they thought of this and they’re like wouldn’t it be great if we created a standardized way of asking your browser if there’s support for something, and so they introduced the hasFeature method. And so I think it’s on navigator, so it’s window.navigator.hasFeature and then you’re like hasFeature('SVG'), and it’ll be like oh, yeah, true, I totally support SVG.

保罗:是的,没有API。 但是有趣的是,浏览器实际上很久以前就已经想到了这一点,如果我们创建一种标准化的方法来询问您的浏览器是否支持某些东西,那hasFeature ,因此他们引入了hasFeature方法。 所以我认为它在navigator ,所以它是window.navigator.hasFeature ,然后您就像hasFeature('SVG') ,就像哦,是的,是的,我完全支持SVG。

Kevin: (Laughs)

凯文:(笑)

Paul: But what we found out, I’ve spoken to Dmitry Baranovskiy of Raphaël because most commonly you see hasFeature associated with SVG aspects, and so I’m like “If we want to know if SVG filters are supported, can we rely on the response from hasFeature?”, and he’s like “Absolutely not.” And so basically we can’t really trust the browser to accurately tell us if they support something or not, and we kind of don’t want to trust them; they might say that they support border-radius, but you know, don’t exactly support everything that we want yet, and so I think authors have a different idea of support than browser vendors do, and I think that’s okay, in many cases they’re a lot more rigorous than what authors expect out of them.

保罗:但是我们发现,我曾与拉斐尔的德米特里·巴拉诺夫斯基谈过,因为最常见的是您具有与SVG方面相关的hasFeature ,所以我想“如果我们想知道是否支持SVG过滤器,我们可以依靠吗? hasFeature的回复?”,他就像“绝对不是。” 因此,从根本上说,我们不能真正相信浏览器来准确地告诉我们它们是否支持某些东西,并且我们不想信任它们。 他们可能会说他们支持border-radius ,但是您知道,还不完全支持我们想要的所有功能,因此我认为作者的支持观念与浏览器供应商不同,而且我认为在很多情况下还可以它们比作者期望的要严格得多。

Kevin: So in a way Modernizr, even if it could ask the browser it’s not going to. It would rather say “Prove it. Render this.”

凯文:所以就某种方式而言,即使是Modernizr,即使它可以询问浏览器,也不会这样做。 它宁愿说“证明它。 渲染这个。”

Paul: Yeah, exactly. Yeah, we want to see the proof. (laughs)

保罗:好的。 是的,我们想看看证明。 (笑)

Kevin: (Laughs) Cool. Well, this is quite a laundry list; I hope it starts to get shorter quicker than it continues to get longer in the very near future.

凯文:(笑)很酷。 好吧,这是一份洗衣单。 我希望它的开始变得越来越短,而不是在不久的将来继续变得越来越长。

Paul: Me too, me too.

保罗:我也是,我也是。

Kevin: Thanks for putting it together. You are a fellow podcaster; I’d love to give you a chance to plug your podcast.

凯文:谢谢你的整理。 您是播客伙伴; 我很想给您一个机会来播客。

Paul: Sure, I get together with some friends like Alec Sexton, Rebecca Murphey, and Adam Sontag and we do a podcast called YayQuery. It started out as a conversation about jQuery, it’s expanding to all front-end development, JavaScript, application architecture, JavaScript best practices. We haven’t put out an episode in a little bit but we’re hoping to get back into that, but it’s a video podcast and we have a rousing good time on it so you should definitely check out it, check out the archives, there’s a lot of really quality good information for JavaScript developers in there.

保罗:当然,我和Alec Sexton,丽贝卡· 莫菲 (Rebecca Murphey)和亚当·桑塔格(Adam Sontag)之类的朋友聚在一起,我们做一个名为YayQuery的播客。 它最初是关于jQuery的对话,后来扩展到所有前端开发,JavaScript,应用程序体系结构,JavaScript最佳实践。 我们还没有发布过一集,但我们希望能重新参与其中,但这是一个视频播客,我们度过了一段美好的时光,因此您一定要查看它,查看档案,对于JavaScript开发人员,这里有很多真正优质的好信息。

Kevin: Great! You can find Paul Irish at paulirish.com or you can follow him on Twitter @paul_irish. Thanks for being with us today Paul.

凯文:太好了! 您可以在paulirish.com上找到Paul Irish,也可以在Twitter @paul_irish上关注他。 感谢保罗今天与我们同在。

Paul: Thanks a lot, Kevin, this was fun.

保罗:非常感谢凯文,这很有趣。

Kevin: And thanks for listening to the SitePoint Podcast. If you have any thoughts or questions about today’s interview, please do get in touch. You can find SitePoint on Twitter @sitepointdotcom, and you can find me on Twitter @sentience. Visit sitepoint.com/podcast to leave a comment on this show and to subscribe to get every show automatically.

凯文:感谢您收听SitePoint播客。 如果您对今天的采访有任何想法或疑问,请保持联系。 你可以在Twitter上找到SitePoint @sitepointdotcom ,你可以找到我的Twitter @sentience 。 访问sitepoint.com/podcast对该节目发表评论并订阅以自动获得每一个节目。

This episode of the SitePoint Podcast is produced by Karn Broad and I’m Kevin Yank. Bye for now!

这集SitePoint播客由Karn Broad制作,我叫Kevin Yank。 暂时再见!

Theme music by Mike Mella.

Mike Mella的主题音乐。

Thanks for listening! Feel free to let us know how we’re doing, or to continue the discussion, using the comments field below.

谢谢收听! 欢迎使用下面的评论字段让我们知道我们的状况,或者继续讨论。

翻译自: https://www.sitepoint.com/podcast-95-the-undetectables-with-paul-irish/

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值