For those of us habitual xhtml devs, how bad is it if we self-close tags, like <img /> and <br /> while using the html5 doctype?

test, not bad at all

But doesn’t it throw validation errors?

I have BIG issues with form validation in HTML5

html5 is designed so your existing content won’t break. So self-close or not, both valiud

It never works as intended, the bubble cannot be styled.

cool, thanks @bruce

sega the bubble is part of browser chrome. You can’t style file upoad dialogs, or the back button – you can’t style the validation bubbles. I agree that you should be able to, though

I never realised self closing was a bad thing so I’m learning things already

How do you guys like your breadcrumbs marked up?

I code templates, it’s awesome, but recently with HTML5 new validation tools, the bubble cannot be styled, and you can only style it with Chrome, these cross browser issues drive my crazy. :

@saga without seeing your actual code, I can’t be 100% sure, but if it’s valid HTML4 or valid XHTML, then it’s valid HTML5.

SpaceBee not bad at all, pefectly fine.

I alejandro here! What are the most common use case for data-*?

alejandr common use for data-* is to pass data to scripts on the page

Nice to see @ian here. Everyone, if you’re looking at HTML5 video/ multimedia, Ian’s book is the best out there

external scripts?

@bruce I’d like to understand the the outlining algorithm and the semantic elements a little better. You can have an <aside> for the page, and for an <article> … but what about <section> ? Does the aside then get associated with <section> ?

AliSpark here, (just finishing supper!) I am learning html5, css3, Blender 3D, among other things. I have a problem getting audio to work as it should do on my website…

Where do things stand with hgroup? Recommended or not?

@alejandromg what’s really nice is when you’re able to access the dataset values directly through JavaScript, i.e. el.dataset.foo will pull out the data-foo value – and setting works the same way.

@theirf Ian Devlin

I’m Jess, front-end developer at a company in Newcastle in Australia. The Design Team has just moved from xhtml strict to html5 and we’re still confused as to where to use sections etc.

oh that’s cool

Thanks @bruce – HTML5 Multimedia Develop and Design is the book @theirf

so datasets make more easy the interaction with js! nice to know

Cool, i’ll check it out. thank you

rem will mostly deal with API/ JS questions, I’ll do markup, validation etc

This talker app isn’t very good :-\ I can’t scroll the people connected on the right…

@bruce who was asking?

@ian cool, i’ll check it out. thank you

this talker app is rubbish – I can’t use Opera with it, @rem!

I know @rem. Unfortunately it’s the best of a bad lot. I’ve researched extensively and can’t find anything perfect.

@bruce and also, I’d just like to understand what is allowed to get <header> and <footer>… can I put <header> and <footer> in an <aside> ?

Rem, anytime I use javascript should I store the script in my folders or use a link to the apo?

api?

I’ve never written anything in HTML5 my sites are in XHTML one big question i have is how do HTML5 sites work in ie6-7?

@paceaux header and footer can contain anything except another header or footer

Is there a rule of thumbs to use the section tag? I mean, it should be intended not to be used as a positional element but then, being intended as a logic portion of the page (I.e. sections could be part of a TOC) which should be their correct use? Section > header > content ?

CSS 3 rather than HTML 5 question, but why the need for browser prefix’s for many of the new classes when there wasn’t previously a need? Will this be phased out once there is larger scaled adoption of html5/css3?

@paceaux yes you can put header and footer in an aside

@eddieA erm, both – depends on the context. Local scripts to your app -> folder. API calls, like to twiter -> regular API calls.

Folks – those wanting the skinny on section & article – excellent super detailed section in the wonderful title: Introducing HTML5 =>http://introducinghtml5.com

Is there a best practice for supporting HTML5′s new elements in CSS with IE6?

@kestrel html5 sites work in ie6-7 but you need to use the html5shiv, that @rem wrote, to make them styleable, If your users of IE6, 7 don’t have JavaScript, it won’t work so don’t use html5

test see my answer to @kestrel, above

@test either use the html5shiv or modernizr comes with it built in

@bruce if you use a html5shiv will that put the browser in quirks mode?

@rem I’ve read that book at least a dozen times, I just wasn’t seeing examples of <header> and footer in all of the sectioning elements at html5doctor.com

I’m curious to know if this site uses <section>s in the right manner (both on homepage, and a content page – like the about page for example) - http://sill-lighting.com.au

@rem thanks

Welcome to anyone that has just joined. Feel free to jump in at any stage with questions that you have for Bruce & Remy. If you have none, feel free to introduce yourself and take part in the chat.

If I might step in, @paceaux

kestrel no htmlshiv= doesn’t put browser in qurisk mode

@bruce — hgroup … recommended or not? I’ve read differing opinions.

Bruce, which web designer should I follow on Twitter?

James I never use hgroup as I never saw the need for it pre-html5

@eddieA you can follow me *smile* :)

@eddieA me, @rem, @iandevlin, @mattwilcox, @tabatkins, @miketaylr

@rem || @bruce Would love to hear your takes on the future of online advertising and its transition with emerging web standards, being that its primarily flash based?

@bruce cool thx man :-)

@ian absolutely, header isn’t a replacement for h1-h6

@juliandr breadcrumbs: ordered list

@bruce Thanks.

good question @johnpercival

@johnpercival I’d expect ad agencies to start moving to the HTML5 type tech – including video and canvas – basically they won’t move there for the win of standards, they’ll go there for further penetration

Anybody has any experience in CS6, and it’s transition to HTML5, does it work? http://www.adobe.com/products/flash.html

@bruce — is W3C considering dropping hgroup from the spec?

Hi, is there a nice and extensive documentation on event listeners and somewhere with good demos

maybe its time to try this HTML5 / modernizer stuff out :P

@eddieA A couple of good ones are @justcreative and @meyerweb

@johnpercival I’m sure webGL, canvas or loads of crap empty divs flung around with CSS animations will be everywhere before lonjg for advertising

I know @paceaux but if you were going to have <header><h2>Mt Title</h2></header> then you would probably leave out the <header> and only use the <h2>

@johnpercival my biggest issue with injected ads is often they use document.write – that’s the big killer and in fact the main thing that needs to go.

Agreed :) Thanks for the input

@kestrel I’ve been using it as a newbie and it’s great

innerHTML as an alternative?

@kestrel remember modernizr is *only* for detecting support in the browser – but yes, check those bad boys out

@johnpercival more than they should wait for dom to be ready – but that’s kind of off topic :)

@ian to be specific, I was doing a CMS implementation where our primary content was being placed in <article>, but that would sometimes have headings where the user could put in h1-6 AND <p> … and the article could be placed in any <Section> ….

James w3c keeps hgroup, whatwg dropped it. I’ve never used it. For example, I wouldn’t do <header><h1>My site</h1><h2>Widgets of glory!</h2></hgroup></header>, I’d do <header><h1>My site</h1><p>Widgets of Glory!</p></header>

@ian I had wanted to be sure that if I put that same content in an <aside>, it would still be permissible

@hollowx the MDN is a great resource. I run http://html5demos.com but it’s not extensive, and Opera.dev is a pretty damn good resource too.

@rem @bruce – Thx

@paceaux

@hollowx also check out http://html5rocks.com

@bruce, I sometimes don’t use the <p> tag. Should I always use a p tag

@rem i’ve been holding out and sticking with XHTML + CSS2 for the last few years thinking this stuff prob is isn’t ready for production

it would @paceaux , as @bruce said earlier I think (I will now stop hijacking!)

@hollowx oh – and proably the best resource is http://html5doctor.com

is chrome still the best browser for developing html 5 and css 3?

@eddieA no, don’t need to use <p> in that instance

@kestrel CSS2 only went to “recommendation” phase at the end of 2010 – but you were using it in production before then, right?

thanks @rem just checked a nice article on capturing css3 event on sitepoint. http://www.sitepoint.com/css3-animation-javascript-event-handlers/ thats nice as i’m doing more and more iPad adds with animation or events

barlow1984 Chrome is the best, as is Opera, Firefox, Safari and IE. You’re a web developer, right? SO you design for the web = all browsers

@kestrel it’s the same with HTML5 and CSS3 – you take the parts that are stable and you leave the bits that aren’t. i.e. .innerHTML is HTML5 – but you use it, microdata is part of HTML5, but it’s barely supported – so ignore it.

@bruce i guess so, we’re pretty limited at work with our over strict IT policies and have to develop in FF 5 at the min, trying to push them to allow full chrome access

@ian thanks for your answers, though. the client will be happy to know I got it right

@barlow1984 most of the latest versions of browsers are really good for HTML5 support – even IE10 is impressive. I tend to chose the browser based on dev tools. And that tends to be personal preference.

barlow1984 you need all browsers, how can yoiu test yoiur website otherwise?

@barlow1984 – The aurora builds of Firefox have some quite nice dev tools

@rem why ignore microdata, since it won’t hurt users who don’t have it?

@rem yeah thats the issue its easy to get caught up with the hype and spend many hours trying to fix bugs caused by using features that aren’t stable. Its def difficult getting a feel for when its time to make the leap

Is Adobe Flash dead?

@rem | @bruce — in the past, I have sometimes used <cite> for a byline (ex. “Article written by John Doe”); should I be using something else?

Welcome to anyone that has just joined. Feel free to jump in at any stage with questions that you have for Bruce & Remy.

@EddieA nope!

@test that’s my choice in what I support, I don’t know microdata well enough to support it, so I don’t add it.

@eddieA no.

@bruce what kind of CSS properties can we expect to find for the elements like <summary> / <details> and even <progress> / <meter>

Lol! Love it @bruce

@barlow1984 for dev tools you also have google canary

@bruce indeed thats my point with them….. we can ‘test’ on other browsers but not ‘develop’ thats why im trying to move to something more modern like chrome or a newer FF

@EddieA CS6 has Flash converting to HTML5 pages

@hollowx thanks i’ll take a look

@bruce will we be able to control the fill and shape of progress / meter … and can I change the triangle in summary/details ?

eddieA Flash will be needed to shim video and audio and web sockets for a long time yet (and localstorage, right @rem?)

Regarding browser testing – you need all browsers. They ALL have excellent HTML5 support in their latest browsers. As a developer, you need to know your way around, and know what quirks are lurking in older browsers.

@sega, interesting. I wonder how that is going to work

@paceaux yes, once the shadow DOM is available. Not yet.

Adobe brackets looks interesting… Any thoughts on that?

@barlow1984 if your IT policies restrict it, tell them you need access to everything. Even a VM with current browsers

@eddieA me too! Anybody got experience with this?

@eddieA Flash sits in the stratosphere of apps – 3D real-time interactive DRM video is a place that’s a long way off for web standards.

@bruce ahh, cool. could you point me to some documentation on that?

http://html.adobe.com/

@barlow1984 check for the about:flags and also the prefs in the inspector (touch events, fps)

neriv looks interesting. but I have my doubts about wysiwyg editors. They always seem to me to be WYSIWTF

very interesting!

@neriv it’s nice, but I’m still a vim and sublime gal

@rem so it’s enough to say that “this works in the latest version of your browser”? Even though, e.g. millions are on IE<9?

I use notepad++

@bruce are there any issues with people running old browsers (say IE7) also running old versions of flash causing problems with shim?

is anyone still supporting IE6?

kestrel none that I know of

WYSIWTF :-)

@dxbmatt yeah we’re trying some VMware stuff but its not that responsive

@test nope, far from it. I didn’t say that did I?

@ian lol!

@James – Not if I can help it but it’s up to the client

love that one… WYSIWTF

@James I hope not

@bruce i guess there would be very little way of detecting it other than customer feedback

@sega It’s @bruce’s!

WYSIWTF :)

We test in IE7-9, FF and Chrome (whatever versions we have on our own computers)

I’ve tried various ways to get a working audio bar, in html5, (with Flash as last option for the browser). None have been satisfactory so far.. Main problem in good browsers: usually has a rectangle around the control bar which I don’t want. And in Opera says I need a plug-in but don’t know which one I need. Any suggestions?

Got to sweet that

sweet#tweet

@bruce Hah! So, true. @rem Been hearing quite a bit about sublime… guess i need to give it a try.

AllSpark for Opera problems, email me brucel@opera.com and I’ll have a look

neriv I use sublime

I just mean, if “you need all browsers” – then wouldn’t that stop you from using any HTML5 features? Why say don’t use Chrome-specific features, for example, because it’s not webby, if you’re not supporting IE6/Safari 1.0/etc.?

A general question regarding HTML5 apart from the obvious inclusion of video / audio and the new semantic tags what is the main purpose of the evolution of the mark up language, this might be a dumb question but what was faulty in xhtml and html 4 that mean we needed a new version? Was it no longer supporting the type of application/pages developers are creating?

Ok, thanks Bruce

@SpaceBeers — Agreed. However, I let the client know up front that there will be extra time billed for IE6 and/or 7 compatibility.

stefan24 what was faulty? no video, audio, web sockets or local storage or web workers or database facility or method of drawing to the screen.

@test no, that doesn’t stop me at all. I use rounded corners and IE7 still works. Where I need a specific technology, say WebSockets, I’ll polyfill the browsers that don’t support it natively.

Hello All, I suppose a question I would have is that will the adoption of HTML5 mean we will see less browser/engine specific CSS tags necessary?

Out of interest, has anyone found a bullet proof way of testing old IE versions on one machine? IETester seems a bit buggy and the IE9 old browser modes are a new beast entirely.

stefan24 “Was it no longer supporting the type of application/pages developers are creating?” – exactly, you got it in 1

@test but it’s a case by case basis. If the main audience is IE6, then there’s no point in building a 3D game using WebGL and polyfilling with Flash – just build the thing in Flash and be done with it.

@bruce And yet, that all could have been added without changing the HTML elements from the markup perspective, no?

@SpaceBeers there is something called SuperPreview

@spaceBeers get a browserstack subscription well worth the money! :)

@spaceBeers you need multiple virtual machine installations. IETester isn’t good enough because they patch the .dll files to run IE separately, so it’s not a 100% perfect copy of IE.

@ James Ie6 all depends your market if you go for China you have to else Europe and states is no use anymore.

test yup, sure. You can use all the new APIs without ever using a new HTML5 element

@SpaceBeers I used this for a bit, but honestly, I think the best way it probably using virtual PC

@spaceBeers I use Fusion on a Mac, but there’s a number of solution.

@SpaceBeers So far, no. We have virtual machines running native versions of the browsers, which is the only way to be sure sadly.

@sega – that’s what I do at the moment. Seems excessive though.

@rem – Mac’s scare me.

@spaceBeers sure, you can create virtual machines on a PC and linux too – but I’m not sure you can virtualise OS X – so that you can test Safari

How similar is safari on PC vs Mac?

@SpaceBeers it’s the only true way to test the user experience. SuperPreview does not do the hover states and I can’t find another way that does. The only real way (because Microsoft is just silly) is to have x amount of OS”s testing each version of IE and it’s hover states etc.

my setup for test is several windows Xp in virtual machines with IE6 IE7 IE8 and then IE9 in vista

@rem – all our designers are Mac based so there are a few spare knocking around.

@test nowadays I’ll use Modernizr for feature detection and shiv so earlier browsers aren’t so much of a concern. Emphasis on the ‘so’ because a client will always be using IE6-7 and as long as its explained upfront I don’t find it a problem.

@jess.irwin I’ve heard there’s stability issues on the PC. Can’t say much more than than

@spaceBeers They used to scare me too, but after a year, I wouldn’t go back to PC if you paid me. And I was a .NET dev!

sorry didn’t mean to steer the conversation over to xbrowser testing! just something thats front of mind…

@hollowx +1

@jess.irwin safari is the same on both pc and osx they even make the fonts match perfectly which is why its so slow on the PC :P

@SpaceBeers I go as back as IE7, I don’t test 6 any more, which means I don’t have to use PNG transparency any more.

@jess.irwin, very similar it is called IE on a PC

@rem @dxbmatt I just don’t understand when people say, e.g. “you’re not doing web development if you only support Chrome and Opera” when in reality, supporting the latest versions of all browsers is still far from full-support. So, I guess my question is, how do we/can we really define what’s “Web development” and what’s “browser-specific” development?

@test you have to let go of the notion of “full support”.

it seems functionality which would have been handled on the server now is usable by front end developers. In terms of making the transition its quite hard to change my workmates mind about moving towards html5 due to the limitations of IE what strategy would you use to make the transition?

but for the time being doing more stuff on the iPad the, regular web Dev

@bruce do we have any new attributes or elements for <table> in HTML5, I don’t recall reading about any changes in your book… but I want to be sure I haven’t missed anything

Folks: no single browser supports all of CSS 2.1 – will that stop you from using it?

@sega – A client told me they were running IE 5 last week. I nearly cried. She read the version wrong. I was very relieved.

paceaux nothing new with tables, IIRC – some things dropped (summary attribute, axis attribute)., but some more CSS planned

We just don’t support IE6 at all – Microsoft doesn’t, so we don’t.

the only way to get ride of IE 5 IE6 is to stop development for them

@hollowx not true – but I’m not going to get in to that discussion now.

@bruce … damn. just when I was building an app for that

At my last job, my project manager’s favorite browser was IE6. This was last year. He was the lead architect of all our Web software.

@James said “in the past, I have sometimes used <cite> for a byline (ex. “Article written by John Doe”); should I be using something else?” I’d use Article written by <cite>John Doe</cite> but that’s against spec

@jess.irwin & @hollowx agreed

@SpaceBeers it’s not our responsibility to create sites for IE5. I once went as far back as IE 5.5. It’s not hard testing for multiple browsers, but realistically having a series of computers would make the testing phase easier, particularly for IE6 stuff.

heard about that Australian online store that charges extra for IE 7 customers

(this was in the IT department of a top-10 US university)

Do we want to steer back on to HTML5 or are we happy talking about IE6, et al? I don’t mind personally either way.

IE10 is an impressive browser – and should be one hell of a mobile browser if it launches this year.

@hollowx seriously? To the end user?

@test agree with @rem on this one. There is no such thing as full browser support or compatibility. There is (or has to be) an acceptable level of functionality and accessibility. And it all depends on the client

@rem I want to talk about your hair

@rem – IE10 seems excellent so far

@bruce I want to talk about your pink pants

Is it me or are the European countries more advanced as far as new techniques in coding, CSS3, etc

@bruce sorry, yellow!

I still check my sites in IE6 and if something important doesn’t work then i fix it. I believe you should look at your analytics and support what your customers use. If a significant enough proportion of people are visiting the site with a browser then the best thing to do for your business is support it otherwise you’ll lose customers

@bruce Speaking of hair, is yours still pink?

I’d like to know if http://sill-lighting.com.au uses sections in the right manner. We’ve only been using HTML for 3-4mths and I’m still confused about proper use of sections vs divs

@eddieA it’s you.

@rem @bruce – is there going to be anything in the spec about responsive images? I’m using adaptive images at the moment

@jess.irwin divs have no semantic meaning at all, they’re dividers. Thinking of it that way helped me categorise how I used them

ok so HTML5 is f-great but with all the different browsers out you have to make a choice if you want css3 transitions effects, etc.. but for the structure thats ok

@spaceBeers no, but there is discussion going on in the w3c. I don’t know the latest though. @bruce might have some info.

IE10 awesome running in parallels on a Mac. Back on topic, take it back to HTML5 if necessary, it’s me who keeps replying to cross-browser stuff!

Q: best practice for a blockquote in HTML5… Use a P element or not? I see that the blockquote elect doesn’t require the P element. This may have already been coved, but just got here.

Welcome to anyone that has just joined. Feel free to jump in at any stage with questions that you have for Bruce & Remy. If you have none, feel free to introduce yourself and take part in the chat.

I think it’s not a major issue to use CSS3 transitions @hollowx, it won’t make much of a difference. I use them all the time. I mostly use CSS3 transitions to replace what jQuery once did for me.

@ sega seriously the tell them that they will charge extra or they can download another browser

@rem its more for templates that are 2 columns – usually it would be something like <div id=content><div id=main></div><div id=side></div></div> – where #main is a left column and #side is a small right column

@all what do you think about jquery mobile ?

@spaceBeers r/e adaptive images – the W3C group is discussing it imminently

@hollowx yeah that was on sitepoint at some point and BBC in the UK

@jess.irwin if divs are being used to get the style you want, then arguably it’s fine. Stuff like id=side – that might be an aside element, so you want to try to soak up the semantic value that HTML5 gives you.

Where in the US can I get training for jQuery Mobile?

@bruce thanks. I’m running a massively adapted version of adaptive images at the moment. An official method would be really handy.

@spaceBeers I suggested <picture>; WHATWG wanted <img src-set>, now we’re amalgamating the proposals. See Matt Wilcox article

@rem So, can <section> almost always replace <div> if there’s not another clear semantic choice (header/footer/etc.)?

lol.. http://blog.silktide.com/2012/06/charging-customers-for-using-an-older-browser/ @spaceBeers

Best reference book html5 css3?

how do you use jquery mobile do you use the user agent to serve it to the user?

@stevenGardner I was about to ask something similar to be honest. Mobile optimised websites or HTML 5 native app wrappers?

TimGreen Introducing HTML

TimGreen Introducing HTML5

@test not at all. <div> was used for everything. Section != div. <div> still has real world use in an HTML5 doc.

electric or wet shave?

@arranrp barber.

Has any of you felt with the cook

@sega well have started to change my habits to pure javascript and css3 instead of jQuery. But maybe i’ll use jQuery 1.8 when you can customise it.

@brucel/@rem thoughts on polyfilling HTML5 and bleeding browser edge features vs. investing effort in getting users to switch over to a better browser or something like chrome frame? are we wasting time trying to ‘patch’ the web with the polyfill effort?.

Ignore this is hard on the ipod

Responsive images: what’s the problem, and how do we fix it? http://dev.opera.com/articles/view/responsive-images-problem/

@barlow1984 it depends on what you need. PhoneGap is an excellent bridging platform if you can’t get the bits you need through a regular web page – like camera access – but that’s all changing.

@test I’m frequently seeing <div id=”wrapper”> in html5 as there’s no obvious replacement e.g. <section>

@addyosmani I don’t think we’re wasting time. I think those trying to force a user off <IE8 is wasting time.

@bruce I know that I can use the “for” attribute for <output> and assign it back to a form…. but can I use any of the other typical form attributes on <ouput>?

@rem changing as in more HTML 5 support from handsets or something else?

@addyosmani => http://remy.tumblr.com/

I read that content should be split into sections, but isn’t that unrealistic for those using WYSIWYG editors in CMS’s?

I quite fancied a

addyosmani !thoughts on polyfilling HTML5 and bleeding browser edge features vs. investing effort in getting users to switch over to a better browser or something like chrome frame?” lots of people can’t change their browser.

@alistairds So a wrapper is not a section?

@rem cool cool. I shall check it out. Thank you, sir.

@addyosmani latest post – bottom line: people aren’t specifically wanting to stick to their browser, just give them the content they want.

@bruce I’m just wondering if I could use <label> for <output> and if <output> can accept attributes like “name” …

@alistairds often when I’m about to do <div id=wrapper> I realise it’s actually <body> that I want to style

@barlow1984 sorry – can you give me that question again with a bit more context – trying to watch quite a few messages here :)

jess.irwin “I read that content should be split into sections, but isn’t that unrealistic for those using WYSIWYG editors in CMS’s?” Nope, you read that content *may* be split into sections. If your CMS doesn’t allow it, don’t sweat it! HTML4 is with us forever

@rem how does that work for stickyfooters? don’t you need the <div id=wrapper>

@rem/brucel should I assume you guys advocate the ‘at least give everyone content (even if the app/site looks super basic), give modern browsers the best experience’ way of thinking rather than equal experiences for all?

@rem And yet, my supervisor literally chose to use IE6 because he said he liked it best. But he’s hopefully one in 7 billion…

@rem but don’t some browsers have issues with certain styling on <body>? I can’t remember specifically what or which browser (useful I know…) but it has happened in the past.

@jess.irwin sure – or <footer> that would – but if you need to wrap it for styling purposes: <div><footer>…

@paceaux can’t remember -p try it and vlaidate it, and tweet me to let me know

@alistairds especially for a centered layout, I apply background to <html> and then do body{margin: 0 auto; width: 60em;}

@addyosmani yep.

@rem sorry, you mentioned mobile stuff changing, just wondered if you meant that there would be access to hardware via the web browsers such as cameras etc?

sweet. sounds good.

@test that’s their choice. If I told you your browser was rubbish and you should use mine, it wouldn’t be fair.

@addyosmani I’m in the “give me the content even if it looks super basic” camp. Because my blind friends prefer that to being locked out and getting no content because they can’t see the shiny

@barlow1984 getUserMedia is one of them e.g.

So for the example <div id=content><div id=main></div><div id=side></div></div> where clients enter content into #main. would html version be <section id=main><article>[content here]</article></section>

@paceaux that’s a good idea, I should try that. I’ve not tried to use a wrapper div much recently, but have seen a few blog posts where others have mentioned continuing to use it in html5

@test but in truth, IE6 is a damn old browser. They sound like an old dog not wanting to learn any new tricks – which is fine, let the beast lie :)

I was just responding to the link you posted to your blog that said no one chooses to use IE6. Not that relevant here, sorry ;)

Right, he was definitely an old dog

I just think he may not be alone

@brucel thats completely understandable. Not enough consider the accessibility perspective. I agree with not everyone needing the shiny.

@barlow1984 getUserMedia gives mobiles and browsers access to the camera already. See www.html5doctor.com/getusermedia

@barlow1984 yes – exactly that. Access to camera, access to sensors, etc. The two demos at the top of html5demos.com work in Opera Mobile 12 – reads your camera and fees it back to you

@test im sure he isn’t alone :)

A little off topic, but has anybody started using media queries?

I find it hard to degrade some of my fancy htlm5 stuff on ie6 with no JavaScript. Unfortunatly I have to make everything work great for this and I often find myself removing bits o html5 just to get the work out on time. I’ve been studying prolly fills and other solutions but it takes time

@test maybe there is an ie6 appreciation forum out there

However – devices could limit access

getUserMedia with mic audio landing in Chrome later in the year, Opera have an implem and FF are landing theirs soon too.

jess.irwin nope <div role=main><article>[content here]</article></div> is better

good news all around.

@bruce – Do you see being possible to access most phone features from web apps in the future, not just camera etc

His understanding was that newer software is always less secure so better to hold out as long as possible on old stuff.

IE6 is dead, even microsoft thinks so, http://www.ie6countdown.com/

@StevenGardner that’s our job really though. And make sure you’ve got a good understanding of your demographic – ie. make sure people are using IE6 before supporting it for your business. That said, make sure you give them something – something is better than broken – every time.

@test but for how long was he going to “hold on”?

StevenGardner no worry about making IE6 responsive – who has IE6 on their phone/ tablet?

@sega great. Let’s move on then shall we? :)

I’m trying to push for ‘progressive enhancement’ on older browsers, but sometimes I’m facing a losing battle.

@bruce sounds like a challenge…

@spaceBeers that’s exactly what we’re working on#

@rem already did :) We don’t support IE6 any more.

@sega, I have. I am working on a responsive site re design. Not an expert at it yet? lots of trial and error. @bruce and @rem do you guys feel that way too

@test back again on a slightly different username as moved from iPhone to Mac and couldn’t carry the session over. If you want to talk about real world experiences with browser testing and pushing IT depts to sort it out, message me on Twitter @dxbmatt

@bruce – I started on IOS development but it seems almost pointless if web apps could do everything a native app can.

@jess.irwin polyfills aren’t progressive enhancement which is their advantage. They’re not graceful degradation either, so you need to be wary, often they’ll *require* javascript, which gets you out of a hole sometime….

@sega starting to just learning how to make responsive designs, its taken a while to get to work on these types of projects as you need the right type of site plus a client who can see the benefits.

right now if i want to make a HTML5 video to put on my site. How many encoded versions will i need to make and what would they be?

@kestrel

Kestrel 2 – webM and mp4

@eddieA I think it is the way. I was reading something a while back that responsive might be bad because it still takes long to download the web page, however, with increasing web speeds I don’t think this will be a prob. for too long.

adaptive bitrate?

@eddieA responsive is fun. But yep, very new and lots of trail and error. Mostly I’m finding in the design / dev hand off. Our conf site is as responsive as we could get: http://2012.full-frontal.org (JS conf site)

A problem i had was placeholders on forms falling back to labels I found super labels on GitHub which is cool

A problem i had was placeholders on forms falling back to labels I found super labels on GitHub which is cool

@bruce @johnpercival would the 2 versions cover the whole market or would i need an FLV version as well?

Re: audio, I’ve been adding ogv too. Is this not necessary now?

@stefan24 – My 1st responsive site was for the company I work for. My boss wasn’t willing to try it on a real client so we experimented on ourselves

i guess an FLV for older browsers

FLV for a flash player fail back

Kestrel that’s fine – you can feed the mp4 to a flash player for older browsers. See video for everybody by Kroc Camen

@rem, Remi, yeah I checked that site out. l Like the bitmap style

@bruce webM for chrome and mp4 for FF / Safari / Opera?

@spaceBeers what we the biggest problems you had developing a RD site? I’m just learning at the moment been making fixed width sites for years its quite a shift in mindset

no need for FLV. Or check out Playr by Delphiki or the King of video polyfill/ players, mediaelementjs.com

@bruce, I’m late on this whole SVG thing. Can you give me a summary on why I should use svg

@rem – my boss won’t shell out for tickets but the site looks good and I’m gutting I can’t come along.

Any UK folks want to learn some HTML5 and attend the super awesome conference Full Frontal, we have some tickets left: http://2012.full-frontal.org/workshop/html5

(pimping like a boss)

@bruce awesome thx man :)

Do you guys put the effort into microformats and aria

Depending on what version of Flash Player you are serving to

@rem @bruce Early stages, but any thoughts on the proposed <picture> element?

Kestrel webM for Chrome/ FF/ Opera, mp4 for IE, SAfari

@spaceBeers tell your boss that your competitors that do shell out for training are getting the competitive edge!

@eddieA @sega The pitfall of responsive design is when devs remove navigation/pages completely. Many users spend the majority of time on mobile devices – not just in line at the coffee shop anymore – so it’s important to let the user do whatever they could do if you hadn’t changed the layout.

dxbmatt-mac lots of thoughts; I invented it

@stefan24 – finding someone to try a site out on was a big deal. As we used ourselves we removed any deadline pressure.

@dxbmatt-mac personally, I like it – but I’ve not played with it at all in production

@bruce knew I recognised your name from somewhere :)

@bruce awesome thx its getting confusing the way browsers keep switching between different codecs

Is ogv obsolete?

@rem – already tried that. No luck. I’ll save up myself for next year. New baby means we’re a bit poor at the moment but it seems stupid to miss something like that when it’s so local.

@stevenGardner yes, but mostly vcard and little else (for me personally). I’m guilty of not adding aria roles and I know I should – there needs to be more public knowledge of how they work in real life. @bruce might have some links thouhg.

@dxbmatt-mac more helpfully, see my article http://html5doctor.com/html5-adaptive-images-end-of-round-one/

@spaceBeers ah, I have a new baby, the trick is to *run* the conference ;-)

@test completely agreed, but responsive layouts change depending on the width of the screen, which changes their user experience, good or bad, time will tell.

@Stefan24 – Otherwise images was the biggest ballache. Working in percentages was fine once you get you head round it.

@rem – Good trick. Cunning.

AliSpark ogv is obsolte for video, Ogg for audio lives on

“ballache” that was funny

Guys, I got to go, thanks for the awesome chat

any good deals going for the HTML5 book tonight? :)

@bruce – Oh!

I heard a passionate presentation in Edinburgh last year about aria that’s made me put stuff in when I remember

cya @sega

@spaceBeers I know that responsive images are a problem, my work mate started working on a site for our company but he used the user agent string to serve up different sized images but I really don’t know like the idea of using them seems really messy.

@kestrel yes – buy a book, and Bruce and I get 20p royalty each – special deal just for tonight – do it!

@sega laters man

@rem ARIA roles: see HTML5 Accessibility Chops: notes on using ARIA http://www.paciellogroup.com/blog/2012/06/html5-accessibility-chops-using-aria-notes/ by my mate Stev (who’s an Aussie)

@bruce Great article, I’m on the main whatwg mailing list so have been following developments anyway

@stevenGardner do you remember who?

What project could I do right now to learn html5? A standard website doesn’t seem like the right fit since I’d need to spend a bunch of time writing it in xhtml too for browser compatibility. I want a practical project with decent compatibility.

Rem, big boss pimpin right now

Joshue O’Connor has a fine book out called HTML5 Accessibility on just that.

@spaceBeers wish there was a solution to that one, I’m sure its coming.

@rem only 20p? :( sitepoint are slave drivers :P

@stefan24 – adaptive images by Matt Willcox(sp) creates different sized images for you but I had to tweak it quite a lot to work with the design.

fun fact: we offered Introducing HTML5 (our book) to Sitepoint but they turned it down (their audience aren’t interested in it, they said)

@bruce Didn’t realise Mr. Faulkner was an Aussie, not that it matters of course!

@kestrel they’re not our publishers :)

Hey guys – we officially have just over 5 mins to go so if you’ve been sitting on a question, or you’ve asked one that has been missed in the noise, now would be the time to get it out there.

@bruce lol

@stefan24 I think it’s ok to rely on UserAgent string as anyone who changes theirs knows what they’re doing and knows they’re not getting an experience for their actual device/browser. Anyone else have opinions on this? I don’t understand why everyone on the Web seems to say “you can’t rely on the UserAgent string” when most of the time it’s perfectly accurate.

Oops guess I was a little late

oh god, I lol’d. Oh god.

@bruce can you help be understand when the “hidden” attribute should be used instead of {display:none} or {visibility:hidden} ?

@rem You’re fired.

@rem OMG awesome!!!!

@paceaux I actually use this one – but I use it in JavaScript: el.hidden = true – which is a really nice way rather than adding a class

@paceaux it’s display: none, rather than visibility: hidden though.

@bruce @rem whats the book called? can i find it on amazon? I was expecting it to be a sitepoint book :P

paceaux hidden means hidden from everything, not just undisplayed but still interacting with script etc

@test think it was just a best practice to avoid the user agent maybe just an old concept that needs letting go of?

@test I just bought a cheap Android ICS device, and the default brower User-Agent string is… iPad iOS 3.2!

@paceaux – visibility hidden leaves a big hole where the element once was.

@rem, I always get them backwords… but still, why would I use “hidden”

@kestrel http://introducinghtml5.com/

@test you shouldn’t rely on UA strings – they lie. Feature detect whenever you can.

Is there an HTML5 intelisense for Sublime Text 2?

@rem about flash. What my approach is now is what i can do in html5 for compatible browsers i do and i fallback for flash. Eg canvas element. of course not to complicated stuff as we are still limited.

@spaceBeers I know what display and visibility do from the CSS side

@paceaux again, I don’t use it in HTML, I use it in JavaScript, like for tabbing systems. tab.hidden = true;

there 20p winging its way to you as we speak :P

@hollowx that sounds like the right approach.

@rem I’m wondering how the attribute “hidden” is different… like.. why wouldn’t I use {display:none}

@spaceBeers thanks for the link looks interesting I’ll have to look further into it

ouch someonejust hit me on the head with a 20p coin

does anyone have any great recommendations for (PC) code editors for html/css/js… WebStorm/Sublime are two I’m trying out at the moment – any other recommendations?

@rem as more sites asks for html5 dev instead of flash

And because I’m a loyal employee, the SitePoint HTML5 book can be found here http://www.sitepoint.com/books/htmlcss1/

@bruce damnit, I thought we were splitting that.

lol hawk

4 minutes left before I cut our experts free…

@hollowx indeed, I get a lot of clients saying they’re moving from flash to HTML5 and a lot of workshop delegates saying the same thing

Clients often ask for HTML5 without actually knowing that they’re talking about. This is a problem.

alistair, notepad++ is a lightweight option that has syntax highlighting and tons of plugins (and is open source)

@rem “they lie” – really? I’ve heard people say that but haven’t seen much evidence, @webber’s cheap Android device notwithstanding. Is there an article/book/talk/etc. anywhere that gives any evidence of UA’s that lie?

@ian it’s not. Clients are like the visitors to our sites, they don’t care how it’s done – so long as it works and it’s buzzword compliant

@test Opera claims to be Opera 9 according to the UA string, not Opera 12.

test check out webAIM’s article on user agent strings to see how they loe

@rem Ok, it “can be a problem” – depends on the client and their understanding of HTML5.

@hobbitmime, notepadd++ better than Dreamweaver

.. lie. Or open Opera Dragonfly and set the UA string to “my lovely browser” to fake them

@test TV browsers give false UA strings too

?

@rem I can’t remember the guys name but it was a good talk. Yours was good too. My HTML5 books are @rem HTML5, malarkey’s hard boiled book and a book a parts html5 pocket book

@bruce will do, thanks!

@test opera would display its user agent as IE so it wasn’t an acurate test for this browser in this instance to my knowledge this one of the reason stated it isn’t entirely accurate.

@stevenGardner oh – up at the Highland Fling?

@rem @bruce Is this the recent edition? http://booko.com.au/products/9780321784421

@bruce so “hidden” is appropriate for … ‘accordions’ maybe?

@test how is a cheap device notwithstanding? I can image a lot of people buying these, especially judging from the Amazon reviews

required reading for all History of the browser user-agent string http://webaim.org/blog/user-agent-string-history/

@eddieA

@rem yeah

thanks for the linlk bruce!

I meant, I was interested in other examples. “notwithstanding” just meant, in addition to.

yes @alispark

@test ah ok

Thanks for that. Noted re notepadd+++

@stevengardner Jack Osbourne then I think.

@AliSpark – Sublime is v.good

@bruce like could I do this <style hidden=”false” contenteditable=”true”> ?

I felt using the user agent wasn’t cool and so I’ve avoided it, will be interesting to get more information regarding it

@rem a pity we don’t have a great visual editor for creating on the fly real animation in css3 javascript. Like a flash editor for html5 css3 canvas. Forr the non hyper programmers out here. Some exists but the code generated is unusable.

Dreamweaver doesn’t cope with showing css and more

@rem Na his was good but about HTML5 this guy was all about Aria

And folks, remember to check out Full Frontal conference: particularly the tooling tutorial workshops! http://2012.full-frontal.org/#tooling

(pimp complete: yay)

paceaux no. hidden=”true” is html, not CSS

…I mean in its layout bit.

@eddieA even more lovely are the design chops.

ahhh, so hidden is only meant to be used in JS

paceaux no. It’s HTML. Not CSS, not JS

http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#the-hidden-attribute

@all What’s been the most welcome addition in HTML5 for you?

Alright guys, it has been real. The 5 oclock whistle blew and I am out.

@rem got a client at the moment who is adamant (not the early 80s icon) that they don’t want to use Flash at all, only HTML5 / JS. For a cartoon website and they’re looking at Pixar / Dreamworks styles of interaction and animation which I think (correct me if I’m wrong) we’re quite a way from! Luckily some of them are quite switched on and are educating the others internally. We’ll see….

bruce + paceaux – but it’s defined in the IDL for the HTML element, so it’s part of the JavaScript DOM API

@dxbmatt-mac canvas + web-gl – you can do it.

@rem got it. it’s different from the two CSS approaches, and it’s not an HTML attribute

@rem true, settable by JS but is an HTML attribute

@rem I only access “hidden” then through the JS DOM

right, good night all. Don’t forget - www.introducinghtml5.com is less frenetic and just as gorgeous as @rem and me

@bruce … oh.. it *is* an HTML attribute, then? … that then goes to my question of when I should use it over the two CSS options

@paceaux no, through HTML as an attribute, and through JavaScript via the property.

Ok all. That’s the end of the official session, which means that @rem and @bruce are free to go! You’re welcome to stick around here and chat for as long as you like, but please be aware that the session is no longer moderated (not that you required it in the first place). Thanks very much for taking part.

ie. <div hidden></div> and el.hidden = true;

thanks @rem and @bruce, informative as always

@bruce laters man :)

Thank you experts! For sharing your thoughts and in many cases code!

@rem love the answer – shame the client has to support IE8 :)

Next up in this series we’ll be talking CSS Layouts. Details TBA.

paceaux read the spec – I sent the link http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#the-hidden-attribute

Adios folks – remember to buy the book, and it’s not just for christmas!

Thanks guys!

bye all

Thanks

@rem thx a lot dude

Thanks guys. This was a nice unexpected way to spend an hour. Very interesting. Your 20p will be winging it’s way to you on payday!

thanks @rem & @bruce for your time

Wish I had remembered this and prepared some questions i needed answered but THanks for your time guys.

@HAWK – How do we find out about the next one? I stumbled across this by accident

Thanks @rem @bruce

Balls.

@bruce I had read the spec.. .I was still lost on it… that’s ok. If It’s been used in the wild, I

thanks @rem & @bruce for the session and keep up the good knowledge spreading.

Thanks, bye for now, and good night/day (depending on where you are)!

@spaceBeers I post on twitter (@sitepointdotcom) on Facebook (facebook.com/sitepoint) and in this forumhttp://www.sitepoint.com/forums/forumdisplay.php?438-Talk-With-The-Experts

Thanks @HAWK. I’ll be back for more.

Cheers Sitepoint.com

@hawk , @bruce, @rem thanks guys … I really appreciate it

Cheers @haWK drop us a tweet when you publish the transcript, Bruce and I will pimp it back to the folks outside. Thanks for having us.

Farewell for today, have a safe journey – I’ve got a rabbit hole to jump down.

@rem Will do :)

I didn’t see a response to the “so “hidden” is appropriate for … ‘accordions’ maybe?” question from @paceaux

@rem I tweeted you my question, but it would appear that display:block over-rides hidden=”true”

I’d say it’s not appropriate in that situation, because you intend to show the content at some point.

@kravvitz yeah, it seems like it’s just a DOM method for toggling… display:none?

all I get from the specs is that it’s hidden from *everything*

so screenreaders won’t read hidden=”true”

but my understanding is that display:none does the same thing

Perhaps, but CSS properties can be set for specific media types where as the HTML5 hidden attribute applies to everything.

so… I guess if you’re trying <style hidden=”false” contenteditable=”true”> you have a faster method for editing inline style blocks

http://cssdesk.com/93FbQ

No. The specs state that “The [<style>] element does not represent content for the user.” http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-style-element

Also the hidden attribute is boolean, so its presence is like setting hidden=”true” in JS.

“legitimately shown in another presentation”

so, if I wanted to demo a functionality and let the user edit a a style-block, that seems like an appropriate time to set hidden=false

but yeah, seems like accordions wouldn’t be an appropriate use, b/c I’d want screenreaders to see it

1. I’m not here.

2. @paceaux hidden=”false” means hidden = true – because it’s a boolean attribute

it’s presence means it’s enabled and therefore true

same as readonly=”true” is the same as readonly=”false” is the same as readonly.

So don’t set boolean attributes with values.

3. I’m outta here folks!

thanks ghost @rem … as you can tell, I’m not that bright. but I think I’ve got it

@rem how do you tell what is a boolean attribute from the spec ?

@paceaux not at all – we’ve all got to get it wrong first.

@troll999 IIRC it says so. But you’d have to check that one. Most attributes like that are bool. But there’s a few freaky ones like autocorrect=”yes” – I mean – WHAT WHERE THEY THINKING!?!?

Silly browser vendors.

Right, I’m really off.

Night night folks.

bye Rem.

@troll999 http://www.w3.org/TR/2010/WD-html5-20101019/editing.html#the-hidden-attribute if you read the intro to “hidden”, they tell you if it’s bool

@rem thanks a ton!

I’ve never tried to use contenteditable=”true” on a <style> element. Do any browsers actually use styles that a user types into it?

Ok. Apparently you can: http://css-tricks.com/show-and-edit-style-element/