Perth Web Standards Group, March 30, 2006.
Download audio (MP3, 4.93 MB, 21:34)
Download transcript (PDF, 23.5 KB)
View/Download presentation (S5 HTML)
Transcript by castingwords.com
Nick Cowie:Hi, my name is Nick Cowie, I'm here to talk about the button element. I don't know, it can be exciting. It is really getting into the technical side of things.
First couple bits of housework. You should really give some feedback to Kay and Vicki about this presentation, whether you want more of them, whether you actually like technical stuff like I'm about to do, or whether you actually like the more business-oriented stuff that Alex did. Another thing, interrupt, I have a tendency to go wandering off talking about stuff, expecting everyone else to know exactly what I know about CSS and HTML. That fails terribly at work and I'm constantly reminded that I that I do that by my colleagues. So, if I say something you don't understand, interrupt me, please. It's quite normal for this to happen when I'm doing this and that's really about it. Okay, let's start.
Okay, let's start on the history of this. Forms were introduced in HTML 3.2, somewhere between 3 and 3.2 depending on what your view is on standards. Nobody actually agreed with the standards for HTML 3.0, so they went on to 3.1, so about 3.2 come around everyone actually agreed that we should have standards and there should be forms, and the way to send something is to use an input button called type submit, and that was it. And back then you didn't really have a choice with how you could style it. It was a square box and that was it. You could give it a colour, you could change the font size, but that was literally it. When HTML 4.0 came along people decided, "Hey, we'd like a change. We'd like something a little bit more graphical" and that is why the button element was introduced in 4.0. Unfortunately, as you'll find out a little bit later on, it never went into wide use because a company called Netscape forgot to include it in their 4.0 browser, so it never really got taken up.
Okay, the real difference between the button and the input element is that the button element contains other elements such as images. But otherwise, the button type equal submit is exactly the same as input type equal submit. If your button type equals the reset, it will do exactly the same as an input type equals reset. And if you button type equals button, it's the same as input type equals button. The reason I keep bringing the type equals button up is that even if you still want to use input, please, if you're ever doing any JavaScript, use input type equals button because that you can get away with it. Input type equals submit really isn't valid code for JavaScript.
We just keep wandering back here to change the slides. Oh yeah, this is a little walk through actually the various common browsers at the moment. That's my web site, (http://nickcowie.com) that's where you can actually find the little test, and find this presentation, if you actually want to have a look at it or pull it apart and have a look inside it. There are four buttons, there'll be four inputs and four buttons running side by side. One is basically, there's no styling. Second one is some very basic styling and then some colour to the backgrounds and border. Third one is actually giving a background image so you can actually make it look nice, in theory. And the fourth one is actually changing the font size, just to make it a little bit bigger.
And we run through the choices. First off, we have Internet Explorer on the PC. On the left is Internet Explorer 5.0 and 5.5. Why on earth this is looking so ugly on this thing I don't know, but the buttons are there. And on the right is Internet Explorer 6.0. It's not a lot of difference. Internet Explorer 6.0 rounds the corners on the buttons. But when you blow them up really big, don't that look a bit nice, both on input and button.
We head through to Opera. The Opera on the PC, 8.52 has some problems. You'll notice that the little black bits there are actually to show that not everything lines up properly where it should be. That should fill it up, but it does things differently. If you had the background equals white instead of black, most people wouldn't notice it. The Opera 9.0 on the Mac is a little bit nice. They actually make use of the Mac HTML kit buttons, but when you change it, they will change.
And let me get through to Firefox and Mozilla. Literally, they're exactly the same whether they're on a PC, Mac, or a Linux box. I mean, I can't actually remember which of the three boxes I used to actually take that image, but they're almost identical. That's the nice thing about Gecko engines. Until you get to this one, which is Camino on the left, and Safari's on the right. Camino decides that you will use their background for the input element no matter what, but at least you can actually change the size of it. Safari's is much more fun. They say you shall use our background image and you can't push a font any bigger that the background image. Safari's fails pretty big on accessibility with the input element. If you actually use the button you can get away with a whole lot more, but you can actually do far more interesting things.
That is not supposed to be happening. Let's fly along to where we're supposed to be. Now, blimey, this is all Eric Meyer's fault. This is his little tool.
(Note the presentation was made using Eric Meyer's S5 simple standards based slide show system, which uses an additional style sheet for projectors, which I never tested it with. Unfortunately Firefox used that extra style sheet, so I switched browsers to Safari, which ignored the projector style sheet)
Audience member:He didn't like our T-shirt, either!
Nick Cowie:He didn't like our T-shirt. Now bloody hell, why's it going like that? It actually looks a lot nicer on every screen I've tried than it is there tonight. Maybe I'll do the evil thing and switch to another browser.
Audience member:Is it standards compliant?
Nick Cowie:It is standards compliant, yes it does validate. Yes, we will check. Let's get rid of that browser and replace it with another one.
Audience member:There is this product called PowerPoint...
Nick Cowie:Unfortunately, I wrote this on a machine that PowerPoint will not run on. It's called Linux. And it was the only machine I had at the time. There we go. Safari's working nice for once. You can actually, that is a successful button. Believe it or not, you can come along and change the font size on it and make this as big as you like and it works. That's one huge button. They're not going to miss that. They're going to press it.
Audience member:That's very pressable!
Nick Cowie:You can get away with it and it is a button. I'll just lift my mouse. And it decides it is a button, because there is a little bit of JavaScript attached to it.
Okay, for those who want to have a look at it, that is the source. There's not a whole lot to it. There's a DIV, there's a button element, there's an image that sits inside it, and there's a SPAN that holds the text in there. And that's the CSS that does it all. It doesn't really make a lot of sense to talk about each one. Really, the DIV that's holding it from the outside of it, it's basically there to hold it neatly. The important stuff is the width and the margin, and that just holds it in place. It puts it in the middle. There's nothing else that's there.
Okay, that's the button CSS. And most of it, there's a whole heap of it there, and it does nothing else other than clear what the browser decides it would like to add to it. Every single browser will add a different amount of a margin, or add a different amount of padding, will add a different border, will add a different background, will have a different font size and even a different font face. So, you just clear them off. It's not a problem, except Internet Explorer. They give you some padding and they won't let you take it away, no matter what you try.
The only other interesting bit there is using position relative because we're in a block element, if you put position relative on it, you can absolutely position something inside it.
Audience member:So, the button element itself is a block level element?
Nick Cowie:Is a block level element. The button element itself is a block level element. You can put a lot of elements inside. You can't put another block level element inside like a DIV. But, you can put an image, you can put a span, you can literally put anything you like that works with text.
(Note: What I am trying to say is you can put any inline element inside a button element )Back we go over here again. This is a bit better organized. And we've lost it. We can just zip through it again. There's the button. And that's the image. Nice thing about an image is it's fixed. That image that we were using was 500 pixels wide, 250 pixels high. If you say the height is two ems, the width will be four ems. It does it, and it does it automatically. It's a nice easy way to use images, that you can change sizes with them.
Audience member:Can an image change sizing like the width with that?
Nick Cowie:Yep. You can go have a look at this. As I said, this is on my website, under presentation. You can go there, actually opens up on any browser, Internet Explorer 5.0 or newer, any version of Mozilla, any version of Firefox it will work, Safari, which we're running at the moment, and you can see the button will work and the image resizing will work. The only proviso is that the image is a JPEG. You can, if you're using a transparent PNG, it works with everything except Internet Explorer. Well, I was actually going to try it with the transparent PNG until I found out it didn't work with Internet Explorer. Internet Explorer 7.0, it won't let you resize, and Internet Explorer 6.0 and below you have to use a little bit of java script to get it transparency working and it does not work when you resize it. So as long as you get the JPEGs, it works fine.
Next bit, that's the span, that's the tricky bit. It's the bit that holds the text in the middle. This is an absolute, it holds it in place. This is the box that sits in the top left. You set the width, the text align centre and the line height. The line height holds the position inside. If you wanted it smack-bang in the middle of that box, which was four ems wide and two ems high, you would put line height two em. But, this time we wanted it just above the middle, so we stuck it there. And it doesn't actually just have to be with JPEGs. You can actually do it with Flash, as I found out, basically, yesterday. So, you have to excuse me, this Flash animation's pretty crap. You can actually put, and that's probably enough, it would drive you crazy. But, you can actually use a flash animation and you can scale it, exactly the same way as you do with an image. You can blame John Oxton for that. See, it's just as big, text stays the same, and you can animate it. The only difference is that in using object you have to actually prescribe a width and a height to it. You can't get away with giving it a width and assuming the height will work, like you can do with an image.
Okay, Internet Explorer. This is where you start having fun. My favourite trick is if I ever get stuck with some CSS work, is I put a one pixel border around everything. You have a one pixel green border around the SPAN with the text in. You have which should be red, one pixel border around the image and there's a blue one pixel border around the button. Now, in any other browser they would basically all line up in the middle with one under the other, with slightly different heights. Unfortunately, with Internet Explorer, it will give you five percent extra padding on the top, ten percent padding on the bottom, and roughly twenty to twenty-five percent padding on the sides. That's Internet Explorer, but they do at least provide you, there's one nice little trick. They let you provide using conditional comments, which means you can provide an extra style sheet to Internet Explorer and just absolutely position that DIV or that SPAN inside the button, which is what I've done here. It doesn't look the same, but nine times out of ten you can get away with that. If you really wanted to be spot on pixel perfect, just absolutely position the button and then absolutely position the elements inside it, which is another trick you can do.
Okay, when you shouldn't be using input instead of buttons. Well basically, HTML 3.0, browsers that support HTML 3.0 and not HTML 4.0, which is Internet Explorer 3.0, Netscape 3.0, and Netscape 4.0. Now, I don't know what percentage most people get at the moment, but I know our website, it's less than 0.3 of a percent. And the other one is if your website's been hit by a bunch of Mac fanatics who just use Safari, or who just use Camino and who are so used to it, and have got decent eyesight, they might get upset. But other than that, that's really about it.
Okay, people to blame for this. I was actually looking for fonts and ended up on a German website that was built purely in flash. And it was in German. I managed to get through it because they had a green button for go and a red button for stop on it. So I managed to sort of work my way through and get the font I wanted. I had got a project coming up at work that needed something similar, and it was easy to put something green and something red on it. And I sort of knew what the problems were with the input element so I went looking, and I came across Joe Lewis's "How to Apply CSS to Safari Form Buttons" and that gave me sort of the hint on how to use buttons. John Oxton on scalable logos, I bumped into the other day, and that was the bit on Flash. You can scale Flash. You don't have to wait until browsers support SVG. You can actually use Flash to scalable vector graphics and Microsoft for providing the conditional comments. Yep, that's really about it. So, does anybody have any questions?
Audience member:What's the thing when the user can [xx]
Nick Cowie:What, conditional comments?
Audience member:No, no, no. Just [xx]
Nick Cowie:Well, I don't know. It depends what Microsoft decides to do. If they decide when Internet Explorer 7.0 comes out that they will actually get rid of the padding off it, or they will, you know? The trick is, the nice thing about using things like conditional comment is you can say, "If this version is less than..." I mean, all the stuff I've done at work previously with box model, has been with the conditional comments saying, "If this is Internet Explorer 6.0 or less - do this", so, I've gone out and tested everything in 7.0, and it worked beautifully, because 7.0 actually has a right box model, for things other than that.
Audience member:Are you finding more people using Firefox?
Nick Cowie:I've actually worked for the government, so I look at the stats on our website. There's more people using it, but it's still not the big one. Most people use Internet Explorer 6.0. Then it's actually split probably about ten percent using IE 5.5, and ten percent using a the Gecko browser, probably Firefox. Then it's IE 5.0, then it's dropping down and you find people using Safari and so forth. But we have a fairly big, I mean, we have a number of fairly well hit things. I think we actually occupy about, we look after about eight percent of all traffic to government sites in WA, so it is a fairly big sample, and it's fairly broad. Still somewhere between 75 and 80 percent of people use Internet Explorer 6.0. And I expect that within a year most of that will be Internet Explorer 7.0.
Audience member:Microsoft released the new version of IE 7.0 and they said that one is the final revision of the renderer, the form renderer. So the way it renders now is the way it'll render in the final version.
Nick Cowie:Yeah.
Audience member:So you can actually test the sites right now.
Nick Cowie:Yes, well that's what all this was done with. The data released from the 20th of March, the mix. The screenshot was actually taken from that. So, yes?
Audience member:Did you try, I'm really interested in the Flash button thing.
Nick Cowie:Yes?
Audience member:It's just awesome. Did you try providing alternate content?
Nick Cowie:This was done on the fly last night. It was basically let's give it a spin to see if I can do it. It can be done.
Audience member:Seems like it would work if you had the -
Nick Cowie:You could swap the image for Flash.
Audience member:If you didn't have Flash then you could show -
Nick Cowie:Sure. You could swap the image for Flash. The only trick, which I can't remember his name of it, was that he would put a DIV in there to swap. You can't swap it for a DIV, you have to swap it for a SPAN.
(Geoff Stearn was the name I was trying to remember, you can find his Flash Object at http://blog.deconcept.com/flashobject/)
Audience member:Because of the -
Nick Cowie:Because that is all you're allowed to do inside a button. You cannot have a DIV inside a button.
(note: I should have said you can only put inline elements inside a button)
Audience member:When you're writing your CSS, do you use notepad or do you have special software to do that?
Nick Cowie:It all depends. Not really. This presentation was actually written on about three different machines, with three different OSs, using three different pieces of software. On the windows PC, I use a piece of freeware called NoteTab Light. That actually puts in some of the attributes in for me. When I'm on the Mac I was using -
Audience member:Stylemaster!
Nick Cowie:No, I should be. I should give John a plug for Stylemaster, but I just use a text editor - Bare Bones' Text Wrangler. And most of this was actually written on a Linux box using Bluefish as the editor. I write my CSS by hand, but that's because I'm so used to it now, been doing it for too long. But that's me, and so other people do it other ways. Well, if you've not got any other questions we'll maybe we will end with Mr. Zeldman.