Gunnar Bittersmann: Unterstützung von CSS3-Eigenschaft abfragen

Beitrag lesen

SELF-Forum

Unterstützung von CSS3-Eigenschaft abfragen

Gunnar Bittersmann Homepage des Autors
– Informationen zu den Bewertungsregeln

@@alle:

Frage einen Client nie nach dem Namen! Frage nach seinen Fähigkeiten!

Schön und gut. Aber was, wenn der Client seine Fähigkeiten nicht angibt?

<!DOCTYPE html  
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"  

>  

<html  
    xmlns="http://www.w3.org/1999/xhtml"  
    xml:lang="und" lang="und"  

>  

    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
        <title>TEST</title>  
        <link rel="stylesheet" type="text/css" href="style.css"/>  
        <script type="text/javascript" src="script.js"></script>  
    </head>  
    <body>  
        <p>Lorem ipsum dolor sit amet.</p>  
    </body>  
</html>

style.css:

p  
{  
    white-space: nowrap;  
    text-overflow: ellipsis;  
    overflow: hidden;  
    width: 6em;  
}

script.js:

window.onload = function ()  
{  
    var p = document.getElementsByTagName("p")[0];  
  
    if (window.getComputedStyle)  
    {  
        alert("»" + window.getComputedStyle(p, null).getPropertyValue("text-overflow") + "«");  
    }  
    else if (p.currentStyle)  
    {  
        alert("»" + p.currentStyle.textOverflow + "«");  
    }  
};

Firefox zeigt erwartungsgemäß »« an, da er 'text-overflow' nicht unterstützt.

IE zeigt erwartungsgemäß »ellipsis« an, da er 'text-overflow' unterstützt.

Safari unterstützt auch 'text-overflow', zeigt jedoch »« an. :-(

Wie bekomme ich zuverlässig die Information, ob ein Browser 'text-overflow' unterstützt?

Live long and prosper,
Gunnar

--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
Beitrag melden
–
Informationen zu den Bewertungsregeln