Gunnar Bittersmann: Unterstützung von CSS3-Eigenschaft abfragen

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

  1. Unterstützung von CSS3-Eigenschaft abfragen

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Gunnar Bittersmann:

    Mir ist nochwas eingefallen:

    Safari gibt für window.getComputedStyle(p, null).getPropertyValue("text-overflow") einen Leerstring zurück; während window.getComputedStyle(p, [code lang=javascript]null).getPropertyValue("_unknown")[/code] aber null ergibt.

    window.getComputedStyle(p, null).getPropertyValue("text-overflow") != window.getComputedStyle(p, null).getPropertyValue("_unknown") sollte also angeben, ob 'text-overflow' unterstützt wird.

    Nicht schön, aber was besseres fällt mir gerade nicht ein.

    Live long and prosper,
    Gunnar

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

    1. Unterstützung von CSS3-Eigenschaft abfragen

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@Gunnar Bittersmann:

      Safari gibt für window.getComputedStyle(p, null).getPropertyValue("text-overflow") einen Leerstring zurück; während window.getComputedStyle(p, [code lang=javascript]null).getPropertyValue("_unknown")[/code] aber null ergibt.

      Ich vergaß noch zu erwähnen, dass im Firefox beides einen Leerstring ergibt, weshalb die Abfrage von window.getComputedStyle(p, null).getPropertyValue("text-overflow") allein nichts bringt.

      Live long and prosper,
      Gunnar

      PS: Hach, bin ich heute selbstgespächig!

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

    2. Unterstützung von CSS3-Eigenschaft abfragen

      Timo "God's Boss" Reitz Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Safari gibt für window.getComputedStyle(p, null).getPropertyValue("text-overflow") einen Leerstring zurück; während window.getComputedStyle(p, [code lang=javascript]null).getPropertyValue("_unknown")[/code] aber null ergibt.

      window.getComputedStyle(p, null).getPropertyValue("text-overflow") != window.getComputedStyle(p, null).getPropertyValue("_unknown") sollte also angeben, ob 'text-overflow' unterstützt wird.

      Nicht schön, aber was besseres fällt mir gerade nicht ein.

      Was spricht gegen window.getComputedStyle(p, null).getPropertyValue("text-overflow") != null?

      --
      Reden ist Silber, Schweigen ist Gold, meine Ausführungen sind Platin.
      Self-Code: sh:( ch:? rl:( br:> n4:( ie:{ mo:) va:) de:> zu:} fl:| ss:| ls:~ js:|
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Unsinniger Beitrag von mir!

        Timo "God's Boss" Reitz Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Erst alles lesen, dann verstehen. Mein Beitrag ist natürlich unsinnig. Was anderes als deine Lösung (vor allem was Kürzeres) fällt mir nicht ein.

        --
        Reden ist Silber, Schweigen ist Gold, meine Ausführungen sind Platin.
        Self-Code: sh:( ch:? rl:( br:> n4:( ie:{ mo:) va:) de:> zu:} fl:| ss:| ls:~ js:|
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. Unterstützung von CSS3-Eigenschaft abfragen

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Gunnar Bittersmann:

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

    '-moz-binding' könnte dies überflüssig werden lassen. ↗ Thread https://forum.selfhtml.org/?t=179477&m=1184457

    Live long and prosper,
    Gunnar

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