Adobe, following Macromedia's footsteps, has dropped conventional numeral based versioning for a sexier letter based combination - CS (Creative Suite). Today, Adobe has released it's latest versions of Photoshop CS™, Illustrator CS™, In-Design CS™ and Go-Live CS™.
Reading blogs and listening on mailinglist discussions, I see many tries at getting some fight against IE started. At CodingForums we have also had this discussion. This has led to a project, for now named Pro Moz (will probably be changed to something more browser neutral), with the intention of spreading more standards compliant browsers to the broader user base. The project will have a user-centric outlook instead of a developer-centric outlook, and we will try to reach the average user, not the tech user. I want to urge any one interested in this, in the ideas behind it, and with ideas about how to get on with it, to join the discussion on CodingForums, sign up on the project page, and spread the word. I know it doesn't look much to the world at the moment, but ideas are brewing inside. What we don't want to see is a split movement, where different web developer communities start their own small projects, but instead one large project with momentum to really do something. More on this as the project takes a more definite shape.
Those interested might want to read these articles as well: The door is ajar (Tim Bray), Please use a better browser (Eric Dobbs)
In an ISO meeting earlier this year, there was some discussion about introducing a fee on commercial usage of some ISO standards, including ISO 3166 (country codes), ISO 4217 (currency codes), and ISO 639 (language codes).
W3C recently sent a letter to ISO stating their concerns about the effects such a step would have on the internet at large and non-English websites in particular. Responding on the same proposal, The Unicode Technical Commitee takes the position that infrastucture related ISO standards must be free of charge.
Think of the consequences, if everyone using language codes in their webpages would have to pay for the usage of these codes!
Found through the Mozilla Firebird: Extensions page: EditCSS. In the spirit of the Squarefree Edit Styles bookmarklet, this nifty extension allows you to fire up a webpage's style rules in your browser's sidebar and edit them in real time.
And oh, in case you decide to continue surfing within the same tab, better close the EditCSS sidebar again. If not, a unique browsing experience is guaranteed.
When validating some stylesheets today, I found out that the W3C CSS Validator now also offers an option to validate your styles against the 'CSS 3 profile'. I have no idea if this service has been out for a long time, but it's the first time I used it.
The validator seems to work fine when pointing it directly to a CSS file with some CSS3 strings, but spits out errors when directing it to the refering html page (that is, only in case you have specified something else than media="all" in the link or style tag). I don't quite get the point - suggestions are welcome.
For your convenience, I have hacked together a simple bookmarklet: CSS3 validator (works best when applied directly to the CSS file you want to check, cfr. above)
Perhaps I am misunderstanding, but it seems that Windows browsers love Arial. They love Arial so much in fact, that they will assume that if you specify "Helvetica", you probably meant Arial. Case in point, the CSS for Web-Graphics. My goal is to have the following font logic hold true: Helvetica is the first choice, if that is not available, then use Verdana, but never ever use Arial unless you have no other choice.
This is the font order I specify: Verdana, Geneva, Lucida, sans-serif. I then trick Win IE into avoiding the Helvetica problem by hiding the next font order from it: Helvetica, Verdana, Geneva, Lucida, sans-serif. So for Win IE, the secondary choice of Verdana shows up (not arial), and for advanced browsers with Helvetica, my first choice font shows up. The problem that remains, boiled down, is that Mozilla browsers seem to interpret Helvetica into Arial, and I don't think there is a work-around.
Windows users of Mozilla might have been confused by a float issue I caused by forgetting that posts here are pre-wrapped with paragraph tags. Apparently the double paragraph (invalid to boot) caused the humorous re-alignment you see in the image above. The issue should be fixed now, thanks goes to the helpful soul who pointed it out.
There have been many requests for Listamatic to include nested lists. So, here is Listamatic2 - nested list options. This time, the site will not be pre-populated with existing lists, we are calling for you to submit new ones!
You might be a freelance developer, and you might have landed a big job, with big development needs. Of course you can get your daily CSS miss-information from reading Web-Graphics, but how are you going to deliver the goods?
I can recommend from personal experience that you give Dan Benjamin a holler through his new platform at Automatic Labs; he might just save your life. On the new site, check out the enterprise level Turbine CMS, a powerful system that can be modified/customized for specific needs.
Web-Graphics now uses this technique to hide accessibility related features from graphical browsers.
Why? The short answer: Screen readers apparently can not "see" content that is hidden using the CSS display:none style attribute. Given that we (along with many other sites) have been using that to hide content specifically geared towards screen readers (e.g. jump-to links), it is not acceptable that such content would be unread by screen readers. The new technique provides the same effect, but without the drawbacks. I was happy to find the switchover to be a minimal change to the CSS file, it only took a few minutes.
Jeremy Keith's CSS Based Design: "Let me tell you why you're here. You're here because you know something. What you know you can't explain but you feel it, that there's something wrong with the web..."
Want to impress your users? Want to make your forms really sexy? Nicholas Zakas has written a very interesting article over at Sitepoint that details how to create autocomplete functionality with textboxes. Users will be able to type in a couple of letter, and then a word will be suggested from a given list.
The example given works in IE 5.5+ and Moz 1.x. It will not work with NN 4.x or Opera.
A big welcome to Tony Stephens of Blog-Fu, who has joined agreed to join the web-graphics authoring list.
Still waiting to hop on the CSS-based navigation-in-a-list bandwagon? Well, thanks to Ian Lloyd (at Accessify) you now have no reason to wait any longer.
Ian's List-o-matic allows you to create unordered navigation lists with your own text, links and titles, and then select from a collection of CSS styles (so far the list of styles includes contributions from Dan Cederholm, Eric Meyer, Zeldman, and others). The wizard then presents you with the markup and CSS for your navigation, ready to copy and paste.
A while ago, Intersmash announced its first Design Challenge. The winner was announced last Friday.
Daniel Sheppard managed to create a two column layout flowing around a nicely nested image. Impressive, as his submission seems to be cross-browser compatible and even allows you to change the text size without breaking the text flow. Nice job.
Listutorial takes you through the basics of building CSS lists with "background images for bullets" and "simple rollovers" with a few variations along the way.
Update: This bookmarklet now has a new page devoted to it with Step-by-Step instructions on how to use it, check that out first.
So the recent discussion of bookmarklets got me thinking. Most of the CSS helper bookmarklets out there (including my old "show divs") function by adding a border to specific elements on the fly. This is helpful for identifying where a particular element or types of elements are located, and how much space they are taking up. But when it comes time to really fine tune your CSS layout, the 1 pixel added to all sides by the border, can throw off your alignments, or even your whole layout (remember it's 2 pixels per vertical and horizontal multiplied by however many items are being highlighted).
And so, in my wanna-be programmer ways, I tried cooking something up, but not from scratch of course. This new bookmarklet is based off my favorite and most often-used diagnosis tool made by Kevin C. Smith of Centricle, the Show Specific Elements favelet. I like Kevin's favelet because it's supremely flexible through prompting for element and color. So I used this concept to make a bookmarklet that prompts for element and side - as in left, right, top, bottom. These two bits of info are used to alter the styling of the page you are visiting by adding either a left, right, top, or bottom aligned background image. The background image is repeated on either the x or y axis as appropriate. There are 4 background images, one for each side, designed to help you see how many pixels off some things are from other things.
It's probably kind of pointless to try to explain it all, when testing it out is really the best way see what I'm trying to accomplish. I have a little page set aside (which I will be updating) for the Align bookmarklet [url updated] where the bookmarklet can be grabbed and/or tested out. The Web-Graphics home page is a somewhat more interesting place to test it. Real programmers might have some suggestions for improving the code, or perhaps you have better ideas for the background images? Return to this post to leave some feedback, questions, or suggestions for improvement, all are very welcome here.
Mark Lynch has created a cool new favelet that shows all the ID's and classes on the page. It is apparently only Mozilla friendly at this stage, but he is interested in hearing feedback and suggestions.
Have you seen the mini-site that collected a number of different solutions for list styling with CSS all in one handy place, also known as listamatic? That was the work of Russ Weakley, our newest author. Welcome Russ!
One of the new CSS treatments added to this site is the paragraph indentation of posts, or rather the paragraph indentation of all paragraphs except the 1st ones. This is one of those nice things about CCS2 selectors that both work well, and degrade nicely. To do this, I wanted to select p tags only if they are preceded by a p tag. Adjacent Selectors do the trick here, and they are easy to use: e.g. p+p is the selector used here at Web-Graphics.
Look see, here's a second paragraph. Is it semantically correct to make a paragraph that serves no other purpose than to be self-proclamatory? Don't answer that.
Read John Gruber's MacWorld article about using BBEdit and CVS online here: BBEdit Version Control. Of course there is also a treasure trove of Mac and BBEdit related material in the daringfireball archives too.
I recently launched a open source product, built on Mozilla naturally, for heuristic review.
One of the notable, if subtle, featues of uzReview is an auto-generated table of contents in the HTML documentation. Using a DOM2 treeWalker with a filter that grabs only heading tags provides a handle from which anchor links can be generated. CSS takes care of indentation.
This approach, as discusssed with Jamie Blustein at Hypertext '03, should be a core part of the web, organizing well structured documents automatically. Alas, the walker DOM2 feature is unimplemented in IE and I've never seen this done. Any prior art or IE implementations?
In an interesting move, George of 90% Crud is trying to sell a song bought using iTunes on eBay. Nothing in iTunes's licencing seems to indicate in any way that it would in any way would be against it's rules. Knify situation, Apple. For more data, see: 90% Crud:Does the Right of First Sale Still Exist?
Simon Willison has a great suggestion for how the W3C validator could be improved further. Many a time I have begun the debugging process with a heavy sigh and a bit of exasperation, only to find that the long list of bugs are the result of only two or three errors in my markup.