Thing is it doesn’t need to – you’ve rendered it over the background, cap that and cut. If you really worry about the transparency because of the background, you can typically ‘close enough anti-alias’ it., which is to say erase all but a few minor anti-aliasing pixels at the corners and then use palettized transparency.
I’ve never been able to figure out the aim of jquery actually – since most every script I’ve seen that relies on it typically is MORE code than it would take to do something without it, on top of needing a fat bloated library?!? Even when it does result in less code the stuff done in it generally doesn’t run as smoothly or get applied in the proper manner, resulting in MORE cross browser headaches than it could possibly ever solve. (which is why MOST of the stuff people do in it invariably ends up broken in Opera) Even worse, so many people using it forget that javascript should enhance a page’s functionality, not supplant it – resulting in pages that don’t even work when scripting is disabled.
Forget that!
Libraries make a lot of sense in languages that have folding compilers, where unused code is not included in a binary – they make NO SENSE to waste your time on in interpreted or “interpreted being called a virtual machine” languages like BASIC, PHP, JAVASCRIPT, PERL or JAVA where they do NOTHING but add overhead… it makes even LESS sense when you figure bandwidth restrictions into the mix.
It’s like that “prototype” nonsense which just adds bloat, overhead and makes the code needlessly cryptic – yeah that’s such and improvement. After three decades of writing software it’s really depressing for me to see people making the same mistakes over and over and over and over again.
Basically as a friend who passed away some 14 months ago used to say, the only thing you can learn from jQuery is how NOT to write javascript. Libraries and frameworks for web development, be it Javascript or CSS are nothing more than sleazy shortcuts that result in fat bloated pages that don’t work right! JQuery, Mootools, prototype, blueprint, grid960 – forget those even exist, and your sites will be all the better for it.
Ah, mcSwitchy.
But why add/switch and entire stylesheet?!? Swap one class on body or your outermost wrapper, that way you don’t have the load delay of the extra file. It would also work better if you manually run the script right before </body> instead of waiting for onload, as then large screen users won’t see one layout, then have it “jump” a few seconds later when the second sheet is loaded… Also it helps to trap whether or not the element has actually chaged, as forcing the change on every resize (which includes the other axis) can result in really bogging down people’s machines.
Though this is an excellent example of what’s “wrong” with using jquery. How I’d approach it does end up a hair more code (oh noes, not 200 bytes) but it’s WAY clearer what’s going on, and it doesn’t need some stupid 90+K library to function… and would load/run smoother.
var quickSwitchyLastX=0;
function quickSwitchy() {
var x=document.body.clientWidth;
if (x!=switchyLastWidth) {
quickSwitchyLastX=x;
if (x>1001) {
document.body.className="wide";
} else {
document.body.className="narrow";
}
}
}
function quickSwitchyInit() {
quickSwitchy();
if (window.addEventListener){
window.addEventListener('resize',quickSwitchy,false);
} else if (window.attachEvent){
window.attachEvent('onresize',quickSwitchy);
} else {
window.onresize=quickSwitchy;
}
}
and manually initialize it before </body> thus
<script type="text/javascript><!--
quickSwitchyInit();
</script>
Which should run it before CSS is applied to the page. I would also put class=“narrow” on body so when javascript is not present the user gets the narrow layout.
Of course looking at what your stylesheet is doing, I’d probably axe that and just use min/max-width instead with an expression for legacy IE.
I would avoid using it altogether, and avoid scripting on the page as much as possible… Too many perfectly good websites are being flushed down the toilet by “scripting for nothing” – resulting in high bounce rates as more and more users go “to blazes with this, I’ll visit some other site that actually WORKS”.
AJAX for nothing and your scripts for free… that ain’t working, and that’s not how you do it… I want my, I want my, I want my PHP…
… and even if scratching the things it can give you ends up a little more work, that’s why it’s called work and not “happy happy fun time” 
Because the vast majority of people moving to it never embraced much less understood the point of STRICT in the first place, and are the people who still vomit up HTML 3.2 then slap a tranny doctype on it. I cannot understand the appeal of HTML5 as it offers little we cannot already do if one bothers to understand the point and use of the existing tags with the possible exception of one or two form elements – and worse it undoes all the good coding habits we’ve FINALLY gotten people to start using. It’s such a hodge-podge of redundancies slapped together any old way I can’t believe any experienced developer is dumb enough to want to use it in the first place!
Which is probably why the other target audience for it are nubes who don’t know any better.
Which is meaninless when IE9 won’t even be available to the majority of users since it’s Vista/7 only… also meaningless when most people stuck in corporate environments are stuck on IE6 with NO PLANS to migrate any time in the future since they’re stuck with in-house crapplets that don’t work if any newer IE is so much as INSTALLED on their machine. Then you have windows mobile, where IE6 is the new kid on the block as of two years ago, with win mobile devices more than two years old still having IE 5.5 on them… Yes, you heard me right, IE 6 is the NEWEST IE available for Win mobile! What, miss the “six on six” party two years ago? That’s ok, so did everyone else.
Though a lot of it just comes down to this attitude of trying to force the user to change just for something flashy and new – which is most of what’s wrong with the current attitude of developers. I find no legitimate reason to even TRY using HTML5 on production pages at this time. It’s in DRAFT which means it’s for TESTING and REVISION… That’s the difference between DRAFT and RECOMMENDATION - it is NOT “recommended for use”.
But not ready for real world use. It’s fun to play with to see what we might be able to use SOMEDAY, but when the majority of it is stupid nonsense like borders (oh noes, I might need an extra 2k of code and images!) or layout elements that make floats seem simple – not exactly blowing my skirt up…
Kinda funny in a way, I’m rabidly anti-bloat, but even I don’t take it to that extreme… funny how CSS3 fights bloat and HTML 5 seems to exist for the sole purpose of putting it back in.
Take idiocy like the HEADER element or NAV… serve NO legitimate purpose if people just learned to use heading tags properly or bothers SHOCK to implement accesskeys and jumpto menus. (which actually work in the here and now!)
because NOTHING actually uses them, making them 100% pointless bloat. The only legitimate META’s there are the DESCRIPTION and charset, and it would help to have TYPES on the META’s (though that’s just more HTML 5 idiocy where they want us to guess by removing versioning, typing, and all the other things that make code clearer)
It’s being sent to everyone else for whom it means jack. Browser specific targeting in the markup is bad practice and one step removed from browser sniffing. Anyone tells you otherwise they’re packing you so full of sand you could change your name to Sahara. If you were writing the page properly using the RECOMMENDED specifications, it shouldn’t even make a difference chrome/non-chrome all the way back to IE 5.5 in most cases.
They don’t even exist in IE8/earlier, and even when IE9 comes out you are not going to see widespread adoption… until IE8 and lower passes below the number of people using Opera, it’s really stupid to use HTML 5 or CSS3 unless it’s the handful of CSS3 elements that have existed in IE since version 5.0 (like word-break)
Yup, it’s presentation, makes no sense when CSS is disabled, so it doesn’t belong in the HTML.
PNG is not a valid “shortcut icon” type in IE, even IE9’s not changing that… it’s not a valid size being needlessly large (since most UA’s only use 16x16) nor can it include multiple sizes. You should be using an ICO format file.
You should also avoid using really large .png for the apple shortcut icon, given how little RAM handhelds have for dealing with images. Your 320x320 truecolor .png takes half a megabyte to decode – that’s bigger than the video ram in an iPod Touch/iPhone – welcome to dragging those systems to a crawl. (and being they’re the only legitimate targets for “apple-touch-icon”…)
Basically all the stuff I’m saying would let one create the same page and have it work just fine all the way back to IE 5.5 for little or no extra effort while possibly making the code smaller… Which makes the entire HTML 5 nonsense seem really pointless.
My markup (I write my complete markup typically before I even THINK about layout or images) for that content would probably look something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<meta
name="description"
content="For all your Lymm birding needs"
/>
<meta
name="keywords"
content="birds, birding, lymm, ornithology, migrations"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<link
rel="shortcut icon"
href="img/favicon.png"
/>
<link
rel="apple-touch-icon"
href="img/apple-touch-icon.png"
/>
<title>
Lymm Ornithology Group
</title>
</head><body>
<div id="pageWrapper">
<h1>
Lymm Ornithology Group<br />
<small>All you need for birding know-how in Lymm</small>
</h1>
<ul id="mainMenu">
<li><a href="index.php">Home</a></li>
<li><a href="meetings.php">Events</a></li>
<li><a href="newsletter.php">Newsletters & Trip Reports</a></li>
<!--<li><a href="#">Trips</a></li>-->
<!--<li><a href="#">Reports</a></li>-->
<!--<li><a href="comittee.php">Comittee</a></li>-->
<li><a href="contact.php">Contact</a></li>
</ul>
<div id="content">
<div class="borderTop"><div></div></div>
<div class="borderFirstSide"><div class="borderSecondSide">
<h2>Welcome...</h2>
<img
src="img/frontpage_image.jpg"
alt="Waxwings seen on 8th December 2010 in Little Leigh"
class="leadingPlate"
/>
<p>
The <b>Lymm Ornithology Group</b> was founded in 1975 to promote the interests of bird-watching in the local area. It has grown into a thriving group not only concerned with birds but also many other aspects of nature. Birds take preference in winter and during the spring and autumn migrations, but flowers come to the fore in the warmer months of summer.
</p><p>
The group consists of members young and old from all walks of life who encompass the whole range of knowledge from beginner to 'expert' with enjoyment of the countryside taking priority over scientific knowledge. A varied programme of field trips are organised each year and normally consists of a number of day trips and two larger weekend excursions. The day trips usually fall on a Sunday, but occasionally a Saturday is chosen for a botanical field meeting in the summer. The weekend trips prove especially popular not only because of the prime bird-watching sites we visit but also because of the socialising in the evenings. Monthly indoor meetings are held the last friday in the month from August to the following May, commencing at 8pm at the Village Hall. We invite guest speakers to give talks and slide shows on varied subjects of interest.
</p><p>
Why not come and join us for the evening?
</p>
<!-- .borderSecondSide,.borderFirstSide --></div></div>
<div class="borderBottom"><div></div></div>
<!-- #content --></div>
<div id="footer">
© 2010 Lymm Ornithology Group |
Website design by <a href="mailto:rctneil@aol.com">Neil Tonge</a>
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body></html>
The ‘.border’ DIVs being there to implement those rounded corners and dropshadows without CSS3. Even with those, comments to make the closing of tags clearer, and the addition of a keywords meta it’s really no more or less markup than your original.
If I have time later I’ll toss together how I’d approach the rest of that page…