.... Wherein our protaganist awakes to the power of CSS ...
CSS is as important to Ajax as Asynchrony and XMLHttpRequest. Which is to say, it's very useful, even though it's not essential. Due to an accident of the English language, JJG's creative mind, and the propensity of certain terms to rise to buzzdom, it doesn't explicitly feature in "A.J.A.X.". However, the original Ajax article certainly spells out the importance of CSS matters - the first of 5 things "Ajax incorporates" is:
standards-based presentation using XHTML and CSS;
And in the FAQ below that:
Why did you feel the need to give this a name? A. I needed something shorter than “Asynchronous JavaScript+CSS+DOM+XMLHttpRequest†to use when discussing this approach with clients.
Myself, I missed the significance of CSS for a long time. I considered it mostly a useful engineering concept - to cut down on markup - and a way to make things prettier. As I've spent more time creating rich web apps, I've come to appreciate how powerful it is, and how important it is. Not just from a layout perspective, but as a key piece of an overall architecture. With CSS, you can change element visibilty, you can create transparent popups, you can load images faster (using backgroundPosition; see Sprite pattern). You can make Flickr-style annotation boxes without a single line of Javascript. You can also support graceful degradation, e.g. keeping an Ajax-related element hidden until the onload script makes it visible (although degrading gracefully for someone not using CSS is another problem altogether). So CSS goes well beyond appearance and even beyond keeping DRY.
Furthermore, scripting with CSS is the best thing since sliced sashimi! At first, I wondered what all the hype was about, but now, I have to say I'd find it hard to go back. I'm using Prototype with the $$ speedup patch and it seems to hold up fine from a performance perspective. It's becoming a standard idiom to loop through each element, using the selector, when the document loads (to do some sort of initialisation).
As one example of selector coolness, here's a library function to clear all input elements, also combining the pleasance of Prototype Rubyish iteration.
- function clearInputs(cssSelector) {
- $$(cssSelector + " input").each(function(el) {
- el.disabled = false;
- if (el.type=="text") { ele.value = ""; }
- if (el.type=="checkbox") { el.checked = false; }
- });
- $$(cssSelector + " textarea").each(function(el) { el.disabled = false; el.value = ""; } );
- }
If I want to clear all inputs under submitForm, I call clearInputs("#submitForm"). If I want to clear all inputs on the page, I call clearInputs("body"). If I want to clear all inputs inside advertising portlets, I call clearInputs(".portlets .advert"). Bruce Eckel once said (something like: "It's syntactic sugar, and syntactic sugar is good." He's also spoken about how the average programmer codes X lines per day (canonically ten, but the number doesn't matter). Any syntactic sugar that reduces lines, will probably let you achieve more. Not to say that the number of lines is really fixed, but there's definitely going to be an impact if you're writing a big block instead of a single line. So, yeah, CSS Selectors + Rubyish Iteration, via Prototype, is a big win if you value concise code.
To sum up, I've found CSS to be a highly valuable skill for modern web development, and for three reasons:
- The obvious reason that knowing CSS helps make your pages pretty, usable, accessible, etc.
- CSS manipulation is important for managing the interaction in rich web apps, including graceful degradation.
- CSS Selector Scripting is the new Dependency Injection!
Ajaxian » CSS: The Tech Ajax Forgot // Aug 1, 2006 at 1:24 pm
[...] The shifting sands of time can make people forget things, things they once knew and loved, things they couldn’t live without….things important to Ajax too. Michael Mahemoff reminds us of one such thing in his new post – CSS. CSS is as important to Ajax as Asynchrony and XMLHttpRequest. Which is to say, it’s very useful, even though it’s not essential. Due to an accident of the English language, JJG’s creative mind, and the propensity of certain terms to rise to buzzdom, it doesn’t explicitly feature in “A.J.A.X.”. However, the original Ajax article certainly spells out the importance of CSS matters. [...]
CSS: The Tech Ajax Forgot > Archives > Web 2.0 Stores // Aug 1, 2006 at 3:50 pm
[...] Aptana: New Web IDE in BetaIs Ajax development slowing down?Cross-site Ajax (from OSCON 2006)Ajax and the Spring Framework with TIBCO General InterfaceMeebo IM Now in NetvibesNokia and Backbase cooperate on Mobile AJAXMike Potter Builds a Flash-y Ajax SiteGPokr: Ajax Poker AppBiggest AJAX problemSafari: Browser.Back + AjaxDeclarative AjaxIs AJAX Accessibility a major issue?Free AJAX Training CourseIntegration of Spry and PHP/MySQLAjax as a Remedy for the Cacheability-Personalization DilemmaJ2EE and AJAX: AJAX with ServletsTwo Key Challenges for Ajax Adoption that We Have IgnoredAdobe Spry and PHP/MySQLAjax Activity IndicatorsMODx CMS – An Ajax/PHP Content SystemWeb API authentication for mashupsExplaining AJAXJSON.NETuniAjax: an ajax framework focused on browser supportAtlas June CTPRelay: Ajax File ManagerDojo Available in Ning ApplicationsInterview with ZK Creator Tom YehGmail and content findabilityReading on a screen is a lousy experienceWeatherBug Launches YouTube for WeatherCNN Exchange – CNN’s Answer to YouTubeCooqy Brings eBay to MySpace – and Finds a Workaround to the MySpace Update?SingShot Launches the YouTube of KaraokeCreating an Ajax Login Page with Dojo/Zend FrameworkSpyMedia 2.0 Launches – Sell Your Photos on Blogs and MySpaceMySpace Screws Up Again: Accounts Being Deleted?Snapvine Adds Voice Comments To MySpacePrototypify: Running Prototype code with legacy codePains of document.domain in FireFox 1.5Cyworld US is LiveSlate Reddit ReleasedJavascript Boot Camp TutorialSnocap Launches Linx – Napster Founder Selling Unprotected MP3s on MySpaceMenuTree Serves Up Take-Out 2.0Netscape HackedYouTube Is Not For SaleSayNow Adds Mobile Shoutouts To MySpace MusicSportsMates Launches – Sports Themed MySpaceSneakerplay’s Sneaker-Based Social NetworkPlanning an Ajax Boot CampFacebook Giving Away Free iTunes MusicOtavo Launches – Yahoo Answers, Friendster and del.ici.ous Rolled into OneGoplan updatesRediscovering Flyweight for JavascriptStylehive Gets FundingImageKind Launches – CafePress for Wall ArtLink Thumbnail: Photo Mouse OverBreaking User Interfaces for Fun and ProfitDabble Searches YouTube, MySpace Video, Metacafe and MoreNextcat – MySpace For EntertainmentDiigo Launches, Nobody CaresSocialtext Open Launches – Commercial Open Source WikiTeamSugar Launches Social Network for WomenFolkd is a Half-Decent Digg Clone (Finally)Gotuit – YouTube for Premium Content?Technorati Turns Three, Releases Major UpdateAdvanced Box Model TestingXN Test: The next Unit Testing project?XMLHttpRequest Quirks and PHPMySpace Goes OfflineCSS Browser SelectorGoogle PaintA Java-based HTTP Proxy for AjaxInterview with Jakob NielsenIf you can’t build a community, buy oneJson.NET 1.1: Converting between XML and JSONThe Importance of Maintainable JavaScriptAJAX pagination made simple (with Symfony)Stop trying to be MyspaceA Basic Approach to Server-side Data Validation with AJAXGo forth and APITuesday Morning RoundupOPML IconEcho2 Widget PanelSlightly ThickerBoxDigg and the wisdom of crowdsJson.NET: Library to help with .NET – JS communicationPayPerPost: Right or Wrong?Barcamp Portugal, more detailsIntelliJ IDEA Google Web Toolkit SupportGoogle CheckoutPrivate and Public Members in JavaScriptJavaRef: Ajaxified JavaDocSafari gets a Javascript debuggerSpeeding up Prototype’s $$ SelectorLondon Tube Route Finder The shifting sands of time can make people forget things, things they once knew and loved, things they couldn’t live without….things important to Ajax too. Michael Mahemoff reminds us of one such thing in his new post – CSS. CSS is as important to Ajax as Asynchrony and XMLHttpRequest. Which is to say, it’s very useful, even though it’s not essential. Due to an accident of the English language, JJG’s creative mind, and the propensity of certain terms to rise to buzzdom, it doesn’t explicitly feature in “A.J.A.X.â€. However, the original Ajax article certainly spells out the importance of CSS matters. Michael continues, talking about the real significance of CSS in an Ajax-enabled architecture, noting that it’s more than just a way to “cut down on markupâ€. CSS really is a key to several of the features we’ve come to know and love – just take a glance at Script.aculo.us. CSS is as integrated into Ajax and Web 2.0 applications as anything yet some seem to forget about some of the other powers that it has. Simple CSS can be found all over, but look at CSS-only layouts and some of the more advanced documentation to see how its power can be used for good for you and your site. I think you’ll be impressed. August 1st, 2006 [...]
Architect’s Linkblog » Blog Archive » 11 Links for 8/4/06 // Aug 4, 2006 at 8:03 pm
[...] Enterprise Information Portal: 10 Design principles – Building a portal to centralize and improve access to knowledge for enterprise users. Welcome to the fuzzy front end of innovation – A study on what happens at the start of the innovation process. Escape Metropolis: Bridging the Divide Between Developers and Architects – Fighting through the “us” vs. “them” between developers and architects by encouraging an undertanding of each role’s views. CSS: The Tech Ajax Forgot – Whether for AJAX or standard web development, CSS is important “not just from a layout perspective, but as a key piece of an overall architecture”. Dr. Dobb’s Agile Newsletter – How to avoid “Green Shifting”, or status warnings being reported progressively rosier as they go up the reporting hierarchy. Wasting Experienced Project Newcomers: A Dr. Phil Episode (Part 1 of 3) – Getting the most from experienced team members joining your team. The “Experienced Project Newcomer 30-day Checkup” is a nice resource. Use bugmenot.com to avoid site registration. Iterations Keep Sponsors Involved – How to use iterations to get earlier involvement with project sponsors. Plus thoughts on how iterative processes point out flaws in a project’s infrastructure. EAsurvey.org – Results of an enterprise architecture survey covering governments of many countries.. Career Spotlight: Software Architect – An article from Monster on becoming an architect and the skills/experiences needed. What’s So Special About AJAX? – Several web experts give their opinions on why AJAX is important. The Expert Mind – “Studies of the mental processes of chess grandmasters have revealed clues to how people become experts in other fields as well” [...]
It almost goes without saying, but it’s nice that somebody bothered to say it. Interface design on the web cannot progress forward without standards compliant markup! Hooray for standards!
AJAX: The argument for standards at Circle Six Blog // Aug 13, 2006 at 4:36 pm
[...] Some of the reading I’ve been doing lately has made me realize something I had taken for granted. AJAX couldn’t exist without the standards that I’m always going on about. AJAX calls depend on CSS classes and ID’s to make changes to the structure of a webpage. That’s the entire idea behind the Web 2.0 line of interfaces. For more info, check out this article at Software as She’s Developed, or jump straight to the original AJAX article. AJAX» CSS» DOM» web design» web standards» Share this article:These icons link to social bookmarking sites where readers can share and discover new web pages. [...]
Have you seen http://simile.mit.edu/timeline ? not AJAX but damn cool javascript / CSS.
SitePoint Blogs » It’s official: Javascript sucks harder than PHP // Oct 11, 2006 at 8:48 am
[...] And we had some very experienced hands in the audience (many knowing both languages intimately as well as Java, C, C++, Ruby, Perl etc.) but still stunned by the final verdict: that Javascript sucks harder—I thought I’d clinched it with CSS selectors for dependency injection but by using a negative rating system, hype and buzzwords were quickly slaughtered—it became a process of catharsis in which the “winner” was the one that came out hurting less—this is the new language advocacy!
[...]
developercast.com » Blog Archive » It’s official: Javascript sucks harder than PHP // Feb 24, 2007 at 4:37 pm
[...] And we had some very experienced hands in the audience (many knowing both languages intimately as well as Java, C, C++, Ruby, Perl etc.) but still stunned by the final verdict: that Javascript sucks harder—I thought I’d clinched it with CSS selectors for dependency injection but by using a negative rating system, hype and buzzwords were quickly slaughtered—it became a process of catharsis in which the “winner” was the one that came out hurting less—this is the new language advocacy! [...]
Thank you. Nice post. Before reading this, I have considred CSS is very defficult to implement with AJAX. No problem, you solved that trouble.