Stylehack

Ever inserted a snippet of JS you snagged somewhere online? Or have a script you’ve been using for years but now you find it prevents your code from being valid per W3C standards?

It’s actually really easy to fix the problem; it’s probably harder to determine what the problem is first!

I wrote an article on just this topic for a class blog related to the XHTML/CSS class I teach at LVS Online:

http://lvsonline.com/online-xhtml-css-classes/?p=13

Get on over there and get the scoop on how to validate your pages when you are including JS! “-)

BIG NEWS: Opera has removed all banners and is offering the Opera Web Browser for desktops free of licensing fees! Get your copy now at http://opera.com/free/! Quote from Opera: ‘Opera has removed the banners, found within our browser, and the licensing fee. Opera’s growth, due to tremendous worldwide customer support, has made todays milestone an achievable goal. Premium support is available.’ Note: If you purchased Opera in the last 30 days you can get a full refund! Why Opera? There are many reasons, so I’ll try to limit myself to a what I consider a few key points:

General Use

• built-in pop-up blocker
• excellent bookmark management features
• store a series of web pages in sessions instead of individual bookmarks, then open them all at once
• reopen pages you just closed with one click of a button
• search from the address bar (ex: ‘g mysearchterm’ displays the results of a Google search)
• change settings on-the-fly — no need to close/re-open
• built-in note taking function
• built-in password manager
• built-in download manager/panel which doesn’t slow down your continued browsing
• move menu bars, panels & buttons around at will
• highly-configurable thru gui, not through text file hacks
• no need to download/trust/install extensions from unknown authors
• supports SVG
• more standards compliant than any other browser

Accessibility

• support for portions of Aural CSS
• mouse gestures built-in
• extensive keyboard control
• extensive, easily customizable keyboard shortcuts (my favorite is using Z and X to move forward/backward thru pages I’ve visited)
• easily disable or change page styles for improved readability (custom or use pre-defined)
• true page zooming at the touch of a key (enlarges both text and images)

Geekier Toys

• built-in RSS reader
• built-in IRC chat
• built-in bit torrent client
• built-in searchable, email client (similar to gmail - I put that here because I use ~gasp~ Thunderbird - old dog, no new tricks scenario)

Basically, it comes “out of the box”, ready to go and requires much less fiddling around with it to make it operate the way I prefer. All in less than 4MB… and REALLY, REALLY FAST! More info from Opera on browser features is at http://www.opera.com/docs/specs/ A well-written user review can be found at http://slashdot.org/comments.pl?sid=162788&threshold=1&commentsort=0&tid=95&mode=thread&cid=13603510 Go get it! That’s an order. “-) http://opera.com/free/

Oh NO!  You worked hard, shed blood/sweat/tears over your web page. But when you tried to validate it, the W3C validator said you have errors! What should you do? The easiest answer is shut your computer off and spend some time with “live people”. But since you’re reading this, I guess that’s not what you want to hear. “-) Ok, my first question back to you is: have you taken any training in web coding standards? If not, your first step is to take the Build a Web Site series of classes at LVS Online. The more you learn, the less mistakes you’ll make in your coding. The instructors in those classes are very knowledgable and not anywhere near as crabby and mean as I am. “-) Even the best of us will still have errors from time to time, so let’s talk about how to use the results of the validation process to fix the problems. It’s really quite simple:

1. READ the comment and THINK about what it is saying, then ACT on it. For instance, if you see “xyz is not a valid attribute of ABC” try removing the invalid declaration(s). Check your page — does it still look the same? (Yes it will.) Re-validate. If the page validates and it still looks/performs as desired, you’re done. (If this doesn’t work, see #2 below.) Sometimes the results will even use wording similar to “xyz is not valid here. This usually is because blah blah blah.” Gasp! It even gives you some ideas of why something might be invalid!

2. RESEARCH the offending issue on the W3C site. Look up ABC and read what the valid attributes are and use them instead of xyz. At the top of each results page with problems, you will see something like this:      This page is not Valid XHTML 1.0 Transitional! Guess what? The XHTML (or HTML if you are using that standard) is CLICKABLE and takes you to the specs themselves so you can easily research your problems.

See? That’s not so hard is it! The more you do this, the more comfortable you will be with using this tool to create clean, well-structured documents on the web. There’s one other site you may find helpful — W3C Schools (not affiliated with the W3C itself). There are some good reference areas there for both coding and CSS. Be advised, however, that not everything there is cast in stone… I have run across the odd item that elicits a “Hmmm, that’s not exactly correct/complete”. Links to Resources mentioned in this article Online Classes    Build Your Web Site classes at LVSOnline    http://register.lvsonline.com/advanced_search_result.php?keywords=build
W3C Validator Links    Explanation of Error Messages    http://validator.w3.org/docs/errors.html    Very Frequently Asked Questions about Errors (List starts here)    http://validator.w3.org/docs/help.html#faq-doctype    HTML 4.01 Specs    http://www.w3.org/TR/1999/REC-html401-19991224/    XHTML 1.0 Specs    http://www.w3.org/TR/2002/REC-xhtml1-20020801/    X/HTML Validator Page (type in your links or upload your local page)    http://validator.w3.org/    CSS Validator Page (type in your link, upload a file or validate a block of text)    http://jigsaw.w3.org/css-validator/    CSS Validation FAQs    http://www.websitedev.de/css/validator-faq
Other Resources    W3C Schools HTML 4.01 Reference    http://www.w3schools.com/html/html_reference.asp    W3C Schools XHTML 1.0 Reference    http://www.w3schools.com/xhtml/xhtml_reference.asp    W3C Schools CSS2 Reference    http://www.w3schools.com/css/css_reference.asp

One of the hurdles Web Coding Standaristas place in a Flash Animator’s path is that of validation — the way that Flash movies have historically been inserted into web pages does not conform to current W3C standards. Boo hoo. “-) A couple of years ago I stumbled across the article on ALA re the Satay Method of inserting a Flash movie so that the page will still validate. It was a great article, contained a plethora of information on who/what/when/where/why and how the author had arrived at the method as it was explained at that time, and where the author felt it still needed work. To my mind the operative word was “work”… there was too much of it involved. If the visitor can find my site/page, he/she can accept some responsibility for taking the extra steps necessary to view all the content if it’s really that important to them. So I decided then and there to get rid of all the extra “stuff” in the Satay post and use only the bare basics that I felt were necessary to meet some specific considerations:

1. Valid coding practice 2. Meet basic Accessibility Standards 3. Provide a solution to the visitor without the Flash plugin or who has (gasp) blocked the play of Flash animation

Mostly, though, I decided to do this to impress and awe my pal Farron. She’s a web standards worshipper.. er I mean Web Standards Coding Instructor [whipping head around in fear to make sure she's not reading this!]. “Impress and awe” is defined in Stylehack-speak as “Prove it can be done”. “-) Selecting the level of Standards To cover future bases as much as possible, I decided to aim for validating to XHTML 1.0 Strict. The same practices will work at other levels… XHTML 1.0 Trans and I think HTML 4.01 also, though it’s been so long since I coded that way I could be wrong. Here is the DOCTYPE declaration for an XHTML 1.0 Strict document: You’ll notice I left off the XML declaration… I’ve had trouble with it tossing one browser or another into Quirks mode, so I include it only sparingly. Defining the OBJECT Tag There are many great discussions and how-tos on the web that discuss the merits of just about every topic, including the use of the OBJECT tag that is used to insert a Flash animation. So I’m not going to go into that here, I’m simply going to give you an example of how I insert a movie and explain my logic (or lack thereof).

Note: The above code example should not have a hard return in it breaking what was one line into many lines (line 4); this example was allowed to wrap for purposes of presentation, so there you go. Obviously, it will not have actual line numbers when you recreate it. “-)

Line 1:  The only variables on this line are the name of your movie and its dimensions. Do NOT remove the ” (apostrophes) around the name of the movie nor its dimensions; Line 2:  This param (Name) is required for cross-browser compatibility. (Don’t get me started on my IE-is-bad and FF-is-the-IE-of-Geek-Wannabes rant! Good thing I shut off comments here. grin) Anyway, the name you put here must match the name in Line 1. Again, don’t remove the ” (apostrophes);

Note: Lines 1 and 2 replace the old OBJECT/EMBED combo used to address how various browsers have accessed Flash movies in the past.

Line 3:  An optional line; there could actually be more params used than are used in this example, any that are considered valid for the OBJECT tag can be defined as necessary and applicable; Line 4:  This is the line that addresses missing plugins, browsers where animation is shut off and older browsers that can’t do the Flash movie thing. On top of which, it adds a level of accessibility to your movie for visitors using a Text Reader. It’s a work of art. “-) Basically, you need 3 things here….

a) An image to replace your movie. It can be a screen shot of your movie, or an image that informs the viewer they need a plugin to view the movie. To prevent any problems with your page design, you should make this image the same size as the movie; b) A destination URL where your visitors can get the Flash plugin, if necessary. In the example above, I have used the link to the page on the Macromedia site that offers download links for plugins to fit a variety of operating systems and/or browsers. These links change from time to time, so you need to remember to check them every now and then. Another option would be to make this link to a page on your site that then offers a link to Macromedia; if you have a lot of movies on your site, it would be easier to update the link on that page rather than a bunch of static page links. Of course, if you use a dynamic method of site generation, like PHP, this could be a variable so you only have to change a single declaration to impact your site. I’m getting offtopic, right? “-) c) Appropriate ALT and TITLE tags for your page, both for accessibility and clarity.

The implementation of these 3 items is EaSy PeAsY, as debbieT says! Simply wrap the image in an A tag (hyperlink). See? That wasn’t hard at all. Why do it?   When a visitor doesn’t have the Flash player (or has shut off Flash animation) their browser will display the image declared in this line. When they roll their mouse cursor over the image, the TITLE will pop up so they can read your instructions/comments. If they have images shut off, they will also see the ALT tag. Clicking on the image/link will send them to the Macromedia site so they can get the appropriate plugin. Whether you use an image with words (”You need the Flash Player to see my movie!”) or a screen capture of your movie, you need to be sure to use clearly thought out TITLE and ALT text. This is good practice for you for accessibility purposes… they should not be the same, but should work together in some way to describe an object or — in this case — also pass on information. Line 5:  Don’t forget to close the OBJECT tag. Summary Believe it or not, this is all you need! The movie plays or the image is displayed. And best of all, it validates as XHTML 1.0 Strict! Of course, you will have to insert this bit of code into a valid structure… it can be put in a DIV or a P, for instance. Please keep in mind that if you are using Flash MX 2004 and that blasted sniffer publishing method, you will need to fiddle this information a bit. I personally don’t like sniffers, so that’s not an issue for me. What’s that?  You want to know if there is an easy way to gather the info about your movie and the params you normally used? Sure! Simply do the Flash export/publish to HTML thing, then use that as a source of info to create your own OBJECT tag in your page. Slacker’s Rule #472. “-) And that concludes today’s Blah blah, car ride. (What another of daHens — Butzi — calls my “discussions”. hehe) Footnote 1: There are several geniuses who have come up with this stripped down method in the last year and wrote it up on their blogs; this article is not based on their publishing. I was using it long before they “published” and simply put off writing it up for our Flash and Swish classes - not to mention the Build a Website classes - because I am ~The~ Slacker! Just for the record. Footnote 2: This method is not recommended for a gigantic movie without a proper preloader sequence and planning, nor is it the best way to handle streaming Flash animations. For that, there is another trick that is part of the complete Satay Method using a 1×1 empty movie as a sniffer. Footnote 3: Farron’s blog is called Catartis. I only referenced her “other” site above because I wanted to harrass her a bit. hehe. For the record, the other daHens (Butzi, debbieT and Liann - in alphabetical order) are available by link up on the right.

I frequently have scatterbrained ideas, some of which I can bludgeon into working and some not. Early in 2004 I began mulling over the concept of providing my web hosting clients with a very simple method of ‘customizing’ a simple, standards-compliant web template using CSS — without them having to know the first thing about CSS. Working by my usual credo of not ‘recreating the wheel’, I went in search of a script… Open Source or Commercial, either would work. There are a lot of nice packages out there but none were as basic as I wanted. A blog or CMS system is overkill for what I have in mind; its beyond the skill level of my target user to maintain (let alone learn), and therefore more than I want to support. Did I say I will be offering this for free or close-to-free for my hosting clients? What’s a girl to do? Create my own solution! Basically, a simple input form available via the cPanel that will allow them to change some basic CSS styling. Most importantly, it needs to be reallllllly simple… for me! Think: create once and forget about it. Think: require as little effort put into the creation process as possible. Always keeping in mind that I am not a programmer by even the most generous definition… just a fiddler. After sending out all 3 brain cells to find an idea (aka sleeping on it), one brave cell straggled back in with an excited glow… Dynamic CSS! As in “using variables to assign values to attributes”. Oh boy! Surely there is info on the web I can snarf up and use to make this happen. (Snarf being “use to educate myself”.) Well, if there ~is~ I sure couldn’t find it. I’m consider myself the Google Queen, but no matter what I searched I couldn’t find a discussion addressing this topic. What I did find was an old thread somewhere that said “Can’t be done; even if it could it shouldn’t be done [sic]“. Tsk tsk. That’s like putting a piece of raw antelope on the counter and telling my cat to leave it alone. Yeah, that’ll deter her. [It should be noted here that I recently stumbled across an entry on Dunstan's blog that related to using dynamic CSS, but it wasn't exactly from the direction I was considering. It also struck me as too convoluted, which probably means it was way over my head. Youngsters nowadays! I also recently noticed a blog, maybe TextPattern?, that uses variables to declare some styles; again, it isn't doing what I am talking about either, it simply echos some variables as inline styles in the templates.] Simply put, in my mind DYNAMIC CSS is nothing more than PARSEABLE CSS. There are three ways to achieve this goal: 1. Give the CSS stylesheet an .shtml extension; 2. Give the CSS stylesheet a .php extension; 3. Instruct the server to parse files with a .css extension. SHTML Extension A CSS stylesheet given an SHTML extension can contain X/SSI statements (as in “declaring variables” and echoing them in the styles declarations) and/or call includes (as in putting the variable declarations in an external file). If the CSS stylesheet calls an include that file must be given an SHTML extension IF it contains X/SSI statements (for instance, variable declarations). If the file being called does not need to be parsed, it can have whatever extension is applicable to that file. For instance, if you don’t need to hide styles from an older browser you could put an SSI include into this CSS stylesheet and bring in other styles that way. This CSS file serves up properly whether the web page calling it is HTML, SHTML or PHP. PHP Extension A CSS stylesheet given a PHP extension can contain whatever PHP statements you like, though for purposes of simple style changes it would be limited to declaring variables and using them. As with the SHTML version, you can include external files. If the CSS stylesheet calls an include that file must be given a PHP extension IF it contains PHP statements (for instance, variable declarations). If the file being called does not need to be parsed, it can have whatever extension is applicable to that file. For instance, if you don’t need to hide styles from an older browser you could put a PHP include into this CSS stylesheet and bring in other styles that way. This CSS file serves up properly whether the web page calling it is PHP, HTML or SHTML. Parseable CSS By using an AddHandler directive in .htaccess you can tell the server to parse your CSS files just like it does SHTML or PHP files. A Parsed CSS file works exactly as one give an SHTML extension insofar as it can use X/SSI as described above. However, it accepts includes with both an SHTML extension AND a CSS extension in terms of server parsing. Like the other methods of creating dynamic CSS a parsed CSS file is served up properly via HTML, SHTML and PHP files. Pros/Cons Naysayers might claim “This will cause the page to load slowly… think if the drain on the server’s resources… the sky is falling, the sky is falling!”. I think not. If your stylesheet is that large it needs some rethinking anyway! Your site coding probably needs some tightening up, too. The extra characters added to a CSS file to allow the use of variables should not have a deliterious impact on your server or the speed at which your site is served any more than using a full PHP-driven site does. If you server is so overloaded that it ~does~ happen… well, you need a new host. Say… Web-o-Mat.net eh? “-) The one thing I don’t like about the X/SSI version are the empty lines that end up at the top of your CSS file when someone views it in a browser, but that’s a livable drawback to my mind. I do think the more elegant methods are the PHP or Parseable CSS solutions. Unless someone can show me that any of these options really ~do~ cause the sky to fall, I think they all are pretty handy for slapping in some very easy functionality in terms of allowing a non-web coder to change CSS styles on the fly. Not to mention that it opens up some very interesting possibilities for someone who is comfortable with PHP or X/SSI. As I fiddle with this more, I’ll try to remember to post what I’m doing here at Stylehack. At the rate I’m going, that will be in late 2007. (rolling eyes wildly) The remainder of this article is nothing more than 3 exercises demonstrating how to use each of these methods.