Front-end development

Clipping text with '…' using CSS3 text-overflow

When you need to display an unknown amount of text in a constrained space you may need to somehow hide text that doesn’t fit. One way is to use overflow:hidden to quite brutally hide it. Doing this works, and it works cross-browser, but it can be difficult for the user to realise that text has been hidden since there is no visual indication of it. A property from CSS3 that can help improve the situation is text-overflow.

via Clipping text with CSS3 text-overflow by 456 Berea Street

text-overflow is actually a pretty awesome CSS3 property. It does exactly what we try to do in programming languages all the time when we have titles that can be too long for their space and you need to add ‘…’ after an x amount of characters. But text-overflow does it in CSS. It works in Safari, Chrome, Opera, and even in Internet Explorer 7+, but it doesn’t work in Firefox until Firefox 6. (Firefox 6? Yes, Firefox 6 will be released somewhere in August). No worries, Firefox 6- will respect the overflow: hidden property and will just hide the rest of the text. Read the rest of ‘Clipping text with '…' using CSS3 text-overflow’ »

Angry Birds built in HTML5

Via @HTML5guy I came across the following Tweet:

[blackbirdpie id=”68600764582461440″]

Angry Birds built in HTML5? Sounds like A nice project, but I didn’t expect much. Programming in HTML5 is still quite hard, because of the lack of good tools. The tools for Flash are for example far superior to Canvas programming in Dreamweaver. But that’s food for another post.

Angry Birds in HTML5 plays just as it does on your iPhone or iPad, it is very impressive! Although it is probably built for Chrome (according to the URL), it runs fine on Safari and Firefox as well.

Take a look and try not to get addicted again. I totally agree with @elron8 that if we have a couple of showcases like this, HTML5 implementations will take another flight.


Some nifty CSS3 rules you probably didn't know of

LukeW has a nice post of a presentation of Eric Meyer about  how CSS  rules can be used to drastically alter the experience of a Web site. There’s a lot in LukeW’s notes I didn’t knww and I guess you didn’t either. For example:

  • FireFox can take an entire copy of an element and repeat it as a background element
  • background-image:-moz-element(#input) !important; (make element tiled background in gecko).
  • White space in source code can be made visible by applying {white-space: pre-wrap;} to the body of an HTML page
  • Safari has not implemented what happens when you transform inline elements as it’s not clear yet what they should do. Firefox has implemented their idea of what should happen. This might led to inconsistencies later when the working group defines what needs to happen for inline transforms.

Read more nifty rules at LukeW | An Event Apart: CSS3 Anarchist’s Cookbook.