Archive for the 'CSS3' Category

Notes on draft CSS “alt” property

A while ago, there was discussion in CSS Working Group about an alt property to be added to CSS. Its purpose is to let assistive technology know the meaning of unicode characters inserted into a visual rendering of a document with CSS generated content. The problem is described by James Craig, Apple’s nice accessibility chappie.

It’s been shipping as -webkit-alt for a year now, and has just been added to the draft CSS Pseudo-Elements Module Level 4 spec. Let’s say you’re using a star glyph to show something is “new”, by generating CSS content using a class of .new as your selector:

.new::before { 
  content: url(./img/star.png);
  alt: "New!"; 
}

The alt gives information to assistive technology.

The alt string can be blank. Assume you’re generating “►” to show that a widget is expandable. Because you’re a lovely human being and a responsible developer, you’re using aria-expanded="false" in the HTML. Therefore, you’d use empty alt in the CSS that generates the glyph to prevent assistive technology “helpfully” reading out “Black right-pointing pointer” after the AT has relayed the ARIA information to the user:

.expandable::before {
  content: "\25BA"; /* a.k.a. ► */
  alt: ""; 
  /* aria-expanded="false" already in DOM, 
     so this pseudo-element is decorative */
}

Update 17:05 GMT fantasai of the CSS WG has mailed the CSS Working Group protesting against the syntax above. I don’t have any horse in the syntax race; my aim with this post is to show that we need some mechanism to give alternate content to assistive technology given that we allow non-textual content to be generated via CSS.

When I tweeted about this earlier, a few people objected to the concept because it adds content to CSS. But that ship has long sailed, with the content property that people have been using for ages. If you say “adding non-decorative content to a page is a misuse of CSS that merits the author 100,000 years in purgatory with Tim Berners-Mephistopholee pouring hot Ovaltine over their dingle-dangles whenever they try to sleep”, I will vehemently nod my agreement.

But sometimes, for organisational reasons, or because you inherited code, or you’re refactoring code from before you saw the light, you’re working with CSS that generates icons. This new property at least allows an author to make that content more accessible.

Years ago, I joined a web team a week after their brand new website had been delivered, months late and squillions over budget, by Big London Agency PLC. The site was a vile splodge of nested layout table cells and spacer GIFs with “click here” links pointing to PDFs. Of course, I could have instantly resigned my job and let the bank repossess my house.

Instead, I gently pointed out to any who would listen the inadequacies of the site and made plans about how it could be refactored. But while biding my time, I was also making small tweaks here and there to make it better and incrementally more accessible; removing duplicate link text from title attributes, changing “click here”s, putting blank alt text on spacer GIFs in the small parts of the template I controlled.

This was before the days of ARIA but I would have jumped at the chance of adding role="button" to the horrible mess of nested <div>s that the CMS spat out. Yes, it’s much better to spend a fortune getting the external CMS provider in to change the templates, the retest every single form on every single browser – but that simply wasn’t possible.

Two years later, when the senior manager who commissioned the terrible site left and we could jettison it, we did. And then we did it right. But for those who needed the content and were unable to wait nearly three years (that is, everyone), I’m glad I applied sticking plasters and polished turds.

It’s often said that if a job’s worth doing, it’s worth doing well. But it’s also wise to remember: sometimes, if a job’s worth doing, it’s worth doing badly than not at all. If you must have meaningful content generated by CSS, at least now you can make it accessible.

A quick tip for understanding CSS Flexbox

Quite a few people have difficulty understanding the CSS Flexible Box Model, especially the flex-shrink property. Even brainboxes like Remington Sharp find it tricky:

As a quick tip, I find a helpful way of coming to grips with it is by likening Flexbox to String Theory. Thus, flex-basis is analogous to a Calabi–Yau manifold or similar higher-dimensional analogues of K3 surfaces, and think of flex-shrink as behaving like the 7 compactified dimensions propagating from one point to another by summing probability amplitudes.

Hope this helps.

Reading List

A bumper reading list for those long holidays (and because I’ve been away conferencing for a few weeks and need to spurt out my backlog).

HTML5, CSS and NEWT

Industry

Conference videos

Misc

  • Cry-Baby of the Year – a list of ten previous winners of Cry-Baby of the Week who have been shortlisted by me as nominees for Cry-Baby of the Year
  • Dalkey Archive Press seeks unpaid interns -” Any of the following will be grounds for immediate dismissal during the probationary period: coming in late or leaving early without prior permission; being unavailable at night or on the weekends; failing to meet any goals; giving unsolicited advice about how to run things; taking personal phone calls during work hours; gossiping; misusing company property, including surfing the internet while at work; submission of poorly written materials; creating an atmosphere of complaint or argument; failing to respond to emails in a timely way; not showing an interest in other aspects of publishing beyond editorial; making repeated mistakes; violating company policies. DO NOT APPLY if you have a work history containing any of the above.”

And finally, here’s Kim Wilde, pissed on a train after the Magic FM Xmas party, singing “Kids in America” and “Rocking Around the Christmas Tree”.

Thoughts on Adobe Edge

Last week, I dragged my snot-filled carcass down to London for a day-long presentation by Adobe called Create The Web.

I’m an occasional user of Adobe products: I used Dreamweaver in my last job (and was a beta tester for a previous version), and use Photoshop from time-to-time, although use about 2% of its capabilities. I also have some chums at Adobe, but they’re weedier than me so didn’t try to threaten me to be nice to them.

In passing, it’s interesting to note that while Twitter has lots of griping about Adobe products, they managed to get about 800 people into a Leicester Square cinema for a full-day product pitch. That suggests Adobe retains significant mindshare.

I was there because I wanted to see their new Edge range, as the tools that authors use to make websites directly affect the quality of the code of those sites, which directly affects the interoperability of the Web. I was therefore watching the day from two occasionally opposing perspectives: firstly, as the representative of a browser vendor that is sometimes disadvantaged by developers not using the correct prefixes etc, but also as a web author who, all other things being equal, prefers to use IDEs than type in code.

The decline of Flash has not diminished the appetite of site owners and developers for eye-candy and movie-like effects. That’s why Adobe is pushing for lots of new effects in CSS: cool stuff like CSS Filters and CSS Compositing and Blending and also anachronistic “we wish the Web were print” specs like CSS Regions.

Regardless of your opinions on Flash as a technology or plug-in, there’s no denying that the Flash Pro development IDE beats coding canvas in raw JavaScript. It’s also true (according to my good chum and co-author, Remington Sharp) that those developers just coming to canvas and motion graphics now are bumping up against problems that the Flash developers solved decade ago.

Therefore, Adobe has made a very smart move by making the new tools for animating stuff feel familiar to Flash developers. This was explicitly called out: Flash devs, your skills are not dead; the technology might be, but your experience and creativity are still in demand. This is true, and a shrewd business strategy.

(A word about product nomenclature and confusion: the DHTML tool that was called Adobe Edge is now called “Edge Animate”. “Edge” now refers to the whole suite of new Adobe tools. Animate seems to produce DHTML, flying <div>s around with CSS and JavaScript. Apparently, the Flash IDE can produce “HTML5″ output, but that’s <canvas>. If your stuff involves text, use Animate so the text remains text and is therefore accessible.)

I haven’t had a chance to download my copy of Edge Animate yet. Lee Brimelow gave an excellent and entertaining developer-focussed presentation building up an animation and there were a few nasties in the code produced.

For example, it seemed that, by default, the code is simply empty <div>s with everything else injected by JavaScript. This means that someone without JS sees nothing at all. The “static HTML” export (which ought to be the default, in my opinion) at least puts the images in the markup, so a browser without JS sees *something*, albeit it unanimated. That code, however, was invalid: it produced <img>…</img>, and there is no closing </img> tag in HTML5 (or any previus incarnation of HTML, for that matter).

Encouragingly, Ryan from Adobe contacted me after I tweeted about this, asking for further feedback which I gave.

Other products that interested me were PhoneGap Build which allows you to upload a PhoneGap project and receive all the different packages through The Cloud™. I’d definitely use this. Who wants to dick around with all the different SDKs?

Edge Code is built on top of an open-source project started by Adobe called Brackets. Some hard-core developers (eg, those who wouldn’t pee on Dreamweaver if it were on fire) I spoke to seemed impressed. It seems they’re very serious about getting external developers involved; pull requests are reviewed daily; Agile sprints mean a quick iteration time, so your contributed code doesn’t languish interminably, and priority is given to external contributions.

The last product that interested me is Reflow, which isn’t out yet. It’s a drag-and-drop visual editor, which allows you to shrink the “stage” and, when your design starts to fall apart, set a breakpoint (which writes a Media Query) after which you re-design the page for the new page width. I haven’t seen the code that’s produced, but it feels to me an intuitive way for a designer to work.

Overall, it was exciting to see a company working hard to come up with a new strategy. The jury is out on the code it produces; Adobe is very heavily investing in WebKit and one of the presenters’ saying “this also works in old browsers like IE9 and Firefox” makes me uneasy. But it doesn’t have to be bad: Microsoft’s Web Essentials Visual Studio extension does an excellent job of adding all the vendor prefixes, even though Microsoft are heavily investing in IE.

The success of the product will ultimately depend on the price. And I’m curious to see how they’ll integrate with Dreamweaver, which is pricey and currently lacks many of the Edge features.

(Note: this is a personal post and doesn’t reflect the opinion of my employer).

Give Paul Robert Lloyd’s Thoughts on Adobe Edge a read, which prompted me to write this up. Fellow HTML5 Doctor Ian Devlin says PhoneGap Build is Awesome.

Reading list

CSS

Standards

Industry

Super-NSFW Corner

  • Fifty Shades Generator – Traditionally, print and web designers had to make use of placeholder text known as Lorem Ipsum. Now, creatives can excite clients in more ways than one with Fifty Shades of Grey-inspired filler text.”

Reading List

NEWT

Sublime Text 2

I haven’t actually enjoyed using an editor since VAX EDT in my old programming days, but Sublime Text 2 is an excellent program that not only doesn’t get in the way but has lots of utilities and features.

Industry

Dell Extends Ubuntu Retail into India – Unreported, of course, because it’s about FOREIGNERS, but Dell have been featuring Ubuntu on a wide range of Dell computers in China, starting at 220 stores and expanding to 350. They’re also expanding in to 850 stores across India.

misc

Reading List

Web Standards, innit?

Industry

Misc

  • Dear Einstein, do scientists pray? A 1936 letter from a Sunday school pupil to Einstein, and his reply.
  • The Beatles Never Existed – There was never just one group of 4 individuals calling themselves “The Beatles”. There were multiples of each character performing as “John”, “Paul”, “George” and “Ringo”. They all looked identical to each other except for a few features here and there.
  • Fuck Yeah Hotel Hallway – A tribute to the artistry of hotel carpet patterns. Scroll up and down fast and the pictures do weird things to your eyes.

Holiday

That’s it from me for a few weeks. I’m off to take my mum, uncle, cousin and powdered Grandmother to Cambodia (my Nan had always wanted to visit Angkor Wat so we’re scattering her ashes there). Kisses!

Reading List

Web Standards

Web Industry

Misc

Heartwarming corner

“Raising an Olympian” – a 3 minute video from Kavita Raut’s rural Indian mum. Even though it’s an ad and I’m a cynical old bastard I found it quite touching.

Reading List

Apps: Web vs Native – swinging towards Web?

Last week I linked to a piece about Financial Times turning its iOS app off, to concentrate on the Web instead.

Technology Review wrote of their experience “The future of media on mobile devices isn’t with applications but with the Web.” in Why Publishers Don’t Like Apps.”Like almost all publishers, I was badly disappointed. What went wrong? Everything … We sold 353 subscriptions through the iPad. We wasted $124,000 on outsourced software development. We fought amongst ourselves, and people left the company. There was untold expense of spirit. I hated every moment of our experiment with apps, because it tried to impose something closed, old, and printlike on something open, new, and digital.”

Also How NSFW Corp Dodged The Newsstand Bullet And Lucked Into HTML5″ “when Not Safe For Work Corporation finally launched a few hours ago, there was no Newsstand edition, and no Kindle store edition. Instead, it’s HTML5 all the way.”

Mobilism mobile browser panel with Jeremy Keith and reps of RIM, Google, Nokia and Opera on

Standardsy stuff

  • Lea Verou on Text masking — The standards way. I have a lot of sympathy with the view expressed by Matt Wilcox – SVG is much harder to write than a line of CSS (and I feel a bit ewww at mixing presentational SVG with my HTML). But at least this works everywhere, which is Lea’s point.
  • Jake Archibald’s funny and finely-researched article Application Cache is a Douchebag is vital for those thinking of offlinerifying a site, the and Fixing Application Cache Community Group want to, er, fix the AppCache spec.
  • Opera’s representative on the CSS Working Group, Florian Rivoal, has a proposal to fix the vendor prefixing system:

    When a browser vendor implements a new css feature, it should support it, from day 1, both prefixed and unprefixed, the two being aliased. If a style sheet contains both prefixed and unprefixed, the last one wins, according to the cascade.

    Authors should write their style sheets using the unprefixed property, and only add a prefixed version of the property (below the unprefixed one) if they discover a bug or inconsistency that they need to work around in a particular browser.

    If a large amount of content accumulates using the a particular vendor prefix to work around an issue with the early implementation in that browser, the vendor could decide to freeze the behavior of the prefixed property while continuing to improve the unprefixed one.

  • A proposal from Edward O’Connor of Apple for <img srcset> for responsive bitmapped content images
  • How browser engines work – a video presentation by Anthony Ricaud
  • Research shows adhering to WCAG doesn’t solve blind users’ problems

Legal stuff

Misc

Reading List

Simplicity and simplification

Vendor Prefixes

Please add -o- prefixes to your CSS keyframe animations, as we at Opera have released a build containing prefixed support (and also HTML5 Drag and Drop and other goodies) so it’ll be in the wild soon.

Note too that CSS Gradients is soon going to be standardised and so will drop prefixes. This doesn’t mean you should take out your prefixed rules, but rather add non-prefixed rules eg linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient.

If you’re the owner of one of those very useful gradient generators that I use all the time, could you please add non-prefixed rules to the output, and retire any creaky old pre-standardised webkit-only output?

Misc