Display Caps Lock Warning in Most Browsers : A script that adds WebKit-like notification inside the password field when the caps lock is enabled, in a progressive-enhancement kind of way. It’s not a lightweight script (about 170 lines) and James Edwards doesn’t clearly state which browsers currently support it. … Read the rest here
CSS3 Generator : Handy tool that spits out the syntax and associated vendor-prefixed CSS3 for properties like border-radius, box-shadow, multi-column layout and more. Especially helpful are the supported browsers icons with pop-up version numbers for each property. … Read the rest here
I’m probably way behind the curve on this one, but I recently realized the following: All browsers that support the CSS text-shadow and box-shadow properties also support the new CSS3 RGBa syntax. Which means you can safely combine them today. That’s handy, because it means no worrying about matching a precise hex colour shadow to a specific hex colour background. Instead just let the browser blend. An example: p { text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0; } That will produce a paragraph with a 20% opacity black drop shadow that will blend into any background colour below it. … Read the rest here
Last night I presented a 5 minute microslot on CSS Filters – excluding older versions of IE from seeing your CSS , and feeding extra styles to specific versions of IE and mobile browsers. The slides (with presenter notes) are now available to download from the new Speaking section. Comment on this … Read the rest here
How to Make Web Content Look Stunning on iPhone 4’s Retina Display : Aral Balkan’s tutorial includes a number of helpful resources, as well as a petition to browser vendors: I’d like to suggest that browsers adopt the same naming convention that Cocoa Touch uses to find and load high-DPI versions of image and video assets. That is, if I embed an image using the following code… … it should load in flower.jpg when the device-pixel-ratio is 1 but it should attempt to find an image called flower@2x.jpg at the same relative path if device-pixel-ratio is 2 (and so on, for higher pixel-ratios), falling back to the original graphic if it can’t find a high-resolution version. … Read the rest here
I’ll be doing a 5 minute microslot on CSS filters at the next Oxford Geek Night on July 21st. CSS filters is the practice of linking to your stylesheets in different ways in order to control how different browsers and their versions get your CSS . It’s something I get quite a lot of questions about when people look at my source code, so I thought I’d explain it via a presentation! The OGN microslot is the ideal format for it. If you live nearish to Oxford, and haven’t been to Geek Night yet, do come and see what you’re missing. It’s a free event (sponsored by local gents/superstars Torchbox ) in the Jericho Tavern in Oxford… Read the rest here
You thought our long nightmare of PNG alpha transparency support was finally over as of IE7, didn’t you? Yeah, me too. Over the past few months I’ve been collaborating with Chris Glass on the newly-launched Joyent site. (When someone comes to you and says, hey, we have Chris Glass helping us out with this project and we’d like the two of you to work together, you jump at that chance.) I was tossing around ideas for building an interactive infographic Chris had designed, and thought of at least four different ways of pulling it off. We’re reaching this interesting point with front end web technology where we now have actual choices besides Flash for jobs like this… Read the rest here
Following on my “HTML5 vs. Flash” talk of a couple of weeks ago, I’m hoping to do a bit of blogging about HTML5, Flash, mobile apps, and more. But first I need to get some terminology straight. As I did in my talk, I’m going to refer to the collection of front-end web-standards technologies—(X)HTML (of any flavor), CSS, and JavaScript—as “the web stack”. I’ve seen the term used here and there and it makes the most sense to me as a condensed verbal shorthand. It beats writing out the specific technologies every time or trying to use similarly clumsy constructions like “front-end tech”. … Read the rest here
Flash vs. et al: Filling In the Gaps : Jonathan Snook: These new [HTML5] features do negate some of the need to use Flash; however, I’m reluctant to think that these few features will be the death of Flash. There are simply too many use cases out there for which HTML5 does not serve. Hulu’s reluctance to embrace HTML5 is very much case in point. Chat Roulette would be another. Or tinychat … Read the rest here
Every so often I’ll read something on the web that somebody else has written and I’ll think Yes! That! That’s what I’ve been trying to say! I’ve already told of experiencing just that whilst reading Raiding Eternity . Now I’ve experienced it again. This time the culprit is Ben Ward , the talented bastard. He reeled me in with the synopsis of his latest article. It’s called Understand The Web : Perceptions of the web are changing. People are advocating that we treat the web like another application framework. … Read the rest here
Forcing HTML5 ‘details’ Support Using jQuery : The details element, as explained by the W3C , is designed to be a “disclosure widget from which the user can obtain additional information or controls.” Think of the +/- control in Windows or the right/down arrows in Mac OS. (Check the demo page and you’ll see what I mean.) This script by Mathias Bynens allows you to use the element with jQuery forcing support for those browsers that don’t yet natively support details . According to Mathias, currently no browsers natively support the element. … Read the rest here
Have you heard of Hundred Pushups ? It’s a simple six-week program to build up your strength by slowly increasing the number of pushups you can complete. By the end of six weeks, you should be able to complete 100 and along the way you’ve gotten a short workout working multiple muscle groups. Since I’m still trying to lose weight , I figured I’d get started on the program (yesterday was my first day and managed to do 12 pushups at the end of my first set). However, being the geek that I am, I thought, "I should track my progress with a cool iPhone app." There is one available for $1.99 from the Hundred Pushups web site. … Read the rest here
HTML forms have been, to date, quite simplistic. We’ve had limited options: the text field, the checkbox, the radio button, the textarea and finally the select drop down. Any complex data like phone numbers, email addresses or dates had to be checked by JavaScript. (And you should always and I mean always do server-side validation of the data.) The input element works overtime by being rendered completely differently based on the type it’s given—be that a text field, password, checkbox, radio button, and others. Considering my readership, this is all terribly old and boring to you now. I understand… Read the rest here
Leave it to PPK to come out with a bold statement like, " CSS vendor prefixes considered harmful ". Moreso, It’s time to abolish all vendor prefixes. They’ve become solutions for which there is no problem, and they are actively harming web standards. The problem is that they are necessary. Look at Safari’s implementation of border-radius compared to the rest. I still can’t remember if it’s border-radius-topleft or border-top-left-radius . … Read the rest here
html5media Script Renders in Any Browser : As you’re probably aware, the element isn’t natively supported by all browsers (yet). This was the only missing piece in my attempt to make the Colosseo site fully HTML5, and it meant embedding the “making of” video via Vimeo (Flash) rather than storing it server-side and using something like the SublimeVideo player for playback. Dave Hall’s html5media script is a transitional solution that allows you to use in your markup, and browsers that don’t yet support it will be fed a Flash-based player. /via Daring Fireball … Read the rest here
It’s been said before that web inspectors—Firebug, Dragonfly, the inspectors in Safari and Chrome, and so forth—are not always entirely accurate. A less charitable characterization is that they lie to us, but that’s not exactly right. The real truth is that web inspectors repeat to us the lies they are told, which are the same lies we can be told to our faces if we ask directly. Here’s how I know this to be so: body {font-size: medium;} Just that. Apply it to a test page . Inspect the body element in any web inspector you care to fire up. … Read the rest here
Monospace text sizing is, from time to time, completely unintuitive and can be quite maddening if you don’t look at it in exactly the right way. Fortunately, there is a pretty simple workaround, and it’s one you might want to consider using even if you weren’t aware that a problem existed. But first, allow me to lay some foundations. Assuming no other author styles beyond the ones shown, consider the following: span {font-family: monospace;} <p>This is a ‘p’ with a <span>’span’</span> inside.</p> All right, what should be the computed font-size of the span element? Remember, there are no other author styles being applied. … Read the rest here
Monospace text sizing is, from time to time, completely unintuitive and can be quite maddening if you don’t look at it in exactly the right way. Fortunately, there is a pretty simple workaround, and it’s one you might want to consider using even if you weren’t aware that a problem existed. But first, allow me to lay some foundations. Assuming no other author styles beyond the ones shown, consider the following: span {font-family: monospace;} <p>This is a ‘p’ with a <span>’span’</span> inside.</p> All right, what should be the computed font-size of the span element? Remember, there are no other author styles being applied. … Read the rest here
CSS3 features are making their way into the various browsers and while many are holding off on implementing them, there are those who are venturing ahead and likely running into a world of interesting quirks across the various platforms. Two such features that I have been having the pleasure of enjoying are the use of multiple backgrounds and CSS gradients. I’m covering both features because multiple backgrounds by itself is simple enough, as are CSS gradients, but combining the two is where things get interesting. Multiple Backgrounds What are multiple backgrounds when it comes to CSS? I mean the ability to define more than one background image for a single element. That sounds wonderful, doesn’t it… Read the rest here
I was recently honored to be asked to be a judge for the MIX 10k Smart Coding Challenge , running in conjunction with Microsoft’s MIX conference . The idea is to create a really great web application that totals no more than 10KB in its unzipped state. Why did I agree to participate? As much as I’d like to say “ fat sacks of cash “, that wasn’t it at all. (Mostly due to the distinct lack of cash, sacked or otherwise. Sad face.) The contest’s entry requirements actually say it for me. … Read the rest here
