SitePoint播客＃127：Chris CoyierCSS技巧

Episode 127 of The SitePoint Podcast is now available! This week our regular interview host Louis Simoneau (@rssaddict) interviews Chris Coyier (@chriscoyier) who works for Wufoo and runs the website CSS-Tricks.com.

SitePoint Podcast的第127集现已发布！本周，我们的定期采访主持人Louis Simoneau( @rssaddict )采访了为Wufoo工作并运营CSS-Tricks.com网站的Chris Coyier ( @chriscoyier )。

下载此剧集 (Download this Episode)

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

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

SitePoint Podcast #127: CSS Tricks with Chris Coyier (MP3, 43:11, 41.5MB)

SitePoint播客＃127：Chris CoyierCSS技巧 (MP3，43:11，41.5MB)

剧集摘要 (Episode Summary)

Louis and Chris talk about the current state of CSS3 spec, some cool ideas and how Chris’ work at Wufoo relates to that. They cover CSS areas like pesudo classes with radio buttons and more!

Louis和Chris讨论了CSS3规范的当前状态，一些很酷的想法以及Chris在Wufoo的工作与此相关。它们涵盖CSS区域，例如带单选按钮的pesudo类等等！

Browse the full list of links referenced in the show at http://delicious.com/sitepointpodcast/127.

浏览http://delicious.com/sitepointpodcast/127中显示的参考链接的完整列表。

面试成绩单 (Interview Transcript)

Louis: Hello and welcome to another episode of the SitePoint Podcast, this week on the show we’ve got another awesome guest, Chris Coyier who’s the man behind CSS-Tricks, a website that’s just full of cool CSS tricks, I don’t know if there’s any other way to describe it; I think most of our listeners will be familiar, hi Chris.

路易斯：您好，欢迎收看SitePoint播客的另一集，本周的节目中我们又邀请了Chris Coyier，他是CSS-Tricks背后的人，CSS-Tricks是一个充满很酷CSS技巧的网站，我没有知道是否还有其他描述方式；我想我们的大多数听众都会很熟悉，克里斯。

Chris: Hey, how’s it going everybody? Thanks for having me, Louis.

克里斯：嘿，大家好吗？谢谢你有我，路易斯。

Louis: Absolutely. It’s great to have you on. So, for anyone who’s not familiar with CSS-Tricks, and I think most of our audience will be familiar with it, but anyone who’s not do you want to tell us a little bit what the site’s about and maybe how you got started?

路易斯：绝对。祝您旅途愉快。因此，对于不熟悉CSS-Tricks的任何人，我想我们的大多数读者都会熟悉它，但是对不熟悉CSS-Tricks的人，您想告诉我们一些有关该网站的内容以及您是如何开始的吗？

Chris: Hey, sure, so it’s CSS-tricks.com, it’s kind of my living proof that you can have a URL with a dash in it; it’s possible (laughter). No, it’s just I’m a web designer and I have been for a number of years, CSS-Tricks is a I think a blog is its primary component, and I just like blog about web design related stuff; it’s called CSS-Tricks which is a slightly cheesy name possibly, but it’s been so long that —

克里斯：嘿，可以，所以它是CSS-tricks.com ，这是我的活生生的证明，您可以在其中带有破折号的URL。这是可能的(笑声)。不，我只是一个网页设计师，已经工作了很多年，CSS-Tricks是一个博客，它是它的主要组成部分，我也喜欢有关Web设计相关内容的博客。它叫CSS-Tricks，可能有点俗气，但是已经很久了，

Louis: It’s too late to turn back.

路易斯：现在回头已经为时已晚。

Chris: — I’ve never really thought about changing it. I write about CSS a lot but it’s not limited to that, so if somebody’s like I’m interested in web design but CSS isn’t my favorite thing, there’s stuff for everybody there. But it’s also I do screencasts and there’s community forums there for getting help with web design stuff, and yeah, it’s been around four years and it’s part of my life.

克里斯：我从未真正考虑过改变它。我写了很多关于CSS的文章，但不仅限于此，所以如果有人喜欢我对Web设计感兴趣，但是CSS不是我最喜欢的东西，那么那里的每个人都有很多东西。但这也是我的截屏视频，并且那里有社区论坛可以帮助您获得有关网页设计方面的帮助，是的，这已经有四年了，这是我一生的一部分。

Louis: Cool. You redesigned recently, I think, because I usually read it through Google Reader, and just before the show yesterday I went to the site just to see what was new, and it took me aback because it was completely different from the last time I was there; how long ago was the redesign?

路易斯：酷。我认为您是最近重新设计的，因为我通常是通过Google阅读器阅读的，而在昨天演出之前，我去了网站只是为了看看有什么新鲜事物，这让我大吃一惊，因为它与上次我完全不同那里; 重新设计是多久以前的？

Chris: Just a few weeks for this one which I’m calling V9, or version 9 of it, so I had quite a history of getting redesigned in only four years, I guess that’s about twice a year it happens, about every six months, so yeah.

克里斯：我称这个版本为V9或版本9只是几个星期，所以我有一个在短短四年内就进行重新设计的历史，我想大约每年两次，大约每六个月一次，嗯是的。

Louis: That’s pretty good for a pretty sizable blog design that has a lot of neat little features in it, that’s a good amount of work.

路易斯：对于一个相当大的博客设计来说，这非常好，其中包含许多简洁的小功能，这是大量的工作。

Chris: Yeah, it was, I’m pretty happy with it, I was pretty happy with it before, too, but you know kind of the designer’s curse always wanting to change it up and thinking you can do better, and it’s nice to have a playground like this to just — because nobody’s breathing down my neck I can do whatever I want on this site, so I was hoping to pull off some cool new responsive tricks and make it as readable as I can, and it’s just fun.

克里斯：是的，我很满意，以前也很满意，但是你知道设计师的诅咒总是想改变它，并认为你可以做得更好，这很高兴拥有这样的游乐场，因为没人能呼吸，我可以在该站点上做任何我想做的事，所以我希望借一些有趣的新响应技巧，使它尽可能地可读，这很有趣。

Louis: It’s really nice.

路易斯：真的很好。

Chris: It’s always a challenge designing; I find this to be a big deal, I’ve been thinking about it recently, is site’s that have to redesign around advertising and like not just one little ad, but I earn income from the site obviously, so there’s got to be enough screen real estate to fit in enough ads, and it’s really different, you know, quite limiting factor when redesigning a site.

克里斯：设计总是一个挑战。我发现这很重要，我最近一直在思考，这是网站必须围绕广告进行重新设计，不仅是一个小广告，而且我显然是从该网站赚钱的，所以必须有足够的屏幕房地产以容纳足够的广告，这确实是非常不同的，重新设计网站时，这是一个非常有限的因素。

Louis: Yeah, absolutely, but I mean I’m looking at the site now and your ads are pretty well placed, the top one is a nice little — it sort of fits in with the theme and then you’ve got some in the sidebar, but you’ve done a good job of keeping them sort of visually still appealing without really overwhelming the design.

路易斯：是的，绝对可以，但是我的意思是我现在正在浏览该网站，并且您的广告位置很好，排名靠前的是一个不错的小广告–与主题相符，然后您就可以在其中侧边栏，但是您已经做了很好的工作，使它们在视觉上仍然很吸引人，而又没有真正压倒设计。

Chris: Yeah, cool, thanks, that’s the goal, you know; have them there and have them visible but have them not be annoying, and as many pages as you can and all that stuff, it’s a lot to think about.

克里斯：是的，很酷，谢谢，这就是目标。将它们放在那里并使它们可见，但不要让它们烦人，并且要尽可能多地浏览所有页面以及所有这些内容。

Louis: You mentioned responsive and I hadn’t really done any stretching of the browser window, so I’m having to play with that. There’s like a bit of an Easter egg for web designers in there is when you drag the window around and the elements rearrange in responsive fashion, and they do so in a sort of animated way; is that all CSS animations?

路易斯：您提到响应式，我实际上并没有对浏览器窗口进行任何扩展，因此我不得不使用它。当您拖动窗口并以响应方式重新排列元素时，对于网页设计师来说，这就像复活节彩蛋一样，它们以一种动画方式进行；这是所有CSS动画吗？

Chris: Yeah, yep, just a simple little trick that I was just having to play with really, and it’s not complicated at all, it’s just most people are aware of using media queries and having certain CSS apply for only, well, in this case different widths of the browser, so most people know about that, I mean if you don’t just Google around for media queries in CSS, and most people are also aware of animations and transitions, which is just a way to kind of animate between two states of something, that’s the transition, but you can combine those two things together, just put a transition on an element, and then when its values change, like in the case of the search box at the top it’s just changing the left position value of it, because it has a transition on it, when the new CSS from the media query takes place it animates to its new position, so it’s just kind of combining those two ideas.

克里斯：是的，是的，这只是我真正需要玩的一个小技巧，而且一点也不复杂，只是大多数人意识到使用媒体查询，并且某些CSS仅适用于此如果浏览器的宽度不同，那么大多数人都知道这一点，我的意思是，如果您不只是使用Google来搜索CSS中的媒体查询，而且大多数人也都知道动画和过渡效果，那只是一种动画方法在某个事物的两个状态之间进行过渡，但是您可以将这两个事物组合在一起，只需将过渡放在一个元素上，然后当其值发生变化时(例如在顶部的搜索框的情况下，它只是在改变左侧)它的位置值，因为它上面有一个过渡，当来自媒体查询的新CSS发生时，它会设置动画到它的新位置，因此只是将这两种想法结合在一起。

Louis: That’s awesome. I’m familiar with both ideas but I never would have thought to try this, it would never have occurred to me to like, oh, let’s pop it on the media query. I mean of course the goal of media queries is when you see it on a different device there are different screen resolution, but given that your site’s a site for web designers, web designers do definitely enjoy dragging around the size of the window, so it’s fun for that audience to be able to see these things zip and zoom around the page.

路易斯：太棒了。我对这两个想法都很熟悉，但是我从来没有想过要尝试这种方法，我永远也不会喜欢，哦，让我们在媒体查询中弹出它。我的意思是，媒体查询的目标当然是当您在不同的设备上看到它时，屏幕分辨率也有所不同，但是鉴于您的网站是面向Web设计人员的网站，因此Web设计人员确实很喜欢在窗口大小附近拖动，因此有趣的是，观众可以看到这些东西在页面上滑动和缩放。

Chris: Yeah, totally. The argument would be it’s a little bloaty, you know, it’s just self-indulgent or whatever, (laughter) but for a site for web designers it’s —

克里斯：是的，完全是。争论是，它有点肿，你知道，这只是自我放纵或其他(笑声)，但是对于网站设计师的网站来说，

Louis: Yeah, exactly, that’s the place to experiment with these things. And one of the things I guess I wanted to talk to you about is it’s impressive reading CSS-Tricks over the years how many of these little sort of insights ways that you can bend CSS to your will that you’ve been able to come up with over the years, and anyone who’s been in web design for a long time remembers that back in the days of IE 5 and IE 6 there were all of these bugs and then it was CSS techniques that would be sort of workarounds for different things or getting stuff to work cross browser or this and that, and then it sort of died off when standards sort of stabilized and people stopped really blogging about CSS as much because there just wasn’t as much mineral of wealth to mine out there in the techniques that you could come up with, but I think from your site that’s definitely not been the case, you just keep coming up with cool tricks.

路易斯：是的，确切地说，这是尝试这些东西的地方。我想与您谈谈的一件事是，多年来阅读CSS技巧给人留下了深刻的印象，您有多少种小见解方法可以将CSS屈服于自己的意愿，经过多年的努力，任何从事网页设计已有很长时间的人都记得在IE 5和IE 6的时代，所有这些bug都是由CSS技术解决的。在跨标准的浏览器或类似工具上工作的东西，然后就消失了，因为标准趋于稳定，人们停止真正地撰写有关CSS的博客，因为技术中没有太多的矿产可以挖掘出来您可以想到的，但是我认为从您的网站绝对不是这样，您只是在不断提出一些很酷的技巧。

Chris: (Laughs) Thanks. Yes, that was the case, I feel like there was a long period of just tons of people writing about CSS, yeah, I can’t even throw out the years but I think I know what you mean, and then there was a long stagnant period where even some of those people were like, ah, I don’t really blog about CSS anymore, it’s kind of all been said, you know. That might’ve been true at that time, so there was a lull and I feel like right at the start of that lull is when CSS-Tricks started, and I was such a newb, I’m like whatever, I don’t care, I’ll write it all over again (laughter). And now is not the case at all, now we’re in like a huge renaissance of CSS writing. Because of all the CSS3 stuff and HTML5 stuff and all the stuff around all of that, and the fact that browsers are iterating a lot faster than they were during that lull and there’s way more to say about CSS stuff now, so there’s kind of new people on the scene doing that which is great!

克里斯：(笑)谢谢。是的，就是这样，我感觉好像有很多人写CSS的时间很长，是的，我什至不能舍弃岁月，但是我想我知道你的意思，然后很长一段时间停滞不前的时期，甚至其中一些人都喜欢啊，啊，我真的不再写CSS博客了，这一切都已经说完了。那时候可能是对的，所以出现了停顿，我觉得停顿的开始恰好是CSS-Tricks开始的时候，我真是个新手，无论如何我都不会呵呵，我会再写一遍(笑声)。现在根本不是这样，现在我们正处于CSS写作的巨大复兴中。由于所有CSS3和HTML5内容以及所有这些内容，而且浏览器的迭代速度比休假期间要快得多，因此现在有更多关于CSS内容的说法，因此有了一些新内容人们在现场做的很棒！

Louis: Yeah, it’s an awesome time to be working on this, and as I talk to people on the podcast that’s the thing that keeps coming up. I talked to Jeremy Keith a couple months ago, and Paul Boag, and everyone’s just sort of invigorated, and this is a great time to be working in this industry.

路易斯：是的，这是一个很棒的时间，在我与播客上的人们交谈时，这是不断出现的事情。几个月前，我与Jeremy Keith和Paul Boag进行了交谈，每个人都充满了活力，这是在该行业工作的好时机。

Chris: Yeah, and it’s getting better, too, because there’s even things now that aren’t great that are getting better, you know. In the CSS world working with all this cool CSS3 stuff that we have, I’m sure you’re very aware of this, there’s all this like you have to write a transform five times with vendor prefixes and all that stuff, and people like to complain about that, and that’s a whole nother topic, but that stuff’s going to get better, we’re going to have to do less and less of that as things go on, new layout things are going to come out which make our job easier and easier; it’s like it’s great now and it’s getting way better.

克里斯：是的，而且也正在变得越来越好，因为您知道，即使有些事情现在还不太好，而且会越来越好。在CSS世界中，我们处理着所有这些很酷CSS3东西，我确信您对此非常了解，这就像您必须使用供应商前缀和所有这些东西编写五次转换，抱怨，这是另一个主题，但是事情会变得更好，随着事情的进行，我们将不得不做越来越少的事情，新布局的事情将会出来，这使我们的工作成为可能。越来越容易就像现在很棒，而且越来越好。

Louis: Yeah, absolutely. Since you brought it up, is there stuff in particular — you probably pay more attention to the evolving browser landscape than I do, what’s stuff that’s coming up in CSS that you’re excited about; either something that’s already out there but it’s not well supported but support is appearing, or something that’s recently added to the specs.

路易斯：是的，绝对。自从提出以来，有什么特别的东西–您可能比我更关注不断发展的浏览器格局，您感到很兴奋CSS中出现了什么？要么已经存在但尚不被很好地支持但正在出现支持的东西，要么是最近在规范中添加的东西。

Chris: Yeah, there’s plenty, like there’s lots of different layout stuff that is in various forms of like being ready. One that’s getting the most attention right now is FlexBox, I think, which is kind of a way just you have like three divs inside of another div and you just say “I want these three divs to stretch as wide as they need to be to fill that space,” that’s been a difficult thing to do CSS-wise in the past, and has made trivially easy by FlexBox, which is neat and good and cool that they’re using it, and the browser support actually is pretty deep for it, surprisingly deep, the problem with it is that it’s getting all rewritten, so there’s going to be a new version of FlexBox coming out and then a bunch of legacy support is going to have to happen for a number of years, but eventually we’re going to all have to start using the new syntax, or whatever. It’s still probably a pretty strong contender for layout, there’s one called Position Floats which is you know how absolute positioning works, hopefully a bunch of people listening to this podcast understand that, right, like you just —

克里斯：是的，有很多东西，就像有很多不同的布局材料以各种形式出现一样，比如准备就绪。我想现在最受关注的是FlexBox，这是一种方式，就像您在另一个div中拥有三个div一样，您只是说：“我希望这三个div可以扩展到所需的宽度。填充空间”，过去在CSS方面很难做到这一点，FlexBox使其变得轻而易举，这在他们使用它的过程中既简洁又不错，而且浏览器支持对于令人惊讶的是，它的问题在于它已经被全部重写了，因此将会有新版本的FlexBox出现，然后很多传统支持将不得不花费很多年，但是最终我们所有人都必须开始使用新语法或其他任何语法。它仍然可能是布局的强大竞争者，有一个叫做Position Floats(位置浮动)，您可以知道绝对定位的工作原理，希望一听此播客的人能理解，对，就像您一样-

Louis: Yeah, I think everyone should be okay with that, yeah.

路易斯：是的，我想每个人都可以，是的。

Chris: Yeah, cool, you can like absolutely position something and to float it. So say I want to absolutely position it here which would normally take it out of the flow of the document so text would kind of ignore it and just go right through it but then apply float to it as well which text would wrap around it, that one is unlikely to be adopted by lots of browsers in use, but it’s kind of cool, I think we can all agree like boy that would be cool if I could position something right in the middle of a block of text and have the text totally just wrap around it without relying on crazy hacks and stuff. There’s one called StAX that’s coming up, there’s probably like six different layout modules that are like in various draft formats as far as the spec that, W3C spec, they’re just on the way, and we need browsers to start implementing them with their vendor prefix way and have us start playing with them and giving feedback, and then we just kind of play the game of which ones start getting popular, which ones do people blog about the most, which ones do people try and implement in cutting edge designs the most, and then those are the ones that spec writers will be then most excited about and will flesh out more and more, and more browsers will implement and that will shape the future of design. So, when you’re a designer and you’re playing with this new stuff and you’re learning about it and reading about it and making little jsFiddle’s, or whatever, you’re influencing the future of design; it doesn’t seem like it, it seems like you’re just screwing around, but every little person on the cutting edge has their say in which modules like that end up being the real thing.

克里斯：是的，很酷，您可以喜欢绝对放置并漂浮它。所以说我想将其绝对定位在此处，通常会将其从文档流中移出，以便文本有点忽略它，直接遍历它，然后对它应用float以及哪些文本将其环绕，一个不太可能会被许多正在使用的浏览器采用，但是这很酷，我想我们都可以像男孩一样同意，如果我可以将某些内容正确地放置在一段文本中间并完全拥有该文本，那将会很酷只需将其环绕即可，而不必依赖疯狂的黑客之类的东西。即将出现一个叫做StAX的东西，大概有6种不同的布局模块，它们以各种草稿格式出现，而W3C规范只是在路上，我们需要浏览器才能开始使用它们实现它们。供应商前缀的方式，让我们开始与他们互动并提供反馈，然后我们只是在玩一个游戏，哪些游戏开始流行，哪些人博客最多，哪些人尝试在前沿设计中实施最重要的是，然后那些使规范编写者最兴奋并充实越来越多的规范，并且将有更多的浏览器实现，这将决定设计的未来。因此，当您是设计师并且正在使用这些新手，并且正在学习，阅读并制作少量jsFiddle的东西时，您将在影响设计的未来。看起来好像不是这样，好像只是在搞砸，但是最前沿的每个小人都有发言权，像这样的模块最终才是真正的事情。

Louis: That’s a great way of looking at it. It’s interesting to see, you’re talking about all these layout proposals which are really interesting and I think anyone who’s struggled with float layouts for any length of time will be really happy about this, but it’s interesting that the first forays into sort of this new world of CSS on the part of the browsers and the specs have been sort of decorative things, so things like the box shadows and rounded corners and fonts and all this stuff, but the core layout stuff has been a lot slower to move forward. Is it sort of a case of sort of dipping their toes in the water and seeing if browsers will play along and then we’ll move on to the other stuff, or seeing if designers are interested, or is just a harder problem to solve?

路易斯：那是一种很好的观察方式。有趣的是，您正在谈论所有这些非常有趣的布局建议，并且我认为任何在浮动布局中苦苦挣扎任何时间的人都会对此感到非常高兴，但是有趣的是，第一次尝试此类布局在浏览器和规范方面，CSS的新世界是某种装饰性的东西，因此诸如框阴影，圆角和字体之类的东西以及所有这些东西，但是核心布局的东西前进的速度要慢得多。是在某种情况下将他们的脚趾浸入水中，看看浏览器是否会一起玩，然后我们继续研究其他内容，或者看看设计师是否感兴趣，还是只是更难解决的问题？

Chris: Ha, ha, ha, that’s a good, good question. I suspect it’s all of the above, really, it’s hard to say. Why did they work on rounded corners before they worked on animations and stuff, you know, maybe it was easier, although I don’t want to claim that implementing a box shadow is easy, I’m sure it’s quite not easy. I don’t know, I also think they’re aware of the fact that all of us want all this stuff to degrade easily, so anybody that’s listening to this that doesn’t understand what I mean it just means that if you apply a box shadow to something in an older browser if it just doesn’t have the box shadow it’s probably not the end of the world and your website is totally fine and readable, well, that’s a concept that most of us designers are on board with today; we’re not on board with our design just totally breaking and totally unusable, and when you’re talking about layout, if you’re using a fancy new layout module, or whatever, cutting edge, and it doesn’t work in an older browser, your site’s probably kind of a disaster.

克里斯：哈哈哈，这是一个很好的问题。我怀疑以上全部，确实，很难说。您知道为什么为什么要先处理圆角，然后再处理动画和其他东西，也许，这很容易，尽管我不想声称实现框阴影很容易，但我敢肯定这并不容易。我不知道，我也认为他们知道我们所有人都希望所有这些东西都容易降解的事实，因此，任何正在听的人都不理解我的意思，这意味着如果您申请框阴影到旧版本浏览器中的东西，如果它没有框阴影，那可能不是世界末日，而且您的网站完全正常且可读性很好，这是当今美国大多数设计师都支持的概念; 我们并没有完全放弃我们的设计而完全无法使用，并且当您谈论布局时，如果您使用的是新的花哨的布局模块，或者其他什么，最先进的，并且它在较旧的浏览器，您的网站可能是一场灾难。

Louis: Yeah, that’s a really good point, obviously layout’s one thing that you can’t afford to break.

路易斯：是的，这是一个很好的观点，显然布局是您无法承受的一件事。

Chris: Yeah, so, but is that why they worked on the other stuff first, I don’t know.

克里斯：是的，但这就是为什么他们首先从事其他工作，我不知道。

Louis: Well, either way hopefully we’ll arrive at a place where we don’t have to rely so heavily on floating every element on the page to get stuff to line up.

路易斯：嗯，无论哪种方式，都希望我们能到达一个不必过于依赖浮动页面上的每个元素即可排队的地方。

Chris: Right. There’s another cool one called Regions that Adobe put out where it’s like defined this is Region A, this is Region B, this is C, and when the text is too long for Region A you can say I want overflow from A to go into Region B, and that’s really cool when it comes to combining with media queries, again, you can say in a media query instead of text flowing from A into B, I want it to go from A into C now, which gives us way better tools for dealing with a responsive design. Because I don’t know if you’ve done much responsive design or learned much about it, a lot of times it’s like in a float based layout it’s just like, well, we don’t have much room now for the sidebar so let’s just kick it underneath, responsive design is a lot of just kicking it down (laughter).

克里斯：对。还有一个很酷的叫Regions的区域，Adobe定义为Region A，这是Region B，这是C，当文本对于Region A来说太长时，您可以说我要从A溢出进入Region B，当与媒体查询结合时，这真的很酷，同样，您可以在媒体查询中说，而不是从A流入B的文本，我希望它现在从A流入C，这为我们提供了更好的工具用于处理响应式设计。因为我不知道您是否已经完成了很多响应式设计或从中学到了很多东西，所以很多时候就像在基于浮动的布局中一样，我们现在没有足够的空间来放置侧边栏，所以让我们只是将其踢倒，响应式设计就是将其踢倒(笑)。

Louis: Absolutely.

路易斯：绝对。

Chris: Whereas Trent Walton had a really good post saying that ‘kick it down’ stuff isn’t going to last forever. You know I have ads in the sidebar on CSS-Tricks, let’s say when I squish my design all the way down I don’t want to just kick all my ads to the bottom, I want to put two ads in between the first and second post, and two ads between the second and third post, or something like that, be a little more stitching about how I want that stuff to go together, and Regions plus media queries theoretically maybe hopefully can do some of that stuff for us.

克里斯(Chris)：特伦特·沃尔顿(Trent Walton)的帖子非常好，他说“踢下去”不会永远持续下去。您知道我在CSS-Tricks的侧边栏中有广告，比方说，当我完全压缩设计时，我不想只将所有广告踢到最底下，我想在第一和第二之间插入两个广告第二篇文章，以及第二篇和第三篇文章之间的两则广告，或者类似的东西，在我希望这些东西如何结合方面有更多的联系，从理论上讲，Regions和媒体查询也许可以为我们做一些事情。

Louis: That’s really interesting because that is something I find myself every time I try and do something responsive I try and think I don’t actually want this way at the bottom and I don’t want it all the way at the top, I just kind of want to shuffle stuff around a little bit, and sometimes you don’t really have that flexibility without relying on JavaScript at the moment.

路易斯：真的很有趣，因为这是我每次尝试做响应式工作时都会发现的事情，我认为我实际上并不想在底部这样，我也不希望一直在顶部，我只是想稍微整理一下内容，有时您现在不依赖JavaScript确实没有这种灵活性。

Chris: Right, right, right, right, yeah. And media queries aren’t JavaScript, so if you’re using a JavaScript tool to measure the width of the screen and when it hits 600 pixels, let’s say, you would have to move markup around now, but you can’t like, whatever, you’d have to fire — you’d have to write and fire off your own JavaScript events to deal with that stuff now, media queries as they exist don’t help with that.

克里斯：对，对，对，对，是的。而且媒体查询不是JavaScript，因此，如果您使用JavaScript工具测量屏幕的宽度，并且当它达到600像素时，就说您现在必须移动标记，但是您不喜欢，无论如何，您都必须解雇–您必须编写并解雇自己JavaScript事件才能处理这些问题，因为媒体查询的存在并没有帮助。

Louis: Yeah, hopefully as you say it’s a better solution and we’ll eventually get there. I have to ask this because obviously like you say you redesign your site twice a year and you also write all these things about CSS that involve sort of playing around in a lot of browsers and doing a lot of sort of research in how things work, and I think a question that my audience would hold me to task for not asking is where does the time come from, do you have a job, is there something we’re missing here, is there an extra day in the week that the rest of us aren’t aware of?

路易斯：是的，希望您说的是更好的解决方案，我们最终会实现的。我不得不问这个问题，因为很显然，就像您说您每年重新设计站点两次一样，您还编写了有关CSS的所有内容，其中涉及在许多浏览器中进行游玩并就其工作方式进行了大量研究，我想我的听众会问我一个不问的问题，就是时间是从哪里来的，你有工作吗，在这里我们缺少什么，在一周中是否有多余的一天可以休息？我们当中的人不知道吗？

Chris: No, I get that question pretty frequently honestly (laughter), yeah, I do have a job, I work full time for a company called Wufoo who we’re based out of Tampa, Florida, it’s an online form building tool, and it’s really awesome, I was really happy to work there. We got acquired a couple months ago by a company called Survey Monkey out in California, so I now work for Survey Monkey and I live in Palo Alto, I’m sitting in Palo Alto right now, brand new, I’ve only been here for about a month, so that’s a big thing going on, and yeah, I mean I work there all day long. But working at a job like that, and really working at any job, I was at a design agency before that, you just get ideas throughout the day through the things that you work on, and a lot of that stuff just ends up getting kind of recycled in some form or another into tutorials or editorials or whatever for CSS-Tricks. And then because I think and work about this stuff, that stuff comes back to the job too, they both feed each other pretty well. But as far as — I don’t have any super secrets for how to get stuff done, you know, I just wake up in the morning and I do stuff and whatever.

克里斯：不，我经常回答这个问题(笑)，是的，我确实有一份工作，我为一家名为Wufoo的公司工作，这家公司位于佛罗里达州坦帕市，它是一个在线表格制作工具，而且真的很棒，我很高兴在那里工作。几个月前，我们被加利福尼亚的一家名为Survey Monkey的公司收购，所以我现在为Survey Monkey工作，我住在帕洛阿尔托，我现在正坐在帕洛阿尔托，全新，我只在这里大约一个月，所以这是一件大事，是的，我是说我整天在那里工作。但是从事这样的工作，实际上是从事任何工作，在那之前我曾在一家设计公司工作过，您一整天都通过自己从事的工作获得想法，而很多东西最终都变得很友善以某种形式或其他形式回收到教程或社论中，或者用于CSS-Tricks。然后，因为我考虑并处理了这些东西，所以这些东西也回到了工作中，它们彼此之间很好地融合在一起。但就我所知，关于如何完成工作，我没有任何超级机密，我只是早上起床，就做任何事情。

Louis: Hey, that’s a cool story but I think I’m going to stick with the extra day in the week —

路易斯：嘿，这是一个很酷的故事，但我想我会坚持一周中多余的一天-

Chris: (Laughs)

克里斯：(笑)

Louis: — hypothesis, I don’t buy it.

路易斯： —假设，我不买。

Chris: Here’s the real thing: not married, no kids, I have a couple hobbies but they’re light and easy to do, and I just spend a lot of hours in the day in front of the computer unfortunately, or fortunately, however you want to look at it.

克里斯：这是真实的东西：没有结过婚，没有孩子，我有几个爱好，但是他们很轻便，很容易做，不幸的是，或者幸运的是，我每天花很多时间在电脑前你想看看。

Louis: Fortunately for the rest of us (laughter). I mean you’ve published so many like cool little tips and tricks in CSS, what are some of your favorite ones, like something that you think if someone’s listening and they play a lot with CSS they might not be aware of this one cool thing you can do and it’s pretty well supported; what are a couple of tricks you’d give to the listeners?

路易斯：幸运的是，我们其余的人(笑声)。我的意思是，您在CSS中发布了很多像酷一样的小技巧和窍门，您最喜欢的是什么，例如，您认为如果有人在听并且他们在CSS上玩了很多，他们可能不会意识到这一奇妙的东西。您可以做到，并且它得到了很好的支持；您会给听众一些技巧？

Chris: Hmm, super cool tricks, God, I wish I had like a super best-of chart of my favorite tricks. How about I just do one that I just am working on right now and recently that I think is really neat, I’ll try to explain it the best way I can. Everybody knows what a radio button input is, right, in HTML it’s an input of type radio, and you could have three of them, let’s say, if they all have the same name attribute then that’s a radio button group and you can click one and if you click the second one then the first one will turn off and the second one will turn on, or whatever, right?

克里斯：嗯，超级酷的花样，天哪，我希望我能拥有我最喜欢的花样的超级精选。我现在和我最近正在做的一件我认为确实很整洁的事情怎么样，我将尽我所能来尽力解释一下。每个人都知道单选按钮的输入是什么，对，在HTML中，它是单选类型的输入，如果它们都具有相同的name属性，则可以有三个，这就是单选按钮组，您可以单击一个如果您单击第二个，则第一个将关闭，第二个将打开，或者对吗？

Louis: Yep, I think we’re all on the same page.

路易斯：是的 ，我想我们都在同一页面上。

Chris: Yeah, that’s really easy stuff. And then in CSS there’s a selector called, pseudo class selector, called check, so you could go input: checked and then apply some styling to an input that’s checked versus not checked, so you could like make it have a background color or something; that wouldn’t do much on a radio button, but the point is you can through CSS select an input that’s in its checked state, which in the case of a radio button just means it’s filled in, it’s a radio button. Okay, so we got that, and we also know that you could click on a label to activate a radio button, so if your label has a four attribute that matches the ID attribute of a radio button, clicking on that label will check the input. Still with me?

克里斯：是的，这真的很简单。然后在CSS中有一个选择器，称为伪类选择器，称为check，因此您可以输入input：checked，然后将样式应用于已检查或未检查的输入，因此您可以使其具有背景色或其他颜色；那对单选按钮并没有多大作用，但是关键是您可以通过CSS选择处于选中状态的输入，对于单选按钮，这意味着它已被填充，这是一个单选按钮。好的，我们知道了，我们也知道您可以单击标签来激活单选按钮，因此，如果您的标签具有与单选按钮的ID属性匹配的四个属性，则单击该标签将检查输入。还在我这儿？

Louis: (Laughs) yep, I think, hopefully.

路易斯：(笑)是的，我希望是。

Chris: Now you can —

克里斯：现在您可以-

Louis: It’s hard to — like these things over what we might call the “radio” it might be difficult to sort of keep all this stuff in mind, but I’ll —

路易斯：很难-像我们所谓的“无线电”中的这些东西一样，很难记住所有这些东西，但是我会-

Chris: You got it; it’s just some radio buttons and some labels, that’s all we got right now.

克里斯：知道了。只是一些单选按钮和一些标签，这就是我们现在所拥有的。

Louis: So far so good.

路易斯：到目前为止一切顺利。

Chris: Now you display none on that checkbox input, so it’s just gone, all you have is some labels, it just says label one, label two, label three, but still clicking them still checks and unchecks them, they’re still functional. Well, in CSS now we can do input: checked and then use the little squiggly line which is the adjacent sibling combinator, and then select like a div. So the point of what we’re trying to get at here is you can build like a tabbed area, you know how tabs work, like 90% of the time they’re JavaScript, you click one thing and it shows the content area, you click the other tab it shows the content area, you can build that entirely in CSS with radio buttons. So you click the label and it activates one of the check boxes, and then you select a div that is hidden or probably underneath it with z index and kind of reveal different tabbed areas depending on which radio button is checked, so you don’t need any JavaScript at all to get done tabbed areas. And I just think it’s clever this idea of using the checked pseudo selector in CSS can do just tons of cool stuff, and I think, you know.

克里斯：现在您没有在该复选框输入中显示任何内容，所以它就消失了，您只剩下一些标签，它只说了标签1，标签2，标签3，但仍然单击它们仍然选中并取消选中它们，它们仍然起作用。好了，现在在CSS中，我们可以输入：check，然后使用相邻的同级组合器的小弯曲线，然后像div一样进行选择。因此，我们要达到的目的是，您可以像标签区域一样进行构建，知道标签的工作方式，例如90％的时间是JavaScript，您只需单击一下即可显示内容区域，您单击另一个显示内容区域的选项卡，就可以使用单选按钮完全在CSS中进行构建。因此，您单击标签并激活一个复选框，然后选择一个隐藏或位于其下方的div(带有z索引)，并根据选中的单选按钮来显示不同的选项卡区域，因此您无需完全不需要任何JavaScript即可完成选项卡式区域。我只是认为在CSS中使用检查的伪选择器这一想法很聪明，可以做很多很酷的事情，我想，您知道。

Louis: Yeah, that’s a good idea. And there’s a ton of situations like that where some aspect of an interface requires one thing to be active, and sort of I guess our usual limited perspective of what a radio button is, as a form it lets you choose, but there’s tons of times in an interface where you want that sort of pattern of behavior but you don’t actually think of it as being a radio button but you can do it behind the scenes, as you’ve said.

路易斯：是的，这是个好主意。在很多情况下，接口的某些方面需要激活一件事，并且我想我们通常对单选按钮的含义是有限的，可以选择它的形式，但是有很多次在界面中，您想要这种行为方式，但实际上并没有将其视为单选按钮，而是可以在幕后操作，如您所说。

Chris: Yeah, and it’s pretty accessible too because you’re not hiding, the only thing that you’re hiding is the input button, and it’s good that you’re hiding that because you don’t want a screen reader to be like, whoa, you’re on our check box now, you want them to skip over that because it’s irrelevant, and then don’t actually hide any content with display none because that’s bad for screen readers. Anyway, usually the functionality that you build with this technique can be pretty accessible while you’re doing it too, which is just — I think it’s sweet.

克里斯：是的，它也很容易访问，因为您没有隐藏，您唯一隐藏的是输入按钮，并且隐藏起来很好，因为您不希望屏幕阅读器像，哇，您现在在我们的复选框中，您希望他们跳过此操作是因为无关紧要，然后实际上不要隐藏任何不显示任何内容，因为这对屏幕阅读器不利。无论如何，通常使用此技术构建的功能也可以在执行时很容易地访问，这只是-我认为很不错。

Louis: Yeah, talking about accessibility, do you spend a fair amount of time testing with screen readers, what’s your workflow around that?

Louis：是的，谈到可访问性，您是否花费大量时间与屏幕阅读器进行测试，您的工作流程是什么？

Chris: No, unfortunately I don’t. We’re kind of forced to think about that as designers a lot, especially as a guy who writes tutorials like me, because if I put out a tutorial that totally ignores accessibility the brigade comes out, and rightly so, people should, we should be yelling at each other for building inaccessible stuff. Unfortunately I don’t really have like three screen readers I always test in, or whatever, and to be completely honest usually I test in zero screen readers, but I feel like I’ve read so much about it and know what the pitfalls of bad accessibility are that usually I feel like I can do a pretty good job without excessive testing, although that’s a little embarrassing, I probably should get some actual screen readers.

克里斯：不，不幸的是我没有。我们有点被迫以设计师的身份去思考，特别是作为一个像我这样写教程的人，因为如果我发布的教程完全忽略了可访问性，那么这个大队就会出来，人们应该，我们应该为建立难以接近的东西而大喊大叫。不幸的是，我真的没有像我一直在测试的三屏阅读器一样，或者说老实说，通常来说我在零屏阅读器中进行测试，但是我觉得我已经读了很多，并且知道它的陷阱。糟糕的可访问性是，通常我觉得我无需进行过多测试就可以做得很好，尽管这有点令人尴尬，但我可能应该获得一些实际的屏幕阅读器。

Louis: Well, I think there’s a lot of people out there in that same kind of boat as far as that goes. And maybe it is an issue of some of these things, although there is an open source screen reader, I forget the name of it, that’s pretty easy to find and install and it’s free, but on the whole a lot of these are kind of high-end software and they don’t exactly make it easy for designers to test with them. So, coming back to the trick with the radio buttons, so that uses a couple of things, the check selector’s really well supported, but you were talking about one example of using the adjacent selector to get your nearby divs to appear or disappear, how well supported is that?

路易斯：嗯，我认为就目前而言，有很多人乘坐同一类型的船。也许这是其中一些问题，尽管有一个开放源代码的屏幕阅读器，但我忘了它的名称，它很容易找到和安装，而且是免费的，但总的来说，很多都是这样的高端软件，而这并不能使设计师轻松地对其进行测试。因此，回到单选按钮的窍门，以便使用一些方法，检查选择器确实得到了很好的支持，但是您在谈论一个使用相邻选择器让附近的div出现或消失的示例。是很好的支持吗？

Chris: It’s probably not super deep, I’m trying to think offhand, you could probably reference the SitePoint CSS thing where it lists all the selectors and has little things, I’m thinking it’s probably like IE 8 up.

克里斯：可能还不算太深，我想想一想，您可能会引用SitePoint CSS，其中列出了所有选择器，几乎没有内容，我想可能是IE 8。

Louis: Right, yeah.

路易斯：对，是的。

Chris: It’s probably not as deep as most people would want it to be, and when I say IE 8 up that also means like pretty everything else.

克里斯：它可能没有大多数人想要的那么深，当我说IE 8时，这也意味着其他所有事情。

Louis: Everything else, yeah (laughs).

路易斯：其他，是的(笑)。

Chris: When people ask about browser support they mean what’s the oldest version of IE that it works in.

克里斯：当人们问起对浏览器的支持时，它们的意思是它可以使用的最早的IE版本。

Louis: That’s pretty much the usual case. I mean aside from the really cutting edge stuff.

路易斯：这几乎是平常的情况。我的意思是除了最前沿的东西。

Chris: Yeah, right. It’s deep enough. You probably know if you’re doing something this progressive kind of what your browser stats are and what environment you’re shooting for and stuff, like I would do this on CSS-Tricks and I wouldn’t think twice about it, a tabbed area like I just talked about.

克里斯：是的，对。它足够深。您可能知道您是否正在执行这种渐进式的操作，即您的浏览器统计信息是什么，所要拍摄的环境以及诸如此类的东西，就像我在CSS-Tricks上所做的那样，我不会三思而后行，我刚才谈到的区域。

Louis: Yeah.

路易斯：是的。

Chris: But if I was building a client site, or whatever, and I foresee that possibly being a problem I would just use JavaScript, there’s nothing wrong with that, you know, I’m not like advocating that the CSS technique is better.

克里斯：但是，如果我正在建立一个客户端站点或其他任何站点，并且我预见到可能只是使用JavaScript可能会出现问题，那么这没什么不对劲，你知道，我不喜欢主张CSS技术更好。

Louis: Yeah, absolutely. So, coming back to using these techniques on CSS-Tricks, how does CSS-Tricks look in IE 6?

路易斯：是的，绝对。因此，回到在CSS-Tricks上使用这些技术之后，CSS-Tricks在IE 6中的外观如何？

Chris: I even cut off IE 7 now. And how I did it is, just Google this, I don’t have a link for you or whatever, there’s a thing called the universal IE 6 style sheet.

克里斯：我现在甚至切断了IE 7。而我是怎么做到的，只是Google这个，我没有适合您的链接或任何东西，有一种东西叫做通用IE 6样式表。

Louis: Yeah, I’m familiar with that.

路易斯：是的，我对此很熟悉。

Chris: I think it was originally by Andy Clark or something, and it’s just like a set of reasonable styles, looks kind of like how a print style sheet should look, you know.

克里斯：我认为它最初是由安迪·克拉克(Andy Clark)或其他人创作的，就像一组合理的样式，看起来有点像打印样式表的外观。

Louis: Yeah, just one long column.

路易斯：是的，只有一长列。

Chris: Yeah, and you just use a combination set of conditional comments in your — when you’re loading your CSS files in the head of your document that serves this specific style sheet only to IE 6 originally, but I made it serve IE 7 as well, and it’s not because I’m trying to be a jerk, my stats on CSS-Tricks for IE 7 is so low that it just — why bother, it would just be a waste of time.

克里斯：是的，您只是在您的文档中使用了一组条件注释的组合，当您将CSS文件加载到文档的头部时，该文档最初仅为IE 6提供此特定样式表，但我让它为IE 7提供了服务同样，这并不是因为我想成为一个混蛋，我对IE 7CSS-Tricks的统计数据如此之低，以至于为什么要打扰，那只会浪费时间。

Louis: Yeah.

路易斯：是的。

Chris: I don’t want to get into that whole debate, that’s like my least favorite debate in web design (laughter), because I’m like I don’t know, just look at your stats and make the decision and shut up, you know (laughter).

克里斯：我不想参与整个辩论，就像我最不喜欢的网页设计辩论(笑声)一样，因为我不知道，只看一下你的数据并做出决定并闭嘴即可。，(笑声)。

Louis: Yeah, so I don’t think you have much argument with our audience here, I think everyone’s pretty much in agreement that unless there’s a really, really compelling reason to go out of your way to support these things we’ll have a lot more fun building sites if we focus on the 99% of our users who are using reasonable browsers.

路易斯：是的，所以我认为您在这里与我们的听众没有太多争论，我认为每个人都非常同意，除非有确实非常令人信服的理由竭尽全力支持这些事情，否则我们将如果我们关注使用合理浏览器的99％的用户，那么会带来更多有趣的网站建设。

Chris: Totally, totally. And you know what, if you’ve got to support an old one then support an old one, I’m not trying to crap on anyone for doing that either; Survey Monkey supports IE 6, you know, our live forms at Wufoo, a Wufoo form that you build and that your users might see, that supports IE 6, you know, like I’m familiar with the need to support these old things, it’s totally fine.

克里斯：完全是。而且您知道吗，如果您必须先支持一个旧的，然后再支持一个旧的，那么我也不是想以此为死。 Survey Monkey支持IE 6，您知道我们在Wufoo上的活动表单，这是您构建的并且您的用户可能会看到的支持IE 6的Wufoo表单，您知道，就像我熟悉支持这些旧东西一样，很好

Louis: Yeah, absolutely. So in the work that you do at Wufoo and now Survey Monkey, do you aim for sort of an exactly identical experience in these older browsers, or is it more of a get it to work and we’ll do what we can?

路易斯：是的，绝对。因此，在您在Wufoo和现在的Survey Monkey中所做的工作中，您的目标是在这些较旧的浏览器中获得完全相同的体验，还是更多地发挥作用，我们将尽我们所能？

Chris: Yeah, it’s that, it’s the same, it’s what you expect it to be, it’s the corners are square type of experience, you know, like whatever, we don’t do anything that’s super, super fancy, for example, like HTML5 now has some cool form related features in it like validation and like date pickers and fancy stuff like that, we don’t — we use some of that stuff but a very limited amount of it, for an example that’s something that wouldn’t work in IE 6 or 7 or 8 or 9 in most cases.

克里斯：是的，就是这样，这是您所期望的，角落是方形的体验，您知道，无论发生什么，我们都不会做任何超级，超级幻想的事情，例如HTML5现在具有一些与表单很酷的表单相关的功能，例如验证，日期选择器和类似的东西，我们不使用–我们使用其中的一些东西，但是数量非常有限，例如，这是不会的在大多数情况下可以在IE 6或7或8或9中工作。

Louis: Yeah.

路易斯：是的。

Chris: But we don’t have to, you know, it’s not like we just like let that fall back to a crappy experience, no, if you put a date picker field in a Wufoo form it will work in IE 6, you know.

克里斯：但是，我们不必，就像我们只是想让它回到糟糕的经历一样，不，如果您将日期选择器字段放入Wufoo表单中，它将在IE 6中运行，您知道。

Louis: And talking briefly about these new form things and whatnot, it’s funny when you’re working on these sort of more cutting edge features you’re sort of — also on the cutting edge of browsers, I don’t know if you tend to install nightly builds of WebKit or things like that to test in.

路易斯：并简要地谈论这些新形式的东西，但是，当您在使用这些更先进的功能时，这很有趣-也在浏览器的最前沿，我不知道您是否倾向于安装每晚构建的WebKit或类似的东西以进行测试。

Chris: That’s a good question. I don’t really. I feel like I should maybe, but, I don’t know, I also like knowing for sure having the latest stable build that 99% of the world has, so that’s usually more fun for me to try to build stuff for the stable browsers.

克里斯：这是一个很好的问题。我不是真的我觉得应该，但是，我不知道，我也很想知道拥有世界上99％的最新稳定版本，因此通常更有趣的是尝试为稳定的浏览器构建内容。

Louis: Yeah.

路易斯：是的。

Chris: And then it’s not like, gosh, I need to get the nightly because then I need to learn all about this stuff so when it actually comes out I’m ahead of the curve, I’m like, hmm, I know what’s coming down the pipe for the most part, you know, like as soon as that stuff makes stable I can write it up or whatever, you know, I don’t do the super nightly thing.

克里斯：那不是，天哪，我需要每晚进行一次学习，因为那我需要学习所有关于这方面的东西，所以当它真正出现时，我领先于弯道，我想，嗯，我知道这是什么你知道，大部分时候，只要这些东西变得稳定，我就可以写出来，或者你知道，我不做超级每晚的事情。

Louis: Yeah. What brought that to mind is I remember when I was working on the SitePoint HTML5 and CSS3 book, one of the things that came up there was a version of Chrome briefly, and it was a release version that you know how they have those sort of built-in validation messages for the HTML5 form elements?

路易斯：是的。让我想到的是，我记得在编写SitePoint HTML5和CSS3书时，其中的一件事情就是简短的Chrome版本，这是一个发行版本，您知道他们的那种感觉。 HTML5表单元素的内置验证消息？

Chris: Hmm-mm.

克里斯：嗯。

Louis: So if you put, what is it, required, for example, is an attribute on a form field that will just popup a browser based message saying you have to fill in this field.

路易斯：所以，如果要输入，例如，它是表单字段上的一个属性，它将弹出一个基于浏览器的消息，提示您必须填写此字段。

Chris: Yeah, yep.

克里斯：是的，是的。

Louis: And there was this one version of Chrome, I think it was around version 9 or 10 when if you put one of those attributes on a password field the message that came up was obfuscated (laughs).

路易斯：有一个版本的Chrome，我认为它是在版本9或版本10左右的，如果您将这些属性之一放在密码字段中，则出现的消息会被混淆(笑)。

Chris: I remember that.

克里斯：我记得。

Louis: I love running into these little kind of like obviously when we’re testing these cutting edge features we’re also on the cutting edge of what people are putting in browsers, so you’ll run into these occasional kind of weirdness’s with browser behavior.

路易斯：我喜欢碰到这些小东西，当我们测试这些最先进的功能时，我们同样也处于人们在浏览器中所使用的最前沿，所以您偶尔会在浏览器中遇到这种奇怪的感觉行为。

Chris: Yeah, dude, that’s a great example, and if there’s anybody out there that like geeks out on finding things wrong with browser implementations of things, play with HTML5 forms because that’s where like all of them are, holy man, (laughter) HTML5 forms is just quite the wreck really; I hate to say that because I’m a big fan of all of it and we’re headed in the right direction and stuff, but man. At Wufoo, if you go to Wufoo.com/html5, I personally keep up this page of compatibility of the current browser landscape and all of the features of HTML5 forms, and it is a — it’s just a wacky wild ride when a new browser comes out, I’m like sometimes they’re adding stuff, sometimes they remove stuff, which is crazy, normally you think of as like a forward moving train, browsers, once it has a feature it always has it and then maybe new stuff will come around, but in the case of HTML5 forms there’s a bunch of examples of like, well, that used to work, don’t anymore, weird stuff like that.

克里斯：是的，伙计，这是一个很好的例子，如果有人喜欢在浏览器的实现中发现错误，请使用HTML5表单，因为这就是所有人的所在，圣人，(笑声) HTML5表单确实很残酷；我讨厌这样说，因为我是所有这些的忠实拥护者，而我们正朝着正确的方向和方向前进，但是人。在Wufoo，如果您访问Wufoo.com/html5 ，我个人会保持此页面与当前浏览器格局以及HTML5表单的所有功能的兼容性，并且它是–当新浏览器出现时，这简直就是古怪的旅程comes out, I'm like sometimes they're adding stuff, sometimes they remove stuff, which is crazy, normally you think of as like a forward moving train, browsers, once it has a feature it always has it and then maybe new stuff will come around, but in the case of HTML5 forms there's a bunch of examples of like, well, that used to work, don't anymore, weird stuff like that.

Louis: Yeah, it’s certainly entertaining. But it is, I mean progress is definitely being made, I remember there was a time and it wasn’t that long ago when it was hard to use any kind of really large blurred box shadow in a WebKit browser because it would just grind the whole thing to a halt.

Louis: Yeah, it's certainly entertaining. But it is, I mean progress is definitely being made, I remember there was a time and it wasn't that long ago when it was hard to use any kind of really large blurred box shadow in a WebKit browser because it would just grind the whole thing to a halt.

Chris: Totally.

Louis: And you couldn’t scroll.

Louis: And you couldn't scroll.

Chris: Hmm-mm, I tracked the progress of that one, that one is now fixed thank God.

Louis: (Laughs) Yeah. I remember when finally a release came out that was working I was like, okay, here we go; now we’re all on board.

路易斯：(笑)是的。 I remember when finally a release came out that was working I was like, okay, here we go; now we're all on board.

Chris: Yeah, and thankfully Chrome we don’t have to, like how often you’re going to be like, yeah, but what about Chrome 10, you know like nobody’s on Chrome 10.

Chris: Yeah, and thankfully Chrome we don't have to, like how often you're going to be like, yeah, but what about Chrome 10, you know like nobody's on Chrome 10.

Louis: (Laughs) Yeah. And I think that’s a really good sign of moving forward, that at least I mean the two big alternative browsers in Chrome and Firefox are on a rapid release schedule now, so bug fixes get in fast. What do you think about IE, do you know, do you expect them to move to that kind of release schedule, do you think they could pull it off?

路易斯：(笑)是的。 And I think that's a really good sign of moving forward, that at least I mean the two big alternative browsers in Chrome and Firefox are on a rapid release schedule now, so bug fixes get in fast. What do you think about IE, do you know, do you expect them to move to that kind of release schedule, do you think they could pull it off?

Chris: I don’t know. Well, probably not.

Chris: I don't know. Well, probably not.

Louis: Do you think they have the company culture to pull that off?

Chris: They’re doing okay, though. Like IE 10 is kind of sweet, like the platform previews that are out for it. It even has HTML5 form stuff in it, which it didn’t in platform preview one and now in platform preview two it does, and I’m like, yay, finally, because to get that juggernaut on the HTML5 forms thing is awesome. I don’t know about their release schedule, you know, in the Twitter world of web design it is a really fun new thing to listen to people, every time Firefox updates they’re like, “slow down, geez, guys” (laughter), and they’re like okay they publicly said that they’re moving to a time-based release schedule now, that’s all it means, it means now they have a date for their features, and whatever is done by that time they push the new version. I mean it’s arbitrary to begin with, and I know it’s a little off-putting, or whatever, like version numbers used to mean something or whatever, but it’s actually good, it means that new features are getting pushed and we’re not just waiting around for new stuff, for some arbitrary set of features that they just decided would signify a new version, you know, we’re like getting incrementally new stuff, so I applaud it.

Chris: They're doing okay, though. Like IE 10 is kind of sweet, like the platform previews that are out for it. It even has HTML5 form stuff in it, which it didn't in platform preview one and now in platform preview two it does, and I'm like, yay, finally, because to get that juggernaut on the HTML5 forms thing is awesome. I don't know about their release schedule, you know, in the Twitter world of web design it is a really fun new thing to listen to people, every time Firefox updates they're like, “slow down, geez, guys” (laughter), and they're like okay they publicly said that they're moving to a time-based release schedule now, that's all it means, it means now they have a date for their features, and whatever is done by that time they push the new version. I mean it's arbitrary to begin with, and I know it's a little off-putting, or whatever, like version numbers used to mean something or whatever, but it's actually good, it means that new features are getting pushed and we're not just waiting around for new stuff, for some arbitrary set of features that they just decided would signify a new version, you know, we're like getting incrementally new stuff, so I applaud it.

Louis: Yeah, absolutely. And other types of — I mean if you look at Linux distributions, Ubuntu’s been on this kind of release since the beginning and that’s been working fine for all of our servers, so, you know, if the server can do it then the browser should be able to do it, and both ends are on this rapid release schedule.

路易斯：是的，绝对。 And other types of — I mean if you look at Linux distributions, Ubuntu's been on this kind of release since the beginning and that's been working fine for all of our servers, so, you know, if the server can do it then the browser should be able to do it, and both ends are on this rapid release schedule.

Chris: My only critique would be like maybe they should’ve been a little more public about their changeover to this new system, like I don’t know, maybe they were better but I feel like they were a little quiet about it, they said it but there wasn’t like a popup or whatever, like welcome to the new Firefox, hey listen, this is going to happen more often, you know, or some kind of splash page that explained the new thing; maybe they should have done a little better PR in other words.

Chris: My only critique would be like maybe they should've been a little more public about their changeover to this new system, like I don't know, maybe they were better but I feel like they were a little quiet about it, they said it but there wasn't like a popup or whatever, like welcome to the new Firefox, hey listen, this is going to happen more often, you know, or some kind of splash page that explained the new thing; maybe they should have done a little better PR in other words.

Louis: Yeah, but I think at the same time you look at Chrome has been doing this for a while, and their whole thing was not telling anyone, right, it just updates silently in the background and you don’t even know you’re running a new version of Chrome.

Louis: Yeah, but I think at the same time you look at Chrome has been doing this for a while, and their whole thing was not telling anyone, right, it just updates silently in the background and you don't even know you're running a new version of Chrome.

Chris: Yeah, they need to do that, everybody needs to do that I think, I think that’s awesome. And security people might be a little worried about like, whoa, now my — I should okay any new software, but I mean it’s great.

Chris: Yeah, they need to do that, everybody needs to do that I think, I think that's awesome. And security people might be a little worried about like, whoa, now my — I should okay any new software, but I mean it's great.

Louis: And Firefox doesn’t actually make you okay it, it says we’ve installed the new version of Firefox, just restart and it will be, you know.

Louis: And Firefox doesn't actually make you okay it, it says we've installed the new version of Firefox, just restart and it will be, you know.

Chris: Do they do that now?

Louis: That’s what happened when 6 came in which was a couple of days ago I think, it just sort of said —

Louis: That's what happened when 6 came in which was a couple of days ago I think, it just sort of said —

Chris: So when you opened it’s just “now you’re running 6”?

Chris: So when you opened it's just “now you're running 6”?

Louis: Now, it was we’ve updated to 6, restart and we’ll now be running 6.

Louis: Now, it was we've updated to 6, restart and we'll now be running 6.

Chris: Okay, so you didn’t have any option but you still had to click a button!

Chris: Okay, so you didn't have any option but you still had to click a button!

Louis: Which is the worst experience possible (laughter) because even now you’re running 6 would be okay, it’d be like alright, cool, but no. Yeah, I think they should just wait until you restart, and when you do, oh, cool, you’re running the new one and transparently.

Louis: Which is the worst experience possible (laughter) because even now you're running 6 would be okay, it'd be like alright, cool, but no. Yeah, I think they should just wait until you restart, and when you do, oh, cool, you're running the new one and transparently.

Chris: Right.

Louis: The other thing is I think Firefox’s extension ecosystem hasn’t really caught up to this yet because you have to flag which version and extension it’s compatible with, like it takes a couple of days for he extensions to catch up when a new release comes out, and so that means since they pushed the release you got a couple of days of ‘my browser doesn’t work’.

Louis: The other thing is I think Firefox's extension ecosystem hasn't really caught up to this yet because you have to flag which version and extension it's compatible with, like it takes a couple of days for he extensions to catch up when a new release comes out, and so that means since they pushed the release you got a couple of days of 'my browser doesn't work'.

Chris: A couple days if you’re lucky, you know.

Chris: A couple days if you're lucky, you know.

Louis: Yeah, if you’re extension developers are really on top of things.

Louis: Yeah, if you're extension developers are really on top of things.

Chris: Right. Which like if you’re a web designer today like you for sure are using Firebug, I mean it’s like the ultimate, it’s like the number one most important tool for our career ever in the last ten years (laughter), Firebug and Web Inspector, whatever, you just live all day in that thing if you’re a front end JavaScript person or CSS or HTML person, whatever, you use the crap out of that I guarantee it, and if you don’t I don’t even know what you’re doing (laughter). So that’s a pain in the butt because Firebug has to update every couple of days or whatever.

Chris: Right. Which like if you're a web designer today like you for sure are using Firebug, I mean it's like the ultimate, it's like the number one most important tool for our career ever in the last ten years (laughter), Firebug and Web Inspector, whatever, you just live all day in that thing if you're a front end JavaScript person or CSS or HTML person, whatever, you use the crap out of that I guarantee it, and if you don't I don't even know what you're doing (laughter). So that's a pain in the butt because Firebug has to update every couple of days or whatever.

Louis: Yeah. What do you think about that, I mean if you look at Chrome and Safari and the Web Inspector and even Opera, the Web Inspector’s a built-in browser feature and it’s not a separate extension that’s separately developed, it’s part of the core feature set.

路易斯：是的。 What do you think about that, I mean if you look at Chrome and Safari and the Web Inspector and even Opera, the Web Inspector's a built-in browser feature and it's not a separate extension that's separately developed, it's part of the core feature set.

Chris: Well, because employees of those companies build those tools, where that’s not the case in Mozilla, it’s an independent project. I think should they buy or should they hire the whole Firebug team at Mozilla and do this? yes.

Chris: Well, because employees of those companies build those tools, where that's not the case in Mozilla, it's an independent project. I think should they buy or should they hire the whole Firebug team at Mozilla and do this? 是。

Louis: Yeah, right.

路易斯：是的，对。

Chris: And because they didn’t they lost their lead developer to Web Inspector and the Chrome team, so that sucks for Firebug and is awesome for Web Inspector which is the only one I use now anyway, so I’m all like yay.

Chris: And because they didn't they lost their lead developer to Web Inspector and the Chrome team, so that sucks for Firebug and is awesome for Web Inspector which is the only one I use now anyway, so I'm all like yay.

Louis: (Laughs)

路易斯：(笑)

Chris: But, yeah, I think it would be a bummer if Firebug was discontinued or was just on the downward trend. Which one do you use?

Louis: You know, I really prefer Firebug in terms of UI, like everything in Firefox just sort of makes sense to me, and maybe it’s just a case of I’ve been using it forever so everything feels really intuitive, but whenever I have to use Web Inspector and trying to like turn off a property or edit a property on the fly I’m always like double clicking on it and it’s not doing anything, and anyway, that’s probably just me. But then I have switched to Chrome recently because I don’t have enough RAM to run Firefox basically (laughter).

Louis: You know, I really prefer Firebug in terms of UI, like everything in Firefox just sort of makes sense to me, and maybe it's just a case of I've been using it forever so everything feels really intuitive, but whenever I have to use Web Inspector and trying to like turn off a property or edit a property on the fly I'm always like double clicking on it and it's not doing anything, and anyway, that's probably just me. But then I have switched to Chrome recently because I don't have enough RAM to run Firefox basically (laughter).

Chris: Wow, that’s funny.

Chris: Wow, that's funny.

Louis: No, but really, I was getting to the point where every time I try and switch back to it and close the tab it was like whoa, hold on, I can’t handle this!

Louis: No, but really, I was getting to the point where every time I try and switch back to it and close the tab it was like whoa, hold on, I can't handle this!

Chris: Yeah, I heard 6 was better, not as difficult.

Louis: Yeah, I don’t know, maybe I’ll give it another go because I was one of those guys who was really, really loyal to Firefox and said — and you know when everyone was jumping on the Chrome bandwagon two years ago it was like come on, you know, Firefox has stood by you for all these years and now you abandon.

Louis: Yeah, I don't know, maybe I'll give it another go because I was one of those guys who was really, really loyal to Firefox and said — and you know when everyone was jumping on the Chrome bandwagon two years ago it was like come on, you know, Firefox has stood by you for all these years and now you abandon.

Chris: I can totally relate, I am in both of those camps; I remained a Firefox loyalist for a long time and pooh-poohed the Chrome bandwagon, and then it finally sucked me in.

Louis: Yep.

路易斯：是的 。

Chris: And now I’m looking for alternatives again because Chrome to me, and this is a total random thing, editors you can edit this out (laughs), my particular version of Chrome — I hate podcasts where the guy is talking about something so specific to him that it’s like why does anybody care about this, but Chrome for me does the ‘ah snap’ page all the time.

Chris: And now I'm looking for alternatives again because Chrome to me, and this is a total random thing, editors you can edit this out (laughs), my particular version of Chrome — I hate podcasts where the guy is talking about something so specific to him that it's like why does anybody care about this, but Chrome for me does the 'ah snap' page all the time.

Louis: Oh, right, yeah. What bugged me it was one of the things in Firefox was like ‘whoops, this is embarrassing’, whatever it is, that error page.

Louis: Oh, right, yeah. What bugged me it was one of the things in Firefox was like 'whoops, this is embarrassing', whatever it is, that error page.

Chris: Yeah, yeah.Louis: Like it’s cute when you only see it once in a while.

Chris: Yeah, yeah. Louis: Like it's cute when you only see it once in a while.

Chris: Right.

Louis: But like, you know, it’s an error page that says an error has occurred is kind of alright if it’s something you’re seeing all the time, but like these kind of cutesy messages if you’re seeing them everyday it’s like this isn’t cute anymore, in fact I’m really annoyed.

Louis: But like, you know, it's an error page that says an error has occurred is kind of alright if it's something you're seeing all the time, but like these kind of cutesy messages if you're seeing them everyday it's like this isn't cute anymore, in fact I'm really annoyed.

Chris: Good point, yeah, that’s something to think about for you UX people out there (laughter), be cute but only if it’s a prescribed very small amount of time, you know.

Chris: Good point, yeah, that's something to think about for you UX people out there (laughter), be cute but only if it's a prescribed very small amount of time, you know.

Louis: Yeah, well, for UX people it’s how much you trust your engineers to make software that never crashes; if you do then you can be cutesy, if not I think you have to go with a more straightforward error message.

Louis: Yeah, well, for UX people it's how much you trust your engineers to make software that never crashes; if you do then you can be cutesy, if not I think you have to go with a more straightforward error message.

Chris: So I’m back to Safari is the end of that story, which is weird.

Chris: So I'm back to Safari is the end of that story, which is weird.

Louis: Really?

路易斯：真的吗？

Chris: Yeah. Whatever, it has a good — I like Web Inspector now because I got used to Web Inspector, so.

克里斯：是的。 Whatever, it has a good — I like Web Inspector now because I got used to Web Inspector, so.

Louis: I do like that it has some stuff in it that Firebug last time I looked at it didn’t have, stuff for cache manifest, and what was the other one, local storage was harder to inspect if I’m not mistaken.

Louis: I do like that it has some stuff in it that Firebug last time I looked at it didn't have, stuff for cache manifest, and what was the other one, local storage was harder to inspect if I'm not mistaken.

Chris: Yeah, but I mean you can just use the console for local storage, but still I know what you mean. Yeah, I don’t know, I like the — I’m like I like the pretty purples better (laughter). Alright, here’s my thing, in Firebug the stuff on the right had the — it was in tabs so if you wanted to look at metrics or DOM properties or at the CSS applied to an element, or whatever, it was tabs on the right, and in Web Inspector they’re like an accordion, they’re on top of each other so there’s a lot more scrolling, and I really hate that but I really like everything else about Web Inspector. And like the fact that you can inspect pseudo elements is unique to Web Inspector, and that’s kind of a big thing of mine recently.

Chris: Yeah, but I mean you can just use the console for local storage, but still I know what you mean. Yeah, I don't know, I like the — I'm like I like the pretty purples better (laughter). Alright, here's my thing, in Firebug the stuff on the right had the — it was in tabs so if you wanted to look at metrics or DOM properties or at the CSS applied to an element, or whatever, it was tabs on the right, and in Web Inspector they're like an accordion, they're on top of each other so there's a lot more scrolling, and I really hate that but I really like everything else about Web Inspector. And like the fact that you can inspect pseudo elements is unique to Web Inspector, and that's kind of a big thing of mine recently.

Louis: Oh, right, yeah, because you use a lot of those in design. I saw something you were talking about, what was it, pseudo elements and transitions or animations, was that right?

Chris: Yeah, yep, because I’ve been doing a talk lately about pseudo elements and just how cool they are, which they really are, and just one of the current limitations for them is that you can’t use, like we talked about earlier, animations or transitions on them except in Firefox. So I just made sure that all the browser renders had an active bug ticket of this bug, and I just made a chart and I was like, listen, this page I’m going to track the progress on this because I think this is a, you know, all the bugs are important but this one is the one that matters to me the most right now (laughter), I just want to track it and I want to blog it so I want other people to follow that bug and just like let browser vendors know that this is dumb and you should fix this.

Chris: Yeah, yep, because I've been doing a talk lately about pseudo elements and just how cool they are, which they really are, and just one of the current limitations for them is that you can't use, like we talked about earlier, animations or transitions on them except in Firefox. So I just made sure that all the browser renders had an active bug ticket of this bug, and I just made a chart and I was like, listen, this page I'm going to track the progress on this because I think this is a, you know, all the bugs are important but this one is the one that matters to me the most right now (laughter), I just want to track it and I want to blog it so I want other people to follow that bug and just like let browser vendors know that this is dumb and you should fix this.

Louis: It seems like one of those ones that you would expect to work without having to do anything, right, like if I’ve just set it so that animations apply to elements in my browser code; it seems like one of those things that you’d have to go out of your way to make it not work.

Louis: It seems like one of those ones that you would expect to work without having to do anything, right, like if I've just set it so that animations apply to elements in my browser code; it seems like one of those things that you'd have to go out of your way to make it not work.

Chris: (Laughs) I don’t think that’s true in this case, but I know that feeling, and I didn’t mean to say ‘fix’ because it’s a matter of I’m glad that some of it is working and it never like was working and then broken or whatever, and I would hate even more if it was a half broken implementation, so whatever, they’re just there yet, it’s not broken it’s just not there yet. It’s like pseudo elements aren’t in the DOM, you know, for JavaScript nerds, so I think that’s part of it, I’m not really sure. I feel like there’s some kind of reason why it’s harder, and I think part of it is that browser vendors are hesitant to implement things that aren’t specked out really well; I mean I talk to some of these guys that like build the feature for the browser, and when the spec isn’t there they like stop and wait and sometimes they work on the spec themselves, you know, or they just make a note in the spec that says, listen, we’re not going to put this in until you fix these three esoteric issues, you know, if that’s the right word.

Chris: (Laughs) I don't think that's true in this case, but I know that feeling, and I didn't mean to say 'fix' because it's a matter of I'm glad that some of it is working and it never like was working and then broken or whatever, and I would hate even more if it was a half broken implementation, so whatever, they're just there yet, it's not broken it's just not there yet. It's like pseudo elements aren't in the DOM, you know, for JavaScript nerds, so I think that's part of it, I'm not really sure. I feel like there's some kind of reason why it's harder, and I think part of it is that browser vendors are hesitant to implement things that aren't specked out really well; I mean I talk to some of these guys that like build the feature for the browser, and when the spec isn't there they like stop and wait and sometimes they work on the spec themselves, you know, or they just make a note in the spec that says, listen, we're not going to put this in until you fix these three esoteric issues, you know, if that's the right word.

Louis: Yeah, yeah, absolutely. Well, that’s makes sense. Alright, well, look, it’s been great having you on the show, I don’t want to keep this going forever because no one will make it to the end, so yeah, it’s been absolutely great having you on the show and talking about all this stuff. If anyone, again, listening is unfamiliar with CSS-Tricks you should absolutely check it out, there’s tons of really useful stuff regardless, as you said, of whether CSS is part of your daily job or it’s something you only do every once in a while like when you’re editing a template, and like you said, there’s not only CSS on there, there’s tons of stuff about other aspects of web development as well, it’s a great site. So that’s CSS-Tricks.com? Yes.

Louis: Yeah, yeah, absolutely. Well, that's makes sense. Alright, well, look, it's been great having you on the show, I don't want to keep this going forever because no one will make it to the end, so yeah, it's been absolutely great having you on the show and talking about all this stuff. If anyone, again, listening is unfamiliar with CSS-Tricks you should absolutely check it out, there's tons of really useful stuff regardless, as you said, of whether CSS is part of your daily job or it's something you only do every once in a while like when you're editing a template, and like you said, there's not only CSS on there, there's tons of stuff about other aspects of web development as well, it's a great site. So that's CSS-Tricks.com ? 是。

Chris: Yep.

Louis: For some reason I thought it was .net for a second there.

Chris: No, that would be like the double whammy dash.

Louis: So was without the hyphen taken when you were looking for the thing or was it just –?

Chris: I don’t even remember (laughs).

Chris: I don't even remember (laughs).

Louis: Alright.

路易斯：好吧。

Chris: I think it probably was taken, and it probably still is taken, I just don’t even care, you know, like most of the traffic is referral and Google anyway.

Chris: I think it probably was taken, and it probably still is taken, I just don't even care, you know, like most of the traffic is referral and Google anyway.

Louis: Absolutely. Alright, so if people want to find you on Twitter or elsewhere on the Internet where do they go?

路易斯：绝对。 Alright, so if people want to find you on Twitter or elsewhere on the Internet where do they go?

Chris: I’m always my name, so my name is Chris and then my last name is C-O-Y-I-E-R at like everything, Flickr, Twitter (@chriscoyier), Google Plus, whatever.

Chris: I'm always my name, so my name is Chris and then my last name is COYIER at like everything, Flickr, Twitter ( @chriscoyier ), Google Plus, whatever.

Louis: Alright, makes it easy.

Chris: Thanks for having me, it was really cool talking to you and being on here.

Louis: Alright, thanks!

Thanks for listening to the podcast. I’d love to hear what you thought about today’s show, so if you have any thoughts or suggestions just go to Sitepoint.com/podcast and you can leave a comment on today’s episode, you can also get any of our previous episodes to download or subscribe to get the show automatically. You can follow SitePoint on Twitter @sitepointdotcom, that’s SitePoint d-o-t-c-o-m, and you can follow me on Twitter @rssaddict. The show this week was produced by Karn Broad and I’m Louis Simoneau, thanks for listening and bye for now.

Thanks for listening to the podcast. 我很想听听您对今天节目的看法，因此，如果您有任何想法或建议，请访问Sitepoint.com/podcast ，您可以对今天的节目发表评论，也可以下载我们以前的任何节目或订阅自动显示节目。您可以在Twitter @sitepointdotcom (即SitePoint dotcom)上关注SitePoint ，也可以在Twitter @rssaddict上关注我。本周的节目是由Karn Broad和我是Louis Simoneau制作的，感谢您的收听和再见。

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-127-css-tricks-with-chris-coyier/