mozilla
Ihre Suchergebnisse

    content

    Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

    Zusammenfassung

    Die content CSS Eigenschaft wird mit ::before und ::after Pseudo-elementen genutzt um Inhalte in einen Element zu generieren. Die Inhalte die in content eingefügt werden sind Anonym, sie werden nur gerendert und sind nicht im DOM vorhanden. Siehe: replaced elements.

    • Initialwert normal
    • Anwendbar auf ::before und::after pseudo-Elemente
    • Vererbt Nein
    • Prozentwerte
    • Medium alle
    • Berechneter Wert On Elemente, always computes to normal. On ::before und::after, if normal ist specified, computes to none. Otherwise, for URI values, the absolute URI; for attr() values, the resulting string; for other keywords, as specified.
    • Animierbar Nein
    • Kanonische Reihenfolge die einzige nicht missverständliche Reihenfolge definiert durch die formale Grammatik

    Syntax

    Formal syntax: normal | none | [ <string> | <uri> | <counter> | attr() | open-quote | close-quote | no-open-quote | no-close-quote ]+
    
    content: normal                                /* Keywords die nicht mit anderen Werten kombiniert werden können */
    content: none
    
    content: 'prefix'                              /* <string> Wert, nicht-lateinische Zeichen müssen codiert werden z.B. \00A0 for &nbsp; */
    content: url(http://www.example.com/test.html) /* <uri> Wert */
    content: chapter_counter                       /* <counter> Werte */
    content: attr(value string)                    /* attr() Wert verbunden mit dem HTML Attribut Wert */
    content: open-quote                            /* Sprach- und positionsabhängige Keywords */
    content: close-quote
    content: no-open-quote
    content: no-close-quote
    
    content: open-quote chapter_counter            /* Außer für normal und none, können mehrere Werte gleichzeitig verwendet werden */
    
    content: inherit
    

    Werte

    none
    Das Pseudo-Element wird nicht erzeugt.
    normal
    Berechnet auf none für :before und :after Pseudo-elemente.
    <string>
    Text Inhalt.
    <uri> url()
    Der Wert ist ein URI, die eine externe Ressource bezeichnet (beispielsweise ein Bild). Wenn die Ressource oder das Bild nicht angezeigt werden kann, wird es entweder ignoriert oder ein Platzhalter wird angezeigt.
    <counter>
    Die Zähler (Counters) können mit zwei verschiedenen Funktionen angegeben werden: 'counter()' oder 'counters()'. Ersteres hat zwei Formen: 'counter(name) "oder" counter(name, style). Der erzeugte Text ist der Wert des counter innersten, im Scope dieses Pseudoelements; es wird in der angegebenen Art ('dezimal' als Standard) formatiert. Die letztere Funktion hat auch zwei Formen: "counter(name, string) 'oder' counters(name, string, style) '. Der erzeugte Text ist der Wert aller Zähler mit dem angegebenen Namen im Scope dieses Pseudoelements, von außen nach innen, durch den angegebenen String getrennt. Die counter werden in der angegebenen Art ('dezimal' als Standard) wiedergegeben. Siehe den Abschnitt über automatische Counter und Nummerierung für weitere Informationen. Der Name darf nicht "none", "inherit" oder "initial" sein. Ein solcher Name bewirkt, dass die Deklaration ignoriert wird.
    attr(X)
    Gibt den Wert des Elementen Attributes X als String zurück. Gibt es kein Attribut X wird ein leerer String zurückgegeben. Die Groß- und Kleinschreibung von Attributnamen hängt von der Dokumentsprache ab.
    open-quote | close-quote
    Diese Werte werden durch die entsprechende Zeichenfolge aus der quotes Eigenschaft ersetzt. 
    no-open-quote | no-close-quote
    Stellt keine Inhalte, sondern erhöht (verringert) die Ebene der Schachtelung für Zitate.

    Beispiele

    Code Beispiele - Überschriften und Zitate

    HTML Content

    <h1>5</h1>
    <p> We shall start this with a quote from Sir Tim Berners-Lee,
        <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">
            I was lucky enough to invent the Web at the time when the Internet already existed - and had for a decade and a half.</q>  We must understand that there is nothing fundamentally wrong with building on the contributions of others.
    </p>
    
    <h1>6</h1>
    <p> Here we shall quote the Mozilla Manifesto,
        <q cite="http://www.mozilla.org/en-US/about/manifesto/">
            Individuals must have the ability to shape the Internet and their own experiences on the Internet.</q> And so, we can infer that contributing to the open web, can protect our own individual experiences on it.
    </p>

    CSS Content

    q {
        color: #00008B;
        font-style: italic;
    }
    
    q::before   { content: open-quote }
    q::after    { content: close-quote }
    
    h1::before  { content: "Chapter "; }

    Output

    Code sample - content with multiple values adding an icon before a link

    HTML Content

    <a href="http://www.mozilla.org/en-US/">Home Page</a>

    CSS Content

    a::before{
        content: url(http://www.mozilla.org/favicon.ico) " MOZILLA: ";
        font:    x-small Arial,freeSans,sans-serif;
        color:   gray;
    }

    Output

    Code sample - adding an icon after text in a custom list

    HTML Content

    <div>
      <ul class="brightIdea">
        <li>This is my first idea</li>
        <li>and another good idea</li>
      </ul>
    </div>

    CSS Content

    /* first import the icon from a suitable site */
    @import url(http://weloveiconfonts.com/api/?family=entypo);
    
    .brightIdea li::after{
        content: '\1f4a1';
        font-family: 'entypo', sans-serif;
    }

    Output

    Code sample - class based example

    HTML Content

    <h2>Paperback best sellers</h2>
    <ol>
        <li>Political thriller</li>
        <li class="newEntry">Halloween Stories</li>
        <li>My Biography</li>    
        <li class="newEntry">Vampire Romance</li>
    </ol>

    CSS Content

    /* use a class rather that an element selector to give more flexibility.
    Simple string example, but don't forget add a leading space in the text string
    for spacing purposes  */
    
    .newEntry::after {
        content: " New!";
        color: red;
    }

    Output

    HTML Content

    <ul>
        <li><a id="moz" href="http://www.mozilla.org/">
            Mozilla Home Page</a></li>
        <li><a id="mdn" href="https://developer.mozilla.org/">
            Mozilla Developer Network</a></li>
        <li><a id="w3c" href="http://www.w3c.org/">
            World Wide Web Consortium</a></li>
    </ul>

    CSS Content

    a {
        text-decoration: none;
        border-bottom: 3px dotted navy;
    }
    
    a::after {
        content: " (" attr(id) ")";
    }
    
    #moz::before {
        content:url(https://mozorg.cdn.mozilla.net/media/img/favicon.ico) ;
    }
    
    #mdn::before {
        content:url(https://mdn.mozillademos.org/files/7691/mdn-favicon16.png) ;
    }
    
    #w3c::before {
        content:url(http://w3c.org/2008/site/images/favicon.ico) ;
    }
    
    li {
        margin: 1em;
    }
    
    

    Output

    Specifications

    Specification Status Comment
    CSS Level 2 (Revision 1)
    Die Definition von 'content' in dieser Spezifikation.
    Empfehlung  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support 1.0 1.0 (1.7 oder früher) 8.0 4.0 1.0
    url() support 1.0 1.0 (1.7 oder früher) 8.0 7.0 1.0
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support 1.0 1.0 (1.0) 8.0 9.5 1.0

    See also

    Schlagwörter des Dokuments und Mitwirkende

    Mitwirkende an dieser Seite: webdesignberlin
    Zuletzt aktualisiert von: webdesignberlin,