Oli.jp

Writing & such by Oli Studholme (@boblet)

  1. Amazon “HTML5” and ebook formats

    Amazon just announced Kindle Format 8, supporting HTML5 and CSS3! Yay! But closer inspection reveals they’re only supporting the marketing version of “HTML5” and “CSS3”. Boo! Won’t someone just give us the web stack for ebooks already?

  2. Don’t use IDs in CSS selectors?

    Is CSS Lint’s “Don’t use IDs in selectors” suggestion just crazy talk? While some are using this suggestion’s supposed ‘obviously bad’-ness as a reason to reject CSS Lint out of hand, it’s more valuable to actually examine the why behind this suggestion. The reasons may surprise you…

  3. Blockquote problems and solutions

    Wherein I cover current uses of block quote metadata that are unsupported by <blockquote>, and consider potential improvements to the situation.

  4. oli.jp style guide

    My style guide for this site, for your edification and copy-and-paste pleasure.

  5. CSS3 Flexbox vs A Princess Bride

    A look at the current CSS3 Flexible Box Layout Module, containing lots of information you don’t want to hear, but with extensive reference to the movie A Princess Bride.

  6. CSS animatable properties

    As with the CSS selectors article, I wanted a summary of animatable CSS properties, so I’ve made a copy of the W3C one and reordered/tweaked it a little. It’s now referenced from the Mozilla Developer Network wiki, so I guess I better keep it updated ;)

  7. CSS selectors

    I wanted a summary of all the CSS selectors, so I’ve made a copy of the W3C one and reordered/tweaked it a little.

  8. The ruby element and friends (on HTML5Doctor)

    My third article for HTML5Doctor.com:

    The <ruby>, <rt> and <rp> elements allow us to add ‘ruby’ phonetic annotations in languages like Japanese and Chinese. Despite the terrors of internationalisation and patchy browser support — with a little fiddling and a lot of caution — this sexy threesome with adorable accents are ready to use now.

    → Read The <ruby> element and her hawt friends, <rt> and <rp>” on HTML5Doctor.com

  9. Block-level links, HTML5 and Firefox

    Firefox breaks HTML5-style block-level links (a link wrapping block not inline elements) when they contain HTML5 semantic elements. The link and first contained element are closed, and multiple new links are inserted. Wrapping the link content in a <div> can help, but the resultant behavior may still appear due to another bug (the infamous packet boundary bug).

  10. 12 common problems with HTML5

    A summary of some common misconceptions about HTML5, with answers and links to more information. An informal FAQ, if you will.

  11. HTML5 structure—HTML 4 and XHTML 1 to HTML5

    A look at the differences between a basic HTML 4 and XHTML 1 page and the same page using HTML5’s structural elements, plus the CSS/JS required for support in browsers, adding HTML5’s semantics via <div class=""> to get around ‘the IE problem’, and a summary of why you should be thinking about HTML5 now.

  12. HTML5 structure—header, hgroup & h1-h6

    Looking at the <header>, <hgroup>, <h1>-<h6> elements, with examples of <hgroup> use and a discussion of HTML5-style heading element levels (basically <h1> almost everywhere).

  13. HTML5 charset declarations & validation

    Updated! An in-depth look at why the W3C Validator lists charset warnings & errors when using the HTML5 doctype, and what you should do about it. This bug has been fixed! <meta charset="utf-8"> is good to go.

  14. HTML5 id/class name cheatsheet

    A concise list of class and id names based on HTML5 element names and general semantic structure. Also suitable for IE-friendly <div class="">-style HTML5.