[js] kijken of css property ondersteund wordt

[BetuweKees]

hi,

heb een webpagina waarop lange teksten worden ingekort; na een bepaald aantal woorden verschijnt de term "...(meer)" achter de tekst en wordt de rest van het bericht op display: none; gezet. bij een klikje op 'meer' verdwijnt deze en wordt de rest van het bericht weergegeven. vrij standaard allemaal.

nu is het echter zo dat de tekst 'meer' gewoon als een span is opgenomen tussen de gewone tekst. bekijk je de pagina dus zonder css support, dan staat er midden in de tekst (en meestal zelfs binnen een woord) ineens de term 'meer'
(bv dit is een verh...(meer)aaltje)

zat zo te denken dat het eigenlijk het mooiste zou zijn om generated content te gebruiken ipv het harde woordje 'meer' dat er nu tussen staat. nadeel is echter dat dit weer niet wordt ondersteund door microsoft.

nu leek het mij een idee om dit op te lossen middels een stukje javascript; in de stylesheet gewoon de generated content zetten, en vervolgens met een stukje script kijken of het wel onderstuend wordt, en zo niet, via javascript de tekst alsnog invullen.

de code die ik hier nu voor gebruik is

JavaScript:

if(typeof document.getElementsByTagName('body')[0].style.content == "undefined") {
    // doe iets
}

twee vragen:
1. is dit de juiste manier om voor ondersteuning voor de css content property te checken?
2. zijn er misschien nog andere (mooiere) oplossingen voor dit probleem?

[Woudloper]

Mocht je tóch gebruik willen maken van de content property kan je eens kijken naar IE7, dit is net zoals Peterned zijn htchover een extra stuk javascript welke nu wel de missende css eigenschappen odersteund.

edit:
Verder lijkt het mij verstandig als je er altijd van uitgaat dat mensen eventueel de pagina bezoeken zonder javascript/css ondersteuning

[ Voor 20% gewijzigd door Woudloper op 26-10-2004 06:59 ]

[Verwijderd]

De key is denk ik om het 'meer' plaatje de achtergrond te maken van het element met de extra text:

HTML:

<div class="Closed">
    <p>
         Lorem ipsum dolor sit amet 
    </p>
    <p class="Meer" onclick="openClose(this);">
         Lorem ipsum dolor sit amet 
    </p>
</div>

Cascading Stylesheet:

.Closed .Meer {
    text-indent:-10000px;
    width:100px;
    height:12px;
    background:url(meer_plaatje.gif);
}

JavaScript:

function openClose( oElm ) {
    if(oElm.parentNode) {
        oElm.parentNode.className = 
            (oElm.parentNode.className == 'Closed') ? 'Open' : 'Closed';
    }
}

[BetuweKees]

Woudloper schreef op 26 oktober 2004 @ 06:58:
Mocht je tóch gebruik willen maken van de content property kan je eens kijken naar IE7, dit is net zoals Peterned zijn htchover een extra stuk javascript welke nu wel de missende css eigenschappen odersteund.

heb ie7 een tijd geleden eens geprobeerd (lees: een dag of twee nadat de eerste versie gepubliceerd werd), maar vond eea vrij traag werken toen. of het door de veelvoud aan html code in de pagina, de gigantische massa css, of mijn trage pc komt (zal wsch combinatie zijn), ik vond eea vrij traag werken, en heb het sindsdien niet meer gebruikt.
htc is trouwens wel iets waar ik gister na de post ook nog even aan zat te denken; specifiek voor IE even wat content blijplaatsen, en ook nog direct vanuit stylesheet is natuurlijk ideaad.
de moeite waard om nog eens even in te duiken lijkt me

edit:
Verder lijkt het mij verstandig als je er altijd van uitgaat dat mensen eventueel de pagina bezoeken zonder javascript/css ondersteuning

natuurlijk, vandaar ook deze oplossing.
ie4, ns4 en andere browsers die css te ingewikkeld vinden wordt een stylesheet loze versie voorgeschoteld, maar met nadeel nu de interpositie van dat extra woordje. dat moet dus weg.
ff en op7 kunnen dat met generated content, voor ie5 en ie6 is dus een andere oplossing nodig, javascript lijkt me daar prima voor.
en tsja.. als iemand sowieso al ie6 gebruikt en ook nog eens willens en wetens javascript gaat disabelen dan vraagt ie er zelf om wat mij betreft..


@Blues: Interesante oplossing.. Maar is zo'n negatieve text-indent niet een beetje ranzig?