MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
Ihre Suchergebnisse

    calc

    Dies ist eine experimentelle Technologie
    Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browser Kompatibilität beachtet werden. Es ist auch möglich, dass der Syntax in einer späteren Spezifikation noch geändert wird.

    Übersicht

    Die CSS Funktion calc() kann anstelle der folgenden Werte verwendet werden: <length>, <frequency>, <angle>, <time>, <number> und <integer>. Damit lassen sich mehrere Werte miteinander verrechnen.

    Es ist auch möglich,  calc() Funktionen ineinander zu verschachteln.

    Syntax

    calc(Ausdruck)

    Werte

    Ausdruck
    Ein mathematischer Ausdruck, dessen Ergebnis als Wert verwendet wird.

    Ausdrücke

    FIXME: mod,min,max : http://hacks.mozilla.org/2010/06/css3-calc/Der Ausdruck kann eine beliebige Kombination der folgenden Operatoren sein:

    +
    Addition.
    -
    Subtraktion.
    *
    Multiplikation (Muss mindestens eine <number> enthalten).
    /
    Division (Divisor muss eine <number> sein).

    Es können beliebig viele Operatoren aneinander gekettet werden. Es können auch verschiedene Einheiten miteinander verrechnet werden und Klammern gesetzt werden.

    Hinweis: Der Divisor darf nicht Null sein.
    Hinweis: Die + und - Zeichen erfordern zwingend einen Leerschlag zwischen dem Operator und den Werten. Bei einer Multiplikation oder Division spielt dies keine Rolle.

    Beispiele

    Relative Grösse eines Objekts mit einer absoluten Positionierung

    Mit calc()ist es kein Problem mehr, die dynamische grösse eines Objekts zu bestimmen, dessen Position absolut ist. In diesem Beispiel wurde ein Banner erstellt, dass auf beiden Seiten einen Abstand von 40 Pixeln zum Rand aufweisen soll.

    Links ist die Position mit left: 40px bereits definiert. Jetzt wird mit calc(100% - 80px) von der Gesammtlänge 80 Pixel Abgezogen, so verbleibt am Rechten Rand ein Abstand von ebenfalls exakt 40 Pixeln.

    .banner {
      position: absolute;
      left: 40px;
      width: 90%;               /* fallback for browsers without support for calc() */
      width: calc(100% - 80px);
      border: solid black 1px;
      box-shadow: 1px 2px;
      background-color: yellow;
      padding: 6px;
      text-align: center;
    }
    
    <div class="banner">This is a banner!</div>

    Relative Grösse eines Objekts mit absoluten Abständen

    Ein weiterer Anwendungsbereich ist die Grössenanpassung von Objekten, welche einen fixen Abstand definiert haben:

    input {
      padding: 2px;
      display: block;
      width: 98%;               /* fallback for browsers without support for calc() */
      width: calc(100% - 1em);
    }
    
    #formbox {
      width: 130px;             /* fallback for browsers without support for calc() */
      width: calc(100% / 6);
      border: 1px solid black;
      padding: 4px;
    }
    

    Der Container indem das Eingabefeld liegt soll 1/6 der Gesammtbreite einnehmen. Für die Grösse des Eingabefelds wählen wir einen Abstand zum Container von 1em.

    <form>
      <div id="formbox">
      <label>Type something:</label>
      <input type="text">
      </div>
    </form>
    

    Spezifikation

    Spezifikation Status Anmerkung
    CSS Values and Units Module Level 3
    Die Definition von 'calc()' in dieser Spezifikation.
    Candidate Recommendation  

    Browser Kompatibilität

    Funktion Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Grundlegende Unterstützung 19 (WebKit 536.3) -webkit
    26
    4.0 (2) -moz
    16 (16)
    9 - 6 -webkit (buggy)
    In Farbverläufen 19 (WebKit 536.3) -webkit
    27 (maybe 26)
    19 (19) 9 - 6 -webkit (buggy)
    Funktion Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Grundlegende Unterstützung ? 4.0 (2) -moz
    16.0 (16)
    ? ? ?
    In Farbverläufen ? 19.0 (19) ? ? ?

    Siehe auch

     

    Schlagwörter des Dokuments und Mitwirkende

    Mitwirkende an dieser Seite: dominikschreiber, SJW, fscholz
    Zuletzt aktualisiert von: dominikschreiber,
    Seitenleiste ausblenden