RSS

Category Archives: css

More CSS with Less

>The people at Sitepoint send me a ‘Tech Times’ newsletter every now and then. I tend to ignore newsletters from most other companies, but this one is different, it is surprisingly interesting, most of the times.

Today’s Tech Times (issue 246) informed me about Less, an improvement over regular CSS that adds variables, mixins, operations and nested rules to regular CSS. It’s backwards compatible and compiles to regular CSS before you serve it to your favorite user agent. Wow.

This is definitely something I intend to integrate into the work flow for the PensioenPage technology, right before optimizing the (normal) CSS using the YUI Compressor.

 
Leave a comment

Posted by on 30 June 2009 in css, less, lesscss, sitepoint, yui

 

Combining CSS and User Agent Sniffing

>Avoid sniffing if you can
User agent sniffing is bad and that’s known. So avoid it if you can.

However, in some cases a browser is just acting weird and you cannot ignore that, it needs some specific CSS instructions. Internet Explorer 6 and 7 are prime examples here.

The old days: CSS hacks
In the past, this was resolved with odd CSS filters (better known as hacks), constructs that were known to work in some browsers and be ignored in some other browsers. To do this well, you need to know about the quirks of all browsers. This is not scalable, with new browsers coming out all the time.

Alternative: Sniffing and CSS classes
Here’s an alternative: Use server-side agent sniffing and put the results in a class attribute in the HTML. This allows you to write CSS rules like:

.Browser-Opera ul.ModList li {display:block}

or even:

.BrowserOS-MacOS-10.Browser-Firefox-3-5 li.FooBar {margin-left:2px}

To see this in action, have a look at the source code of the PensioenPage site:

www.pensioenpage.com

or, with indentation enabled in the source code:

www.pensioenpage.com/?_indent=true

Note that the user agent sniffing we implemented has more than 160 unit tests, detecting (Mobile) Internet Explorer, Opera Desktop/Mobile/Mini, Firefox, the old Netscape browsers, Chrome, Safari, Maxthon, etc.

Operating systems detected include Mac OS X, various Windows versions, BSD variants, Solaris, Linux, the iPhone OS, etc.

Finally, the browser engine is also detected, allowing rules like this one:

.BrowserEngine-Trident div.Tip {padding:0}
 

Ellipsis in all Modern Browsers (Updated x5)

When you want to avoid that text in a web page wraps, you can use:

   overflow:hidden

However, it’s nice to show to users that some content is actually missing. This is typically done with an ellipsis character, that is displayed as three dots:

   ...

Getting this working across all modern browsers has always been a pain in the neck, but there is an easy solution a hack that works around the issue, to a certain extent. Note that Firefox 4 is not supported and neither will Firefox 5 be. Howevere

First, make sure you have a small ellipsis-xbl.xml file on your web server that is served with the content type text/xml, with the following contents:

<?xml version="1.0" encoding="UTF-8"?>
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<binding id="ellipsis">
   <content>
      <xul:window>
         <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
      </xul:window>
   </content>
</binding>
</bindings>

Then mark all HTML elements you would like to show the ellipsis character on overflow with the class Ellipsis, e.g.:

   <div id="BreadCrumbs" class="ShyText Ellipsis">

Then add the following to your CSS:

   .Ellipsis {
      text-overflow:ellipsis;
      -o-text-overflow:ellipsis;
      -ms-text-overflow:ellipsis;
      -moz-binding:url(/ellipsis-xbl.xml#ellipsis)
}

Elaboration:

text-overflow
for WebKit-based browsers (Safari, Chrome, etc.) and for Internet Explorer 7 and before;
-o-text-overflow
for Opera;
-ms-text-overflow
for Internet Explorer 8 and 9;
-moz-binding
for Gecko 1.x-based browsers (Firefox 3.x or earlier, Camino, etc.)

Note that the text-overflow will be standardized as of the CSS 3 standard, which is currently still in draft. Firefox 6 may add support for it.

Credit for the Gecko solution go to Rikkert Koppes and William Khoe, see the article text-overflow: ellipsis for firefox.

Update (Oct. 22, 2008): The solution for Gecko-based browsers (Firefox, etc.) is far from perfect. The solution has at least the following issues:

  1. applying the .Ellipsis class to an inline element causes the element to disappear;
  2. in Firefox 3.0 (not in Firefox 2.0), soft hyphens inside .Ellipsis elements always show as dashes;
  3. text inside a .Ellipsis element can no longer be selected.

Update (August 11, 2009): Mozilla (in the person of Simon Montagu) is working on a solution, which may or may not go into Firefox 3.6/Gecko 1.9.2. Vote for bug 312156 if you think it’s important.

Update (August 13, 2009): Don’t expect the solution to go into Firefox 3.6/Gecko 1.9.2 (scheduled for release fall 2009), the bug has been tagged as “-wanted1.9.2” (starting with a minus-sign) meaning it’s not planned for the upcoming release. It may still go into Firefox 3.7, which is tentatively scheduled for release in 2010, see the Mozilla Project Meeting Minutes of July 20, 2009.

Update (August 24, 2009): Devon Govett provides a nice jQuery-based solution that at least allows you to resolve the issue when JavaScript is enabled. It works like a charm, at least on Firefox 3.5.2.

 
8 Comments

Posted by on 16 October 2008 in css, css3, ellipsis, firefox, gecko, mozilla, overflow, text-overflow

 

>Firebug 1.2 beta 2 for Firefox 3.0

>
On the Firebug blog, an announcement is posted about the release of Firebug 1.2 beta 2. It’s compatible with Firefox 3.0 RC, but not with Firefox 2.0.

For the uninitiated, Firebug is a Firefox extension that provides a host of web development tools, such as various inspectors, a JavaScript debugger, etc.

 

>Invalid XHTML / CSS

>Today, for the first time, I came across a site that explicitly (proudly?) announces it does not validate the XHTML/CSS standards:

Very nice looking site, though. A real piece of art.

Is this going to be a new trend?

 
2 Comments

Posted by on 12 April 2008 in css

 

>CSS improvements planned for MSIE 8.0 (final)

>On the Microsoft Internet Explorer blog, a new article appeared today, titled “Internet Explorer 8 Beta 1 for Developers – Standards Highlights Part 2“. This article points to a document about the various IE versions and CSS compatibility:

From the document, it becomes clear that while IE 8 beta 1 already improves CSS compatibility compared to IE 7, there are still some improvements planned before the IE 8 final release:

So there’s still something to look forward to…

I wonder how much of this will affect the IE 8 score on the Acid 3 test, but I don’t expect them to beat WebKit anytime soon (who just achieved 100/100).

 
Leave a comment

Posted by on 27 March 2008 in browsers, css, ie, ie8, msie, msie8, standards

 

>Ajax Performance

>Here’s a great blog about client-side JavaScript and CSS: Ajax Performance. Some articles of interest:

Interesting stuff!

 
Leave a comment

Posted by on 24 March 2008 in ajax, css, ecmascript, javascript, performance

 

>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