Archive

Posts Tagged ‘Firefox’

Firefox plugins

November 28, 2010 2 comments

As I’m involved in web development, Firefox became an essential tool. If you think of web development, forget about Internet Explorer, this is the tool. What makes Firefox unique is its ability to integrate a wide variety of plug-ins.
Which one do I used? I will provide a list below and the reasons why. In time I will try to update this list according to my preferences.

  • Firebug. The BEST tool for web development. With this you can inspect DOM elements, you can modify on the fly CSS and see the changes instantly. But it’s good not only to check your website, but you can also snoop into color codes, fonts etc. from other pages. If you want to print a page, this can help you by removing on the fly unwanted elements.
  • HttpFox – a traffic monitor for all HTTP requests in the browser. I know that Firebug has a similar functionality in the Net panel, but for me this plug-in seems a little bit more clear and easier to use.
  • Web developer toolbar. The name says it all. Although lately I used rarely this extension, you can easily disable/enable JavaScript/CSS/cookies in the browser with it and resize the window to test your design on different resolutions.
  • Screengrab!. You’ll never know when you need a screenshot of the entire page, not only the viewport area. But when you do, this plug-in is the best choice.
  • User Agent Switcher. Test how your web server/pages respond on different browsers/devices. You can import or define your own user agent strings (User-Agent HTTP header) and easily change them from the File/Tools menu. As I’m a WURFL user, I miss here an integration feature.
  • Download Statusbar. If you’re tired of the boring default downloads window, this might be on your taste. Check out the mini mode. Non-intrusive, compact and with detailed info.
  • Plain Old Favorites. I don’t like to sync my bookmarks, so with this I can use IE Favorites in Firefox. In the same way as Bookmarks.
  • CoolIris. Web developer or not you have to like this add-on. Instead of viewing images from Flickr, Google Image Search, Photobucket etc in plain web pages, display them on a 3D wall, with smooth scrolling and zoom. For me it is really useful when I search an image on Google or Flickr because I get rid of paging.

In the past I used …

I like that Mozilla created an add-on site and let’s you create collections. Now it is so easy to reinstall all my favorite add-ons every time I reinstall Firefox. And here are my favorites, all in one place.

What extensions do you use?

Categories: Web Tags: ,

Testing web mobile pages

October 10, 2008 Leave a comment

In an earlier post, I was telling you how to detect a mobile device on the server side so you will be able to serve the appropriate page. The next step after you implemented those pages will be to actually see your work.

If you have a mobile device everything is fine. Frankly I don’t like to directly use one, because only typing a web address can be a challenge. Just a while ago, I discovered the My Mobiler application, some kind of Remote Desktop or VNC. So you can use your Windows Mobile from the comfort of your own desktop mouse and keyboard.
My Mobiler screenshot
But this still involves having an actual device.

If not, you can use an emulator. For iPhone a good choice is Safari web browser under Mac or Windows. It uses the same rendering engine (WebKit) and has very similar functionality.
For Android, the Android emulator in Android SDK is a very good choice. It has almost the entire functionality of an actual device.

Another way of testing mobile pages will be to rewrite the User-Agent HTTP header of your own browser. This will ensure that you will get redirected (if the website is properly behaving) to a mobile web page.
How to do this?
In Firefox you type in the address bar about:config and define a new preference (by right clicking and selecting New » String) with the name general.useragent.override and the value of your choice.
In Internet Explorer things are a little bit more complicated and involves some registry editing.
In the [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Internet Settings\5.0\User Agent] key you have to define the (Default), Compatible, Version and Platform. The final user agent string will look like [(Default)] ([Compatible]; [Version]; [Platform]).
If you add some values in the registry key [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Internet Settings\User Agent\Post Platform] they will be added in the user agent string.

But the easiest method to do this is with a Firefox add-on: User Agent Switcher.
User Agent Switcher screenshot
If you choose an user agent string from the WURFL database and then visit Google, Yahoo, YouTube etc you will see a different version than the one you are used to.

Last update: May 12th, 2010

Categories: Web Tags: , , ,

Cross-browser custom CSS cursors

January 8, 2008 100 comments

I saw sometime ago the funny drawing below.
Time breakdown of modern web design

You can see that big portion is for making the design work in Internet Explorer.
First you laugh, but if you developed rich web sites/user interfaces you actually realize that this is only underevaluated. I would also extend it and say “make the design cross-browser”.

The tip that I’ll present you next it’s actually a small workaround and it will help you reduce that big pie slice.

Let’s say that you want to change the cursor for a page, for links or for some other specific elements. How? Using CSS. Then we should first go at W3C and read how to do it.
So the cursor property is the answer.
As good web developers we will separate the CSS from HTML and create the following structure

  /
  +-- cursor.html
  |-- cursor
      +-- cursor.css
      |-- cursor.cur    
  • cursor.html
    <html>
      <head>
        <link rel="stylesheet" type="text/css" href="cursor/cursor.css">
      </head>
      <body>
        Hello world!
        Look at me, I have a new cool cursor! 
      </body>
    </html>
    
  • cursor.css
    BODY {
        cursor: url(cursor.cur);
    }
    

Now everything should be set, so let’s give it a spin. Of course, we want everything to be cross-browser. For the sake of testing open cursor.html in Internet Explorer, Firefox and (for those Mac lovers) Safari. Surprise, the cursor is the default one in IE and Mozilla, but it’s the desired one in Safari. Frustrating isn’t it? You write W3C compliant code and it doesn’t work in the first two major browsers. The “best” part is that this is happening for different reasons.

Let’s first take care of Mozilla. Remember from CSS2 specification that cursor property holds a list of possible cursors and the browser should use the first found one or the default one if none is found.
Add to this list default and modify the cursor property from

cursor: url(cursor.cur);

to

cursor: url(cursor.cur),default;

And now refresh the page in Firefox. Even tough it doesn’t make sense at all, it will work and you will see your nice cursor.

And now IE comes next (as it still doesn’t work). As you noticed in cursor.css, we used for the cursor property relative URIs. To quote from there: For CSS style sheets, the base URI is that of the style sheet, not that of the source document. But if you modify the cursor property to

cursor: url(cursor/cursor.cur),default;

this will actually work. This is because in IE, for style sheets, the base URI is that of the source element, not that of the style sheet. Totally opposite to W3C specifications, but, yeah … that’s MSIE.

And if we want to still work in Firefox and Safari we have to keep the property value as below:

cursor: url(cursor.cur),url(cursor/cursor.cur),default;

. So everytime you want to define a crossbrowser CSS cursor you should define it as a list containing the url relative to the source element, the url relative to the style sheet and the default value.

The above examples were tested on IE 6.0.2900.2180, IE 7.0.5730, Firefox 2.0.0.11, Firefox 3.0.1, Safari 3.0.4, all under Windows XP SP2. I also tested in Opera 9.25, but it seems that it doesn’t support custom cursors.

Later edit – Jan 28, 2009:
The above examples were also tested under Firefox 3.0.5, Internet Explorer 8 beta 2 (inside IETester), Internet Explorer 8 RC1 (version 8.0.6001.18372CO), Safari 3.2.1 (525.27.1), Google Chrome 1.0.154.43 under Windows Vista.
I also tested with IE 5.5 (inside IETester), but it doesn’t support custom cursors.
There is also an example.

Later edit – Feb 10th, 2010:
If you want a custom cursor for an image (IMG) or link (A), then you need to attach the CSS to that tag, not to an enclosing container (e.g. DIV).

Follow

Get every new post delivered to your Inbox.