Really cool stuff.

* Styling important content links for print. An anchor tag isn't clickable in print media, potentially leaving important citation information out. You can use attr to put it back in.

* Sometimes you find yourself debugging device/browser where you don't have a powerful inspector/debugger. Being able to make attribute data visible can help.

No support in Opera, requires -webkit prefix in prefix-encumbered browsers ;-)

...is a great alternative to the calc example - ie Set your width to 100% and your padding to 100px.

Edit: code is a little mangled, just Google it.

As an aside, is Aptiverse in YC? If not, the logo could potentially be a case of mild trademark infringement.

That would be a bit of a stretch to try and prove in court.

.

The Aptiverse logo doesn't have a white outline

Actually, the white outline is part of the HN design, not the YC logo; if you go to the main page (or look at the favicon) you'll see that it appears without the outline.

.

and is a different font, not to mention a completely different letter. There is certainly no confusion for me.

I'm not saying Aptiverse would 100% lose a hypothetical lawsuit here, but the branding is absolutely confusingly similar[1] to at least a sizeable subset of reasonable people (myself included, at first glance).

1. Identical shape (a box with sharp edges)

2. Identical shade of orange used as background (or close enough that a human eye can't make a clear distinction)

3. Identical text colour

4. Identical/similar letter size / size ratios

5. tl;dr: Same identifiable visually distinct design of one letter centred within a slightly larger box, with the exact same colour scheme and only minor cosmetic differences

6. Not only are the two companies in the same industry (software/tech startups), but Aptiverse actively participates in a community owned and operated by Y Combinator, further increasing the likelihood of perception of the two being affiliated

.

Again, I don't mean to suggest that this is a cut-and-dry case of trademark infringement, or that any action should necessarily be taken on the part of either YC or Aptiverse regarding the matter, but to seriously suggest that taking the YC logo then changing the letter and making it italic with a slightly different typeface removes all reasonable possibility of confusion or ambiguity is willfully oblivious.

---

1: http://en.wikipedia.org/wiki/Confusing_similarity

Are you trying to differentiate between a registered and unregistered trademark? From what I understand, to get an unregistered trademark, you must add "TM" to your mark. That type of mark is mainly valid in the region/state that you're doing business out of.

To get a registered trademark circle r (R), you must file the right paperwork and pay a fee with the federal gov.

In both cases, to maintain your trademark, you must clearly show that it is your trademark with either a TM or a circle R (R). There are other requirements but these are the two I was looking for when stating that there is no YC trademark. If they do have a trademark on the Y with orange background, it's being maintained poorly.

Looks like calc is supported in Chrome 19+, Firefox 16+, IE9+, Safari 6+.

1: you can't combine attr() and calc() - calc(attr(data-count) + 10) <-- nope

2: how would you count down from an arbitrary number of child elements? you need to set the total via counter-reset... and, no you can't do content-reset: foo attr(data-count)

always these problems with width and 100% - i def. give it a try in the next project!!

    .child {
        position: absolute;
        left: 100px;
        width: calc(90% - 100px);
        background-color: #ff8;
        text-align: center;
    }

    .child {
        position: absolute;
        left: 100px;
        width: calc(90% - attr(left px));
        background-color: #ff8;
        text-align: center;
    }

[0] https://developer.mozilla.org/en-US/docs/CSS/attr