Archive for CSS

CSS and ellipsis: Cross-browser practices

Every now and then, say twice a year, I run into the same problem: what is the best cross-browser ellipsis solution? Because I end up searching the internet everytime, I decided the write down my prefererred solution.

The problem is as follows: You have a long sentence and you want to show only the first line and end up with … (the ellipsis) and trunk the rest of the sentence. Of course you can implement a server side solution, but today I prefer a client-side one.

IE6 and IE7 are simple, they support the CSS-property text-overflow, as do the Webkit based browsers Safari and Chrome. Text-overflow is part of the coming CSS3-recommendation, by the way. Because the property is not standardized yet Opera has it’s own implementation -o-text-overflow, while IE8 in standards mode supports -ms-text-overflow.

The only hickup we encouter with Firefox. The current version (Firefox 3.5) still does not support this property… This leaves us for several workarounds:

  • Do nothing. All browsers will show an ellipsis, Firefox just shows nothing. My prefered solution, because it involves less time and effort.
  • Create a Firefox-only selector in your CSS. This can be handy is you have something like Browserhawk installed on your server. Is not 100% waterproof though. Don’t just add the sometimes suggested “:after-content” option. (With something like myclass:after { content: “…” } we could easy add ellipsis to Firefox, but other modern browsers would render the ellipsis twice.
  • Use the “:after-content” setting for all modern browsers and show the ellipsis in IE6 and IE7 with conditional comments.
  • Use a JavaScript solution. Check for example this nice jQuery plugin.
  • Use XUL.

The CSS at last:

.ellipsis { 
  display: block; 
  white-space: nowrap; 
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis; 
  width: 230px;
  overflow: hidden;
}

Bonus:

Toggle the ellipsis view with jQuery:

$(".ellipsis").click( function() { $(this).toggleClass(".ellipsis") });

Disclaimer:

Not all options are tested. Please comment.

Geef een reactie

CSS3 preview

CSS3 Preview is een mooie, overzichtelijke site die een inkijk biedt in de mogelijkheden en de implementatie van de aankomende standaard CSS3.

Tags:

Comments (2)

Conditional comments: greater than

‘s Avonds, in mijn schaarse vrije tijd, lees ik graag de bijvoegsels bij de drafts van nieuwe W3C-specificaties. Maar af en toe vind ik tijd om de broncode van willekeurige sites te bestuderen. Vandaag viel mij iets op in de code van de webrichtlijnen van de overheid.

Conditional comments worden gebruikt om specifieke IE-versies te vinden voor je CSS-code. Zo kun je een stylesheet maken die alleen werkt in IE6:

<!--[if IE 6]><link rel="stylesheet" href="my.css" type="text/css" />

Vandaag stuitte ik op de versie:

<!--[if gt IE 5]><link rel="stylesheet" href="my.css" type="text/css" />

Ook deze stylesheet werkt alleen in IE6. Maar als straks IE7 verschijnt, doet ie het nog steeds, en het is nadrukkelijk de vraag of je dat wel wilt. Conditional comments gebruik je om bepaalde onvolkomenheden van een browserversie op te vangen. En behalve wanneer je over een goed functionerende glazen bol beschikt, weet je niet wat de onvolkomenheden van IE7 (of IE8) zullen zijn.

Bij de CSS van de webrichtlijnen zullen er weliswaar geen explosies plaatsvinden, maar het gebruik van gt-syntax kan wel tot onverwachte situaties leiden en moet daarom denk ik altijd voorkomen worden.

Tags: , , ,

Geef een reactie

CSS Validation Service vernieuwd

Op The Elementary Group Standards wordt opgemerkt dat de W3C al een jaar bezig is met een nieuwe CSS Validation Service. Je kunt hem echter al gewoon gebruiken en CSS3 wordt ook ondersteund. Lang leve de eeuwige beta!

Tags: , , ,

Geef een reactie

CSS Browser Selector

Leuk bedacht hoor, die op JavaScript gebaseerde CSS Browser Selector (tot mijn verrassing gepromoot door de Zijlijn). Maar wat is het nut ervan? Zelf zie ik geen directe connectie tussen CSS en JavaScript en vind ik dat beide technologieën onafhankelijk van elkaar op een webpagina moeten kunnen staan. Bovendien dacht dat ik dat code forking voltooid verleden tijd was. En tot slot houdt het script geen rekening met de verschillende browserversies. Kan iemand mij vertellen wat het nut zou kunnen zijn van de CSS Browser Selector?

Tags: , ,

Comments (2)

Webstandaarden verkeerd begrepen

Verdedigers van webstandaarden houden ervan om hun blik op het web in handige lijstjes te gieten. Het grote nadeel van deze lijstjes is dat ze regelmatig een zwart-wit stelling poneren en iedere nuance missen. Al eerder had ik ruzie met een Zweed die het geldige HTML-element noscript wilde afschaffen. Nu stuit op een andere wannabee-goeroe die met zijn 9 Ways to Misunderstand Web Standards de bocht te fel afsnijdt. Drie van zijn negen opmerkingen behoeven ernstige nuancering:

Misunderstanding #1: “We Need Separate Print Pages”

Philipp Lenssen betoogt hier dat we de mogelijkheid van CSS van een aparte print stylesheet moeten benutten. Gelul, IMHO. Veel gebruikers verwachten dat – als ze op print drukken – de pagina zoals zij die zien, uit de printer komt rollen. Ik pleit er daarom voor om juist geen aparte print stylesheet op te nemen. Gebruikt de bezoeker de print button van de browser dan krijgt hij gewoon de pagina zoals hij die ziet. Gebruikt hij de custom print button in de website, dan krijgt hij een aparte, geoptimaliseerde printpagina.

Misunderstanding #2: “We Need an Alternative Mobile Web on Top of the Existing Desktop Web”

Hier gaat Lenssen te eenvoudig aan het feit voorbij dat de gemiddelde downloadsnelheid van een mobieltje aanzienlijk langzamer is dan die van de PC thuis. Natuurlijk is het een mooi ideaal om dezelfde content op te sturen onafhankelijk van het device, maar als ik een HTML-pagina naar een mobieltje stuur, wil ik die zo compact mogelijk en geoptimaliseerd hebben.

Misunderstanding #9: “CSS Hacks Are Always Superior”

Natuurlijk heeft Lenssen gelijk dat je voorzichtig met CSS-hacks moet omspringen, maar waarom hij alleen ‘gewone’ hacks laat zien en conditional comments (die enkele van zijn argumenten onderuit halen) negeert, is mij onduidelijk.

Mocht je in 2006 nog nooit van webstandaarden gehoord hebben, dan kan 9 Ways to Misunderstand Web Standards wellicht een eye-opener voor je zijn. Maar een beetje serieuze ontwikkelaar mist in dit artikel de genuanceerde en afstandelijke blik die Andy Budd bijvoorbeeld liet zien in zijn superieure presentatie over standaarden.

Geef een reactie

Front-end code reviews

In het Digital Web Magazine spreekt Garrett Dimon over front-end code reviews. Hij heeft helemaal gelijk dat een review op HTML- of CSS-code een ondergeschoven kindje is. Hij vindt dat ook projectteamleden die niet direct met de HTML te maken hebben een review zouden moeten doen en ziet de volgende voordelen van front-end code reviews:

  • Verschillende disciplines binnen één team raken betrokkener bij elkaars werk;
  • Het verhoogt de consistentie van de code;
  • De code wordt beter, omdat meer mensen er een blik op geworpen hebben;
  • Het is een evidente manier om van elkaar te leren.

Vervolgens bespreekt hij een grondige aanpak voor code-reviews, die mijns inziens wat ver gaat, maar zijn punt is gemaakt. Garrett, ik zal er harder aan gaan trekken om dit voor elkaar te krijgen, want ik ben het met je eens dat de volgende drie gevolgen van code reviews erg belangrijk voor kwalitatief betere code: educatie, consistentie en vroegtijdige foutopsporing.

Tags: , , , , ,

Geef een reactie

Volg

Ontvang elk nieuw bericht direct in je inbox.