<p>The <a href="http://www.w3.org/2011/webappsec/">Web Application Security Working Group</a> has published a Working Draft of <a href="http://www.w3.org/TR/2013/WD-UISecurity-20130523/">User Interface Security Directives for Content Security Policy</a>. This document defines directives for the Content Security Policy mechanism to declare a set of input protections for a web resource's user interface, defines a non-normative set of heuristics for Web user agents to implement these input protections, and a reporting mechanism for when they are triggered. Learn more about the <a href="http://www.w3.org/Security/">Security Activity</a>.</p> </content>
W3C
User Interface Security Directives for Content Security Policy Draft Published
Web Intents Note Published
<p>The <a href="http://www.w3.org/2009/dap/">Device APIs Working Group</a> and the <a href="http://www.w3.org/2008/webapps/">Web Applications (WebApps) Working Group</a> have published Working Group Note of <a href="http://www.w3.org/TR/2013/NOTE-web-intents-20130523/">Web Intents</a>. This informative specification defines a service discovery and light-weight RPC mechanism for web apps called Web Intents. This document defines DOM interfaces and markup used by client and service pages to create, receive, and reply to Web Intents messages, and the procedures the User Agent carries out to facilitate that process. Learn more about the <a href="http://www.w3.org/2007/uwa/">Ubiquitous Web Applications Activity</a>.</p> </content>
Last Call: Vibration API
<p>The <a href="http://www.w3.org/2009/dap/">Device APIs Working Group</a> has published a Last Call Working Draft of <a href="http://www.w3.org/TR/2013/WD-vibration-20130523/">Vibration API</a>. This specification defines an API that provides access to the vibration mechanism of the hosting device. Vibration is a form of tactile feedback. Comments are welcome through 13 June. Learn more about the <a href="http://www.w3.org/2007/uwa/">Ubiquitous Web Applications Activity</a>.</p> </content>
User Agent Accessibility Guidelines (UAAG) 2.0 and Implementing UAAG 2.0 Working Drafts
<p>The User Agent Accessibility Guidelines Working Group (<a href="http://www.w3.org/WAI/UA/">UAWG</a>) today published updated Working Drafts of <a href="http://www.w3.org/TR/UAAG20/">User Agent Accessibility Guidelines (UAAG) 2.0</a> and <a href="http://www.w3.org/TR/Implementing-UAAG20/">Implementing UAAG 2.0</a>, which define how browsers, media players, and other "user agents" should support accessibility for people with disabilities and work with assistive technologies. These drafts have new examples of how UAAG applies in the mobile environment, an updated conformance section, and new definitions of level A, AA, and AAA. Learn more in the <a href="http://lists.w3.org/Archives/Public/w3c-wai-ig/2013AprJun/0235.html">call for review e-mail</a> and read about the <a href="http://www.w3.org/WAI/">Web Accessibility Initiative (WAI)</a>.</p> </content>
RDF Validation Workshop - Practical Assurances for Quality RDF Data
<p>W3C announced today a <a href="https://www.w3.org/2012/12/rdf-val/">RDF Validation Workshop - Practical Assurances for Quality RDF Data</a>, 10-11 September 2013, in Cambridge, USA. The Semantic Web has demonstrated considerable value for collaborative contributions to data. Adoption in many mission-critical environments requires data to conform to specified patterns. Validation in a banking context shares many requirements with quality assurance of linked clinical data. Systems like Linked Open Data, which don't have formal interface specifications, share these validation needs. Most data representation languages used in conventional settings offer some sort of input validation, ranging from parsing grammars for domain-specific languages to XML Schema or RelaxNG for XML structures. While the distributed nature of RDF affects the notions of "validity", tool chains need to be established to ensure data integrity. The goal of this workshop is to discuss use cases for data validation on the Semantic Web with development of technologies to enable those use cases. W3C membership is not required to participate. The event is open to all. All participants are required to submit a position paper by 30 June 2013.</p> </content>
Updated Candidate Recommendation of XPath and XQuery Functions and Operators 3.0
<p>The <a href="http://www.w3.org/XML/Query/">XML Query Working Group</a> and the <a href="http://www.w3.org/Style/XSL/">XSLT Working Group</a> have published a new version of the Candidate Recommendation of <a href="http://www.w3.org/TR/2013/CR-xpath-functions-30-20130521/">XPath and XQuery Functions and Operators 3.0</a>. The new version reflects changes and clarifications that have been made during the CR period, primarily as a result of feedback from implementors outside the two Working Groups. The document describes various functions and operators that work on XML Schema-compatible data types for use in XPath, XSLT, XQuery, XQueryX, SPARQL and other languages. Learn more about the <a href="http://www.w3.org/XML/">Extensible Markup Language (XML) Activity</a>.</p> </content>
Last Call: Internationalization Tag Set (ITS) Version 2.0
<p>The <a href="http://www.w3.org/International/multilingualweb/lt/">MultilingualWeb-LT Working Group</a> has published a Last Call Working Draft of <a href="http://www.w3.org/TR/2013/WD-its20-20130521/">Internationalization Tag Set (ITS) Version 2.0</a>. The Internationalization Tag Set (ITS) 2.0 enhances the foundation to integrate automated processing of human language into core Web technologies. ITS 2.0 provides metadata to foster the adoption of the multilingual Web. The draft reflects all <a href="http://www.w3.org/International/multilingualweb/lt/drafts/its20/disposition-of-comments-1st-last-call.html">changes since the first last call publication</a>. Comments are welcome through 11 June. Learn more about the <a href="http://www.w3.org/International/">Internationalization Activity</a>.</p> </content>
W3C Workshop on Social Standards: The Future of Business
<p>W3C announced today a <a href="http://www.w3.org/2013/socialweb/">Workshop on Social Standards: The Future of Business</a>, 7-8 August 2013, in San Francisco, USA. The event is hosted by AppFusions, sponsored by IBM, and jointly organized with the OpenSocial Foundation. The goal of this workshop is to bring together social business experts and social technology experts to discuss the use-cases that existing specifications and standards don't adequately address, and understand where new standards are needed. This Workshop is open in particular to social business leaders and strategists, federated and decentralized social Web technologists, security experts, and developers. W3C membership is not required to participate. The event is open to all. All participants are required to submit a position paper by 1 July 2013.</p> </content>
W3C Workshop Report on the MultilingualWeb workshop in Rome
<p>A <a href="http://multilingualweb.eu/documents/rome-workshop/rome-workshop-report">report summarizing the MultilingualWeb workshop in Rome</a> is now available from the MultilingualWeb site. It contains a summary of each session with links to presentation slides and minutes taken during the workshop in Rome. The workshop was a huge success, with approximately 150 participants, focus sessions on topics like Internationalized Domain Names, <a href="http://www.multilingualweb.eu/documents/rome-workshop/rome-lod">Best Practices for Multilingual Linked Open Data (BP-MLOD)</a> and an <a href="http://www.multilingualweb.eu/rome-showcase">implementation showcase</a> of the upcoming <a href="http://www.w3.org/TR/its20/">ITS 2.0</a> specification. The Workshop was hosted by <a href="http://www.fao.org/">FAO</a>, sponsored by the EU-funded <a href="http://qt21.eu/">QTLaunchPad</a> project and by <a href="http://www.verisign.com/">Verisign</a>. A new workshop in the MultilingualWeb series is planned for 2014. Learn more about the <a href="http://www.w3.org/International/">Internationalization Activity</a>.</p> </content>
Last Call: JSON-LD 1.0 Processing Algorithms and API
<p>The <a href="http://www.w3.org/2011/rdf-wg/">RDF Working Group</a> has published a Last Call Working Draft of <a href="http://www.w3.org/TR/2013/WD-json-ld-api-20130516/">JSON-LD 1.0 Processing Algorithms and API</a>. This specification defines an Application Programming Interface (API) and a set of algorithms for programmatic transformations of JSON-LD documents. Restructuring data according the defined transformations often dramatically simplifies its usage. Comments are welcome through 06 June. Learn more about the <a href="http://www.w3.org/2001/sw/">Semantic Web Activity</a>.</p> </content>
Last Call: Indexed Database API
<p>The <a href="http://www.w3.org/2008/webapps/">Web Applications Working Group</a> has published a Last Call Working Draft of <a href="http://www.w3.org/TR/2013/WD-IndexedDB-20130516/">Indexed Database API</a>. This document defines APIs for a database of records holding simple values and hierarchical objects. Each record consists of a key and some value. Moreover, the database maintains indexes over records it stores. An application developer directly uses an API to locate records either by their key or by using an index. A query language can be layered on this API. An indexed database can be implemented using a persistent B-tree data structure. Comments are welcome through 07 June. Learn more about the <a href="http://www.w3.org/2006/rwc/">Rich Web Client Activity</a>.</p> </content>
Two Drafts Published by the System Applications Working Group
<p>The <a href="http://www.w3.org/2012/sysapps/">System Applications Working Group</a> has published two Working Drafts today:</p> <ul class="show_items"> <li><a href="http://www.w3.org/TR/2013/WD-app-uri-20130516/">The app: URI scheme</a>. This specification defines the app: URI scheme and rules for dereferencing an app: URI, which can be used to address resources inside a package (e.g., a packaged application). The dereferencing model relies on HTTP semantics to return resources in a manner akin to a HTTP GET request. Doing so allows this URI scheme to be used with other technologies that rely on HTTP responses to function as intended, such as XHR.</li> <li><a href="http://www.w3.org/TR/2013/WD-messaging-20130516/">Messaging API</a>. This specification defines a System Level API which offers a simple interface to get access to mobile messaging services. A typical use case of the Messaging API is the implementation of a messaging client application that allows the user to send SMS and MMS messages as well as to access and manage the received SMS and MMS messages.</li> </ul> <p>Learn more about the <a href="http://www.w3.org/2007/uwa/">Ubiquitous Web Applications Activity</a>.</p> </content>
Media Capture and Streams Draft Published
<p>The <a href="http://www.w3.org/2011/04/webrtc/">Web Real-Time Communication Working Group </a> and the <a href="http://www.w3.org/2009/dap">Device APIs Working Group</a> have published a Working Draft of <a href="http://www.w3.org/TR/2013/WD-mediacapture-streams-20130516/">Media Capture and Streams</a>. This document defines a set of JavaScript APIs that allow local media, including audio and video, to be requested from a platform. Learn more about the <a href="http://www.w3.org/2007/uwa/">Ubiquitous Web Applications Activity</a>.</p> </content>
User Modeling for Accessibility - Online Symposium - Call for Papers
<p>The <a href="http://www.w3.org/WAI/RD">Research and Development Working Group (RDWG)</a> will hold an online symposium to explore user modeling for accessibility, an approach for generating and adapting user interfaces to address particular user needs and preferences. The <a href="http://www.w3.org/WAI/RD/2013/user-modeling/cfp.html">Call for Papers</a> is open until 6 June 2013. Learn more about the <a href="http://www.w3.org/WAI/RD/2013/user-modeling/">User Modeling for Accessibility Symposium</a> to be held on 15 July 2013, and the Web Accessibility Initiative (<a href="http://www.w3.org/WAI/">WAI</a>).</p> </content>
How Can W3C Improve Its Web Site? Let Us Know!
<p>The <a href="http://www.w3.org/wiki/Headlights2013/SiteRedesign">Site Redesign Task Force</a> invites the community to take a short <strong><a href="https://www.surveymonkey.com/s/w3c_redesign">site redesign survey</a></strong>. As discussed in the A List Apart Column "<a href="http://alistapart.com/column/w3c-is-getting-some-work-done">W3C is Getting Some Work Done</a>" W3C is developing a plan to refresh its Web presence for a variety of audiences. We appreciate your input on what you value from the site and what you would like to see us do better. We will be collecting survey responses until 11:59pm Boston time on 29 May 2013.</p> </content>
QuirksMode
Does a full day of CSS nerdery appeal to you?
On 14th of June we’re organising CSS Day, a one-day conference with eight top-notch CSS speakers about eight modules. It promises to be a nerdy CSS day with plenty of code examples, odd problems, compatibility issues, and subtle tricks.
The line-up is pretty good, if we do say so ourselves. Eric Meyer, Bert Bos, Stephen Hay, Divya Manian, Tab Atkins, Daniel Glazman, Peter Gasston, and Lea Verou.
Tickets are still available (and contrary to Mobilism, sales are proceeding according to plan). And it’s just €250. Pre-conference workshops (Eric Meyer on CSS, Peter Gasston on responsive design) are €300.
We’ll likely get a lot of answers to advanced CSS questions. Our personal favourite is “Can Lea Verou really talk about border-radius for 45 minutes?” It’s a puzzler, but she assured us she can, and we chose to believe her.
If you want to see for yourself, join us on 14th of June in Amsterdam.
Microsoft - IEBlog
Web Performance APIs Rapidly Become W3C Recommendations
The W3C Web Performance Working Group recently published three specifications as W3C Recommendations with full implementations from all major browser vendors, advancing developers' ability to accurately measure the performance of Web applications and make the Web faster. Over the last three years, companies including Microsoft, Google, Mozilla, Intel, Facebook, and others have been working towards standardizing the Navigation Timing, High Resolution Time, and Page Visibility interfaces in the Working Group. Rapid adoption of these recommendations demonstrates what's possible when the industry and community come together through the W3C.
To make the Web faster, developers need the ability to accurately measure the performance characteristics of Web applications and the ability to effectively use the underlying hardware to improve the performance of their applications. To solve these problems, the Web Performance Working Group worked on 15 different specifications that address those issues. The table below shows the maturity level of all the specifications currently edited by the Working Group.
| Specification | Editor's Draft | First Public Working Draft | Last Call | Candidate Rec | Proposed Rec | Rec |
|---|---|---|---|---|---|---|
| Navigation Timing | Sept 2010 | Oct 2010 | Jan 2011 | Mar 2011 | July 2012 | Dec 2012 |
| Resource Timing | Sept 2010 | May 2011 | Aug 2011 | May 2012 | ||
| User Timing | Oct 2010 | Aug 2011 | Sept 2011 | July 2012 | ||
| Performance Timeline | July 2011 | Aug 2011 | Sept 2011 | July 2012 | ||
| High Resolution Time | Feb 2012 | Mar 2012 | Mar 2012 | May 2012 | Oct 2012 | Dec 2012 |
| Page Visibility | Apr 2011 | June 2011 | July 2011 | July 2012 | Feb 2013 | May 2013 |
| Display Paint Notifications | May 2011 | June 2011 | Feb 2012 | |||
| Navigation Timing L2 (NEW) | Jan 2013 | Jan 2013 | ||||
| Efficient Script Yielding | June 2011 | |||||
| High Resolution Time L2 (NEW) | Apr 2013 | |||||
| Beacon (NEW) | Mar 2013 | |||||
| Resource Priorities (NEW) | Apr 2013 | |||||
| Navigation Error Logging (NEW) | Apr 2013 | |||||
| Resource Error Logging (NEW) | Apr 2013 | |||||
| Prerender (NEW) |
The Navigation Timing, Resource Timing, User Timing, and Performance Timeline specifications help developers accurately measure the timing of the navigation of the document, fetching of resources on the page, and developer script execution. Prior to these APIs, this data wasn't easily obtainable. Navigation Timing was published as a W3C Recommendation, and all major browser vendors support it. The other three interfaces are currently at the Candidate Recommendation stage awaiting two full implementations from browser vendors. IE10 is currently the only browser that implements all of these interfaces, however, other vendors are working on implementations.
To ensure these performance metrics are measured in the most accurate way possible, the High Resolution Time specification allows developers to measure operations with sub-millisecond accuracy. This interface not only benefits accurate measurements of performance metrics, but also allows better frame rate calculations and synchronization of animations or audio cues. This interface has been published as a W3C Recommendation, with all major browser vendors implementing the performance.now() method defined in the specification.
The Page Visibility API allows for programmatically determining the current visibility state of the page. Developers can use this data to make better CPU- and power-efficiency decisions, e.g., throttling down activity when the page is in the background tab. This specification has also been published as a W3C Recommendation, with all major browser vendors implementing it.
The Timing Control for Script-Based Animations, and Efficient Script Yielding specifications help developers write more CPU- and power-efficient Web applications. The requestAnimationFrame API, from the Timing Control for Script-Based Animations specification, allows for creating more efficient JavaScript animations. All browser vendors fully support this interface, with the Working Group actively working on publishing this specification as a Candidate Recommendation. The setImmediate API, from the Efficient Script Yielding specification, allows developers to efficiently yield control flow to the user agent and receive an immediate callback, efficiently leveraging the CPU. IE10 is the first browser to implement this interface.
This year the Working Group also started to look at new ideas, with editor's drafts of those ideas currently being discussed in the Working Group. The Beacon API is intended to help scripts asynchronously transfer data to a Web server without blocking the unload event, which can negatively impact the perceived performance of the next navigation. The Resource Priorities API defines a means for Web developers to give the browser hints on the download priority of resources to help improve the page load time. As a corollary to the Timing specs, the Navigation Error Logging and Resource Error Logging specifications help developers understand the errors and availability of their applications. The Navigation Timing Level L2 specification adds High Resolution Time and Performance Timeline support to Navigation Timing, and High Resolution Time L2 specification adds Web Worker support. These are just some of the drafts the Working Group is currently defining, with more specification drafts on Prerender and other diagnostics areas forthcoming.
The W3C Web Performance Working Group is a great example of how quickly new ideas can become interoperable standards that developers can depend on in modern HTML5-enabled browsers. Together with industry and community leaders who participate in the Working Group, we hope to continue to make rapid progress on interoperable standards that will help developers make the Web faster.
Thanks,
Jatinder Mann
Internet Explorer Program Manager
Microsoft - IEBlog
IE Dev Center: Finding the resources you need, quickly
Last week we launched a remodeled Internet Explorer Developer Center (msdn.com/ie) to make it easier for developers to find the comprehensive documentation quickly. Based on your feedback, we've adjusted our site structure as part of a larger Windows Dev Center redesign in order to:
- Make it easier to find developer topics across versions of IE
- Find more comprehensive API documentation faster
- Learn best practices from developer guides, tutorials, and sample code
We organized the new IE Dev Center into three main areas:
Here, you can download IE, learn more about F12 developer tools, and access our Developer Guides and Compatibility Cookbooks to learn about what's new and changed in the latest versions of IE.
Find inspiring ideas, tips on updating to Web standards, details on the browsing experiences of IE10 on Windows 8, useful info about going plug-in free, building adaptive and touch-ready sites, and integrating your site with Windows.
Access portal pages for Web platform features, our API reference, samples gallery, and community forums.
The Develop section represents the heart of the IE library content. To help you find the content you need quickly, we reorganized our most highly-trafficked pages to bring together all the relevant resources on the same topic.

With the new organization of the IE Developer Center, you don't have to know which version of IE introduced or changed a feature in order to find all of our information about it. Instead, you can conveniently find our Dev Guide topics through an alphabetical list of the modern Web platform features supported by IE, or you can browse them thematically by area. Of course, we will continue to publish these same topics within the particular IE Dev Guide versions in which they were introduced.

There are more improvements underway, but hopefully you'll find the new IE Developer Center immediately more useful and usable. We'll continue to listen to your feedback and look for ways to make our content easier to access and more relevant to the work you do. We welcome your feedback here in the blog or on the site.
Erika Navara, Content Developer
Microsoft - IEBlog
May 2013 Internet Explorer Updates
Microsoft Security Bulletin MS13-037 - Critical
This security update resolves eleven privately reported vulnerabilities in Internet Explorer. The most severe vulnerabilities could allow remote code execution if a user views a specially crafted Web page using Internet Explorer. An attacker who successfully exploited the most severe of these vulnerabilities could gain the same user rights as the current user. Users whose accounts are configured to have fewer user rights on the system could be less impacted than users who operate with administrative user rights.
This security update is rated Critical for Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Internet Explorer 9, and Internet Explorer 10 on Windows clients and Moderate for Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Internet Explorer 9, and Internet Explorer 10 on Windows servers. For more information, see the full bulletin.
Recommendation. Most customers have automatic updating enabled and will not need to take any action because this security update will be downloaded and installed automatically. Customers who have not enabled automatic updating need to check for updates and install this update manually. For information about specific configuration options in automatic updating, see Microsoft Knowledge Base Article 294871.
For administrators and enterprise installations, or end users who want to install this security update manually, Microsoft recommends that customers apply the update immediately using update management software, or by checking for updates using the Microsoft Update service.
Microsoft Security Bulletin MS13-038 " Critical
This security update resolves one publicly disclosed vulnerability in Internet Explorer. The vulnerability could allow remote code execution if a user views a specially crafted Web page using Internet Explorer. An attacker who successfully exploited this vulnerability could gain the same user rights as the current user. Users whose accounts are configured to have fewer user rights on the system could be less impacted than users who operate with administrative user rights.
This security update is rated Critical for Internet Explorer 8 on Windows clients and Moderate for Internet Explorer 8 on Windows servers. This security update has no severity rating for Internet Explorer 9. For more information, see the full bulletin.
This security update also addresses the vulnerability first described in Microsoft Security Advisory 2847140.
Recommendation. Most customers have automatic updating enabled and will not need to take any action because this security update will be downloaded and installed automatically. Customers who have not enabled automatic updating need to check for updates and install this update manually. For information about specific configuration options in automatic updating, see Microsoft Knowledge Base Article 294871.
For administrators and enterprise installations, or end users who want to install this security update manually, Microsoft recommends that customers apply the update immediately using update management software, or by checking for updates using the Microsoft Update service.
Microsoft Security Advisory (2755801)
Today, we also announced the availability of an update for Adobe Flash Player in Internet Explorer 10 on all supported editions of Windows 8 and Windows Server 2012. The details of the vulnerabilities are documented in Adobe security bulletin APSB13-14
The update addresses vulnerabilities in Adobe Flash Player by updating the affected Adobe Flash libraries contained within Internet Explorer 10. For more information, see the advisory.
Most customers have automatic updating enabled and will not need to take any action because this update will be downloaded and installed automatically. Customers who have not enabled automatic updating need to check for updates and install this update manually. For information about specific configuration options in automatic updating, see Microsoft Knowledge Base Article 294871.
" Ceri Gallacher, Program Manager, Internet Explorer
456 Berea St
Replacing images when printing
It isn't all that uncommon that, after you've polished your print stylesheet to make a site look well on paper as well as on screen, you realise that the logo really doesn't look its best. It may look blurry or pixelated on paper due to having a pixel density intended for screen viewing, of course. But even worse, its edges may look ugly or it may actually be invisible because whatever is behind it when viewed on screen isn't printed.
Applying a background colour to the logo image or its containing element in the print CSS isn't going to help either since most browsers by default do not print backgrounds at all. If you can't change the image used for screen so that it will look good in print as well, you need to somehow make browsers use a different image when printing. One way of doing that is by using CSS generated content.
Posted in CSS.
Copyright © Roger Johansson
Microsoft - IEBlog
W3C Transitions Pointer Events to Candidate Recommendation
Today, the W3C published Pointer Events as a Candidate Recommendation, an important step towards a standard and interoperable way to handle input from touch, pen, mouse, and more. This fast 5-month progression from First Public Working Draft to Candidate Recommendation is a mark of the effective collaboration between Microsoft, Google, Mozilla, Opera, Nokia, jQuery, and others to help sites take advantage of new interactive hardware on the Web.
Candidate Recommendation indicates the W3C considers the specification widely reviewed and satisfying the Working Group's technical requirements. It signals a call for additional implementations to inform the group. The Pointer Events Working Group is also now actively producing tests to validate implementations of the specification. The recent Test the Web Forward event, sponsored by Microsoft, helped fuel this effort with nearly two dozen new test cases.
Increasingly, consumers browse the web with a broad range of devices; with touch, mouse and keyboard. By using pointer events, developers can write to a unified model that allows sites to be responsive to many types of input. Web developers can take advantage of pointer events in IE10 today, and in other browsers using polyfills like Hand.JS. We've also created a new portal on WebPlatform.org to help you learn more and try pointer events out. Pointer Events is one of many ways we've made touch fast and fluid on the Web.
Jacob Rossi
Program Manager
Eric Meyer
Resurrected Landmarks
It was just last week, at the end of April, that CERN announced the rebirth of The Very First URL, in all its responsive and completely presentable glory. If you hit the root level of the server, you get some wonderful information about the Web's infancy and the extraordinary thing CERN did in releasing it, unencumbered by patent or licensing restrictions, into the world, twenty years ago.
That's not at all minor point. I don't believe it overstates the case to say that if CERN hadn't made the web free and open to all, it wouldn't have taken over the net. Like previous attempts at hypertext and similar information systems, it would have languished in a niche and eventually withered away. There were other things that had to happen for the web to really take off, but none of them would have mattered without this one simple, foundational decision.
I would go even further and argue that this act infused the web, defining the culture that was built on top of it. Because the medium was free and open, as was often the case in academic and hacker circles before it, the aesthetic of sharing freely became central to the web community. The dynamic of using ideas and resources freely shared by others, and then freely sharing your own resources and ideas in return, was strongly encouraged by the open nature of the web. It was an implicit encouragement, but no less strong for that. As always, the environment shapes those who live within it.
It was in that very spirit that Dave Shea launched the CSS Zen Garden ten years ago this week. After letting it lie fallow for the last few years, Dave has re-opened the site to submissions that make use of all the modern capabilities we have now.
It might be hard to understand this now, but the Zen Garden is one of the defining moments in the history of web design, and is truly critical to understanding the state of CSS before and after it debuted. When histories of web design are written"and there will be"there will be a chapters titled things like "Wired, ESPN, and the Zen Garden: Why CSS Ended Up In Everything".
Before the Zen Garden, CSS was a thing you used to color text and set fonts, and maybe for a simple design, not for "serious" layout. CSS design is boxy and boring, and impossible to use for anything interesting, went the conventional wisdom. (The Wired and ESPN designs were held to be special cases.) Then Dave opened the gates on the Zen Garden, with its five utterly different designs based on the very same document"and the world turned.
I'm known to be a history buff, and these days a web history buff, so of course I'm super-excited to see both these sites online and actively looked after, but you should be too. You can see where it all started, and where a major shift in design occurred, right from the comfort of your cutting-edge nightly build of the latest and greatest browsers known to man. That's a rare privilege, and a testimony to what CERN set free, two decades back.
QuirksMode
Mobilism last call
On 16th and 17th of May we will organise the third edition of Mobilism, the mobile web conference.
We have one speaker change: unfortunately Thomas Fuchs was not able to make it. We have found Remy Sharp willing to take over the slot and the topic: JavaScript frameworks in an increasingly mobile (and thus memory- and processor-challenged) world.
A few weeks ago I reported that ticket sales weren’t going too well. I’m happy to report that sales have picked up slightly in the last weeks, and it’s now certain we won’t lose money on the conference.
Also, I announced that we weren’t able to pay for the video-taping of the event. Fortunately Mirabeau kindly offered to take over this job. Therefore the Mobilism sessions will be available online later.
Still, actually visiting the conference is a much nicer experience. So order your tickets straight away, and see you in two weeks!
456 Berea St
Using a transparent image as an icon fallback
Sometimes designs contain button styling that is difficult to create with CSS alone. The "official" way of dealing with this is to either use an image button (<input type="image" src="button.png" alt="Ok" />) or put the image in a button element (<button><img src="button.png" alt="Ok" /></button>).
However if the graphic you want to show instead of the button is part of a sprite image, or if you want to display a different image when the button is hovered over or receives focus, that won't work. In these cases it can be tempting to just use a background image and move any text the button contains out of the way by positioning it off-screen or applying a bit of text-indent. Or even worse, use no text content at all. Using no text content at all is obviously no good to anyone who can't see the image, like screen reader users. And hiding the text causes problems if the image can't be displayed.
Much of this is covered by Nicholas C. Zakas in Making accessible icon buttons, and I thought I'd talk a bit more about a technique he mentions that I use in these situations " the transparent one pixel image.
Posted in Accessibility, Browsers, CSS.
Copyright © Roger Johansson
QuirksMode
Firefox OS and BlackBerry 10 workshops in Amsterdam
On Wednesday 15th of May, the day before Mobilism, we have organised two technical platform workshops: one for Firefox OS and one for BlackBerry 10. Both are half-day workshops and a ticket for the two of them costs only €150.
More and more platforms are opting for HTML5 (whatever that may mean) as their underlying technology, and thus it becomes important for web developers to learn about them. Two important ones will be BlackBerry 10, the next OS for the BlackBerry phones, and Firefox OS, which will power a large number of mid-range devices from late 2013 on.
That’s why we asked BlackBerry, and Mozilla and Telefonica, to organise workshops for us. We can offer these workshops for a very sharp price of €150 — and that gives you access to both; one in the morning and one in the afternoon. Lunch is included.
So what’s not to like? Read more about the workshops, or order your tickets straight away!
Microsoft - IEBlog
Test the Web Forward " Seattle 2013
On April 12-13, Microsoft hosted a record-setting Test the Web Forward event to advance the Web by creating interoperability tests. Dozens of volunteers from Adobe, AT&T, Blackberry, Mozilla, and many other local companies joined us at our Seattle offices to learn about Web standards testing, how to write CSS and HTML tests, as well as the tools available for test suite management. Attendees from around the country - and even Canada " contributed to create a record-breaking 514 overall new tests.
Why Tests?
The quality and correctness of different browsers' HTML and CSS standards compliance continues to vary widely. The W3C requires independent tests of all normative requirements in a specification in order to move a W3C Web specification from a candidate recommendation to an official recommendation. These tests are used to ensure that at least two browsers fully support each normative statement. As you might imagine, creating all of these tests is daunting; HTML5 is expected to need well over 100,000 tests, to say nothing of CSS3 modules, WebApps, Media Extensions, etc. We have submitted thousands of test cases for HTML, CSS, and SVG that can be viewed at the W3C and the Internet Explorer Test Center, however more tests are still needed. These tests benefit all browsers " and ultimately the entire Web developer community " by ensuring a consistent, predictable behavior. As different browsers improve their same-markup support, we can all realize the promise of HTML5 and CSS3.
A few years ago, several members of the standards community turned to crowd-sourcing to help create new tests, this resulted in Test the Web Forward events.
With the sponsorship of major players like Microsoft, Adobe, Google, and Mozilla, the Web community has come together, running local test-writing sprints around the world"France, China, Australia, and the US. Each sprint not only generates hundreds of tests, but also engages with and educates Web developers about the specifications that make up the Web platform.
Inside the Seattle Event
Our friends at Adobe were instrumental in setting up a successful event, building upon their experience in running previous events. In Seattle we kicked off the hack-a-thon on Friday night, with inspirational and informative presentations from Mozilla's fantasai (Elika Etemad), Adobe's Rebecca Hauck, and Microsoft's Kris Krueger, explaining why we need tests, what type of tests are available, and how to create them. Here's a quick outline:
Stand-alone tests typically rely on visual verification: if a failure condition occurs, red content will show.
Reference tests compare a test against a visual reference that has no dependency on the feature being tested. Note that the test includes a link to the reference test against which is should be compared. For example, if you wanted to test that DIVs render background colors correctly, you might make a ref test using TABLEs.
Object Model tests depend on a JavaScript test harness; they verify that the object model reflects what static style sheets specify. For instance, this CSS media query test.
These presentations were followed by 2-minute pitches from Saturday's session test leaders on why participants might want to pick a particular focus (CSS Flexbox, Pointer Events, CSS Transforms, CSS OM, Backgrounds & Borders, Exclusions, or HTML5), though session participants were free to write tests against any API or spec they felt passionate about.

Following breakfast the next morning, participants broke up into three rooms with session leaders helping out in each. Each area was staffed by experts (in addition to the speakers from the previous evening): Arron Eicholz (Microsoft, CSS); Jacob Rossi (Microsoft, Pointer Events); Sylvain Galineau (Adobe [formerly Microsoft], CSS); Alan Stearns (Adobe, CSS); Dave Methvin (President of jQuery, HTML).
The leaders instructed everyone on how to determine where tests were needed and how to create code that tested the specific assertion that we wanted to capture. Volunteers could either work on their own, work in small groups, or get 1:1 help with the experts.
When all was said and done, the sprint generated 514 submitted tests, just edging out the record set by the Paris test sprint and setting a new bar for upcoming sprints to beat. After a few celebratory drinks, the end of the night saw the raffling off of a Surface Pro which was won by a student volunteer who joined us from the University of Washington.
You Can Help Too!
In IE10, we have added support for a long list of new standard features across CSS, HTML, SVG and the DOM. We have published some of our test cases for these new features on our IE Test Center. We will be submitting more, but we still need help from the community to get the right tests written and move these specs forward.
We are excited to be part of the community working towards a more innovative and interoperable Web. We support several initiatives in this direction, like the recent donation of JavaScript documentation to Webplatform.org, or our continued efforts to simplify cross-browser testing with modern.ie. If you want to help move the Web forward, too, come and join us at one of the next Test the Web Forward events! In the meanwhile, you can learn how to contribute tests, or review existing tests online. To hear about upcoming events and to stay in touch with the rest of the Test the Web Forward community, please subscribe to our W3C mailing list: public-testtwf. If test writing sounds too intense, but you are still knowledgeable and passionate about the Web, you can get involved with the WebPlatform Docs project and help document the Web.
For more info and updates, follow our Internet Explorer developer relations handle on Twitter @IEDevChat, this initiative's handle @testthewebfwd and in particular #testtwf.
We will keep you posted on upcoming events and we are looking forward to meeting you soon!
"John Jansen, Kris Krueger, Arron Eicholz, and Jacob Rossi " Internet Explorer
Microsoft - IEBlog
Enabling Professional-Quality Online Video: New Specifications for Interoperable Captioning
Video captioning on the Web is about to get significantly better, putting in place another critical building block for enabling professional-quality online video delivery and playback. To achieve the experience of broadcast television, the Web needs to provide captioning capabilities including word highlighting, tight synchronization between captions and spoken word, flexible caption positioning, caption styling, and caption animations " all of which are part of a recently published profile specification from the W3C Timed Text Working Group (TTWG). Microsoft has joined with content owners, video distributors, and device providers in developing the specifications to ensure interoperability and streamline closed caption authoring and delivery. For content and tool providers, the specification enables authoring of interoperable caption files for delivery to a wide variety of software and devices, while meeting evolving industry requirements.
Captioning is an intrinsic part of any professional-quality video experience"and the impact goes far beyond enabling the hearing impaired to gain full access to the video content. Captions are turned on in loud environments, such as at the gym. Captioning is used to help us all understand foreign language films. Of course, I'm surely not the only person who turns on captions to better understand difficult accents in movies streamed on Netflix.
In February 2013, Microsoft joined industry stakeholders in the W3C Timed Text Working Group (TTWG) to deliver the TTML Simple Delivery Profile for Closed Captions (SDP-US) profile specification. This new profile was created with input from media industry experts from DECE, SMPTE, EBU and industry players including Adobe, MovieLabs, NBC Universal, Cox, Apple, Netflix and Microsoft.
SDP-US is based on Timed Text Markup Language (TTML) (a caption interchange specification that has been used in the professional video industry for years) and clearly defines key caption format features like layout, style, timing and content requirements, enabling content authors and tool providers to easily create interoperable caption files that meet evolving industry requirements. SDP-US will help streamline creation of closed captions to deliver media content to the Web across a wide variety of software and devices " in a browser like Internet Explorer, on devices such as Xbox or through applications built using the Microsoft Media Player Framework.
Internet Explorer was one of the first browsers to include early support for HTML5-based video captioning via the <track> element with TTML and WebVTT file formats. Since then, we've heard clear feedback from content authors: They need an interoperable, simple and full-featured captioning solution that meets emerging requirements for browsers and other software on Internet-connected devices. SDP-US will meet this need by defining a streamlined set of captioning capabilities for the HTML5 <track> element. Developers will be able to add captioning to an HTML5 video by providing a caption file that contains a styled text representation of the video dialog or actions and by using the <track> element to render and display the contents of that file.
To illustrate some of the power of the new SDP-US captioning specification, here's an example of how Internet Explorer renders captions with a default plain text style and position:

With SDP-US, caption authors have much more flexibility in caption positioning and styling, as shown in the below examples:



Professional-quality online video is a forthcoming reality, enabled by emerging Web specifications and powerful content delivery infrastructure. Captioning is an important building block for enabling professional-quality video, and Microsoft is actively working with industry partners to enable rich captioning experiences. If you are working on Internet video, we invite you to review the new SDP-US profile, join the industry discussion, start considering how your caption content can adapt to SDP-US, and let us have your feedback.
-- Sandeep Singhal, Group Program Manager, Internet Explorer
Eric Meyer
Blink Support(s)
Just a quick followup to last month's post about @supports:
@supports (text-decoration: blink) {
#test {
color: green;
background: yellow;
text-decoration: blink;
}
}
Results in all @supports-supporting browsers I was able to test: green text on a yellow background, except Firefox 22, which additionally blinks the text. The latest nightly builds of Firefox 23 do not blink the text, thanks to bug 857820.
Discuss.
QuirksMode
De Correspondent - future of journalism?
One of the things I’ve been following closely these past few weeks is an initiative for a new kind of journalism here at home. To me it’s not so much about the journalism as it is about the business model, which nicely ties in with other initiatives in the US, and is probably even more succesful right now.
De Correspondent aims to become a blog and news site supported by subscriptions. See also this English article for a summary of what’s happened so far.
The idea itself is not new — in the US both TPM and The Dish launched similar initiatives in the past few months. I always felt I should support them — there are times when I read them a lot, although at other times I don’t have the time to focus on US news. I still haven’t donated to them, but I did donate to De Correspondent.
I suspect that right now De Correspondent is doing better than them. The Daily Dish regularly publishes its fund-raising numbers, and although I can’t find them right now I believe I read they gathered US$ 900K a few weeks back. Not bad at all, and it puts them in the black for the first year. I’ve never seen TPM numbers, but I may have missed them.
De Correspondent raised more than €1 million in a month (call it US$ 1.3 million) — and that is all the more remarkable for the facts that the site does not actually exist yet and is aimed at a language zone of only about 25 million people if you count generously.
A stunning start, but will De Correspondent amount to anything? I believe it will, but even if it doesn’t I still consider my subscription fee (plus the bit extra I sent) an excellent investment.
To me personally the journalistic content matters less than proving that this business model can work — and in fact that has already been proven by the large amount of subscriptions. The target was 15,000 in a month, and the counter is now at 18,000 with still a few days to go.
In the past few months I’ve started wondering about subscription-based (or even plain fee-based) online business models a lot. Why do people refuse to pay for online quality? Related: why do they pay even less for apps? Most importantly: how do we change this behaviour?
Take the MindFeud iPad game a friend hooked me up to a few weeks back. The app is free plus advertising, or you can pay €3.60 . After a few days I paid up. I mean, I regularly spend €35-40 on a board game, and don’t consider that odd at all. Then why not spend 10% of that on a game I may play even more than the average board game I buy? To me it sounds logical, but I expect the vast majority of players to use the free version “because €3.60 is really a lot of money.” No, it isn’t. It just feels that way, for reasons I don’t understand.
Something similar is going on in online news and journalism: we expect it to be free, but why, really? Journalists also need money, and there are development costs for the website, and so on. If we don’t learn to spend money on such online services they will eventually be ad-supported — and in the near future ads don’t mean useless and easily-blocked banner advertisements, but actual stories that masquerade as editorial content to a greater or lesser degree.
So to me the choice was simple: if I don’t support De Correspondent now we won’t have any journalism left in 20 years. Instead, we’ll have paid copywriters for large companies who squeeze out a news item every now and then.
So I will follow De Correspondent with interest, for its journalism, for its business model, and of course, being what I am, for the technical solutions they’re going to choose.
Right now the mobile site (or rather, the mobile view of the site) is not very good, with stilted scroll scripts that don’t work everywhere, and no zoom possibility. I assume that this is because the current site was thrown together hastily to support the fund-raising, and that these problems will be solved later.
Just about the only part of the plan I disagree strongly with is the creation of iOS and Android apps. I think they’re a useless waste of money: people want to read content, and whether that’s on the web or in a “native” app is immaterial. Use the money to pay an extra reporter, I’d say. More content, less cruft.
But we’ll see. In any case I’m very happy with this initiative and I hope it will prosper.
456 Berea St
Conditional sibling class names for IE patching
Traditionally, web developers have been using either CSS hacks or conditional comments to target different versions of Internet Explorer with CSS fixes. In the last few years more and more people have started using conditional class names, more or less as described by Paul Irish in Conditional Stylesheets vs CSS Hacks? Answer: Neither!.
I've always favoured separating IE fixes from the main CSS by putting them in one or sometimes two separate files loaded via conditional comments. However, a valid argument against that is that keeping the patches in the same file as the main CSS increases maintainability since you're less likely to forget about the patches when updating the main CSS. That problem can be solved by using conditional comments to add class names to the html element depending on which version of IE is used.
The problem is that it can create plenty of HTML bloat since you need to repeat the opening HTML tag " including any attributes it has " for every version of IE that you want to target. So I started thinking that maybe there is a different way. And there is, though it too has its drawbacks. Nevertheless, here's another way of solving the problem.
Copyright © Roger Johansson
Powered by:
![]()
Hosted by: Keller Technologies Inc.
