bradKELLETT » Internet http://bradkellett.com Sun, 20 May 2012 22:28:37 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Documenting the Hacks: CSS Browser Targeting http://bradkellett.com/p/documenting-the-hacks-css-browser-targeting/ http://bradkellett.com/p/documenting-the-hacks-css-browser-targeting/#comments Mon, 06 Oct 2008 03:30:11 +0000 Brad Kellett http://pantsland.com/?p=318 I think I’m somewhat of a rarity in the world of web developers – I actively use and certainly approve of CSS hacks to target and fix certain browsers. Of course, I don’t condone their use unless it is absolutely necessary, and in most cases good, standards compliant CSS should alleviate most issues before they occur, but when there is a need I think these hacks can be a great way to fix issues while still keeping your CSS logical and concise. The caveat to this is that all hacks need good comments to describe what is going on for future reference, whether that be your own or that of another developer. Also, always keep in mind that hacks can break when new browser versions are released, so always keep an eye out and use them sparingly.

I’ve always found it hard to find a good reference for these hacks. There are many sites that talk about an individual hack, but finding a single place that goes through targeting all the different browsers has been hard. This post hopes to solve that – more for my own use, but hopefully other developers can find it useful as well. What follows are the hacks that I use, which I believe to be the most logical and simple ones out there. In every case, #selector represents the element you want to apply a rule to (this can be either an ID or a class), and property and value represent any normal CSS property.

Internet Explorer 6

Let’s start with the one that developers will probably need to use most often. To target IE6:

  1. #selector {
  2.     _property: value;
  3. }

Internet Explorer 7

The following targets IE7 and below. You can use it in conjunction with the above rule to be able to target IE7 and IE6 individually – just make sure you declare the IE7 rule first, then the IE6 rule.

  1. /* Target IE7 and below */
  2. #selector {
  3.     *property: value;
  4. }
  5. /* Then overwrite for targeting IE6 specifically */
  6. #selector {
  7.     _property: value;
  8. }

Firefox 2

The easiest way to target versions of Firefox is with selectors that only work in Gecko-based browsers. The following will target Firefox version 2 and below:

  1. #selector, x:-moz-any-link {
  2.     property: value;
  3. }

Firefox 3

As with the Internet Explorer 7 hack, you can easily combine the Firefox 2 and Firefox 3 hacks to target those specific versions of Firefox.

  1. /* Target Firefox 2 */
  2. #selector, x:-moz-any-link {
  3.     property: value;
  4. }
  5.  
  6. /* Then overwrite for Firefox 3 specifically */
  7. #selector, x:-moz-any-link, x:default {
  8.     property: value;
  9. }

Safari 3.0+

The following will target Safari version 3 and above. To target just Safari 3.1, see the next hack. Note that this is valid CSS3, and as such other browsers will eventually start supporting it, so be wary.

Update: Firefox 3.5 now supports this, and will read the style

  1. body:first-of-type #selector {
  2.     property:value;
  3. }

Safari 3.1 and Google Chrome

Google Chrome and Safari both use the Webkit rendering engine, and as such shouldn’t usually need to be targeted separately. So far, I have not found a way to target just Google Chrome, so attack that with JavaScript for the best results. Make sure you declare this after the Safari 3.0 hack above, as Chrome and Safari 3.1 will read that as well.

Update: Firefox 3.5 now supports this, and will read the style

  1. body:nth-of-type(1) #selector {
  2.     property: value;
  3. }

Opera 9

While Opera is pretty good at rendering standards compliant code, and won’t generally need hacks, there are times when it is necessary. Unfortunately, I haven’t found a good way to target just Opera – instead, the easiest way is to use a rule that targets Opera and Safari (and other Webkit browsers like Chrome), then reset for the Webkit browsers.

  1. /* Declare for Opera and Webkit */
  2. @media screen and (-webkit-min-device-pixel-ratio:0){
  3.     #selector {
  4.         property: value;
  5.     }
  6. }
  7.  
  8. /* Revert for Safari (and other Webkit browsers) and Firefox 3.5 */
  9. body:first-of-type #selector {
  10.     property:value;
  11. }
]]> http://bradkellett.com/p/documenting-the-hacks-css-browser-targeting/feed/ 20 On Online Journalism: Why it’s the Place to Be http://bradkellett.com/p/on-online-journalism-why-its-the-place-to-be/ http://bradkellett.com/p/on-online-journalism-why-its-the-place-to-be/#comments Mon, 04 Jun 2007 02:59:13 +0000 Brad Kellett http://www.pantsland.com/2007/06/04/on-online-journalism-why-its-the-place-to-be/ I have been in online journalism for several years now, surely not that long compared to a lot of the veterans I know, but enough to realize a few observations about the industry. I love journalism, and can’t imagine doing much else anymore, and I solidly believe that the place to be is not in print, but online.

By no means am I saying that there isn’t a place in the future for print media, but I believe that its place in the world will change. No longer will print media be where people turn for news, instead I believe that more and more people will look to the internet – we are seeing this already, is isn’t a new thing. Print media will transform into a place for feature articles and longer pieces, mainly due to the major advantage that online journalism has over print: speed. Print media still has the advantage of portability currently, which is why it still has a place with feature articles and the like, but even that content is available online and will be made more accessible with the advent of e-readers, UMPCs, and other fun gadgets.

I can think of many times I have been up in the wee hours of the morning preparing an article on a piece of news that has just dropped. I can write a story and publish it online before most print media outlets are even aware of it. Take the announcement of the iPhone for example: I was preparing an article during Steve Jobs’ keynote, with the article live on MobileBurn not 30 seconds after the facts were revealed. Tech magazines would have had to wait until the following month at least to report on the news, and even newspapers would have had to have held off for an afternoon edition, if not the next day. It just makes sense for people to turn to the most recently updated news source, which will almost always be the internet.

Online media also has the ability to be very specialized. At MobileBurn, we do better reviews of handsets than almost any print publication out there. We know phones, it’s what we do. Most magazines have to cover a broader range of subject matter, and as such do not have the same depth of knowledge on all topics. The perfect publication would be made up of specialists reporting on what they know best, and this is far easier online. It does happen in print, but through RSS feeds and other syndication technology readers now have the ability to view exactly the content they like, rather than one publication choosing who is the best in a field.

I have no problem writing feature articles for print media, I quite enjoy it, but I really do believe in online media.

]]> http://bradkellett.com/p/on-online-journalism-why-its-the-place-to-be/feed/ 2 Recommended Reading http://bradkellett.com/p/recommended-reading/ http://bradkellett.com/p/recommended-reading/#comments Wed, 30 May 2007 13:31:50 +0000 Brad Kellett http://www.pantsland.com/2007/05/30/recommended-reading/ This is in response to Kent Newsome’s request for inspiration for his feed reading list (his ‘swivel feeds’ experiment). As you can imagine, most of my 150 or so feeds I read regularly (there are more that I only glance at now and then) are focused on mobile technology, but there are still some that I think would be of interest. I don’t read as many personal blogs as I should, but there are quite a few one-man shows that I enjoy, and even non-commercial group blogs that come in very useful.

So without further ado, here are five blogs not already on Kent’s list that I think he, and others, might enjoy:

  • Blogging Pro
    Lots of news and tips for personal bloggers and pros alike
  • D’Arcy Norman
    Works at the University of Calgary, has an interesting insight on the education scene and internet trends in general
  • Daily Cup of Tech
    Timothy Fehlman’s blog, full of freeware and really great guides to doing fun things with technology
  • UNEASYsilence
    “Observing the unobserved,” full of interesting little bits and pieces on all sorts of topics
  • PaulStamatiou.com
    Young blogger from Georgia Tech, interesting insights and reviews

I have tried to steer away from the larger, professional blogs in favor of the smaller outfits. Also, I mainly subscribe to technology feeds, which may have limited appeal to some. Hopefully someone will get something out of that lot though.

Remember, my main reading list is always available in OPML format here, and a rotating selection of links from that list that refreshes every ten minutes appears in my sidebar.

]]> http://bradkellett.com/p/recommended-reading/feed/ 5 Easy Natural Language in Google http://bradkellett.com/p/easy-natural-language-in-google/ http://bradkellett.com/p/easy-natural-language-in-google/#comments Sat, 12 Aug 2006 09:52:19 +0000 Brad Kellett http://www.pantsland.com/2006/08/12/easy-natural-language-in-google/ Greg Hughes writes about a great feature in Google where you can actually ask it what time it is in a certain place in natural language and get a response. This is cool, and something I’m sure I’ll be making big use of when traveling. Google keeps amazing me more every day.

I also make big use of Google’s conversion features where, for example, typing “11cm in inches” yields the actual answer. Handy.

]]> http://bradkellett.com/p/easy-natural-language-in-google/feed/ 0 Google Desktop and My Feed – Love at First Sight http://bradkellett.com/p/google-desktop-and-my-feed-love-at-first-sight/ http://bradkellett.com/p/google-desktop-and-my-feed-love-at-first-sight/#comments Fri, 10 Mar 2006 10:40:50 +0000 Brad Kellett http://www.pantsland.com/?p=95 I have been quite busy with CeBIT, as well as some other projects, these last couple of days, so I have been quite bad with updating the blog. Sorry folks, my bad.

Something interesting to note though – I was looking through my feed statistics just then, and by a rather large margin, Google Desktop is the most popular reader for subscribing to my site. This surprises me a little – I have tried (and since uninstalled) Google Desktop, and it is something I would not consider to be a full-time feed reader.

It might just be me and the way I read feeds, but I would personally limit the use of a reader like GD (which sits as a sidebar or floating in a widget-like fashion) to reading things like news headlines. It is not something that I would use for reading personal blogs.

For my feed reading endeavors, I use the excellent Sage plug-in for the equally excellent Firefox. It works with the live bookmarks feature of the browser, and displays the list of feed names in a sidebar. Clicking on the feed (which displays bold if there are unread entries) takes you to an attractive two-column page with the text of the feed. Simple, brilliant.

]]> http://bradkellett.com/p/google-desktop-and-my-feed-love-at-first-sight/feed/ 0 Substandard Standard http://bradkellett.com/p/substandard-standard/ http://bradkellett.com/p/substandard-standard/#comments Tue, 07 Mar 2006 12:35:06 +0000 Brad Kellett http://www.pantsland.com/?p=91 I just threw what is being touted as the new standard feed icon on to the sidebar of this blog – the little orange box with the radio waves. I’m all for a standard in this department, as much as I don’t really like the look of the icon, but will use it to (as the Feed Icons site puts it) ‘bring feeds to the forefront.’

One little thing bugs me on the Feed Icons (a group trying to promote the standard icon) website – it states down the bottom that they will soon be adding a gallery for people to upload custom feed icons for others to see and use. Is it just me, or does this destroy the point of having a standardized icon in the first place? It is bad enough that the site offers the icon in different colors, let alone whatever other form of customization that may surface.

Really, what is the point of a standard that is not being followed, even by the very place that is trying to promote it?

Also, while there is a feed for the icon releases, why does the site not utilize feed auto-discovery?

]]> http://bradkellett.com/p/substandard-standard/feed/ 0 Call Me Slow on the Uptake (Firefox Tip) http://bradkellett.com/p/call-me-slow-on-the-uptake-firefox-tip/ http://bradkellett.com/p/call-me-slow-on-the-uptake-firefox-tip/#comments Tue, 07 Mar 2006 11:48:43 +0000 Brad Kellett http://www.pantsland.com/?p=89 Maybe this is old news, but I just realized that I can switch between tabs in Firefox by holding down the middle-click (press on the scroll wheel) and clicking either the left or right mouse button. Genius…

]]> http://bradkellett.com/p/call-me-slow-on-the-uptake-firefox-tip/feed/ 0 Design Mistakes on Weblogs http://bradkellett.com/p/design_mistakes_on_weblogs/ http://bradkellett.com/p/design_mistakes_on_weblogs/#comments Wed, 30 Nov -0001 00:00:00 +0000 Brad Kellett Jakob Nielsen has written a great list of the Top Ten Design Mistakes people make on weblogs. If you have your own blog, definitely give it a read.

I think my biggest rule breaker is the fact that I don’t have an about me page. I have never really though about this, but now that I am I have no idea why I don’t. I will get on up by next week, for sure.

Other than that, I think I did pretty good with those rules. The only other thing I could improve on is my posting frequency, though new content should be up daily from now on.

]]> http://bradkellett.com/p/design_mistakes_on_weblogs/feed/ 0 No TV For Canadian iTMS http://bradkellett.com/p/no_tv_for_canadian_itms/ http://bradkellett.com/p/no_tv_for_canadian_itms/#comments Wed, 30 Nov -0001 00:00:00 +0000 Brad Kellett D’Arcy notes that Blackboard and WebCT are merging. I too, am a little worried about this.

A university that I contract for is nearing the final stages of upgrading our current WebCT CE system to WebCT Vista. I am very impressed with Vista so far, and I think that the competition between BB and WebCT for the LMS market has made both stronger products. I don’t want to see that stop. I can only hope that the combined companies continue to innovate in this space.

I’m happy to hear that both brands will be around a while longer, I would hate for us to finish rolling out Vista to 18,000 students only to have it be made obsolete…

]]> http://bradkellett.com/p/no_tv_for_canadian_itms/feed/ 0 Update: Free Opera http://bradkellett.com/p/update_free_opera/ http://bradkellett.com/p/update_free_opera/#comments Wed, 30 Nov -0001 00:00:00 +0000 Brad Kellett Well, the email address thing was a fake, but Opera have put up a form now to get your free registration codes. As a side note, it only seems to work if you check the box to subscribe to the Opera newsletter.

This page is valid for today only!

]]> http://bradkellett.com/p/update_free_opera/feed/ 3