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.

Advertisements
 
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