JeffreyBarke.net

A List Apart's third annual survey:

For the third year in a row, good citizens of the web, we ask that you take a few minutes to tell us about your professional skills, educational background, career prospects, job benefits, and more.

Inspired by Molly Holzschlag at Standards.Next, I created a simple hue reference chart for working with HSLA.

Designing Our Way Through Web Forms

Although forms make the Web go around, they are often ugly due the generic way in which browsers display them, not to mention irritating to our site's visitors when they don't work as expected. In this session, panelists will provide specific details on ways to successfully create compelling forms for your users.

• Christopher Schmitt, Web Design Specialist, Heat Vision
• Eric Ellis, VP Sr Designer, Bank of America
• Kimberly Blessing, Senior Web Development Manager, Comcast Interactive Media

Twitter search for #formsxsw

Read the rest of this entry »

CSS3: What's Now, What's New and What's Not?

This panel explores how major browsers implement CSS3. The focus is on finding effective and efficient methods for developers to unleash their creativity while maintaining cross-browser compatibility. The panel covers current implementations, future plans from the major browser vendors and some discussion of the current progress on the standard itself.

• Molly Holzschlag, Pres, Opera Software
• David Baron, Mozilla
• Hakon Wium Lie, Opera Software
• Sylvain Galineau, Program Mgr, Microsoft

Please note: These notes were typed and published live. I'll clean them up at some point in the future. Audio forthcoming.

Interactive intro by Molly Holzschlag

David Baron from Mozilla. There is no CSS3. Split up, so development can proceed on certain parts.

Selectors
Color

Selectors. Pretty well implemented. Some of the selectors are so. Using classes vs nth-child might be faster.
Color: Partial opacity/transparency depending on how you look at it.
Border-image: One CSS property to handle stretching and tiling.
Columns.
Text-shadow.
Box-shadow.
Border-radius.
Many of these properties are implemented by browser vendors with hyphen browser name prefixes.
Downloadable fonts.
Media queries. @media (min-width). [Nice!]
Transform. iframe with skew applied. Can click links. Pretty impressive.
Mask/clip-path properties. SVG filters in HTML.

Sylvain. Microsoft.

IE and CSS. Bugs, quirks, missing features, hacks.

Prior to implementing CSS3, must fully implement CSS2.1.

IE 7 did not pass CSS 1 or 2.
IE 8 regressed on CSS 1, but advanced on CSS2.1. IE 8 is now close to almost passing all tests.

CSS 3 in IE 8. No new CSS 3 properties:
block-progressions, box-sizing, background-position-x, background-position-7, layout-grid, layout-grid-char

Future:
* Opacity
* backgrounds & borders
* selectors
* web fonts
* media queries
* multi-column

Hakon Wium Lie. Opera.

Thank IE for doing 2.1 fully.

* Backgrounds and borders
* Fonts
* Transitions
* Selectors
* Media queries
* Generated content for paged media

Webfonts have been around since 1998, but problem was font format. Now TrueType and OpenType are pretty dominant. Not disagreeing about syntax, but disagreeing about font format.

Transitions nice—on hover add time-element and browser will interpolate between two states. Beautiful and amazing!

Most wide-spread use of media queries will probably be based on width.. Make it easy to style for mobile and various devices.

Also impressive work for paged media. TOC has auto-pagination and leaders. Page numbers auto-transformed into hyperlinks. Footnotes.

Find Hakon’s CSS book designed in HTML and CSS.

Q: Why separate and competing rendering engines?
A: DB: Competition is good for progress. Danger of single rendering engine is that the Web will stagnate.

Q: Layout system.
A: Code with layout in mind. Which is not correct. Separation vs integration.
(This was a good q/a. Get from audio)

Q: Creation of book via HTML/CSS?
A: HWL: Decided to try it; not sure if could do it. Yes Logic, Australian company. HWL joined board to make sure his books were fixed first. Commercial product. Antenna House in Japan. Currently, no browser can handle it.

Desire to do paginated browser, instead of scrolling page browser.

HWL: Going to post slides to homepage. David Baron’s are already up.

Molly Holzschlag going to tweet slide location: http://twitter.com/mollydotcom

From Yoast and very cool:

Google, Yahoo and Microsoft have just announced a new tag, which we can use to tell the search engines which URL it should have for the current page. This is probably best explained with an example, so here goes.

Suppose you have read my Twitter Analytics post, and you've started tagging all the URLs you spread on Twitter with Google Analytics campaign variables. So at some point, Google enters your site through this URL:

http://yoast.com/twitter-analytics/?utm_source=twitter&utm_medium=twitter
&utm_campaign=twitter

If it did, in "old times," this would mean you'd have a duplicate content issue: the same content indexed under two different URLs. An issue SEOs have been trying to solve on web pages for ages, which sometimes created huge limitations. This is where the new tag comes in. You add this code to the <head> section of your page:

<link rel="canonical" href="http://yoast.com/twitter/analytics/" />

Read the rest of Yoast's post and learn more about canonical URLs at http://yoast.com/canonical-url-links/. Google's official post on canonical URLs is at http://googlewebmastercentral.blogspot.com/2009/02/specify-your-canonical.html.

To make things easy for us, Yoast has already prepared a WordPress Canonical URL plugin , as well as a Magento extension and a Drupal module! Thanks, Joost!

While I appreciate Yoast blogging about this and their work in preparing the plugin, extension and module, one small critique. Technically, this is not a new "tag," rather it is simply a new value for the rel attribute of the existing link tag.

Even though it's cold and dark (and I hate the holidays), one great thing about impending December is a new 24ways, the advent calendar for geeks that serves up a new Web design or development article daily, December first through twenty-fourth.

Finally! An answer!

I first noticed flashing text during an animation on my Mac (I think it only happened in Firefox 2 at the time) when theMechanism launched the Defender Pro website. At the time, I was unable to figure out why this was happening; we killed the effect, and I haven't seen flashing text since.

While porting CSS Sprites2 to Prototype this weekend, I found the answer in Dave Shea's original CSS Sprites2 article:

This is a complicated issue that has to do with sub-pixel rendering common in modern operating systems, and the best fix seems to be to apply a just-slightly-less-than-opaque opacity value to force a particular text rendering mode. If you add this to your CSS, the flashing should clear up at the expense of regular anti-aliased text instead of sub-pixel anti-aliased text:

p { opacity 0.9999; }

Dave talks more about this issue at http://mezzoblue.com/archives/2006/12/12/opacity_bugs/, but it seems that the problem occurs in browsers using the Mac version of Gecko. The flashing happens when the browser shifts between two text-rendering modes: sub-pixel anti-aliasing and standard anti-aliasing.

By using Dave Shea's solution above, one forces the browser to always render text via standard anti-aliasing. This means there's no flashing, since the browser doesn't shift between modes.

According to Michel Fortin, "it is simply impossible to draw sub-pixel anti-aliasing on a transparent background."

His solution:

Here are some general tips to keep sub-pixel anti-aliasing working on web pages: if you specify opacity, also specify an opaque background on the same element or on the child elements containing text, or if you're just playing on the text opacity, use a transparent text color: color: rgba(0,0,0,0.5). Note that these tips only deal with the theoretical limitations of rendering with aRGB, not browser bugs.

Back in August, Dave Shea came up with the CSS Sprites2 technique in A List Apart No. 266. He chose to implement it in jQuery, but added "consider this article an open invitation to port this technique to your library of choice." I intended to immediately port CSS Sprites2 to Prototype and script.aculo.us, but finally got around to it this weekend.

My version of CSS Sprites2 is almost exactly the same as Dave Shea's: it requires the same HTML, the same styling and includes a similar pre-built function used to invoke it. However, my version also includes keyboard support: there's a matching focus, blur, keydown and keyup event handler for each mouse event handler.

Get CSS Sprites2 for Prototype and script.aculo.us.

Slides from my presentation on HTML validation, microformats and jQuery to WebTechNY on 8 October 2008:

Thanks to everyone who attended!

While it's nowhere near close to new, I discovered the <wbr> (word break) tag today. The need for a tag like this occurred on a client's website: the title of one of their publications, which included two relatively long words separated by a slash, was poking outside of the side navigation in IE 6. Since the title looked fine in other browsers, I wanted a way to "suggest" a line break after the slash to IE without forcing a line break on every browser. <br> was out.

Enter the <wbr> tag. <wbr> "marks a place where a line break can take place. It does not necessarily always result in a line break; rather, it says that line breaks are allowed at this place." To use <wbr> in XHTML, use the XML syntax for empty elements: <wbr />.

Not all browsers support <wbr> (including Opera), however IE 5.5–7 and Firefox 2–3 do. Opera compatibility can be achieved via the following CSS rule:

wbr:after { content: "\00200B"; }

QuirksMode.org has a browser compatibility table for <wbr>. While not mentioned there, <wbr> does work in Chrome.

Note to standardistas—<wbr> is not in any of the HTML specifications. This means it will cause validation errors.

References

• "Word division in IE." Jukka "Yucca" Korpela
• QuirksMode.org Peter-Paul Koch