Browsers Tutorials

  • File Uploads and C:\fakepath\

    I was recently working on a project that required providing an AJAX uploading widget to users. I decided to use Dojo's dojox.form.FileInput widget so the "Upload" button would look just like every other button within the web application. Everything worked great until I tested the widget in Chrome and found that the value of the input node was being set to C:\fakepath\{Original File Name}. I then checked Internet Explorer and Safari; both of them were prepending "C:\fakepath" to the file name. WTF?!

  • Change Mobile Safari Highlight Color with CSS

    I love the amount of extra customization afforded to us by WebKit. That also makes me love the fact that, for the most part, WebKit Mobile is the choice renderer used by mobile devices. One rarely used style property is -webkit-tap-highlight-color, which allows developers to change the default tap highlight color. Here's how to use it!

  • Remove Input Shadows on iPad

    I was recently tasked with testing an existing web application on the iPad.  I was fairly certain the app would work without issues, but my larger concern was styling.  One undesirable style I found was that all text INPUT elements had a hideous top shadow effect.  After a bit of research, I discovered that the -webkit-appearance property was the key:

  • Introducing LazyLoad 2.0

    While improvements in browsers means more cool APIs for us to play with, it also means we need to maintain existing code.  With Firefox 4's release came news that my MooTools LazyLoad plugin was not intercepting image loading — the images were loading regardless of the plugin, much like it always had with WebKit-based browsers.  Intercepting had continued to work within Internet Explorer but IE's reign of dominance is dying.  Clearly I needed to bite the bullet and code LazyLoad to use custom data- attributes to store the real image path.

  • Managing Firefox Add-ons with Version Updates

    Mozilla has decided to aggressively version and update their Firefox browser, much like Chrome has been, pushing out new major releases every 6 weeks.  I don't care what the version number is as long as the product improves (whether it be Firefox or any other software), but Firefox's internal add-ons compatibility checker does.  A major concern among Firefox users (and probably more importantly, developers) is that with frequent major version updating, add-ons can quickly become incompatible in the browser's eyes if their developers aren't keeping up with the releases.

  • Edge & Mobile Browsers

    From a developer's perspective, the Web is moving faster than ever. Thanks to reinvigorated browser vendors, frequent releases of new mobile devices, and our own need for better APIs and tools, we're seeing loads of movement across each platform. Since browser venders like Mozilla, Chrome, Safari, Internet Explorer, and Opera know we need the ability to test these features on desktop and mobile platforms, they have mostly been helpful in providing edge versions of their browsers. This post will show you what each vendor provides in the way of edge versions, as well as how to get them.

  • Create an Exploding Logo with CSS3 and MooTools or jQuery

    When MooTools contributor and moo4q creator Ryan Florence first showed me his outstanding CSS animation post, I was floored.  His exploding text effect is an amazing example of the power of CSS3 and a dash of JavaScript.   I wanted to implement this effect on my new blog redesign but with a bit more pop, so I wrote some MooTools code to take static image and make it an animated, exploding masterpiece.  Let me show you how I did it, and as a bonus, I'm created a snippet of jQuery that accomplishes the same effect.

  • Conditional CSS with MooTools’ Browser Object

    Whether we want to admit it or not, we all need a bit of browser-specific or even version-specific CSS sometimes.  We try to follow standards but in the end we're at the mercy of browsers.  And you know what?  Browsers sometimes have bugs that cause us these CSS issues.  We all know how to use Internet Explorer's conditional comments but other browsers don't provide those methods.  Using MooTools' Browser object, however, you can modify your page's HTML tag, adding CSS classes to  help create useful conditional CSS for any browser.

  • Create Spinning, Fading Icons with CSS3 and MooTools

    A goal of my latest blog redesign was to practice what I preached a bit more;  add a bit more subtle flair.  One of the ways I accomplished that was by using CSS3 animations to change the display of my profile icons (RSS, GitHub, etc.)  I didn't want to abandon CSS animations completely though;  I added a bit of MooTools to randomize the icon's initial display position and rotation.  Let me show you how to use CSS3 and MooTools to create dymanic, rotating elements.

  • MooTools ScrollSpy, Mobile Devices, JavaScript Scroll Events, and CSS Positioning

    One question I've been asked often is why ScrollSpy and my Go To Top link functionality don't appear to work well on the iPhone, iPad, or any other mobile device.  The problem is simple to identify and easy to fix.  The issue comes down to the way mobile devices view fixed-positioned elements.  Let me explain to you the scenario, problem, and solution to making the "Go To Top" link follow the user as they scroll.