HTML5 and CSS3 with Inayaili de León

Paul Boag

More from show 200: Inayaili de León tells us that we can be using HTML5 and CSS3 right now.

Paul: Best talk of the day! Yeah, you can come and join us – you can throw out Drew. It’s really good to have Inayaili on the show. She is one of those quiet yet very significant figures within the web design community, that is there in the background doing some absolutely great stuff. I think she has been writing some stuff for 24 ways recently, which was very good, really enjoyed that, and has got some other great stuff going on, so we welcome to the show Inayaili.

Hello Inayaili.

Inayaili: Hello.

Paul: It’s really good to have you on. Thank you for coming all the way to the … I was going to say studio.

[lots of laughing]

Inayaili de Le%C3%B3n

Image Source

Paul: [exaggerated voice] “Thanks for coming into the studio today”. So, we are going to have a bit of a chat about CSS3?

Inayaili: Yeah.

Paul: I thought I better check that. Ryan? Is that alright for you? CSS3? Yeah, it meets Ryan’s approval as well, so that’s really good. OK, we have kind of been building to this all day really, we have kind of mentioned CSS3 a couple of times.

Inayaili: I don’t know if you have noticed but I think we are halfway, euh…

Marcus: We are, this is halfway

Inayaili: … through the …

Paul: Of for fuck sake.

Marcus: We only have got six hours to go.

Paul: Ooh, whoa.

Marcus: I can’t work out, my recording thing I am doing here, says I recorded seven hours of audio. How can that possible be? Oh, it starts on 1, that’s why.

Paul: Because the whole space time continuum is [???]

Marcus: I answered my question. It starts on one hour.

Paul: I have got far too many windows open here, let me close some.

Marcus: Yes, we are halfway – jipee!

Paul: Wow, that’s worth celebrating. I am getting really cold in here as well.

Marcus: Shut the door.

Paul: Shut the door. Is that alright for a minute. Is everybody else getting a bit nippy? Good stuff. Right. Halfway joke by Marcus. That’s a good idea, as we got a few minutes.

Ryan: What’s that good one, you had …

Paul: Go on Marcus, go on my son. Will you hang a minute, I …

Marcus: Someone actually send me an email with a joke, but I can’t remember if it was any good or not.

Eum, am I allowed to tell a blond joke?

Paul: After I have just been telling everyone off in the chat room, for commenting on people’s personalities and personal appearances, and stuff like that, and then YOU want to tell a blond joke.

Marcus: Eh, eh, peoples … do you want to be more detailed about that at all, Paul?

Paul: No.

Marcus: No? Ok. Euhm, …

Ryan: Why would you [tails of into a giggle]

Paul: Strange Marcus, I don’t understand it. I have only been working with him seven years.

Marcus: No, I don’t want to tell that joke, it’s rubbish.

Paul: Goh, blooming heck, take your time mate. We’ll just sit here.

Marcus: Here we go.

[Cow jingle kicks in]

Paul: Oh, for crying out loud. That, that has to go! That was the thing that was endlessly looping.

[Jingle stops]

Marcus: Yes.

Paul: [reads from the chat room comments] “Paul has an actual egg for a head.”

Ryan: Excuse me, what is your conversation about?

Marcus: An actual head. There is a joke.

Ryan: We can’t keep people from following.

Paul: Yeah, I understand that. Can we kick that person? Actually there are a few people being a bit dumb.

Marcus: I can do a Christmas joke.

Paul: Yeah do … Nooo!

[background laughing]

Marcus: Blame them!


Marcus: Two men, two snowmen standing in a field.

Paul: Yes.

Marcus: One says to the other: “Do you smell carrots?”

Ryan: Carrots for noses.

Marcus: That’s actually quite a good joke. I know it’s kind of traditional not to have any reaction, but that is not a bad joke.

Carry on.

Paul: Is that it? Can we move on now? Let’s talk about CSS3.

Marcus: Oh no, I am just going to interrupt.

Paul: Let’s talk about …

Marcus: That’s a good set of interruptions.

Paul: You’re not going to interrupt Inayaili, because she is far too nice.

Marcus: No, I am going to interrupt you.

Paul: You can’t do that, it would be like …

Ryan: She came all this way.

Paul: It would be like, I was going to say kicking a puppy, but people get upset about that.

Inayaili: And I brought cupcakes.

Marcus: Yes, exactly.

Paul: And you brought cupcakes. Yeah. That’s made up for the fact that Relly couldn’t be here. In fact we ought to have the cupcakes brought in. I feel they should be coming in.

Right. Let’s talk about CSS3 and get to grips with some of it. Can we start really basic for people, because not everybody has the time to kind of look at CSS specs and read all the articles on it. So give us a really good idea of what kind of things does CSS3 allow you to do.

Inayaili: Well, I think the main thing it allows you to do is to have a cleaner mark-up. So when you are creating your HTML you can have a much more semantic, with less classes, with less id’s, markup. And it allows you to target some elements without adding a class.

Paul: Right. So we are talking about the improved selectors there. Things like the nth child.

Inayaili: Yeah. And then of course there are the other, more visual things: like adding text shadows, and border radius and box shadows and stuff, much more easily.

Paul: Sure. OK. So why, you obviously started talking a lot about CSS3. Why have you got excited about it? Presuming you are.

Inayaili: Yeah. Exactly because of that. I can just create the most, cleaner markup possible, without having to create lots of divs, and lots of spans, and all that mess we used to do before, and so much more flexible. You don’t have to have Javascript to do some things, and especially because I don’t really do Javascript. So I like to do things in CSS – if I can.

Paul: There is an argument, isn’t there, you brought Javascript up there, that some of the things you can do with CSS3, actually begins to kind of stray on the territory of being behaviour, rather than design. You could argue things like hover state is already an example of something that is actually behaviour. So should we be doing those kind of things in Javascript, really? If we are going to be all semantic and all kind of correct about it. HTML is your content, CSS is your design, behaviour is your Javascript. Should actually these things be done in Javascript or is that just a bit [tails off]

Inayaili: I think that, euh, I am going to give the easy answer: It depends.

[Laughter in the room]

Inayaili: But, euh, it really does depend. If it is something, just a nicety, something that is going to be a little detail on the website, it’s not really crucial to be visible by everyone, and it can be easily done in CSS, much easier than with Javascript, then why not?

Paul: Yeah, absolutely. I think it is about pragmatism, isn’t it.

Inayaili: Yeah, exactly.

Paul: You do what the right thing is in any particular circumstance. I mean the other, I guess argument, against doing lots of CSS3 at this stage is one of browser support. Talk us through a little bit where things are with browser support, you know, what supports what and you know what can you start to do. You probably don’t know it all of the top of your head – that’s a really unfair question. But what is, you can be general, fudge it, make it sound like you know what you are talking about [laughs].

That’s what I do.

[Laughter in the room]

Paul: You don’t remember exactly what every single CSS is supported by what version of a browser – or is that just me who doesn’t know stuff like that.

Inayaili: Yeah.

Paul: OK. I’ll shut up at this point. Now then, would you like to answer that question and dig me out of the hole, thank you.

Inayaili: Yeah, well, it’s very hard because Internet Explorer, until 8, still doesn’t support CSS3, CSS3 selectors, so it is quite hard knowing that the most used browser from 6 to 8 doesn’t really support that. So you have to be careful in a way, you have to look at your stats, you have to see what your users are browsing the web with. But I think that most things are supported by Firefox, Safari, Opera and then CSS3 is not supported by IE.

Paul: OK. So how then do you justify doing work with CSS3, when there is so much dogginess surrounding the support, and it is so patchy, and things like that.

Inayaili: Well, in terms … One thing that I really like using with CSS3 is the advanced selectors. They just make your life really, really easy. Like if you are styling text, adding margins to paragraphs, and headings, and stuff like that, you can do it much more quickly with CSS advanced selectors. And if some browser doesn’t have a specific margin or a specific padding it is not going to break the layout. You have to be careful that way. There is also some nice Javascript plugins they have been made recently to support the CSS3 selectors for IE. That is really, really helpful. And I also usually use a tool that is called Modernizr, to [tails off]


Paul: Yeah, we mentioned that earlier.

Inayaili: So, you can kind of, euhm, it’s not having doubled the work, it’s not having to do the CSS for one browser, and then for another browser, with Modernizr you can kind of adapt your design based on which CSS properties the browser supports or not.

Paul: Sure. I mean, you wrote, I just had it on the screen. You wrote an article. This is just a little bit a move away from CSS3, but it does kind of all relate. You wrote an article for 24 ways, euhm, about having a field day with HTML forms. Which I thought was really interesting about some of the new stuff that can be done with HTML5 as well, and kind of combining that with CSS3.

24 ways

Inayaili: Yeah.

Paul: Do you want to talk through some of that kind of stuff? That was a really interesting article and not everybody has probably seen it.

Inayaili: Euh, about what I talked on the article?

Paul: Yeah. You can’t remember, can you?

[Laughter in the room]

Paul: I wouldn’t be able to, and I can’t even remember what I wrote about this [year?] It’s nothing like throwing a curve ball in, isn’t there?

Marcus: I’ll save you for a minute, because I just love, a tweet from Matthew Panel [spelling?] here, which is: “Jeezes, is this Boagworld stuff still going on? Damn A-listers wasting my bandwith.”

[Lots of laughter]

Paul: Get him on the show. Tweet him back and say “Come on”.

Marcus: Yeah, ok.

Ryan: We can get him on Skype.

Paul: If we can get him on Skype, get him on.

Ryan: Get him to ring Boagworld.

Marcus: He is complaining about the lack of John Oxton on here.

Paul: Ooh, why didn’t we get John Oxton on?

Marcus: Because I can’t think of everything.

Paul: But I rely on you to think of everything. See, I just think it is quite interesting. I have got to say, I have got to be honest with you, that I haven’t, that I haven’t looked massively into HTML5, and CSS3 yet, I kind of know what they do in principle. I have had a little play around with them, but I have not actively used them yet, because I keep feeling it’s not quite there, it’s not quite time. But I think to some degree…

Inayaili: I disagree.

Paul: Yeah. I know you do, and that’s what I am interested in, because I think somehow, I am falling into something I know is wrong, and I know a lot of other web designers feel, they look at something like CSS3 and they go: “Oh, browsers don’t support CSS3”. Like it’s a blanket statement – if that makes sense. You know, that CSS3 has been taken as a whole, you know where some bits of it do have support – which I guess would be your argument, would it?

Inayaili: Yeah. I think people just dismiss it by principle and don’t bother looking at what could be done. They shouldn’t be doing that really. You should definitely …

Paul: I feel told of.

[Inayaili giggles]

Paul: Yeah, but, I mean there are some things that are … It is true it is not a thing set in stone, like box shadow has just been dropped from the spec, so … Has it really?

Inayaili: Yes.

Paul: But I like box shadow.

Inayaili: Yeah, I know, lots of people did. But the specs were just too complicated. There was no consent as to how it was supposed to work, so they just decided to drop it for now. For now.

Paul: For now? But that is a classic example of something. You see that just makes me worried. Because I would have used box shadow.

Inayaili: Yeah, but if you had actually read the specs, you could actually see.

[Consternation and laughter in the studio]

Paul: I feel under attack here.

Inayaili: You could feel that vibe that this isn’t really working right, that well.

Paul: Right.

Inayaili: There were lots of red notes saying: “Is this really right?”, “Maybe we should forget about this for a while”.

And even in other things like: I was just reading the text spec on my way here, and if you go to the spec it says: “we are considering removing multiple text-shadows”. So a text will only be able to have one shadow, and if you actually follow the development… I mean you don’t actually have to read the specs. One very good thing that I actually think people should have to do is at least subscribe to the decisions that are made for the CSS. It is something like every two weeks or something? It’s like a five line post. That only tells you ok, CSS box-shadow has been dropped, and it’s something that will be useful. And if you are interested it is something that you should …

Paul: Because that’s the big thing. You have actually answered that. I was going to come back with an aggressive response, but you have answered that. Which is I think is, the average web designer feels like they are sinking under todays work. They try and keep on top of what is relevant right now, just to keep up, you know it feels like a race web design, you know, trying to keep up all the time. And then you’re turning around and say now we have to read W3C specs. I am not Jeremy Keith, I prefer to put a bullet through my head. You know? And here you are saying that there is actually a nice little summary you can subscribe to. Where can you get hold of that?

Inayaili: If you search for, I think it’s like CSS3 workgroup, or something like that.

Paul: CSS3 working group [typing]. See what we get back. We have got 12 hours to waste so… [laughs]

[reads search engine results]CSS current work.

Ryan: This is the future Paul, it is not a waste.


Paul: So here we go. Here is the …

Inayaili: There is probably a blog link under navigation.

Paul: “blog“, yeah, I got it.

Inayaili: So, that’s the short summary.

Paul: Oh, that’s the summary? So you can just subscribe to that blog? And you get a nice little summary.

Inayaili: It’s not like you are going to get a five posts a day, it’s very random, I think.

Paul: Now, I have got to say, this is not the most friendly document in the world. I have just read the first line.

Inayaili: You don’t have to …

Paul: [Reads from the document] “CSS WG has no problem with depreciated DOM active”.

Inayaili: No, you don’t have to understand everything. I don’t understand everything.

Paul: Oh, OK.

Inayaili: But some things are relevant and occasionally there are some relevant things, like OK, box-shadow, which has been dropped. And you would have…

Paul: And I would have gone into a panic. An run like: “[Shrieks] I have been using that!”

Inayaili: Yes, exactly.

Paul: So what, I mean that is a big issue. You know. If I kind have gone to a client and designed them a site and I had used box shadow. Sorry, I am being quite pushy over this, but you have been to me, so … And then suddenly that has been removed from the spec and is removed from support in the browser. That site is going to break. And they are going to come back to me, quite justifiably, and say “Why did you use an unsupported, unset in stone piece of technology?”

Inayaili: Euh, well, in that case the site wouldn’t break without box-shadow.

Paul: Yeah, the box-shadows would just disappear.

Inayaili: You just wouldn’t have the shadows. So you have to be careful that way.

Marcus: There is also the argument that if you don’t pay attention to what is happening on the W3C and you don’t contribute to the talks and discussions, then you can’t complain about specification, because you have shown no interest in it, and you have not contributed to any of this.

Paul: You have got to vote, otherwise, …

Marcus: If you are not going to be involved with it, and you are not going to talk about it, then you can’t complain about it.

Inayaili: One thing that is also important to understand, and I was just talking to Jeremy Keith outside, and he agrees, is that you don’t have to use the CSS3 to contribute. It’s very useful if you just go there, if you just try a few things, you don’t have to read the whole thing. That’s quite boring. But if you do your own things, try a few experiments, see how stuff could be used in real life, and then you send them your examples, or you send them your comments with an explanation on why you think something won’t work or something won’t be useful. And that is something the W3C are always looking for, like real examples to base the specs on.

Paul: Yeah, I mean it is difficult, isn’t it? Because, you know, OK, I just keep coming back to this. An everyday designer like, you know, I don’t know, Ed sitting through next door, doing his work in the other room right know.

Marcus: Will he be offended at that? Everyday he designs.

Paul: But he is!


Paul: Alright, but he is not, he is NOT Jeremy Keith. Do you know what I mean?

Marcus: Nobody is Jeremy Keith.

Paul: He doesn’t, he can’t think conceptually. So what I am saying is that only a certain group of people is getting to really play around with this technology, and really… you know there is people like Andy Clarke, people like Jeremy Keith, that got the time, because of where they are in their careers …

Marcus: They are not being [..] by bullying project managers.

Inayaili: I don’t think it is because they have the time. I think it is because they are really, really interested in what they do.

Ryan: Yeah, outside of work it’s not. It’s not just a work thing, they do it in their own time.

Inayaili: I think if you really, really – I don’t like using this word, but passionate – about what you do, you will have an interest outside of 9 to 5.

Paul: Oh, absolutely, I do agree with that. I do agree with that. I also, there is a question if, you know, do you have to be, I am trying to think of the term, do you have to carry a certain reputation before anybody takes a blind bit of notice of you. You know, if I …

Inayaili: No.

Paul: OK.

Inayaili: The other day I was writing a very short post for my blog about the use of multiple columns in text and I was just doing some very basic examples just to try, just to make sure the example was working, and I was trying in Safari and Firefox and I noticed that one thing, it just wasn’t doing what the spec was telling it should be doing. And I thought: “Oh, maybe I just should report it to both Safari and webkit and Mozilla”.

Paul: Right.

Inayaili: And I just did a quick comment on the bug report website and it was actually like five minutes later it was actually introduced as a bug in Firefox.

Paul: Oh.

Inayaili: So, it doesn’t matter who you are.

Paul: That’s brilliant.

Inayaili: You can contribute.

Paul: So in your experience it’s been a very open process.

Marcus: It’s just about being bothered basically. Isn’t it?

Paul: Yeah.

Inayaili: Yeah.


Paul: You see. But perhaps, it is just me or not, or a lot of other people, but you just presume you are not really going to get anywhere. You know, that you are just another voice in the crowd.

Inayaili: Yeah.

Paul: Perhaps I am being naive. You have been involved a little bit in this kind of process as well, aren’t you? Rachel? What has your experience been of dealing with these working groups and talking to them, and that kind of stuff.

Rachel: Certainly in the past with web standards project things. I suppose my experience is always been fairly positive. In that I think that generally, groups are just interested in what you have to say.

Paul: Right.

Rachel: You know, I don’t think there is any kind of wall up that says: “No, we only listen to people with this kind of reputation”, or whatever, but you know, …

Paul: Oh, that’s good.

Rachel: I think, it’s … you just have to get out there and start talking about stuff you care about really.

Paul: Right. I think that’s brilliant. You changed my view over that. I made perhaps assumptions that were false in that situation.

Inayaili: And for that example I just gave you, I didn’t have to read the whole spec, just to do my bit, I was just literally reading a very small proportion of the spec, just to write that quick blog post. And I came across a bug.

Paul: So is there any other kind of, moving on from that a little bit, is there anything else you get really excited about CSS3. There are people out there, that are like me, and maybe haven’t done their homework as well as they should be. What do you want to let them know about, that will make them go out there and get them stuck into this, and having a look.

Inayaili: I started to be really excited when I started to understand how CSS3 makes my life easier.

Paul: Yeah.

Inayaili: And, makes clients have to pay less, because you are spending less time dealing with some things that would take a long time, to work cross browser.

Paul: Can you give me a really good solid example of that. You know, what could I do with CSS3, that would make my life simpler.

Inayaili: Well, I am just looking at the example of the 24 ways post. And it just makes your life simpler coding forms in a big way. You can target different types of input and different labels, very easy.

Paul: So, this is using those advanced selectors, you were talking about.

Inayaili: Yeah.

Rachel: And I think another thing that I have certainly found, but I wrote on 24 ways about that as well, is in situations where you don’t have control over the markup. And that happens quite a lot.

Paul: Ahaaa!

Inayaili: Yeah.

Rachel: It’s that, if you are dealing with some CMS for instance, that spits out a load of markup, and you want to put rounded corners on something, or you might want to inject markup into that. But you can still target that CSS3, and have the effect.

Inayaili: Imagine you have a table, a data table, and you want the rows to have different colours.

Paul: Alternate.

Inayaili: Like you want red, blue and green. Red, blue and green. Red, blue and green. You can do that with CSS in like literally 30 seconds.

Paul: Rather than having to put a class on each one.

Inayaili: Yeah, and if you are really worried about “Oh it won’t show up on IE”. You can use one line of jQuery, or a little Javascript plugin and it will work, if you really … It’s not something that is going to affect massively the look of your website. It is just a background colour in a few rows. But it’s just instead of building this very complex Javascript thing, you can do it in CSS like that.

Paul: I mean, that I really, really get. We got a client at the moment where that is a perfect example. They got a website of something like 33,000 pages, it’s a big institutional website. And, you know, we are redesigning their site, and it’s all in a content management system, and all that content has been put in, you know, by various content providers. And we now got to go in, and that content has got to remain the same, but we have to redesign the site around it. So the HTML is staying the same. So it’s a really good example where maybe some of these advanced selectors will be really beneficial. And after all isn’t that what we said about HTML?

The Zen Garden right back in the early days. “You can change the whole look of your site without changing the HTML”, but really, we were fibbing a bit, weren’t we, until relatively recently. You would have to put bits in it.

Inayaili: If you have to go to the table and actually add a class in it for each row, you are doing it wrong. Well you are not doing it wrong, but you are over complicating.

Paul: You are not living the dream.

Rachel: And it is presentational as well. When you are sticking that kind of markup in, in your document it’s actually you are doing it, because you want something, it’s a presentational thing, you want to make striped tables. You shouldn’t have to stick something in your markup to make striped tables.

Paul: Yeah.

Rachel: It’s completely a presentational thing.

Paul: Yeah, completely. Ok, that, you have got me. You have convinced me.

Inayaili: Good.

Paul: You have got me on board. And actually, the bit that gets me most is that it takes us one step closer to that real ability to separate content and style. And THAT I am entirely behind. Especially for some of the, you know, the big clients that we deal with, there websites are too big to be changing huge amounts of content, so that is brilliant. And even for smaller websites, that’s obviously still very very relevant stuff.

Inayaili: But even for a smaller thing. Imagine you have a list of items and you have a margin for every item in it, and you don’t want the last one to have a margin, because it doesn’t need a margin and if it does have a margin in IE6 it is fine, but you can remove that with CSS from all the other browsers.

Paul: The other idea that always gets me, is that when you have a menu item, and you divide the menu item with a border-bottom. I bet you don’t want it on the last one, you can remove it. If it’s there it’s not the end of the world.

Inayaili: Yeah, it’s fine.

Paul: Exactly. Yeah, brilliant. Brilliant stuff. Thank you SO much for coming in and chat about that. Much appreciated and you are hanging around for a bit, aren’t you?

Inayaili: Yeah, I am.

Paul: Excellent stuff. Brilliant.

yaili website

Thanks goes to Joke de Winter for transcribing this interview.