clip

Edit New

'clip' プロパティー (CSS)

仕様書

実装

[1] clip:rect(0%, 101%, 101%, 0%); [PP10]

[2] Layer.clip

bottomLayer (JavaScript 1.2)
heightLayer (JavaScript 1.2)
leftLayer (JavaScript 1.2)
rightLayer (JavaScript 1.2)
topLayer (JavaScript 1.2)
widthLayer (JavaScript 1.2)

[3] WinIE 6 構文解析:

  1. 零文字以上の空白を読み飛ばす。
  2. 次の字句が IDENT rect でなければ、宣言全体を無視し、終わり。
    1. 他の特性同様、大文字やescapeや注釈を途中で使えます。
  3. 零個以上の空白を読み飛ばす。
  4. 次の字句が ( でなければ、宣言全体を無視し、 終わり。
    1. 例によって ( は \( でもおk。
    2. 前後に注釈があってもおk。
  5. 零個以上の空白を読み飛ばす。
  6. 次の字句を <length>、 <percentage>、または 'auto' として解釈を試みる。
    1. 例によって、 CSS 2.1 の定義ではなく、 WinIE の解釈による。
    2. 奇癖モードや 0] の場合には <number> の単位は px であったかのように扱われる。
    3. 解釈可能であれば、4辺にその値を設定する。
    4. 解釈可能でなければ、宣言全体を無視し、終わり。
  7. 1個以上の空白を読み飛ばすことができれば:
    1. 次の字句を先程同様に解釈を試みる。
      1. 解釈可能であれば、左辺・右辺にその値を設定する。
    2. 1個以上の空白を読み飛ばすことができれば:
      1. 次の字句を先程同様に解釈を試みる。
        1. 解釈可能であれば、下辺にその値を設定する。
      2. 零個以上の空白を読み飛ばす。1個以上の空白を読み飛ばした場合:
        1. 次の字句を先程同様に解釈を試みる。
          1. 解釈可能であれば、
            1. 左辺にその値を設定する。
            2. 零個以上の空白を読み飛ばす。
          2. 解釈可能でなければ、
            1. 次の字句が ) なら (\) でもおk)、最後の段階へ。
            2. そうでなければ、宣言全体を無視し、終わり。
  8. ) (\) でもk) がなければ、 宣言全体を無視し、終わり。
  9. 零個以上の空白を読み飛ばす。特性値の末尾でなければ、 宣言全体を無視する。終わり。

(名無しさん)

[4] WinIE 6 構文解析:

  1. 零文字以上の空白を読み飛ばす。
  2. 次の字句が IDENT rect でなければ、宣言全体を無視し、終わり。
    1. 他の特性同様、大文字やescapeや注釈を途中で使えます。
  3. 零個以上の空白を読み飛ばす。
  4. 次の字句が ( でなければ、宣言全体を無視し、 終わり。
    1. 例によって ( は \( でもおk。
    2. 前後に注釈があってもおk。
  5. 零個以上の空白を読み飛ばす。
  6. 次の字句を <length>、 <percentage>、または 'auto' として解釈を試みる。
    1. 例によって、 CSS 2.1 の定義ではなく、 WinIE の解釈による。
    2. 奇癖モードや 0] の場合には <number> の単位は px であったかのように扱われる。
    3. 解釈可能であれば、4辺にその値を設定する。
    4. 解釈可能でなければ、宣言全体を無視し、終わり。
  7. 1個以上の空白を読み飛ばすことができれば:
    1. 次の字句を先程同様に解釈を試みる。
      1. 解釈可能であれば、左辺・右辺にその値を設定する。
    2. 1個以上の空白を読み飛ばすことができれば:
      1. 次の字句を先程同様に解釈を試みる。
        1. 解釈可能であれば、下辺にその値を設定する。
      2. 零個以上の空白を読み飛ばす。1個以上の空白を読み飛ばした場合:
        1. 次の字句を先程同様に解釈を試みる。
          1. 解釈可能であれば、
            1. 左辺にその値を設定する。
            2. 零個以上の空白を読み飛ばす。
          2. 解釈可能でなければ、
            1. 次の字句が ) なら (\) でもおk)、最後の段階へ。
            2. そうでなければ、宣言全体を無視し、終わり。
  8. ) (\) でもk) がなければ、 宣言全体を無視し、終わり。
  9. 零個以上の空白を読み飛ばす。特性値の末尾でなければ、 宣言全体を無視する。終わり。

(名無しさん)

[5] テスト用 <http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20clip%3A%20rect(1px%2C%20auto%2C%20-3em%206.77pc)%3B%0D%0A%7D;h=%3Cbutton%20type%3Dbutton%20onclick%3D%22%0D%0A%20%20var%20el%20%3D%20document.getElementsByTagName%20('p')%5B0%5D%3B%0D%0A%20%20d%20%3D%20getComputedStyle%20(el%2C%20null)%3B%0D%0A%20%20w%20(d.clip)%3B%0D%0A%22%3E%3Ccode%3EgetComputedStyle%3C%2Fcode%3E%3C%2Fbutton%3E%20%3Cbutton%20type%3Dbutton%20onclick%3D%22%0D%0A%20%20var%20el%20%3D%20document.getElementsByTagName%20('p')%5B0%5D%3B%0D%0A%20%20d%20%3D%20el.currentStyle%3B%0D%0A%20%20w%20(d.clip)%3B%0D%0A%22%3E%3Ccode%3EcurrentStyle%3C%2Fcode%3E%3C%2Fbutton%3E%0D%0A%3Cp%3Exxxxxxxxxxxxxxx;p=n;x=style-element;i=html-div> (名無しさん)

[6] rect() の引数に auto が指定されたときの算出値は CSS 2.1 の文面からは不明瞭です。 (名無しさん)

[7] <shape> の説明には算出の方法が載っていますが、 幅や高さの算出値がどうとかいうよくわからない定義になっています。 CSS 2.1 でいうところの特性の算出値は auto のような計算できない値だったりするので、 使用値のつもりで書いているのでしょうか。 (名無しさん)

[8] Firefox 2 構文解析:

(名無しさん)

[9] Opera 9 構文解析: >>8 と同じ (-moz-initial 以外) (名無しさん)

[10] WinIE 6 直列化: 他の特性と同じ感じで。 引数の区切りは1 SPACE。 (名無しさん)

[11] Firefox 2 直列化: 他の特性と同じ感じで。 auto は rect(auto, auto, auto, auto) に。 (名無しさん)

[12] Opera 9 直列化: 他の特性と同じ感じで。 (名無しさん)

[13] Opera 9 直列化: 他の特性と同じ感じで。 (名無しさん)

[14] Opera 9 直列化: 他の特性と同じ感じで。 (名無しさん)

[15] WinIE 6 currentStyle: clip は存在しない。 (名無しさん)

[16] Firefox 2 getCurrentStyle: 元々 auto や rect(auto, auto, auto, auto) だったものは auto に。 rect() の引数は、それぞれの算出値 (px) に (ここでの auto の算出値は auto のまま)。

(名無しさん)

[17] Opera 9 getComputedStyle、 currentStyle: auto は rect(auto, auto, auto, auto) と見なした上で、それぞれの引数について

[20] rect() の中の区切りは , のほか <whitespace> でも良いようですが、 CSS3 でも Firefox でも Chrome でも混在は認められていません。

[21] Chrome でも Firefox でも、区切りがまったくなしでもいいようです。

[22] 直列化のときに Firefox は , を補いますが Chrome は元のままです。

[23] OASIS Open Document Format for Office Applications (OpenDocument) Version 1.2 - Part 1: OpenDocument Schema ( 版) <http://docs.oasis-open.org/office/v1.2/os/OpenDocument-v1.2-os-part1.html#a20_179fo_clip>

Updated: