← Back to team overview

launchpad-dev team mailing list archive

Launchpad sprite syntax changed


Dear rocket scientists, reviewers.


I simplified Launchpad's sprite rules. I expect to see fewer mistakes in
Launchpad's anchors that break webkit and textual browsers.

You make links that show just the icon in the anchor using this syntax:
   <a class="sprite edit action-link" href="#>Edit</a>

The "action-icon" CSS class creates a presentation that works in both
textual and graphical browsers. The anchor text is required to show the
icon in webkit. Textual browsers see the text instead of the icon. The
.invisible-link class is gone...the new markup works perfectly with
Launchpad's TestBrowser as well are textual browsers.

Expanders are somewhat awkward. I found an empty icon node. They must
have content to work in webkit. I added an &nbsp;. I also saw an insane
cases where an <a> was the icon node...expanders wrap the icon node in
an anchor...oops. I think we want to revisit the expander rules for
wrapping node to ensure the markup is valid and does not require hacks.

The old markup up:
   <a class="sprite edit" href="#>&nbsp;<span
was often mistyped. The &nbsp; was required to show the icon in webkit,
but it caused extra underlining in firefox. The text was often missing,
preventing textual browsers from knowing what the link does.

Reviewers, you must ensure links that text. We discovered that some
users could not perform essential actions because they could not see or
read the link. For example, the links to make a bug private to prevent
the disclosure of information must work in all browsers.

Outbound Anchors (those with hrefs) must have content...Lp had many
invalid links. Only inbound anchors (those with names) can be empty.
Webkit is the only browser that correctly strips leading and trailing
spaces, then  normalises white-space per the HTML 1-5 specs; it knew
that many Launchpad links had no content to show. Ubuntu server users
could not use some links because there was no text to display in the
textual browser.


Launchpad now has 3 sprite files. Older browsers (those used on LTS
installs) struggled or outright failed to show sprites when the image
file grew too large. We do not want any file to be larger than 10,000px
in height.

The inline-sprites-1.css.in file is filled up. We can add sprites to
inline-sprites-2.css.in. You can add large sprites, those used on block
elements, to block-sprites-1.css.in.

Curtis Hovey

Attachment: signature.asc
Description: OpenPGP digital signature