CSS3 Speech Module

CSS3 Speech module is now in last call state (Aug 18 , 2011) . Journey for making accessible web standards have come far from WCAG guidelines , SSML (Speech Synthesis Markup Language ) to CSS Speech

Here is the summary of what CSS Speech module provides.

CSS Speech standard specifies how to present the content in way which can be understood by speech synthesizers. Using CSS Speech module we can specify meta data like voice speed , pause information etc for content . This CSS information is used by User agents while rendering and producing final sound output for the content.

Typical usage for this would be

• Screen readers
• Machine to Human interaction ( e.g incase while you are driving car , car would read content for you online with appropriate pauses , breaks etc or your ebook reader will read the book , exactly the way it is read by humans)

CSS Speech is based on concept of Aural Box Model for content to be rendered in speech form . It is a conterpart for visual box model for visual presentation of content.

See the Visual box model for CSS and Aural Box Model below for similarities

 

Cue : Cue is small piece of sound which you can insert in between.

Properties and Characteristics which are available include

Pause Properties

• pause-before
• pause-after

Rest Properties

• rest-before
• rest-after

Cue Properties

• cue-before
• cue-after

Speaking Properties

• speak
• speak-as

Mixing Properties

• voice-volume
• voice-balance

Voice Characteristics

• voice-family
• voice-rate
• voice-pitch
• voice-range
• voice-stress

The link below provides the complete summary for each of the above properties

http://www.w3.org/TR/css3-speech/#property-index

Browser share in various markets

Browser share worldwide shows some interesting ideas.

Internet Explorer will slowly fade down to market share of 20%

You can develop with latest standards of CSS3 and HTML5 freely

Ultimately browsers will compete with them selves to retain market share , following latest W3C specifications for CSS and HTML

As a Web Designers / Developers we can recommend our users to use latest browsers which can give best browsing experience

 

Here are some of the useful website to check the market share statistics for latest browsers

 

• http://marketshare.hitslink.com/browser-market-share.aspx?spider=1&qprid=0 
• http://gs.statcounter.com 
• http://www.w3counter.com/globalstats.php 
• http://en.wikipedia.org/wiki/Usage_share_of_web_browsers

 

My main point for looking at these websites was something different , i wanted to analyze how various counties fair in terms of riding the latest browsers usage wave. Which country is ahead in using up latest browsers.

Graceful degradation and Progressive Enhancement

Graceful degradation and Progressive enhancement are two different web design strategies

Progressive enhancement

In progressive enhancement you design for bare minimum design standards , generally without any CSS or JavaScript support. In this way webpage will have content that all users can see at least , irrespective of the user agents.

And slowly slowly on the top of baseline design we add on latest standards support for example Latest CSS3 styling.

You can read more about Progressive enhancement at Wikipedia

Graceful degradation

Graceful degradation is very aggressive form of web design in which you are following latest standards and specifications and incase user agent doesn't support them , you don't show latest markup styles. Your webpage just degrades itself to present all what is supported by current user agent.

You can read more about Graceful degradation at Wikipedia

Some of the useful links on the same topic

• The Case for Designing with Progressive Enhancement,” by Todd Parker, Maggie Costello Wachs, Scott Jehl, and Patty Toland (www.peachpit.com/articles/article.aspx?p=1586457)
• “Progressive Enhancement: What It Is, And How To Use It?,” by Sam Dwyer (www.smashingmagazine.com/2009/04/22/progressive-enhancement-what-it-is-and-how-to-use-it)
• “Progressive Enhancement: Paving the Way for Future Web Design,” by Steven Champeon(www.hesketh.com/publications/articles/progressive-enhancement-paving-the-way-for)
• “Graceful degradation versus progressive enhancement,” by Christian Heilman (http://dev.opera.com/articles/view/graceful-degradation-progressive-enhance)

Also please share any other useful link you have for the same.

Browser Support for CSS3

Different browsers use different layout engines to render the HTML / CSS markup to the end user. Layout engine is a software which is used by browsers to read the HTML/CSS markup and produce final output on the user screen. It reads all the HTML and renders it onto browser.

You can also read about List of various layout engines and their comparison of layout engines for support of HTML5 and CSS3 standards at wikipedia.

Identifying which browser supports what CSS3 features can be a daunting task. Ultimately we should design around basic principle that irrespective of final user agent our web application should be usable to the end user. Progressive Enhancement design principle says that , make your web page with minimal markup without CSS so that it looks fine without any Javascript or scripting. Then we slowly improves its look by using advanced CSS and Scripting techniques. Designing With Progressive enhancement is an excellent book to learn more about it.

The following websites are helpful in deciding which of the CSS3 properties you can use safely and are supported by browsers.

HTML5 and CSS3 Browser support

Can i Use us wonderful website which tells about browser support for HTML and CSS3 feature you ask for

http://www.standardista.com/css3

http://www.quirksmode.org/css/contents.html

Layout engines

-moz properties support

http://css-infos.net/properties/firefox.php

-webkit properties support

http://css-infos.net/properties/webkit.php

If you are developing some email application then following website would be useful to see CSS3 and HTML5 support for various email clients

http://www.campaignmonitor.com/css/

If you are developing something for Apple world , iPad etc then following Apple developer guide would be useful

http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Introduction.html

Getting Started with CSS3

CSS3 is next level of CSS2.1 in which lots of new features are being developed.

The interesting thing to be noted for CSS3 is that it is group of various modules which are being developed as part of CSS3 specifications. For example one module deals with how to display tables using CSS and other deals with how to use CSS for displaying images.

The inherent advantage of using modular concept for developing CSS specification is that each module can be developed independently and hence presented in market independently for reviews , comments and usage. The time to market for CSS3 will be reduced by following modular approach than following one big bang change. This gives time to all stake holders from User agents producers to web site owners to adapt to new specifications.

The list of modules present in CSS3 standard and their current status of developed is documented in W3C official CSS3 working group website.

http://www.w3.org/Style/CSS/current-work

The key to read this is as follows

Ab­bre­vi­a­tion and Full name

WD
Working Draft

LC
Last Call

CR
Candidate Recommendation

PR
Proposed Recommendation

REC
Recommendation