Hatena::Groupmoz-addon

Ci.nsIZIGOROu

2008-01-19

(min|max)-(width|height)なHTC

| 04:14 |  (min|max)-(width|height)なHTC - Ci.nsIZIGOROu を含むブックマーク はてなブックマーク -  (min|max)-(width|height)なHTC - Ci.nsIZIGOROu

もうみんな結構試してるから今更かもだけど、試しに暫定版を作った。

諸々問題あるけど、後で書く。

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<public:component xmlns="http://www.w3.org/1999/xhtml" xmlns:public="urn:HTMLComponent">
  <script type="text/javascript">
// <![CDATA[
  var handlers = (function() {
    var elementHandlers = function() {
      this.element = element;
    };

    elementHandlers.prototype = {
      parse: function(prop) {
        var result = (/^(([\d\.]+)(px|pt|%)?|auto)$/).exec(this.element.currentStyle[prop]);

        if (result) {
          if (result[2].length > 0) { // numeric
            if (result[3] != "" && result[3] != "px") 
              return { value: parseFloat(result[2]), unit: result[3] };
            else 
              return { value: parseInt(result[2]), unit: "px" };
          }
          else { // auto
            return { value: result[0], unit: result[0] };
          }
        }

        return {value: null, unit: null};
      },
      contentready: function(eventName) {
        this.minWidth = this.parse("min-width");
        this.maxWidth = this.parse("max-width");
        this.minHeight = this.parse("minHeight");
        this.maxHeight = this.parse("max-height");

        this.adjust();
      },
      resize: function() {
        this.adjust();
      },
      adjust: function() {
        if (this.maxWidth.value && this.element.offsetWidth > this.maxWidth.value)
          this.element.runtimeStyle.width = this.maxWidth.value;
        else if (this.minWidth.value && this.element.offsetWidth < this.minWidth.value)
          this.element.runtimeStyle.width = this.minWidth.value;

        if (this.maxHeight.value && this.element.offsetHeight > this.maxHeight.value)
          this.element.runtimeStyle.height = this.maxHeight.value;
        else if (this.minHeight.value && this.element.offsetHeight < this.minHeight.value)
          this.element.runtimeStyle.height = this.minHeight.value;
      }
    };
    return new elementHandlers();
  })();
// ]]>
  </script>
  <public:attach 
      event="oncontentready" 
      onevent="handlers.contentready(event);" 
      for="element"
        />
  <public:attach
      event="onresize"
      onevent="handlers.resize(event);"
      for="window"
      />
</public:component>

使い方は、

div#hoge {
  width: 80%;
  min-width: 400px;
  max-width: 600px;
  behavior: url(minmax.htc)
}

みたいな感じ。

今の所のTODO

  • ptとかmmとか色々単位系の変換ライブラリ必要。今の所pxしか考慮してない
  • IE7のときどうなるか試してない
  • JSでこのbehaviorが当たる要素を追加した時の挙動がおかしい
    • 一旦min/maxを忘れてレンダリングした後に、再度min/maxを当てるのが正しい?

MariliaMarilia2012/04/29 12:00That hits the target prefetcly. Thanks!

qmbtejhwotlqmbtejhwotl2012/04/29 18:23SRjl6q <a href="http://mnvwzqjkqyml.com/">mnvwzqjkqyml</a>

gcjijpgcjijp2012/05/02 14:48FsI1a5 , [url=http://vzmntdzdqjks.com/]vzmntdzdqjks[/url], [link=http://jnqyhzzjjthk.com/]jnqyhzzjjthk[/link], http://lugjtcycwtvi.com/

2007-11-08最近の若い人たちは○×△

namespace付きのスタイルの挙動が謎くなかったw

| 16:10 |  namespace付きのスタイルの挙動が謎くなかったw - Ci.nsIZIGOROu を含むブックマーク はてなブックマーク -  namespace付きのスタイルの挙動が謎くなかったw - Ci.nsIZIGOROu

謎いママん。

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="data:text/css,
img#test1-icon {
  display: none
}
" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml">
<hbox>
  <vbox id="test1">
    <html:img id="test1-icon" src="http://moz-addon.g.hatena.ne.jp/images/b_entry_wh.gif" />
  </vbox>
  <vbox id="test2">
    <label control="test2-title" value="title"/>
    <description control="test2-title" value="desc"/>
  </vbox>
</hbox>
</window>

これ、正しくimg部分はdisplay: noneになるんですけど、正しくは、

@namespace html url("http://www.w3.org/1999/xhtml");

html¥:img#test1-icon {
  display: none;
}

だと思うんだけど、これだとどういう訳か動かない。

僕の解釈が間違ってる?

追記1 (2007-11-08T17:05:38+09:00)

d:id:cho45先生に教えて貰ったです。「|」かぁー。

って事で追試してみる。

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="data:text/css,
@namespace html url(http://www.w3.org/1999/xhtml);
html|img#test1-icon {
  display: none
}
" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml">
<hbox>
  <vbox id="test1">
    <html:img id="test1-icon" src="http://moz-addon.g.hatena.ne.jp/images/b_entry_wh.gif" />
  </vbox>
  <vbox id="test2">
    <label control="test2-title" value="title"/>
    <description control="test2-title" value="desc"/>
  </vbox>
</hbox>
</window>

だめぽ><

上手くいったお!d:id:cho45先生ありが㌧

cho45cho452007/11/08 16:18CSSでは : じゃなくて | (パイプ) で名前空間プリフィックスを指定するます。

html|img#test1-icon {
}

とかいうことでは、なくてでしょうか

ZIGOROuZIGOROu2007/11/08 17:02> id:cho45

おお、オイラの勘違いでしたか。
先生有りが豚。

cho45cho452007/11/08 17:10namespace のところのダブルクオーテーションを変えないとw

ZIGOROuZIGOROu2007/11/08 17:13あわわw
ほんとだ
鬱氏。

amachangamachang2007/11/08 17:34さすが、我らが cho45 先生だー!!

PepperPepper2011/08/07 05:34Thank God! Someone with bnaris speaks!

wqpelkswqpelks2011/08/08 01:22WA0THS , [url=http://gkzsyuamgblm.com/]gkzsyuamgblm[/url], [link=http://mwcximfdtiqh.com/]mwcximfdtiqh[/link], http://edwjdsjmwaow.com/