10.17.2011

are you a true semantic?

  • # [15:47] <boblet> Hixie: would you use <nav> for site search form?
  • # [15:47] * Quits: danbri (n=danbri@unaffiliated/danbri) (Remote closed the connection)
  • # [15:48] <Hixie> would you have a "skip navigation" link for a site search form?
  • # [15:48] * Quits: webben (n=benh@nat/yahoo/x-cnyguavuvmtbfluo) (Read error: 113 (No route to host))
  • # [15:48] <Hixie> Philip`: yeah, i never found any distinctions when doing the testing way back when
  • # [15:49] <Philip`> (That does indicate <meta charset=utf8 foo=bar won't work, though)
  • # [15:49] <Philip`> Uh, <meta charset=utf8 foo=bar>
  • # [15:53] <Hixie> oh?
  • # [15:54] <Philip`> Hmm, but that's not what happens in practice
  • # [15:55] <Philip`> (The GetCharsetFromCompatibilityTag is only in the 'else' of a thing that checks for the number of attributes)
  • # [15:57] * Quits: Sirisian (n=Sirisian@pix012-168.pix.wmich.edu) (Read error: 145 (Connection timed out))
  • # [15:58] * Quits: Sirisian_ (n=Sirisian@pix053-197.pix.wmich.edu) (Read error: 110 (Connection timed out))
  • # [15:59] <Philip`> Maybe that's not the code that's actually used
  • # [15:59] <boblet> Hixie: I wouldn’t, but I can see some would. Yeah, that’s the nub
  • # [16:00] <Hixie> boblet: i think it'd be fine to use <nav> for that, but also fine not to
  • # [16:01] <Hixie> basically, don't use <nav> unless you think <section> would also be appropriate, with an <h1>Navigation</h1>.
  • # [16:01] <boblet> Hixie: I really love that a lot of the structural element usage is almost up to authors. That’s what most people hate, of course, but still :)
  • # [16:01] <Hixie> it'd be extremely difficult, and only mildly useful, to be more specific than we already are
  • # [16:01] <Philip`> Whatever code Firefox 3.5 is using, it also accepts things like <meta notcharset="utf-8">
  • # [16:01] <Hixie> and we're already waaaay more specific than html4 ever was
  • # [16:02] <Philip`> so it can't just be the attribute-based extracter
  • # [16:02] <boblet> makes it harder to write best practice info, but it’s much more interesting
  • # [16:03] <Hixie> best practice is "don't use <div> and don't use class=''", basically
  • # [16:03] <Hixie> but often you have to use one or the other
  • # [16:03] <Hixie> since html isn't _that_ expressive, even with all the new stuff
  • # [16:04] <boblet> Hixie: why not class? that seems to becoming a best practice with eg @stubbornella’s CSS performance info
  • # [16:05] * Joins: virtuelv (n=virtuelv@162.179.251.212.customer.cdi.no)
  • # [16:05] * Joins: Michelangelo (n=Michelan@93-41-253-98.ip84.fastwebnet.it)
  • # [16:06] <boblet> I’ve actually started using her “h2 .h2 {}” style classes, then in html <section><h1 class="h2">
  • # [16:07] <Hixie> o_O
  • # [16:07] <Hixie> why would you do that
  • # [16:08] <boblet> not as pure HTML but better than “section section h1, article section h1 {}”
  • # [16:08] <Hixie> oh well, yes, we need to figure out a better css selector solution for nested section headers
  • # [16:08] <Philip`> boblet: Why not use <h2>?
  • # [16:08] <Hixie> i meant theoretical best practice in the future, not best practice now
  • # [16:09] <boblet> also I think class="h2" has semantic meaning
  • # [16:09] * Hixie wonders when breakfast service is _supposed_ to start at his cafe
  • # [16:09] <boblet> Philip`: HTML5-style headings—reset to <h1> with each section
  • # [16:09] * Joins: Sirisian (n=Sirisian@141.218.12.168)
  • # [16:09] <Hixie> no, you can use whatever level you want
  • # [16:09] <Hixie> <section><h2></h2></section> and <section><h1></h1></section> mean the same thing
  • # [16:10] <boblet> well, I think it was maintain correct heading levels taking nesting into account, or reset to <h1> each time you start a new section, no?
  • # [16:10] <Hixie> aha, 8am
  • # [16:10] <Hixie> another hour
  • # [16:10] <Hixie> no, it resets inside each <section>
  • # [16:11] <Hixie> the highest <hx> within each section (er, lowest, i guess, closest to <h1>) is the heading
  • # [16:11] <boblet> but not to <h1>? interesting
  • # [16:11] <Hixie> well the best practice is you should have only one <hx> per <Section>
  • # [16:11] <Hixie> so it doesn't make any difference
  • # [16:11] <boblet> so you could skip levels, eg <h1></h1> <section><h3></h3>…
  • # [16:12] * Joins: mpt (n=mpt@canonical/mpt)
  • # [16:12] <Hixie> you can use <body><h6></h6><section><h3></h3><nav><h1></h1></nav></section></body> means the same as <body><h2></h2><section><h4></h4><nav><h6></h6></nav></section></body>
  • # [16:12] <Hixie> ...which means the same as <body><h1></h1><section><h1></h1><nav><h1></h1></nav></section></body>
  • # [16:12] <Hixie> each section does its own heading hierarchy
  • # [16:13] <boblet> but wouldn’t that mean that it’s easier to just start at <h1> for each new section?
  • # [16:13] * Joins: danbri (n=danbri@unaffiliated/danbri)
  • # [16:13] <boblet> assuming you’re doing crazy stuff like applying styles via classes? :)
  • # [16:13] <Hixie> apparently not, since you use classes :-)
  • # [16:13] <boblet> haha
  • # [16:13] <Hixie> <h1 class="h2"> is not as easy as <h2> :-)
  • # [16:14] <boblet> hrm… I must ponder this more :) at this rate I’ll never release this site
  • # [16:14] * Joins: epeus (n=KevinMar@213.152.16.56)
  • # [16:15] <workmad3> and even though <body><h1></h1><section><h2></h2></section></body> means the same thing no matter what level of heading you use to a machine, there are still ways of doing it that are clearer to people :)
  • # [16:15] <Hixie> indeed
  • # [16:16] <workmad3> and clearest to a human is probably either <h1> all the time or <hx> appropriate to the sectioning level...
  • # [16:16] <Hixie> agreed
  • # [16:16] <workmad3> (which I believe are the two examples given in the spec :) )
  • # [16:17] <boblet> You might want to check out http://j.mp/6FMCDi — @stubbornella’s OOCSS presentation
  • # [16:17] * Joins: fishd (n=darin@nat/google/x-wqudnjmktcyyivhh)
  • # [16:18] <Hixie> will do
  • # [16:18] <boblet> it’s quite a different way to approach things. It’s definitely changed some of my perceptions
  • # [16:19] <boblet> workmad3: I guess <h1 class="h2"> is just the first one with a cop-out for easier CSS selector writing
  • # [16:19] <boblet> (at least, that’s what I thought)
  • # [16:19] <workmad3> boblet: I personally see that as an abomination :)
  • # [16:20] <boblet> hahaha
  • # [16:20] <workmad3> and besides, why use a <h1> there... it's *much* simpler to use a <div>... so then you have <div class="h1">, <div class="em">, <div class="font">...
  • # [16:21] <boblet> I can definitely see how on a large popular site writing long CSS selector chains would gradually kill you tho
  • # [16:21] <Hixie> woah, that suggestion on slide 68 (the <h1 class="h2"> thing) is crazy
  • # [16:21] <Hixie> if you're finding that you're applying h2 styles to an h3, then your semantics are wrong
  • # [16:21] <boblet> Hixie: you’re killing me here
  • # [16:21] <boblet> :D
  • # [16:21] <Hixie> the rest of it so far is good
  • # [16:22] <Hixie> i also disagree with slide 92
  • # [16:22] <boblet> I think it‘s to address the ballooning of selectors problem; like specifying each case of clearfix rather than applying a .clearfix or .group style
  • # [16:22] * Quits: KevinMarks2 (n=KevinMar@213.152.16.55) (Connection timed out)
  • # [16:23] <Hixie> i think styling elements is the way to go, and styling classes should be the exception
  • # [16:23] <Hixie> but that might just be that i think you should define defaults first, which seems to be the same, but said differently
  • # [16:23] <boblet> well, she does say “(unless defining defaults)”
  • # [16:25] <Hixie> yeah
  • # [16:25] <Hixie> i strongly agree with what she says at the end
  • # [16:25] <Hixie> i don't understand why we don't have better tools
  • # [16:26] <boblet> @stubbornella addresses that too http://j.mp/7i7Dfe — CSS Wish List
  • # [16:27] <boblet> adding programatic concepts like mixins to CSS
  • # [16:27] * Joins: virtuelv_ (n=virtuelv@pat-tdc.opera.com)
  • # [16:27] <workmad3> boblet: check out sass :)
  • # [16:28] <boblet> haha—planning to do so for this site (have it open in a tab somewhere here)
  • # [16:28] <workmad3> sass does have mixins... and the ability to do maths, etc. in css files
  • # [16:29] <workmad3> and it gets compiled down to normal CSS and can even be minimised, etc. :)
  • # [16:29] * Joins: dglazkov (n=dglazkov@c-67-188-0-62.hsd1.ca.comcast.net)
  • # [16:30] <boblet> workmad3: yeah I’m looking forward to checking out stylesheet size differences (why I didn’t start with it)
  • # [16:30] <boblet> ok thanks for the food for thought all. Bed calls
  • # [16:30] <workmad3> I need chocolate and coffee myself
  • # [16:30] <workmad3> but then it's only 3:30 p.m. for me :)
  • # [16:31] <boblet> Will hopefully have an HTML5 site with the HTML5 articles I’ve written so far on it tomorrow to announce
  • # [16:31] <boblet> later
  • # [16:33] * Parts: boblet (n=boblet@p2086-ipbf309osakakita.osaka.ocn.ne.jp)
  • # [16:34] <ray> h1 class="h2"?
  • # [16:38] <miketaylr> <div class="span">
  • # [15:47] Hixie: would you use