Selectoracle: a nifty little tool
Thursday, 3. April 2008, 13:35:57
I came across a handy little online tool today, useful for those who are learning CSS, or just curious.
Trying to tweak your My Opera theme (or otherwise creating a custom stylesheet) and wondering what a complicated selector in the existing stylesheet(s) actually selects? Then the Selectoracle may help. Just paste in one or more selectors (separated by semicolons), or existing whole rulesets, and the Selectoracle will translate that into plain English or Spanish. It even understands CSS3 selectors!
For instance the selector:
ul#tagnav li.first:before,
div.alttagcloud li.first:beforeis translated into:
Selects any content placed before a li element with a class attribute that contains the word first that is a descendant of an ul element with an id attribute that equals tagnav or any content placed before a li element with a class attribute that contains the word first that is a descendant of a div element with a class attribute that contains the word alttagcloud.
The various styles (shown here much like on the Selectoracle page) help in “parsing” the well-formed sentences. Nifty!
One major reason I chose My Opera as a platform for a photo album, and then also as a blogging platform, was its clean, lean, and valid code (well, almost valid). Looking at the source code, I noticed there was even code to enhance the accessibility of the site, such as a “Skip navigation” link - a good thing with all of the navigation links at the top of every page. Unfortunately there is a problem with this link: while the link is present in the XHTML code, the accompanying CSS code makes it disappear completely, so it won't actually be there anywhere except in browsers that do not support CSS. Luckily, My Opera also provides a way for us to use or add our own stylesheet, and we can use that to repair this problem.
