Hue reference chart
23 November 2009 | Posted by Jeffrey Barke | No comments
Inspired by Molly Holzschlag at Standards.Next, I created a simple hue reference chart for working with HSLA.
Notes from the SXSW I CSS3 panel
15 March 2009 | Posted by Jeffrey Barke | 2 comments
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
CSS Sprites2 in Prototype and script.aculo.us
9 November 2008 | Posted by Jeffrey Barke | No comments
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.
