Please visit my new campsite listing site

Archive for March, 2012

Quick CSS3 browser prefixing in netbeans

Friday, March 16th, 2012

I just wrote this macro for netbeans, which inserts -moz- and -webkit- prefixed equivalents of a css3 style rule:

caret-end-line selection-begin-line copy-to-clipboard caret-backward insert-break caret-up "-webkit-" paste-from-clipboard insert-break "-moz-" paste-from-clipboard

:after shock

Thursday, March 15th, 2012

I’ve just been disabused of a misconception I had regarding CSS’s :after (and, by extension, :before) pseudo-element (I’m also, it would seem, somewhat in the mood for using long words).

Quirksmode – my go-to site for checking browser support for CSS features – states:

[…] :before and :after, with which you can place text or an image before and after each HTML element.

… which isn’t actually true. While applying box-shadow to an element today, and also using :after to add a bottom border which could be given a slightly offset position I noticed that the shadow seemed to be getting applied to the :after element too. I couldn’t decide if this behaviour is what I would expect (having been given scant opportunity in the past to use much CSS3) so decided to set up a jsfiddle to try out a few things.

A bit of playing around led me to discover that the :after pseudo-element is inserted after an element’s content rather than after the element itself. Which is fine, if it wasn’t for the fact that there’s a decent amount of disinformation out there stating the exact opposite.

It’s also pertinent to note that the javascript/DOM equivalent of :after would be node.appendChild(afterContent) rather than node.parentNode.insertAfter(afterContent, node). And I wonder if there are any plans to have :after be put into two modes “after-content” (default), and “after-element” – could be a useful extension.

Now I’m going to get on with what I do best – appearing in the background of music videos for godawful songs which do their utmost to ruin my lunch hour.