HTML5/ CSS3 - I'm Hooked! - Frontend

January 15, 201115 yr

I've just completed my first project using HTML5 and some CSS3, and I'm hooked! I've only merely scratched the surface of the new elements and styling options too, so I'm really looking forward to getting more practice in. I've never bothered trying HTML5 & CSS3 before, because of browser support issues, but after trying it out now, I think I will be trying to find ways to implement it in near future projects. I'm only a learner, and the projects I'll be working on are personal ones, so I am free to experiment really. Anyone else got the HTML5/ CSS3 bug?

January 15, 201115 yr

Oh ....

January 15, 201115 yr

Not html5, but I really enjoy using css3 in my designs.

January 15, 201115 yr

Been hooked for many many months.

Have you used my Vanilla kit yet?

January 16, 201115 yr

Author

Been hooked for many many months.

Have you used my Vanilla kit yet?

I have, but the site's not online yet. I'm still in the early stages at the moment with it. I'll send you a link once I've got it uploaded if you like? I'm really impressed with the package you've put together :drinks:

January 16, 201115 yr

Thank you. Im always curious to what people do with my kits.

January 16, 201115 yr

Yeah I've begun using HTML5 and CSS3 a lot more recently. With most of the CSS3 I have some kind of fallback for IE browsers, so they still get a usable site, but not all the bells & whistles.

You really need to check out the HTML5 Boilerplate by Paul Irish, I use this in projects and it rocks! Just strip out the stuff that you dont need, my personal fave is adding classes to the <HTML> tag so you can target IE browsers from one single style sheet, as opposed to the way of old when you used conditional statements and/or IE specific stylesheets.

Have fun!

Edited January 16, 201115 yr by slimboyfatz33

January 16, 201115 yr

i find the boilerplate template way too complex. Much for it's own good. Thats why I decided to make my own. But in reality, both mine and his have different goals so it's hard to compair them. I just don't really like his because it's much too complex, and HTML5/CSS3 wasn't designed to be that complex. He is just making it such.

Edit. Finally got a shameless banner to advertise it Thinking on putting a comments section on the page to see what people really think of it. Thoughts?

Edited January 16, 201115 yr by cibgraphics

January 16, 201115 yr

i find the boilerplate template way too complex. Much for it's own good. Thats why I decided to make my own. But in reality, both mine and his have different goals so it's hard to compair them. I just don't really like his because it's much too complex, and HTML5/CSS3 wasn't designed to be that complex. He is just making it such.

Edit. Finally got a shameless banner to advertise it Thinking on putting a comments section on the page to see what people really think of it. Thoughts?

Like I mentioned you are free to strip out the fluff that you dont need with Boilerplate. There are only certain parts that I use, but these have been very helpful.

Always willing to try new things though, and will download your vanilla kit now, thanks for taking the time to put it together.

January 16, 201115 yr

Author

I'd say go for it. Feedback is always useful in my opinion.

EDIT: I'm going to be working out some banner space on my new site soon, and I'll use your banner if you like?

Re-Edit:

Nearly forgot what I came to post in the first place :blush1:

I've just been messing with the HTML5 video element, and thought it was the mutts nuts till I found out that you need to provide the video in 3 formats to counter browser incompatibilities, and then also provide a Flash fallback. I was viewing the page in Chrome, and it wasn't until I tried it in FF that I realised you had to do things that way. Kind of took the shine off playing around tbh.

Edited January 16, 201115 yr by StuartPB

January 16, 201115 yr

The bug has bitten. I've used a few bits and bobs in commercial projects but the main bulk has just been me playing with it in my little personal sandbox

However i have a project coming up for a client that wants to focus on bleeding edge techniques for main delivery through the iPad, iPhone etc (so the video format isn't important thank god) so this will give me a great opportunity to stretch the old CSS3/HTML5 grey matter

Edited January 16, 201115 yr by MikeChipshop

January 16, 201115 yr

I've just been messing with the HTML5 video element, and thought it was the mutts nuts till I found out that you need to provide the video in 3 formats to counter browser incompatibilities, and then also provide a Flash fallback. I was viewing the page in Chrome, and it wasn't until I tried it in FF that I realised you had to do things that way. Kind of took the shine off playing around tbh.

We can thank the browers p*** fights to thank for that. And the recent Chrome dropping support for H.264 in favor for the WebM codec and (thankfully) the Ogg Theora codec hasn't helped much.

Wish they would either pick one... or pick all (I wish all).

January 16, 201115 yr

Author

Agreed! As it is, it's easier the old way, and less demanding on server space. I hope they manage to sort this one out.

January 16, 201115 yr

We can thank the browers p*** fights to thank for that. And the recent Chrome dropping support for H.264 in favor for the WebM codec and (thankfully) the Ogg Theora codec hasn't helped much.

Wish they would either pick one... or pick all (I wish all).

Yes, but the new <video> tag allows you to code the video in several formats and the browser will choose the one it can play, but it does mean saving the video in several formats.

January 16, 201115 yr

...or pick all (I wish all).

This FTW

January 16, 201115 yr

I just get confused with the backups you have to put in because of the support problems. Then again I haven't got a clue yet anyway :unsure:

January 16, 201115 yr

I know wickham, I've done several tutorials and posts about it. It's just a pain. A person should be able to choose his own codec not be forced to do them all because of browser p*** fights.

January 17, 201115 yr

EDIT: I'm going to be working out some banner space on my new site soon, and I'll use your banner if you like?

Sorry I didn't respond to this. Yeah I would like that. Let me know if you need a different size and I will make it for you.

January 17, 201115 yr

No offense taken. Our templates have different goals. Theirs is set out to solve everything. Mine is meant to be lightweight to get a project started.

A person can decide for themselves what to use.

Edited January 17, 201115 yr by cibgraphics

January 17, 201115 yr

I'd say go for it. Feedback is always useful in my opinion.

Got a comment section up.

January 17, 201115 yr

Have you seen what the editor of the CSS3 specs thinks?

Slides on a talk he gave are hidden away right here: http://www.xanthir.com/talks/2011-01-12/slides.html (cursor keys to navigate, Chrome or Safari recommended) He thinks CSS should be more of a programming language than straight mark-up. He's hoping to include things like variables, mixins and even functions! That's exciting to me

January 18, 201115 yr

I have messed around with it a little, just enough to grasp its awesomeness! I don't really want to switch to it yet because of IE9 (its soo stupid), it hardly supports any of the new features. But with that being said, I see the potential in HTML5 and CSS3 and will eventually switch.

January 18, 201115 yr

I have messed around with it a little, just enough to grasp its awesomeness! I don't really want to switch to it yet because of IE9 (its soo stupid), it hardly supports any of the new features. But with that being said, I see the potential in HTML5 and CSS3 and will eventually switch.

They are still working on that at IE9, I wouldnt get my hopes up they make it fully compatible cause afterall thats what people expect time after time when a new IE version comes out we are still dissapointed on that subject. But you can use jQuery and HTML5 plugins/libraries to make it browser compatible though, Modernizer is a nice one for attributes like Placeholder.

January 18, 201115 yr

...But you can use jQuery and HTML5 plugins/libraries to make it browser compatible though, Modernizer is a nice one for attributes like Placeholder.

+1 for Modernizr, great script with simple fall back routines

January 19, 201115 yr

So what's elements/styles do you find yourself making use of now?

Personally I like the 'placeholder' attribute and for a while now I've totally given up using images for rounded corners and use the css3 approach instead. Although that does make me work a little harder to try and make sure my site still looks nice in certain browser that don't support rounded corners but I think that's better than having to litter my markup with extra div/image definitions.

January 19, 201115 yr

Currently i've really only used the rounded corners element and (once) the gradient element.

However at the end of the month i have big project coming up that calls for large uses of the <video> tag and will solely be aimed at iPad/phone/pod users so i'm going to really flex those HTML5/CSS3 muscle

January 20, 201115 yr

Currently i've really only used the rounded corners element and (once) the gradient element.

However at the end of the month i have big project coming up that calls for large uses of the <video> tag and will solely be aimed at iPad/phone/pod users so i'm going to really flex those HTML5/CSS3 muscle

I am using HTML 5 markup for a decent amount of websites/applications lately, I like the placeholder attribute alot, and the general markup such as (article, section etc) I have also been working on a audioplayer, which uses the HTML5 audiotag with fallback to Flash for the unsupporting older browsers.

January 20, 201115 yr

Currently i've really only used the rounded corners element and (once) the gradient element.

When i say this, i mean for commercial purposes. I've played with 90% of the new stuff on my home server just to get a handle on them. (and it's fun )