meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Non-Quotidian Problems

After I published the latest iteration of the reset styles, Paul Chaplin pointed out that my simplification of the quote-suppressing rules actually broke the intended effect in Safari 2, Gecko variants , and so on.  This happened because I assumed support for quotes: none, and it just isn’t there in most browsers.  Apparently, I was testing IN THE FUTURE! that day.

“Well, no problem,” I thought to myself, “I’ll use content: none instead”.  Nope.  Even in browsers that support generated content, support for the content value none appears to have fallen through the cracks.  Using it completely fails to suppress the generation of content, so far as my testing can determine.  Even more amusingly, content: normal prevents the insertion of quotation marks in Camino (and probably other Geckos), but not Safari.

So we’re back to explicitly forcing the assignment of empty content boxes in order to stop the insertion of quote marks: content: '';.  Oh, joy.  Paul had come to the same conclusion, and worked out a nice little fallback set that reminds me of the cursor trick that gets you a hand-pointing icon in both IE and the rest of the world, only his trick is completely valid.  So I’ll be adding that in, along with some thanks to Paul.

For my next magic trick, maybe I’ll base a reset rule on :nth-child() and see what people invent to simulate the intended effect.

14 Responses»

    • #1
    • Comment
    • Fri 8 Feb 2008
    • 1134
    Devon wrote in to say...

    So now I’m curious which browser you were testing in

    • #2
    • Comment
    • Fri 8 Feb 2008
    • 1150
    Daniel wrote in to say...

    content: none will be included in Firefox 3 (Gecko 1.9). You may want to test it there.

    • #3
    • Comment
    • Fri 8 Feb 2008
    • 1206
    David Naylor wrote in to say...

    The content: none seems to be working in Firefox 3 anyway…

    • #4
    • Comment
    • Fri 8 Feb 2008
    • 1319
    David Baron wrote in to say...

    For what it’s worth, ‘content:none’ is a relatively recent spec addition; it’s in CSS 2.1 (partly to match future plans for css3) but was not in CSS 2.0.

    (‘quotes:none’ works fine for me in both Firefox 2.0 and in the latest Firefox 3 builds.)

    • #5
    • Comment
    • Fri 8 Feb 2008
    • 1624
    Aristotle Pagaltzis wrote in to say...

    Am I missing something? Why don”t you just use “quotes: '' ''”? That will set the opening and closing quote characters both to the empty string, producing exactly the intended effect. My testing hasn”t been thorough by any stretch, but I”ve had no surprises so far.

    • #6
    • Comment
    • Fri 8 Feb 2008
    • 1640
    Eric Meyer wrote in to say...

    Why don”t you just use “quotes: '' ''“?

    Because it’s ignored by Safari 2, just like quotes: none.

    • #7
    • Comment
    • Fri 8 Feb 2008
    • 1657
    Paul Chaplin wrote in to say...

    Hi Eric,

    I’ve only just replied to your comment on my blog, as I hadn’t seen it until now – apologies for not approving it and replying sooner.

    I was also reminded of the cursor trick – CSS, while imperfect in implementation and arguably spec, can be rather convenient at times, given the way it’s designed. I’m quite entertained by content: normal; behaving differently in what I’d otherwise consider highly standards-compliant engines – I can’t quite decide which interpretation I favour (is there “normative spec” with guidance, I wonder?). Thanks for putting the time in on this.

    @David Baron & Daniel: I discovered the CSS 2.x difference only four weeks ago, when browsing SitePoint’s nice new CSS reference – they had the content property listed as being in both CSS 2 and 2.1, but the none value wasn’t listed, and I was sure I’d seen it elsewhere before (they’ve now added it, after a friendly prod). I’m surprised to hear that Gecko doesn’t support it pre-1.9, though. It seems to work in Konqueror 3.5.8, but not the recent-ish WebKit build I’m using. Thanks for the heads-up.

    • #8
    • Comment
    • Fri 8 Feb 2008
    • 2121
    Aristotle Pagaltzis wrote in to say...

    it”s ignored by Safari 2

    So that”s what I was missing. Well, sigh.

    • #9
    • Comment
    • Sat 9 Feb 2008
    • 1548
    CW Petersen wrote in to say...

    For :nth-child you might look to Alex Bischoff’s Alistapart article Keeping Your Elements” Kids in Line with Offspring, though I didn’t see anything in it about siblings. 8^(

    • #10
    • Comment
    • Sat 9 Feb 2008
    • 2029
    Ben wrote in to say...

    When is the reset.css getting its own URL as your promised Eric!

    • #11
    • Comment
    • Sat 9 Feb 2008
    • 2134
    Eric Meyer wrote in to say...

    Well, I keep running into these little snags, Ben. It will happen. (Actually, it already has, but I’m trying to get all the kinks worked out before publishing it.)

    • #12
    • Comment
    • Sun 10 Feb 2008
    • 0302
    Callum wrote in to say...

    Just stop using q tags. That should work. Does anyone benefit from them? Why are quotations any more deserving of a dedicated tag than questions, sentences, clauses, or any other lexical units?

    • #13
    • Comment
    • Mon 11 Feb 2008
    • 0853
    ramon wrote in to say...

    the q tag is html’s semantic answer to an inline quote (as opposed to blockquote). why they have to render with delimiting quotation marks is anybody’s guess. some european countries use different punctuation marks for quotes. so i support eric’s attempt at suppressing the default behaviour.

    • #14
    • Comment
    • Thu 6 Mar 2008
    • 1837
    Paul D. Waite wrote in to say...

    the q tag is html”s semantic answer to an inline quote (as opposed to blockquote). why they have to render with delimiting quotation marks is anybody”s guess. some european countries use different punctuation marks for quotes

    I think the idea is that browsers should render the appropriate quote marks for their locale. So in theory, in you”re browsing in France, <q> elements should be rendered with the double-arrow-style quotes. I”ve never tested to see which browsers do what.

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...


February 2008
SMTWTFS
January March
 12
3456789
10111213141516
17181920212223
242526272829  

Sidestep

Feeds

Extras