Brian Swartzfager's Blog - CSS

Mozilla Announces Jetpack, an API For Writing FireFox Adds-On with jQuery, HTML, and CSS

Thu, 21 May 2009 07:29:00 -0400

I found out about this last night from a tweet sent out by the jQuery Twitter account (which is probably a good indication that they like the idea). The subject line pretty much says it all: Jetpack is designed to let current web developers use their existing skills with HTML, CSS, JavaScript, and jQuery to build Firefox add-ons/plugins without the need to mess with Firefox's XUL mark-up language. While JavaScript has always been part of the add-on development process, the inclusion of jQuery should make performing certain actions a whole lot easier. You can learn more about Jetpack via the following URLs:

...the tutorials in the final link give you a good idea of the kinds of things Jetpack will allow you to do: the last example is a Jetpack add-on that will count and display the number of unread e-mails in your Gmail Inbox. I want to give Jetpack a whirl, but I honestly can't think of any functionality I want to add to Firefox that I can't get from an existing plugin. Anyone have any suggestions for something to try with Jetpack? It's interesting how web technologies keep being repurposed as a development option in other technologies (Adobe AIR, the upcoming Palm Pre's WebOS, and now Jetpack). Even though I'm not particularly interested in delving into all these different areas, I must say that I like the trend. :)

Changing Individual CSS Styles with jQuery

Thu, 21 Feb 2008 07:20:00 -0400

Back when I was writing my own custom JavaScript functions, I learned that there wasn't a single, simple way to change the individual style settings (like "font-weight:bold") for an HTML element that worked on every browser. My solution was to change the CSS classes assigned to the element instead: I wrote a library function that would allow me to add, remove, or replace any class assigned to an HTML element and simply created as many class definitions as I needed in order to accommodate the style changes. It was actually a pretty effective workaround because it let me effectively change multiple styles with one function call. When I started using jQuery, I quickly learned about the "addClass" and "removeClass" core functions, which I could use instead of my library function:


$("#missionStatement").addClass("importantTextClass");
$("#userProfile").removeClass("hideTextClass");

...So I continued with my routine of changing styles by changing classes, even though sometimes I only needed to change or remove a single style setting. No harm, no foul. But changing classes wouldn't work for the wacky little project I've been working on recently: I needed to be able to change several styles for an HTML element individually, and writing a class to handle every permutation of the possible style combinations was impractical. So I went to the jQuery web site, hopeful that the brilliant folks at jQuery had something that could help me out. And they did: the "css" core function allows you to read or set any individual style or styles:


if ($("#missionStatement").css("font-weight")== "400" || $("#missionStatement").css("font-weight")== "normal")
 {
   $("#userProfile").css("display","none");    
   $("#missionStatement").css({ fontSize:"24px", fontWeight:"bold" });
  }

Have I mentioned that I love jQuery? :)

UI Tool: Rearranging Items in a List, jQuery-style!

Sun, 11 Nov 2007 10:47:00 -0400

A few weeks ago, as part of an application prototype for a client, I used the fairly new jQuery UI library to create a UI tool where a user could rearrange a list of items by dragging and dropping them into different positions and then save those changes to the database. I now have a public example posted and available for download--check it out using the link below or via the link in my Downloads list on the right: List Sort Control (with jQuery) It works in FireFox, IE, and Opera, and can be used in conjunction with any web application programming language.

When Experience Tells You It Can't Be True, It Probably Isn't

Wed, 07 Nov 2007 09:46:00 -0400

Today I was trying to troubleshoot a design tool I created that worked perfectly in FireFox but not in Internet Explorer. There was an element on the page, a <div>, that IE would not apply the CSS style to if the style was applied based on the id attribute of the <div>. I could however apply styles to it if I added a class attribute to it and wrote the class in my CSS stylesheet. It made no sense. I'd assigned styles based on the id attribute all the time, and had never seen this problem in any modern browser. What the heck was going on? Finally I saw my mistake: I had left off the closing bracket of the <div> that was the parent of the <div> I was having trouble with. FireFox was "kind" (aka presumptive) enough to close that tag at runtime, and IE was not. Had I trusted my experience a little quicker, I'd have looked at the HTML code for structural problems first before trying to figure out a way around the problem.

Using Conditional CSS Selectors

Fri, 05 Jan 2007 17:36:00 -0400

The CSS I use in my applications is pretty straightforward. I stick with the basics, assigning styles based on element id, classes, and pseudo-classes. When situations arise that require similar page elements to utilize differnet styles, I use ColdFusion or JavaScript code to evaluate the condition and assign the appropriate CSS class. This article I found today is an excellent description about how to use CSS selectors to act only on page elements that meet a certain description--no JavaScript or server-side coding required: Showing Hyperlink Cues with CSS Since he makes a point of saying these selectors will work in IE 7, I can only assume that they won`t work (or at least not well) in IE 6, so you may not want to use these selectors unless you have a backup plan for mimicking the end-result using another method or you know your audience has upgraded to IE 7. Still, something worth knowing and a feature to look forward to as IE 6 rides off into the sunset.