Discovered the attr() function via Divya Manian superb CSS Vocabulary article.

CSS2

In CSS2, you can use attr() function to generate content inside :before and :after pseudo-elements.

<style>#attr-fn-demo:after { content: attr(id); background: yellow; }</style>

<p id="attr-fn-demo">The id of this element is: </p>

The id of this element is:

CSS3

The CSS3 implementation takes it to a whole new level. One can pull the value of an element’s attribute, add a unit, and it returns as a string inside a declaration.

It’s perfect for tag clouds, bar graphs, and a myriad of other applications. magine, if you will, using the value from an element’s data-popularity attribute to control its opacity.

<style>
  .tag { opacity: attr( data-popularity ); }
</style>

<div class="tag" data-popularity=".85">Foo</div>
<div class="tag" data-popularity="1.0">Bar</div>
<div class="tag" data-popularity=".7">Baz</div>

Sadly, no browsers support this AWESOME feature at the moment (confirmed with Ms. Manian).

Test fiddle using the example from Oxygen XML

Baller CSS selector, used to the extreme by Lea Verou in her CSS3 overview presentation. :target is like :hover, in that it’s a pseudo-class. Styles are applied when URL hash matches the ID of the selector.

Test fiddle

Speaking of Terminal, the second quickest way to add Terminal aliases to ~/.profile is

mate ~/.profile

Which will open it up in TextMate. The quickest route would be using the nano text editor

nano ~/.profile

But then you got a text editor in your Terminal, which prompts Xhibit to show up

Yo dawg, I herd you like black windows, so I put a text editor in your Terminal so you can develop while you develop.

I’ve previously been using Houdini for toggling hidden file visibility. But now that I have the Terminal perpetually open, might as well make an alias for it.

alias showhidden="defaults write com.apple.finder AppleShowAllFiles TRUE; killall Finder"
alias hidehidden="defaults write com.apple.finder AppleShowAllFiles FALSE; killall Finder"

Mobile Safari, the browser found on iPhones, iPod Touches and the iPad, does not (currently) implement the same label behaviour as other browsers. Clicking on labels doesn’t do anything

— Matthew Pennell

I’m a bit baffled this usability feature is disabled.

Test fiddle

Related links:

• Firebug blog : Firebug Metamorphosis
• Introducing the Web Console
• MDN: Using the Web Console

Very bare bones in Firefox 4 beta 6, and in no-way a complete Firebug replacement, but I appreciate that it’s at least there. Initial irks:

• Without the console open, console.log() still breaks your scripts
• Cmd + Shift + K to open. Would have been nice if it were unified with WebKit’s Cmd + Opt + I.

• WebKit : webkitTransitionEnd
• Firefox : transitionend
• Opera : oTransitionEnd

Tested in this fiddle

Mozilla Hacks:

we dropped the -moz- prefix for -moz-border-radius & -moz-box-shadow

So border-radius is valid in latest WebKit, Opera, Firefox and IE. Nice.

The Math object has a constant for the square root of 2 AND half root 2

Math.SQRT2
// 1.4142135623730951
Math.SQRT1_2
// 0.7071067811865476

via John Schulz

Yar, 3D transform be ahead. Safari only. The examples below also live together in a lovely house in this fiddle.

Safari has support for a perspective transform function. This is pretty convenient for doing a simple 3d transform, like a card flip.

#wkptfn-example1 .alpha {
  background: blue;
  -webkit-transform: perspective(800) rotateY( 0deg);
}

#wkptfn-example1:hover .alpha {
  -webkit-transform: perspective(800) rotateY(-180deg);      
}

#wkptfn-example1 .beta {
  background: red;
  -webkit-transform: perspective(800) rotateY(180deg);
}

#wkptfn-example1:hover .beta {
  -webkit-transform: perspective(800) rotateY( 0deg);
}

Hover for Card Flippin’ Action

The problem with it is that the perspective is only for the one element. If you use the same transform across elements with different position, each element will have its own vanishing point.

#wkptfn-example2 div {
  -webkit-transform: perspective(800) rotateY(45deg);
}

To remedy this, you need to specify a perspective or the parent with -webkit-perspective: and then let the children inherit it with -webkit-transform-style: preserve-3d;

#wkptfn-example3 {
  -webkit-perspective: 800;
}

#wkptfn-example3 div {
  -webkit-transform-style: preserve-3d;
  -webkit-transform: rotateY(45deg);
}