RSS

Category Archives: css

>Browser-specific CSS

>The main browser engines support some CSS properties (or property values) that are not (yet) standardized. These get a browser engine-specific prefix, to maintain future compatibility, as the property (value) may make it into a standard, but possibly with slightly different characteristics.

The prefixes used are:

Microsoft is not that careful with CSS compatibility, their Internet Explorer does not use a prefix, except for one property: -ms-interpolation-mode.

Here are lists of CSS properties/property values specific to these browsers:

 
Leave a comment

Posted by on 24 March 2008 in browser, browsers, css

 

>CSS: Combining text replacement with mouse hover underlining [updated]

>
In website-design, the CSS text-replacement technique is well-known (see for example the article on the subject at Stopdesign).

What I have not seen elsewhere, though, is a technique to make sure the text is not only replaced, but also shows an underline when the mouse is hovered over it, for a typical hyperlink-effect.

Consider the situation where you want to show a header in a special font (which visitor probably won’t have). and you want this header to be clickable. You want the header text to become underlined when hovered over with the mouse, to clearly indicate this is a hyperlink.

The solution is very simple:

  1. make sure your replacement images are placed on a background that has a plain color;
  2. paint the background in your images with the same background color;
  3. in the image, make all pixels transparent that should show up as the underline;
  4. in the CSS, set the background of the images to match the background color;
  5. in the CSS, add a :hover rule that changes the background color for the images to match the text color (instead of the background color).

For a working example, check out this site:

Update (July 23, 2007): Note that in order for this hack to work with PNG images under MSIE 6, you will need to save the backgroud color in the image and use an indexed PNG.

 

>Safari 3 beta

>The Apple Safari 3 beta is out for both Windows and Mac OS X. From the Safari page there is a link to a Safari page for developers.

Funny detail is that the pages linked from there indicate they haven’t been updated in ages:
 
Leave a comment

Posted by on 12 June 2007 in css, mac, macos, macosx, safari

 

>Firebug is great!

>Any webdeveloper trying to debug CSS, JavaScript or AJAX should use a good tool like Firebug, a Firefox extension. It works for sure under Firefox 2.0.

One screencast says more than a thousand words:

 
Leave a comment

Posted by on 23 March 2007 in ajax, css, firebug, firefox, javascript, Web Development