W3C Cheatsheet for developers
Author(s) and publish date
- By:
-
-
Dominique Hazaël-Massieux
-
- Published:
Yesterday, as part of the W3C Technical Plenary day, I got the opportunity to introduce a new tool that I had been working on over the past few weeks, the W3C Cheatsheet for Web developers.
This cheatsheet aims at providing in a very compact and mobile-friendly format a compilation of useful knowledge extracted from W3C specifications — at this time, CSS, HTML, SVG and XPath —, completed by summaries of guidelines developed at W3C, in particular the WCAG2 accessibility guidelines, the Mobile Web Best Practices, and a number of internationalization tips.
Its main feature is a lookup search box, where one can start typing a keyword and get a list of matching properties/elements/attributes/functions in the above-mentioned specifications, and further details on those when selecting the one of interest.
The early feedback received both from TPAC participants after the demo and from the microblogging community has been really positive and makes me optimistic that this tool is filling a useful role.
This is very much a first release, and there are many aspects that will likely need improvements over time, in particular:
- I would like the cheatsheet to cover more content — from specifications not yet released as standards as well as from topics not yet covered (e.g. JavaScript interfaces),
- some people have reported that there might be accessibility problems with the current interface, that I’m eager to fix once I get specific bug reports,
- the cheatsheet doesn’t work in IE6 (and probably even in later versions), and it would be nice to make it work at least somewhat there.
The code behind the cheatsheet is already publicly available, and I’m hoping others will be interested to join me in developing this tool — I’m fully aware that the first thing that will need to get others involved will be some documentation on the architecture and data formats used in the cheatsheet, and I’m thus hoping to work on that in the upcoming few weeks.
In the meantime, I very much welcome bug reports and suggestions for improvements, either by private email to me (dom@w3.org) or preferably to the publicly archived mailing list public-qa-dev@w3.org.
Nice! I found it pretty useful for looking up XPath 2.0 function prototypes.
Can you add keywords for SVG 1.1 elements/attributes/properties that aren't in 1.2T?
It would be nice if you added a iPhone bookmark icon :)
Great tool too!!
Urm - http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.w3.org%2FQA%2F2009%2F11%2Fw3ccheatsheetfor_developers.html - "1591 Errors, 1583 warning(s)"?
Or am I missing something?
Great, looks like a big help.
It says
above the header. I dont think it should be there.
The cheatsheet now works at least somewhat in Internet Explorer; the problem came from training commas in the JSON data, à la {foo:"bar",baz:"quuz",}
What a handy little tool! I've always been a fan of your Semantic Data Extractor – thanks once again for providing another excellent tool to make my life easier, Dom!
Regards,
Jordan Clark
I have just Twitted this: "Definitely a starter page, not another bookmark for web developers: http://www.w3.org/2009/chea... #html #css #mobile #accessibility #I18"
Besides, the same here - about Jordan Clark's phrases on Semantic Data Extractor.
Congratulations for the effort; everything seems to be working perfectly.
Regards;
Kunter Ilalan
Great, looks like a big help.
UDL Intermedia
Via VB client-side script on an ASP.NET WebForm, I'm trying to make a , which becomes, I assume, a , visible or invisible based on other form controls. I am able, for example, to set the innerHTML of such a cell like so:
document.getElementById("tbcP1d1").innerHTML = "whatever"
The above works great on client-side, which I'm placing indirectly into an OnBlur event. However, I want to be able to render the same tablecell (or a tablerow if that's the only way, or a table for that matter) visible or invisible.
Practical Questions:
Is there an attribute like visible that I can use?
If so, what is the name for this most-basic-of attributes?
If not, is there some code somewhere that accomplishes this seemingly simple task? No, I don't want to do it server-side thank-you anyway; it must be client-side.
Academic Questions:
If not, why not? Why would something so basic be left-out?
Why are the names of these attributes not uniform? For example, there is the well-known, "enabled," attribute, but also the, "disabled," attribute. Or is that just a fight between HTML and Microsoft?
Why are some names so bizarre? For example, who came up with the galactically absurd name for the lost focus event, "OnBlur"? On BLUR? What does the word BLUR have to do with loosing focus in even the most remote way? Some time ago, I spent a considerable amount of time trying to find the lost focus event on client-side. I kept seeing OnBlur and thought that this couldn't possibly be the name that very intelligent people came-up-with and so I disregarded it until I finally got desperate and said, "Oh what the hell. I'll try this funky OnBlur event. If nothing else, I'll discover how to make a control blur." It worked of course; surprise! Ever thought of changing, "Focus," to, oh I don't know, how about the clearly intuative, "KANGAROO"?
I've used all sorts of Internet means to comment on things, ask questions, polite and otherwise, and I've yet to find any that actually respond, or, are in any way, helpful. Most of the time, there is never any reply at all, which makes me feel that leaving comments on any of these technical sites is like leaving a baby in a dumpster. The rest of the time the replies are very often ridiculously complicated, even when the question is, or seems to be, an extremely simple matter (like my main question here), or insultingly stupid, like, "Is the power on for your computer?" I get better answers on WorldofWarcraft forms for God sake. On the off-chance that somebody does reply to this comment, is this a good place and if not, do you know one of a FREE site (and one that doesn't insist on getting your entire life's history just to ask a question) that replies with useful information and if so, what is the URL?
If I sound bitter, I am. The people who come up with this stuff are all believed to be smart and for 25+ years now, I keep seeing evidence to the contrary in things like the ONBLUR event.
Julie Labrouste
On Facebook and
julielabrouste@yahoo.com
Hi Julie,
You can make an HTML element invisible using style properties, e.g. document.getElementById("tbcP1d1").style.display='none' — I assume this works in VBscript, this is how it would be written in JavaScript at least.
That said, I don’t think this blog is the right place to ask specific technical questions on how to write scripts.
•I would like the cheatsheet to cover more content — from specifications not yet released as standards as well as from topics not yet covered.
IT solution
Your site and the tools are really great and a very big help for webmasters. Keep up the good and thank you ...Rss News
I just the tool has tried out.
For webmaster it is a real relief and help.
Thank you Tommy of IT Service
The post was of great help. Ranjit Behera
I LOVE W3C.ORG :-)
I use the tools daily and i have learned very much thanks to the W3C team.
Thank you phpLD Germany
Thanks for making such an awesome tool! And the articles you link to are simply invaluable!
I must truly and sincerely thank you for bringing my attention to the html codes for the right and left double quotes and the em and en dashes. I'll be more vigilant in my use of them.
I was wondering, though. It's come to my attention that ‘ (or ‘) is used as a single left quotation mark while ’ (or ’) is used as a right quotation mark, which you have listed as an apostrophe. It actually seems that it's ideal as an apostrophe, because most browsers, if not all of them, render it bolder than the left single quote.
Does anyone happen to know if there is a less bold single right quotation mark / apostrophe or a bolder left single quote mark? I've been using the two single quote codes I mentioned on my blog (specifically in the third entry), and the lighter and darker quotes look kind of neat, but it would be nice to conform how they look a little more.
Once again, thanks for making such a useful web app!
Hi! Now after I tried this tool, I often use it and I find it very useful! Thanks for developing it! Greetings, Fred.
Well, it's come to my attention that different fonts will give you different double and single quotes, some of which give you perfect symmetry, as my previous post shows.
Many thanks for the cheatsheet. I always refer to these when I'm developing a site since it's often easy to overlook simple design features and usability that in the end will contribute towards a more usable site. Although the cheatsheet does not work in IE6 it's fair to say that IE6 is a challenging browser to develop for anyway!
Where the HELL is Border-Radius?? :S
@SalmanAbbas007 border-radius is part of CSS3, which hasn't been integrated in the cheatsheet yet (but probably will in a future release)