Detect browser support for CSS properties

Tuesday, September 22, 2009

Adding shadows or rounded corners to any element is way more trouble than it should be, especially if you're tried out some of the newer CSS3 properties. A simple two lines of CSS can get you these amazingly gorgeous effects, but as expected they aren't supported in every browser (I'm looking at you Internet Explorer!)

Some older versions of browsers that do support these features don't use the official W3C method and you have you use a vendor specific CSS property,like so:

#coolElement{
    box-shadow:#000 3px 3px 8px;
    -moz-box-shadow:#000 3px 3px 8px;
    -webkit-box-shadow:#000 3px 3px 8px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

So, that of course won't work in IE, and if you want to have rounded corners or shadows on IE you have to make some custom PNG images and align everything properly. It's a lot of work, but it must be done if you want it to look consistent across all browsers. I realized today that ideally I want to do both, meaning that I want to use the pure CSS method when it's available in the browser, and the old clunky way otherwise.

Sure I could just see what works in each browser and only allow certain versions of browsers, but I'd always have to come back and update that list as future browsers add support for these things. Instead, why not test and see if the browser supports these features first, and then decide what to do.

function supportsBoxShadow(){
  var s=document.body.style;
  return s.WebkitBoxShadow!== undefined||s.MozBoxShadow!==undefined||s.BoxShadow!==undefined;
}
function supportsBoderRadius(){
  var s=document.body.style;
  return s.WebkitBorderRadius!== undefined||s.MozBorderRadius!==undefined||s.BorderRadius!==undefined;
}

Those functions will return true if the CSS property is supported in the browser, and not just the W3C property, but the vendor specific property as well. If there's some other property you want to test, follow the same pattern and just use CamelCase and remove the hyphens.

So putting this into practice is pretty simple, assuming we use the CSS property defined above.

if(supportsBoxShadow()){
    //Woo! We don't have to do anything! CSS does all the work!
}else{
    //Write your complex code here to position your PNG shadows.... :(
}

Comparing jQuery objects

Tuesday, July 21, 2009

Just wanted to post a quick blog update with a cool jQuery trick I’ve been using recently. Every now and then I need to compare one jQuery object to another but a simple $(this) == someObject doesn’t do anything. As it turns out jQuery objects are actually stored internally as an array and you can’t just directly compare arrays.

So with that in mind, the easiest and quickest solution is to just access the items in the array and compare those instead. Luckily the very first item in the jQuery array is all we need here, so to access it you simply need to put in square brackets the array item number you want like so: $(this)[0]. So check out the code example below.

<div id="nav">
    <a href="#">link 1</a>
    <a href="#">link 2</a>
    <a href="#">link 3</a>
    <a href="#">link 4</a>
</div>

<script type="text'javascript">
$(
    allItems = $("#nav a");  
    secondItem = $("#nav a:nth-child(2)");

    //loop through each item in this jQuery collection
    allItems.each(function(){
        //Compare the current jQuery object with the saved jQuery object
        //by accessing the first item in the array of each object.
        if($(this)[0] == secondItem[0]){
            //we are on the second item! Give it a red background
            $(this).css("background-color","red");
        }
    });
});
</script>

   

Guessr - A Flickr Game!

Tuesday, April 14, 2009

So, I wrote a game! It's something I've been wanting to do and had the idea for a while now. The premise of the game is that a random word is selected, a search of Flickr.com is performed with that word and you see the images from that search. Now you have 30 seconds to guess what that word is!

The game is entirely written in javascript/jQuery and is completely themable with jQuery UI. I wrote the majority of it in one afternoon, and made some updates the following week based on some great feedback from friends on Twitter and just some better usability ideas I had.

Take a shot at it and let me know what you think. I hope to find the time soon to make even more improvements to the game.

Play Guessr!

Mix ’09 Session Videos

Sunday, March 29, 2009

I just got back from the Mix '09 conference in Las Vegas, and it was so much better than I expected! For being a Microsoft sponsored conference mostly focusing on .NET and other MS technologies, there was about 50% Mac users there and most of these people were designers. It was a really nice mix (haha?) of designers and developers. I've got some photos from my trip up here on Flickr.

I think one of the best things they do is put up ALL the session videos online for free! There's some really valuable information in these! http://videos.visitmix.com/MIX09 (also you can view past years MIX sessions at http://videos.visitmix.com )

Here's some highlights I'm going to recommend:

• Web Form Design - absolutely one of the best sessions I attended. Watch this video! He talks about why forms suck and what we as designers can do to help the process along. Very very well done and extremely informative. As soon as this session was over I went and bought the speakers book.
• The Way of the Whiteboard: Persuading with Pictures - Anotehr great session, but not necessarily directly related to web design. It's on how to get ideas out of your head and communicate them properly to people via a whiteboard of napkin.
• Measuring Social Media Marketing - If you or your company does any kind of social media marketing, this is a great one.

The following sessions I did not attend, but they seem great:

• Copyright Law for Web Designers and Developers
• Wireframes That Work: Designing (Rich Internet) Applications
• Using Total Experience Design to Transform the Digital Building
• Go Beyond Best Practices: Evolving Next Practices to Prosper in the 21st Century
• Design Prototyping: Bringing Wireframes to Life

And finally, for any other ASP.NET or Visual Studio users, These are somre great previews of what's coming soon!

• Web Development Using Microsoft Visual Studio: Now and in the Future - A preview build of Visual Studio 2010 is shown. Looks amazing!
• Microsoft ASP.NET 4.0 : What's Next? - awesome new features is ASP.NET 4
Posted by Chris Barr on 03/29 at 09:34 AM
Filed under Design, Web, Code, Javascript, ASP, MIX '09, Productivity, Tech • 0 Comments • Permanent link

MIX ’09 Days 2 & 3

Friday, March 20, 2009

Wow, this conference has been a lot more involved than I initially thought, and I haven't been able to do the daily blog post that I was hoping to. My initial impression was that I would go back to my hotel around 5, and then be able to chill out and browse the web and write my blog posts. It turns out there’s a lot of great optional Mix ’09 related stuff to do after the official ending time, plus my hotel has no web access!

Day 2

Day 2 opened with an awesome keynote presentation. They really had the atmosphere down to get everyone pumped up. While we waited for the keynote to begin, they had a cool app called running on the big screens which grabbed tweets and Flickr photos tagged with “MIX09" and they all dropped in like tetris blocks. Also, some sweet tunes by the DJ.

Finally they keynote began with a great speech by Bill Buxton where he talked about how important good design is. This was followed up by Scott Guthrie making announcements about ASP.NET 4.0, Visual Studio 2010, and Silverlight 3. All of which I am thoroughly impressed with.

People from Netlix, NBC, Stack Overflow, Vertigo, and a few others came up and talked about how they use all this technology. I will have to say the most interesting part for me was when the VP of Netflix came up and demoed how their Sliverlight player works with bandwidth throttling and al they debug information. You can watch the entire keynote online here.

Right after this we attended sessions about what’s new in ASP.NET 4.0 and Visual Studio 2010. I’m very excited about the changes coming to both of these technologies. Most notable (for me anyway) in ASP.NET 4.0 is better control over viewstate, and the ability to control client ID’s that get rendered out! You can watch this entire presentation online as well.

Jeff King (Program Manager for Visual Studio) presented on what was new in Visual Studio 2010, and there’s so many great changes! Most notably are big speed improvements and a complete interface overhaul. Check out the picture below, it’s a word cloud of the most typed things in Visual Studio. Larger items are typed more frequently. They’ve come up with some great ways to resolve this by adding in custom code snippets. You just type the word “listview" (or “lvw", or whatever you define) and it puts all the code that you need or a listview out there!

Later that night there was a party at an amazing club called Tao. Free drinks and nerds everywhere! We met up with Jeff King (Program Manager for Visual Studio) and Juan Rivera (who’s writing full PHP support for Visual Studio) and got to pick their brains about what they do, the future of Visual Studio, programing conventions, and all kinds of cool stuff. Overall, we had a great time talking with them.

(not my photo)

Then the party moved up to a section of Tao called Tao Beach, which turned out to be on the freaking roof of the Venitian hotel! It was just like you see in the movies, amazing! We met up with Jarrod and Geoff from Stack Overflow, just hung out and talked for a while.

(not my photos)

Day 3

Day 3 opened with another keynote, which we dicided to skip; and this turned out to be a good idea. The only big announcement was that Internet Explorer 8 was released and now available for download. We heard a lot of that that it was a pretty boring presentation other than that.

More sessions with some great content, and some that were just ok. Around lunchtime they had a small Q&A with Scott Guthrie moderated by Scott Hanselman. This seemed to be mostly focused on Silverlight, but it was still a pretty cool thing to attend. Plus, I got a picture with him!

Afterwards, Scott Hanselman hosted a session about how he built NerdDinner.com using ASP.NET MVC. I learned a lot about MVC, which looks great, and Scott presented all the information really well. That was my first time hearing him speak, and he’s really got a way of communicating well with the audience.

Later that night we went to check out a session where Mix ’09 attendees could show off past work they had made. We got there late, but it was still interesting for what we saw. After that we were able to just walk around the city and take some photos.

MIX ’09 - Day 1

Wednesday, March 18, 2009

Well, my first day is finally coming to an end as I write this post - a really great first day considering how this first looked as I got here...

My flight out of Pensacola was delayed by 2 hours, but I was lucky enough to still make my connection in Atlanta to Vegas. My luggage however, was not so lucky. I had to go back to the hotel that night with only my laptop and camera. No change of clothes, no toothpaste, and being forced to sleep in my contacts. Thank God my bag was brought in on the next flight from Atlanta, so I was able to get it delivered.

Diego and I got up early, took a brief walk around the Venetian for a quick errand. Also, our hotel has no 13th floor.

Initial impression about MIX were not good. Very little signage and no directions. We got the general idea of where the conference might be, but no specific information. Then it occurred to me, what else should I expect from Microsoft organizing a conference? Once you figure it all out, you’re good to go - but that initial learning of where everything is located was the hard part.

First things first - breakfast and then check Twitter. There’s no wifi at the hotel, but there’s gigantic 8 foot wifi repeaters for the conference - making sure you can be connected from anywhere. Very nice touch. Not to mention, the food provided here is stellar!

On to registration, and then our first workshop entitled “Design Fundamentals for Developers” presented by Robby Ingebretsen. Robby did a great job - really well organized slides and information - i took notes until my laptop battery died - which reminds me, i need to take notes by a plug next time...

This workshop was not at all what I expected, and it turned out to be very informative - I feel like I learned plenty right there. I was expecting it to be somewhat technical since it was aimed at developers, but it was quite the opposite, very abstract and all about what art and design is. No code at all. Snacks and drinks provided of course.

haha? Apple juice on a Windows napkin!

Some big points I took away from this workshop:

• The opposite of design is not no design, it’s bad design! The very act of creating anything at all implies a design and therefore must be considered.
• Coding has exact answers to problems, design does not.
• Design has ponies and babies. Everyone loves babies and won’t let go of them, even if they aren’t right for a project. Everyone wants a pony, but you can’t always have them and they may not be practical. A good designer will be able to let go of their babies and let others know they can’t have a pony.
• The triumph of design is when the complex seems simple
• Gradients != design

I also noticed the presenter was presenting from a Mac, and there were way more Macs here than I thought I would see at a mostly Microsoft event.

Next, it’s lunchtime! Again, absolutely amazing meals provided. Veal, ravioli, green tomatoes, potato salad, and an incredible line of deserts.

Off to the next workshop, which started out OK, but we decided to leave after the first hour. The presentation and information provided was not nearly as good as the first one.

I did have a few take-away points here though: Designers tend to design projects for the “10 second wow” - meaning you are immediately impressed visually, but may not come back later for real information (think of any “flash” site you’ve ever seen). Developers tend to make projects that don’t really appeal to you at first, but after a while you learn to like the information and function - the “10 minute wow” (think of Twitter - ever tried to explain it to a new user?). A balance between these is needed.

As you move down the chart from designer to developer, you can compare each step to a character from Lord of the Rings. Also notice how the amount of facial hair increases in a logarithmic fashion.

After this, some other guy got up to speak about Silverlight and how to pay attention to details in your project and he really lost our interest. Not well organized, not prepared, and he started to get technical on some things we weren’t familiar with.

He also really turned me off to wanting to ever use Silverlight. One thing he kept talking about was how hard it is to get text to look good in his Silverlight apps. His solution? Duplicate every single text element, offset it by 1 pixel, and lower the opacity. Thus creating a fake anti-aliased effect. LAME!

That’s the point when we decided to leave and pick out sessions for the rest of the week. I got back on the Twitter, both posting and checking out what was happening on the #MIX09 hashtag. I noticed a picture from @jarrod_dixon that looked like it was only about 10 feet offset to the right of where I was sitting. I sent him a tweet just to say hi - then Diego and I got up to do it for real.

As it turned out, we met two cool people named Jared and Geoff who do a lot of the work for Stack Overflow (A site I use and love, and will now use more)! We had a long talk about code, Vegas, what they do, what we do, photography, etc. I’m very glad we got to meet them.

Microsoft Surface was also here! I’ve been wanting to sit down and play with one of these things since it was first announced! Very very cool technology that I hope comes way down in price and becomes more common.

Overall, the screen is not as high of a resolution as I had first imagined, and it can actually be quite laggy at times depending on what you’re doing - but it runs on some fairly meager hardware (mid range Core2 Duo and an average ATI card), so I can understand that. But for $15,000 I thought it would be top notch hardware in there.

The surface itself is not made of smooth glass as I imagined, it’s actually a diffuse textured plastic, but very easy to slide your hand around on as well. Talking to the Microsoft Reps there, it’s just running Vista under the hood and these are just special Surface apps. with in Visual Studio with WPF.

There’s and entire fully lit stage for Rock band - and there’s a tournament tomorrow. That should be fun to watch!

We were all given the schwag bag of course which mostly contained a bunch of crappy ads, but also had some great stuff in there as well. T-shirt, book, notepad, a sharepoint water bottle and an IE8 coffee thing. I might slip off the IE8 logo and use it that way.

That was a busy day! After some dinner, I walked around a bit at night and snapped some photos. I want to try and do this every night that I’m here.

MIXed up in Las Vegas

Thursday, March 12, 2009

Once a year my company, AppRiver, allows me to attend one work related conference and my for first year working here I’ll be attending MIX ‘09 in Las Vegas!  Until recently, this wasn’t even a conference I’ve heard of, so don’t worry if you haven’t heard of it before either.  Mix is an annual conference for web designers and developers with a heavy focus on Microsoft technologies (also sponsored by Microsoft).

So, I’m headed out to Vegas on Monday the 16th and expect to learn a lot and have a blast doing so for about a week.  I’m scheduled for a few different sessions that I’m excited about attending, and there’s tons and tons of sessions to attend. Need I even mention this all takes place in Las Vegas?  I took a trip out there about 3 years ago with my dad and had a blast, so I fully expect to have a great time when I’m not doing web related stuff.  I know the grand canyon and the Hoover Dam are fairly close, and it would just be a dream come true to see either one of these (or both!).

I’ll hopefully be fully armed with my laptop and camera where ever I go, and a goal I’m going to try and set for myself is to do a daily photo-blog of what’s going on at the conference and anything else I can take pictures of.  It’s my first conference and I’m usually pretty trigger happy, so expect lots of photos.

More info about Mix here: http://2009.visitmix.com

Finding Unused CSS Rules

Wednesday, March 04, 2009

The other day I ran across a very useful article about the $$ selector in Firebug for Javascript and how to use it to loop through your stylesheets to find unused CSS styles. Very cool. The original code snippet would output everything to the firebug console, which I found to be useless on larger sites because I would hit Firebug's limit too often.

I modified it a bit to output the CSS to the actual site instead inside a styled element. So to use this on your own site, just copy and paste the code below into Firebug's console and hit run.

//Create a styled place to output styles to
var output = document.createElement('pre');
output.setAttribute("id","unusedCSSstyles");
output.setAttribute("style","height:95%; overflow:auto; text-align:left; background:#000000; border:2px outset #00CC33; color:#00CC33; opacity:0.9; padding:3px; position:fixed !important; left:5px; top:20px; width:95%; z-index:9998; font-size:12px;");

//create a styled close button
var closeBtn = document.createElement('a');
closeBtn.setAttribute("id","cssCloseBtn");
closeBtn.setAttribute("href","#");
closeBtn.setAttribute("onclick","document.body.removeChild(document.getElementById('unusedCSSstyles')); document.body.removeChild(document.getElementById('cssCloseBtn')); return false;");
closeBtn.setAttribute("style","position:fixed !important; left:2; top:0; z-index:9999; color:red; font-size:16px; padding:3px 20px; background-color:#000000; border:1px solid #FFF;");
closeBtn.innerHTML="close";

//add button and output element to body
document.body.appendChild(closeBtn);
document.body.appendChild(output);

//Find each stylesheet
for(var i = 0; i < document.styleSheets.length; i++) {
//write the filename to output element
output.innerHTML+="<br /><h3>"+document.styleSheets[i].href+"</h3>";
//find CSS rules
  for (var j = 0; j < document.styleSheets[i].cssRules.length; j++) {
    s = document.styleSheets[i].cssRules[j].selectorText;
    //write unused CSS rules to output element
    if ($$(s).length === 0) output.innerHTML+="<strong>["+j+"]</strong> "+s+"<br />";
  }
}

Do note that this has a few limitations:

• It cannot find stylesheets from another domain or subdomains
• It cannot find inline styles or the <style> tags anywhere
• It will not work on sites that use Mootools since it also uses the $$ selector. (this site does, so don't try it here!)

If you're really serious about finding what CSS styles you haven't used on your site, you might want to check out a Firefox plugin called Dust Me Selectors

Radiohead Box Set = Awesome

Thursday, February 19, 2009

Recently I discovered woot.com, they sell one product a day and only have a limited supply - so demand is usually high and the sell out fast! I was up late one night last week and saw they had a seven-album Radiohead box set for only $45! With Radiohead being my all time favorite band, I had to spring for this. For those less fortunate, you can still pick up the Radiohead Box Set on Amazon.

The box set itself is just plain gorgeous, not to mention the art on each of the seven albums and their respective booklets. I took some photos, click though for a larger version.

Disable Text Selection With jQuery

Saturday, February 07, 2009

I was recently working on an interface where there would be a log of dragging, scrolling and clicking - an unfortunate side effect of these type of things is that the user may sometimes unintentionally select text. Which this doesn't break anything, it just looks bad can ruin the smooth experience you are trying to present the user with. It turns out that every browser has either some kind of hidden CSS or javascript function to prevent text selection.

I searched around and eventually came across this page on James Dempster's site. He wrote a simple jQuery plugin to turn off text selection only for the elements you specify. His plugin works just fine, but I believe it can be simplified. Below is my version.

$(function(){
	$.extend($.fn.disableTextSelect = function() {
		return this.each(function(){
			if($.browser.mozilla){//Firefox
				$(this).css('MozUserSelect','none');
			}else if($.browser.msie){//IE
				$(this).bind('selectstart',function(){return false;});
			}else{//Opera, etc.
				$(this).mousedown(function(){return false;});
			}
		});
	});
	$('.noSelect').disableTextSelect();//No text selection on elements with a class of 'noSelect'
});

After you include jQuery on your page, just include this script and any element with a class of noSelect will not be able to have it's text highlighted — easy! (Obviously you can change the class name to be whatever you want though.)

Do take note that the plugin is contained within the $(document).ready(function(){/*your code here*/}); (which can also be written as $(function(){/*your code here*/}).) That just sets it up as a method to be called. To call the method and disable text selection you just get a standard jQuery element and add the method onto it : $('.noSelect').disableTextSelect();

Foxmarks

Tuesday, February 03, 2009

Just wanted to give a quick plug to of of my new favorite products, Foxmarks.  Foxmarks is a great little online service and browser plugin to synchronize your bookmarks between computers.  I rely on this between my computer at home and my work computer.  If I see something at work that I want to look at later, I simply bookmark it and forgot about it.  When I get home, I have it already in my bookmarks bar.  They also have a pretty nifty web interface so you can access you bookmarks from anywhere without installing software.

So if you want to try it out, download the Firefox Plugin, create an account and start backing up and syncing your bookmarks.  If you’re not a Firefox user (and you’re not afraid of alpha or beta release software) there’s a version for IE and a version for Safari as well.  The Safari syncing really comes in handy for iPhone users since your iPhone bookmarks are synced from Safari.

I’ve just now installed the Safari plugin and everything seems to be working great so far.  Let me know what you think, leave a comment!

Use a Custom ID with ASP.NET and VB

Friday, January 30, 2009

At work we develop in the ASP.NET framework (with VB), which is powerful but it has a lot of oddities - especially for me writing all the markup and CSS. My biggest gripe has been with the ID property of any element. You give it an ID, and then ASP all assign it a different one when it renders! For example, lets say I write the following code:

<asp:Panel runat="server" id="MyPanel">Hello</asp:Panel>

What actually gets rendered to the page may look something like this depending on how many Masterpages and controls its been nested inside of:

<div id="ctl00_ctl00__userMessage_uxUpnMessage_MyPanel">Hello</div>

Why the long ID Microsoft? I understand that sometimes ASP will need these unique ID's for forms and postbacks, but in reality for many things (especially things that only relate to page structure or style) you don't need this unique ID, you only need the ID you gave it! Today I was messing around with exactly how to do this and I came across a solution! Check out the VB code below:

Protected Overrides Sub OnPreRender(ByVal e As EventArgs)
	Me.MyPanel.ID = String.Empty
	Me.MyPanel.Attributes.Add("id", "MyPanel")
	MyBase.OnPreRender(e)
End Sub

So just put that as the last step of your VB code, and it renders the exact way it should now - with the ID you told it to have in the first place. It's a bit of a hack, or a way to trick ASP into doing what I want, but ti works great. I'm sure there's a better way to implement this, or perhaps even extend certain elements to have a RenderID="MyNewIDName" property that would set the ID property from the front end instead.

Anyway, that's my big discovery for today. Hope it can help someone else out who was as frustrated as I was.

How to use the YUI compressor

Saturday, December 13, 2008

Compressing your javascript and CSS is a easy way to save bandwidth and make a site’s download and performance feel a bit snappier. There’s lots of tools to allow you to do this, but from my research it seems that Yahoo!‘s YUI compressor is the overall best.  Sure there’s others out there like JSmin and Dean Edward’s packer, but YUI offers a higher compression ratio, it also works with CSS files, and it’ won’t obfuscate your code.

Compressors work by removing all comments and whitespace (line breaks), and in some cases they will actually analyze your code and shrink variable names.  Using compression can result in up to a 60% decrease in file size!  So lets get started in learning how to use the YUI compressor!

Read more...

Textarea resizer for Mootools 1.2

Saturday, December 06, 2008

A long time ago I wrote a small plugin for Mootools to resize textareas on the fly, which I simply called Textarea resizer.  It was only compatible with Mootools 1.11, and since then Mootools 1.2 has been released and I’ve switched to jQuery for all the stuff I do.

Someone over at ljpilon.nl emailed me to let me know they re-wrote my plugin for Mootools 1.2 compatibility!  You can find it over at their site at: http://ljpilon.nl/mootools/2008/12/03/textarea-resizer-for-mootools-12/

Adding Table Rows With jQuery

Saturday, November 22, 2008

Recently I needed a way to click a button and add a new row to a table with an animation using jQuery for people to add new data for a section. Simple right? Well I set up my table with a blank row at the bottom that I hid with CSS, and then when I press a button it clones that row it and puts it at the top with a .slideDown() animation. Here's the code I used:

$("#addRow").click(function(){
	$("#blankRow").clone().prependTo("#myTable tbody").removeAttr("id").slideDown(500);
});

Looks pretty straightforward right? Well it works, but it doesn't seem to render correctly. Here's a demo of this in action to see what I mean.

Turns out that for most jQuery animations when they complete, the display CSS property is set to display:block;. Normally that's all fine and good, but a table row has to be set to display:table-row;. I can't edit how that animation finishes since it's part of jQuery, so now what?

View a Demo

View the Code

Download It!

Well someone on the jQuery Google Group had the great idea to just fill each table cell with a <div>, put all the contents I needed in there, and simply apply the .slideDown() animations to that <div> since by default they are set to display:block; anyway. Brilliant! Basically we never animate the table row itself, only the elements inside it.

I put together a pretty full featured demo with some other cool jQuery tricks I've been learning recently, so take a look and I hope this will help someone else out.