SitePoint Podcast #127: CSS Tricks with Chris Coyier

Tweet

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.

Listen in Your Browser

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

Download this Episode

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

Subscribe to the Podcast

The SitePoint Podcast is on iTunes! Add the SitePoint Podcast to your iTunes player. Or, if you don’t use iTunes, you can subscribe to the feed directly.

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!

Browse the full list of links referenced in the show at 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.

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?

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 —

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.

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?

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.

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?

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.

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.

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.

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!

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.

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.

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.

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 —

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.

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?

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).

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.

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.

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.

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?

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.

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?

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?

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?

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.

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?

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?

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.

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.

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.

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.

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.

Louis: Yeah, absolutely. So, coming back to using these techniques on CSS-Tricks, how does CSS-Tricks look in 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.

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.

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.

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.

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.

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?

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.

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.

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.

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.

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?

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).

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.

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.

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.

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?

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.

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.

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.

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.

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 —

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.

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.

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’.

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

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.

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.

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.

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.

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).

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!

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.

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.

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: 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.

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.

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.

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.

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.

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.

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.

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).

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.

Louis: Absolutely. 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.

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.

Theme music by 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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://twitter.com/samiullah1989 Sami89

    It’s good to hear css expert, he made great point regarding css layouts and i didn’t like the part that he is switching back to safari

  • http://www.web-design-weekly.com Jake

    This was an awesome episode Louis!

    Chris is on fire at the moment and it’s really great to hear more from him. Looking forward to you guys interview more great front-end guys!

    • http://twitter.com/rssaddict Louis Simoneau

      Hi Jake, thanks for the kind words. If there’s anyone you’d like to hear interviewed on the show, I’m definitely open to suggestions!

  • http://twitter.com/rockyshark Jason Foss

    I normally don’t go for the interview episodes – I prefer the “regular” news ones – but this was really good.

    Thanks Louis & Chris, great work!

    • http://twitter.com/rssaddict Louis Simoneau

      Glad to hear you enjoyed the show, it was a lot of fun to record as well :)

  • http://desarrollowebpanama.com diseño web panama

    Bueno la verdad no hablo ingles pero uso el Google Traductor para poder leer estas interesantes informacion en ingles.

    Saludos